/* ===================================================================== Perspectiva Radio — Design tokens Concepto: "consola de transmisión nocturna" — un panel de vidrio líquido flotando sobre un fondo espacial oscuro, con el ámbar de la emisora (#f6aa1c) como única luz cálida y un cian de "señal" (#2dd4bf) como contraste frío para estados en vivo / datos. TEMA: dos variantes controladas por [data-theme] en : - "dark" ("TurnOffLight"): el tema por defecto, descrito arriba. - "light" ("Original a colores"): fondo claro, acentos más vívidos. Todo el resto de la hoja de estilos usa exclusivamente estas variables (nunca colores hardcodeados para fondo/texto/acento), así que cambiar de tema recolorea automáticamente TODA la interfaz — incluyendo la barra de volumen y el analizador de espectro nativo, que leen estas mismas variables en tiempo real (ver visualizerService.js). ===================================================================== */ :root, [data-theme="dark"] { /* Color */ --bg-void: #06070b; --bg-nebula-1: #0d1220; --bg-nebula-2: #131a2b; --glass-fill: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.12); --text-primary: #eef0f6; --text-secondary: #9aa3b8; --text-muted: #656e83; --accent-amber: #f6aa1c; --accent-amber-soft: rgba(246, 170, 28, 0.18); --accent-cyan: #2dd4bf; --accent-danger: #ef5959; --block7-gradient: linear-gradient(155deg, #171c2c 0%, #0d1119 55%, #08090e 100%); /* Volumen y analizador de espectro (regla "manejar opciones de color para volumen/barras/analizador"): por defecto siguen los acentos de la marca, pero son variables independientes por si se quieren personalizar sin afectar --accent-amber/--accent-cyan en general. */ --volume-fill-color: #1dc0a5; --analyzer-color-start: #eeeef348; --analyzer-color-end: #f6aa1ce5; /* Layout */ --radius-lg: 28px; --radius-md: 16px; --radius-sm: 10px; --ease-glass: cubic-bezier(0.22, 1, 0.36, 1); /* Alto real del header fixed (padding 1rem arriba/abajo + logo 30px + borde 1px), usado por body { padding-top } para no tapar
. */ --header-height: 79px; --volume-fill-color: #1dc0a5; --analyzer-color-start: #eeeef348; --analyzer-color-end: #f6aa1ce5; /* Tipografía */ --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", sans-serif; --font-brand-name: "Audiowide"; --font-title-cancion:"SohneBreit"; --font-text-reader:"Google-Sans-Flex-grandrond"; --font-namespace:"Gabriela"; --font-album-artist:"Gayathri"; --font-brand-slogan:"Gruppo"; /*Status Banner*/ --statusradio-colortext-fatal: #ffb4b4; --statusradio-colortext-reconnecting: #ffd489; --statusradio-colortext-restored: #a8f4ea; --statusradio-background-fatal: rgba(239, 89, 89, 0.12); --statusradio-background-reconnecting: rgba(246, 170, 28, 0.10); --statusradio-background-restored: rgba(45, 212, 191, 0.10); --statusradio-bordercolor-fatal: rgba(239, 89, 89, 0.4); --statusradio-bordercolor-reconnecting: rgba(246, 170, 28, 0.35); --statusradio-bordercolor-restored: rgba(45, 212, 191, 0.35); --bg-gravityradio-background:linear-gradient(67.5deg, rgb(0,0,0) 0%, rgb(0,0,0) 6%,rgb(55,72,92) 6%, rgb(55,72,92) 57%,rgb(207,164,66) 57%, rgb(207,164,66) 58%,rgb(59,56,56) 58%, rgb(59,56,56) 79%,rgb(20,18,18) 79%, rgb(20,18,18) 93%,rgb(120, 120, 120) 93%, rgb(120, 120, 120) 95%,rgb(29,52,94) 95%, rgb(29,52,94) 100%), linear-gradient(90deg, rgb(0,0,0) 0%, rgb(0,0,0) 6%,rgb(55,72,92) 6%, rgb(55,72,92) 57%,rgb(207,164,66) 57%, rgb(207,164,66) 58%,rgb(59,56,56) 58%, rgb(59,56,56) 79%,rgb(20,18,18) 79%, rgb(20,18,18) 93%,rgb(120, 120, 120) 93%, rgb(120, 120, 120) 95%,rgb(29,52,94) 95%, rgb(29,52,94) 100%), linear-gradient(135deg, rgb(0,0,0) 0%, rgb(0,0,0) 6%,rgb(55,72,92) 6%, rgb(55,72,92) 57%,rgb(207,164,66) 57%, rgb(207,164,66) 58%,rgb(59,56,56) 58%, rgb(59,56,56) 79%,rgb(20,18,18) 79%, rgb(20,18,18) 93%,rgb(120, 120, 120) 93%, rgb(120, 120, 120) 95%,rgb(29,52,94) 95%, rgb(29,52,94) 100%), linear-gradient(0deg, rgb(0,0,0) 0%, rgb(0,0,0) 6%,rgb(55,72,92) 6%, rgb(55,72,92) 57%,rgb(207,164,66) 57%, rgb(207,164,66) 58%,rgb(59,56,56) 58%, rgb(59,56,56) 79%,rgb(20,18,18) 79%, rgb(20,18,18) 93%,rgb(120, 120, 120) 93%, rgb(120, 120, 120) 95%,rgb(29,52,94) 95%, rgb(29,52,94) 100%), linear-gradient(90deg, rgb(137,73,21),rgb(221, 221, 221)); --bg-background-mode:overlay,overlay,overlay,overlay,normal; --block7-gradient: linear-gradient(155deg, #171c2c25 0%, #0d11195b 55%, #08090e7a 100%); --bg-artistemission-card: var(--glass-fill); --bg-background-coverplayer: linear-gradient(180deg, rgb(6 7 11 / 37%), rgb(6 7 11 / 65%)); --colortext-brand-name: #c9cbce; --button-poweroff-radio:#f1370a8f; --button-poweroff-border: rgb(115 108 108 / 53%); --color-powerhint: rgb(179, 201, 235); --bg-background-coverplayer: linear-gradient(180deg, rgb(6 7 11 / 37%), rgb(6 7 11 / 65%)); } /* "Original a colores": tema claro, acentos más saturados/vívidos. */ [data-theme="light"] { --bg-void: #f7f4ee; --bg-nebula-1: #f1ece0; --bg-nebula-2: #e9e1cf; --glass-fill: rgba(20, 18, 10, 0.045); --glass-border: rgba(20, 18, 10, 0.12); --text-primary: #1c1a15; --text-secondary: #55524a; --text-muted: #8b8778; --accent-amber: #e8770f; --accent-amber-soft: rgba(232, 119, 15, 0.16); --accent-cyan: #0891b2; --accent-danger: #d63f3f; --block7-gradient: linear-gradient(155deg, #fff9ee 0%, #f3ead6 55%, #ecdfc2 100%); --volume-fill-color: #e8770f; --analyzer-color-start: #eeeef348; --analyzer-color-end: #f6aa1ce5; /*Status Banner*/ --statusradio-colortext-fatal: #df3636; --statusradio-colortext-reconnecting: #ec570f; --statusradio-colortext-restored: #22a58f; --statusradio-background-fatal: rgba(239, 89, 89, 0.12); --statusradio-background-reconnecting: rgba(246, 170, 28, 0.10); --statusradio-background-restored: rgba(45, 212, 191, 0.10); --statusradio-bordercolor-fatal: rgba(239, 89, 89, 0.4); --statusradio-bordercolor-reconnecting: rgba(246, 170, 28, 0.35); --statusradio-bordercolor-restored: rgba(45, 212, 191, 0.35); --bg-gravityradio-background: linear-gradient(194deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 17%,rgba(29, 29, 29, 0.03) 17%, rgba(29, 29, 29, 0.03) 19%,rgba(234, 234, 234, 0.03) 19%, rgba(234, 234, 234, 0.03) 37%,rgba(240, 240, 240, 0.03) 37%, rgba(240, 240, 240, 0.03) 79%,rgba(91, 91, 91, 0.03) 79%, rgba(91, 91, 91, 0.03) 84%,rgba(73, 73, 73, 0.03) 84%, rgba(73, 73, 73, 0.03) 98%,rgba(21, 21, 21, 0.03) 98%, rgba(21, 21, 21, 0.03) 100%), linear-gradient(59deg, rgba(160, 160, 160, 0.03) 0%, rgba(160, 160, 160, 0.03) 3%,rgba(238,187,149, 0.14) 3%, rgba(238,187,149, 0.14) 6%,rgba(137,137,137, 0.10980392156862745) 6%, rgba(137,137,137, 0.10980392156862745) 23%,rgba(226,226,226, 0.03137254901960784) 23%, rgba(226,226,226, 0.03137254901960784) 30%,rgba(96, 96, 96, 0.03) 30%, rgba(96, 96, 96, 0.03) 44%,rgba(210,210,210, 0.03137254901960784) 44%, rgba(210,210,210, 0.03137254901960784) 74%,rgba(225,215,205, 0.43) 74%, rgba(225,215,205, 0.43) 100%), linear-gradient(22deg, rgba(201,201,201, 0.8392156862745098) 0%, rgba(201,201,201, 0.8392156862745098) 5%,rgba(89,89,89, 0.03137254901960784) 5%, rgba(89,89,89, 0.03137254901960784) 6%,rgba(100,100,100, 0.03137254901960784) 6%, rgba(100,100,100, 0.03137254901960784) 18%,rgba(172,172,172, 0.1411764705882353) 18%, rgba(172,172,172, 0.1411764705882353) 52%,rgba(128,128,128, 0.0392156862745098) 52%, rgba(128,128,128, 0.0392156862745098) 85%,rgba(240, 240, 240, 0.03) 85%, rgba(240, 240, 240, 0.03) 89%,rgba(51,51,51, 0.03137254901960784) 89%, rgba(51,51,51, 0.03137254901960784) 100%), linear-gradient(283deg, rgba(123,123,123, 0.03137254901960784) 0%, rgba(123,123,123, 0.03137254901960784) 10%,rgba(194,194,194, 0.03137254901960784) 10%, rgba(194,194,194, 0.03137254901960784) 34%,rgba(21,95,225, 0.46) 34%, rgba(21,95,225, 0.46) 36%,rgba(177,177,177, 0.03137254901960784) 36%, rgba(177,177,177, 0.03137254901960784) 46%,rgba(180,180,180, 0.03137254901960784) 46%, rgba(180,180,180, 0.03137254901960784) 59%,rgba(89,89,89, 0.03137254901960784) 59%, rgba(89,89,89, 0.03137254901960784) 80%,rgba(217,217,217, 0.03137254901960784) 80%, rgba(217,217,217, 0.03137254901960784) 100%), linear-gradient(342deg, rgba(171,171,171, 0.10196078431372549) 0%, rgba(171,171,171, 0.10196078431372549) 22%,rgba(223,120,120, 0.09019607843137255) 22%, rgba(223,120,120, 0.09019607843137255) 37%,rgba(186,186,186, 0.03137254901960784) 37%, rgba(186,186,186, 0.03137254901960784) 65%,rgba(232,188,102, 0.9294117647058824) 65%, rgba(232,188,102, 0.9294117647058824) 68%,rgba(227,227,227, 0.92) 68%, rgba(227,227,227, 0.92) 71%,rgba(137,137,137, 0.10980392156862745) 71%, rgba(137,137,137, 0.10980392156862745) 88%,rgba(238,187,149, 0.14) 88%, rgba(238,187,149, 0.14) 100%),linear-gradient(90deg, rgb(246,238,223),rgb(215,143,49)); --bg-background-mode: none; /**comment or erase original block7-gradient */ --block7-gradient: linear-gradient(155deg, #ffffff 0%, #e9ebf3c0 55%, #f5f3f36e 100%); --bg-artistemission-card: linear-gradient(155deg, #fbfbf9f7 0%, #e5e6e9ed 55%, #f5f3f324 100%); --colortext-brand-name: #3f4142; --button-poweroff-radio:#f1370a8f; --button-poweroff-border: rgb(115 108 108 / 53%); --color-powerhint: rgb(179, 201, 235); } @font-face { font-family: "Audiowide"; src: url('../assets/fonts/Audiowide-Regular.ttf'), local("Audiowide"); font-weight: 100; font-style: normal; } @font-face { font-family: "Goldmanr"; src: url('../assets/fonts/Goldman-Regular.ttf'), local("Goldmanr"); font-weight: 100; font-style: normal; } @font-face { font-family: "Gayathri"; src: url('../assets/fonts/Gayathri-Bold.ttf'), local("Gayathri"); font-weight: 100; font-style: normal; } @font-face { font-family: "Gabriela"; src: url('../assets/fonts/Gabriela-Regular.ttf'), local("Gabriela"); font-weight: 100; font-style: normal; } @font-face { font-family: "Grupo"; src: url('../assets/fonts/Gruppo-Regular.ttf'), local("Grupo"); font-weight: 100; font-style: normal; } @font-face { font-family: "Google-Sans-Flex-grandrond"; src: url('../assets/fonts/GoogleSansFlex-GRAD-ROND.ttf'), local("Google-Sans-Flex-grandrond"); font-weight: 100; font-style: normal; } @font-face { font-family: "SohneBreit"; src: url('../assets/fonts/SohneBreit.ttf'), local("SohneBreit"); font-weight: 100; font-style: normal; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--text-primary); background-image: var(--bg-gravityradio-background); background-blend-mode: var(--bg-background-mode); background-attachment: fixed; transition: color 0.4s var(--ease-glass); /* El header es position:fixed (Liquid Glass, ver .app-header), así que se saca del flujo normal: este padding-top compensa su altura para que no tape el contenido de
. */ padding-top: var(--header-height); } /* ------------------------------------------------------------------ */ /* Utilidades base "Liquid Glass" */ /* ------------------------------------------------------------------ */ .glass-panel { position: relative; background: var(--bg-artistemission-card); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.6); padding: 2rem; transition: background 0.4s var(--ease-glass), border-color 0.4s var(--ease-glass); } /* ------------------------------------------------------------------ */ /* Header */ /* ------------------------------------------------------------------ */ .app-header { /* Fixed en vez de sticky: siempre visible arriba del todo, la app compensa el espacio con --header-height (ver body { padding-top }). */ position: fixed; top: 0; left: 0; right: 0; z-index: 40; /* Liquid Glass, funciona en ambos temas porque usa las variables del tema activo (ver bloques [data-theme] al inicio de este archivo). */ background: var(--glass-fill); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } /* Contenido del header centrado con el mismo ancho máximo que
(.layout), para que ambos queden alineados verticalmente. */ .header-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 2rem; } .brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex-shrink: 0; } .brand-logo { height: 30px; width: auto; display: block; /* El logo original está pensado para fondos claros (trazo oscuro). En tema oscuro se invierte a blanco para seguir siendo legible sobre el header "Liquid Glass" oscuro; en tema claro se deja tal cual. Si tu logo real ya es claro, invertí esta lógica. */ filter: none; transition: filter 0.3s var(--ease-glass); } [data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); } .brand-name { font-family: var(--font-brand-name); color: var(--colortext-brand-name); text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; font-size: 1.7rem; white-space: nowrap; } .live-indicator { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-secondary); flex-shrink: 0; } /* Cluster derecho: "En vivo" + botón de tema QUEDAN A LA IZQUIERDA de los elementos del menú, todos agrupados juntos al extremo derecho del header. */ .header-right-group { display: flex; align-items: center; gap: 1.5rem; min-width: 0; } /* Botón "TurnOffLight": alterna tema claro/oscuro */ .theme-toggle-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0.95rem; transition: color 0.25s var(--ease-glass), border-color 0.25s var(--ease-glass), transform 0.2s var(--ease-glass); } .theme-toggle-btn:hover { transform: scale(1.08); color: var(--accent-amber); } .theme-toggle-btn .icon-bulb-off, .theme-toggle-btn .icon-bulb-on { display: none; } /* data-theme="dark" -> foco en "apagar la luz" (bombilla apagada visible) */ .theme-toggle-btn[data-theme="dark"] .icon-bulb-off { display: block; } .theme-toggle-btn[data-theme="light"] .icon-bulb-on { display: block; color: var(--accent-amber); } /* Menú de 3 elementos configurables, con ícono a la izquierda de cada etiqueta (CONFIG.HEADER_MENU). */ .header-menu { display: flex; align-items: center; gap: 1.4rem; min-width: 0; } .header-menu-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease-glass); } .header-menu-item:hover { color: var(--accent-amber); } .header-menu-icon { display: flex; flex-shrink: 0; font-size: 0.95rem; color: var(--accent-amber); opacity: 0.85; } /* Botón hamburguesa: oculto en escritorio, el menú va inline en el header. */ .mobile-menu-toggle { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; } .mobile-menu-toggle .icon-menu-close { display: none; } .mobile-menu-toggle[aria-expanded="true"] .icon-menu-open { display: none; } .mobile-menu-toggle[aria-expanded="true"] .icon-menu-close { display: inline-block; } @media (max-width: 767px) { :root { --header-height: 68px; } .header-inner { padding: 0.85rem 1.25rem; gap: 1rem; grid-template-columns: 1fr auto; } .brand-name { display: block; font-size: 1.07rem; } /* solo el logo en pantallas angostas--Cambiamos */ .brand-logo{height: 44px;} /* El cluster "En vivo + menú + tema" se muda por completo al panel deslizable en móvil; en el header solo queda el botón hamburguesa. */ .header-right-group { display: none; } .mobile-menu-toggle { display: flex; } } /* ------------------------------------------------------------------ */ /* Panel deslizable móvil (derecha -> izquierda) */ /* ------------------------------------------------------------------ */ .mobile-menu-backdrop { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s var(--ease-glass); } .mobile-menu-backdrop[data-open="true"] { display: block; opacity: 1; } .mobile-menu-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 56; width: min(320px, 84vw); display: flex; flex-direction: column; /*gap: 1.5rem;*/ padding: 2.6rem 1.5rem 2rem; background-image: var(--bg-gravityradio-background); background-blend-mode: var(--bg-background-mode); /*border-left: 1px solid var(--glass-border);*/ box-shadow: -20px 0 45px -20px rgba(0, 0, 0, 0.6); overflow-y: auto; /* Entra deslizando de DERECHA a IZQUIERDA: arranca fuera de pantalla a la derecha (translateX 100%) y se desliza hasta su posición (0). */ transform: translateX(100%); transition: transform 0.35s var(--ease-glass); } .mobile-menu-panel[data-open="true"] { transform: translateX(0); } body.mobile-menu-locked { overflow: hidden; } /* Bloque "sonando ahora" exclusivo de móvil, dentro del panel */ .mobile-now-playing { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--glass-border); } .mnp-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-amber-soft); color: var(--accent-amber); font-size: 1.3rem; } /* Único ícono animado (bi-soundwave) representando audio en curso: pulso suave de escala/opacidad calculado con CSS (no depende de datos reales del stream, es puramente decorativo para este bloque). */ .audio-bars-icon { display: inline-block; animation: audio-bars-pulse 1.1s ease-in-out infinite; } @keyframes audio-bars-pulse { 0%, 100% { transform: scaleY(0.75); opacity: 0.7; } 50% { transform: scaleY(1.15); opacity: 1; } } .mnp-fields { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; font-family: var(--font-title-cancion); } .mnp-field { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.82rem; color: var(--text-secondary); /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; } .mnp-field i { flex-shrink: 0; color: var(--accent-amber); font-size: 0.85rem; } .mnp-field:nth-child(3) span { color: var(--text-primary); font-weight: 600; } /* Encabezado del panel: brand-name + botón cerrar (regla nueva) */ .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--glass-border); } .mobile-menu-brand { font-family: var(--font-brand-name); text-transform: uppercase; font-size: 1rem; color: var(--colortext-brand-name); } .mobile-menu-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: color 0.2s var(--ease-glass), transform 0.2s var(--ease-glass); } .mobile-menu-close:hover { color: var(--accent-amber); transform: scale(1.08); } /* Lista del menú dentro del panel: mismo orden que en escritorio (En Vivo, Menú 1-3, TurnOffLight), apilados verticalmente. */ .mobile-menu-list { display: flex; flex-direction: column; gap: 1.1rem; } .mobile-live-indicator { font-size: 0.8rem; } .mobile-header-menu { flex-direction: column; align-items: flex-start; gap: 1.1rem; } .mobile-header-menu .header-menu-item { font-size: 0.92rem; font-family: var(--font-title-cancion); font-weight: 600; } .mobile-header-menu .header-menu-icon { font-size: 1.05rem; } /* Estado activo del ítem del menú correspondiente a la ruta actual (regla nueva) — aplica en escritorio, panel móvil y footer, ya que los tres comparten la misma clase .header-menu-item. */ .header-menu-item[data-active="true"] { color: var(--accent-amber); } .header-menu-item[data-active="true"] .header-menu-icon { color: var(--accent-amber); } .mobile-theme-toggle-btn { width: auto; height: auto; border: none; /* sin borde, a diferencia del botón circular de escritorio (regla nueva) */ border-radius: 999px; padding: 0.5rem 0.9rem; gap: 0.55rem; justify-content: flex-start; } .mobile-theme-toggle-label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: background 0.4s var(--ease-glass); } .live-indicator[data-state="live"] .live-dot { background: var(--accent-cyan); box-shadow: 0 0 10px 2px rgba(45, 212, 191, 0.6); animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ .layout { padding: 0.5rem 2rem 3rem; max-width: 1320px; margin: 0 auto; } /* Regla 23-i: la fila de dos columnas (5 / 4) queda separada de la ficha biográfica/tabs, que vive en su propia sección debajo. */ .top-row { margin-bottom: 1.75rem; } /* ------------------------------------------------------------------ */ /* Bloque (7): contenedor único con degradado oscuro que envuelve a */ /* (7a) info en vivo y (7b) reproductor. Los bloques internos NO llevan */ /* borde/fondo propio — solo el contenedor exterior lo tiene. */ /* ------------------------------------------------------------------ */ .block7-container { position: relative; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--block7-gradient); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.65); padding: 2rem; overflow: hidden; transition: background 0.4s var(--ease-glass), border-color 0.4s var(--ease-glass); } .block7-inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2rem; } /* Los hijos directos de (7) nunca llevan borde ni fondo propio: el degradado del contenedor se ve a través de ambos. */ .block7-part { border: none; background: none; box-shadow: none; border-radius: 0; } /* (7a) — se alinea centrado verticalmente junto al bloque cuadrado (7b). */ .now-playing-block.block7-part { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: center; min-width: 0; /* evita que el texto largo empuje el layout */ } /* (7b) — cuadrado, acorde a las imágenes de fondo por artista (regla 7-b). */ .player-block.block7-part.block7-square { flex: 0 0 auto; width: min(360px, 100%); aspect-ratio: 1 / 1; border-radius: var(--radius-lg); padding: 1.5rem; } /* ------------------------------------------------------------------ */ /* Bloque izquierdo — Now Playing */ /* ------------------------------------------------------------------ */ .eyebrow { font-family: var(--font-title-cancion); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-cyan); margin: 0 0 0.5rem; } .np-fields { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.5rem; } .np-field { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); } .np-field[data-empty="true"] { display: none; } .np-icon { flex-shrink: 0; font-size: 1rem; color: var(--accent-amber); opacity: 0.85; } .np-value { font-family: var(--font-album-artist); font-size: 1rem; color: var(--text-secondary); line-height: 1.3; padding-top: 5px; } .np-field--title .np-icon { color: var(--accent-cyan); font-size: 1.15rem; } .np-field--title .np-value { font-family: var(--font-title-cancion); font-size: clamp(1.5rem, 2.4vw, 2.6rem); color: var(--text-primary); line-height: 1.15; } .meta-row { display: flex; gap: 2rem; margin-bottom: 1.25rem; } .playlist-resume { margin: 0 0 1.5rem; font-size: 0.86rem; font-family: var(--font-namespace); font-style: italic; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid var(--glass-border); padding-top: 1rem; } .playlist-resume[data-empty="true"] { display: none; } /* ------------------------------------------------------------------ */ /* Banners intermitentes dentro del bloque (5): bienvenida (encima de */ /* "Sonando ahora") y "anunciante" de próxima programación (debajo de */ /* Álbum). Ambos viven EN EL FLUJO normal (no flotantes/position:fixed), */ /* así empujan al resto del contenido cuando aparecen, igual que */ /* cualquier otro texto del bloque — y colapsan a 0 cuando están ocultos. */ /* ------------------------------------------------------------------ */ .inline-flash-banner { display: flex; align-items: center; gap: 0.5rem; max-height: 0; overflow: hidden; opacity: 0; font-size: 0.8rem; line-height: 1.4; border-radius: var(--radius-sm); transition: max-height 0.35s var(--ease-glass), opacity 0.3s var(--ease-glass), margin 0.35s var(--ease-glass); } .inline-flash-banner[data-visible="true"] { max-height: 80px; opacity: 1; } .welcome-banner { color: var(--accent-cyan); background: rgba(45, 212, 191, 0.08); border: 1px solid rgba(45, 212, 191, 0.25); } .welcome-banner[data-visible="true"] { padding: 0.6rem 0.85rem; margin: 0 0 1rem; } .announcer-banner { color: var(--accent-amber); background: var(--accent-amber-soft); border: 1px solid rgba(246, 170, 28, 0.3); } .announcer-banner[data-visible="true"] { padding: 0.6rem 0.85rem; margin: 0.25rem 0 1.5rem; } .meta-item { display: flex; flex-direction: column; gap: 0.2rem; } .meta-label { font-size: 0.68rem; font-family: var(--font-album-artist); letter-spacing: 0.1em; font-weight: 800; text-transform: uppercase; color: var(--text-muted); } .meta-value { font-family: var(--font-title-cancion); font-size: 1rem; letter-spacing: 1px; } /* Ficha de artista */ .artist-card { position: relative; /* ancla correctamente la marca de agua (regla 17-a) a la ficha, no a un ancestro lejano */ transition: opacity 0.3s var(--ease-glass); } .artist-card[data-state="loading"] { opacity: 0.45; } .artist-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; } .artist-image { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: rgb(195 46 46 / 6%); } .artist-image:not([src]) { display: none; } /* Enlace de referencia (regla 17-a): esquina inferior IZQUIERDA de la ficha (regla nueva), discreto hasta que se pasa el mouse. Oculto por completo (display: none) cuando no hay URL — nunca un ícono "muerto". Ícono fijo = "Artista" (bi-person-fill en el HTML): representa QUÉ es el enlace, no de dónde vino (Wikipedia/LastFM ya no distinguen ícono acá, regla nueva). */ .source-watermark-link { display: none; position: absolute; left: 1.25rem; bottom: 1.25rem; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0.55; text-decoration: none; font-size: 0.85rem; transition: opacity 0.25s var(--ease-glass), color 0.25s var(--ease-glass), transform 0.25s var(--ease-glass); } .source-watermark-link[data-visible="true"] { display: flex; } .source-watermark-link:hover { opacity: 1; color: var(--accent-amber); transform: scale(1.1); } /* Enlace de referencia dentro de "Título/Canción" (Tab1, regla 17-b), viene de CUSTOM_CONTENT/variantes (regla 6) o de la fuente de la API. Ícono fijo = "Título/Canción" (bi-music-note-beamed en el HTML), ya no un ícono de fuente. Alineado a la izquierda (regla nueva) — es un enlace en bloque, no flotante, así que basta con no centrarlo/no empujarlo a la derecha (comportamiento por defecto de inline-flex dentro de un contenedor en columna). Efecto suave de transición al pasar el mouse. */ .track-source-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.35rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease-glass), border-color 0.25s var(--ease-glass); } .track-source-link:hover { color: var(--accent-amber); border-bottom-color: var(--accent-amber); } .artist-name { font-family: var(--font-title-cancion); font-size: 1.52rem; margin: 0; } #artistCard[data-state="empty"] .artist-name{ color: var(--text-muted); font-style: italic; } /* Subtítulo del bloque "Artista" (aa-1) y, análogamente, del tab "Título/Canción" (aa-2, ver .track-subtitle): texto pequeño, en mayúsculas espaciadas, impreso justo encima de su descripción. */ .artist-subtitle { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-amber); margin: 0 0 0.35rem; } .artist-subtitle[data-empty="true"] { display: none; } .artist-bio { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; margin: 0 0 1rem; } .track-subtitle { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-amber); margin: 0 0 0.4rem; } .tags-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; min-height: 1px; } .tags-container[data-empty="true"] { display: none; } .tag-chip { font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--accent-amber-soft); color: var(--accent-amber); border: 1px solid rgba(246, 170, 28, 0.3); } .tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--glass-border); margin-bottom: 1rem; } .tab-btn { background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; padding: 0 0 0.75rem; cursor: pointer; position: relative; transition: color 0.2s var(--ease-glass); } .tab-btn[data-active="true"] { color: var(--text-primary); } .tab-btn[data-active="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-amber); border-radius: 2px; } .tab-panel { display: none; font-size: 0.88rem; color: var(--text-secondary); } .tab-panel[data-active="true"] { display: block; animation: fade-in 0.25s var(--ease-glass); } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .empty-state { color: var(--text-muted); font-style: italic; } .info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .info-list li { display: flex; align-items: center; gap: 0.65rem; } .info-list img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; } .similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.9rem; } .similar-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; } .similar-card img, .similar-cover-placeholder { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: rgba(255,255,255,0.06); } .similar-card span { font-size: 0.72rem; color: var(--text-secondary); } /* ------------------------------------------------------------------ */ /* Bloque derecho — Reproductor */ /* ------------------------------------------------------------------ */ .player-block { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; --bg-image: none; background-image:var(--bg-background-coverplayer), var(--bg-image); background-size: cover; background-position: center; transition: background-image 0.6s var(--ease-glass); } .power-btn { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--button-poweroff-border); background: rgba(255,255,255,0.04); color: var(--button-poweroff-radio); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; transition: all 0.25s var(--ease-glass); } .power-btn[data-state="on"] { color: var(--accent-cyan); border-color: rgba(45, 212, 191, 0.4); box-shadow: 0 0 12px rgba(45, 212, 191, 0.25); } .power-btn:hover { transform: scale(1.08); } /* Elemento flotante intermitente (NO es un tooltip anclado con flecha): una notificación breve, independiente, que flota en la esquina superior del bloque reproductor. */ .power-hint { position: absolute; top: 1.25rem; right: 4rem; max-width: 172px; z-index: 3; padding: 0.55rem 0.85rem; border-radius: var(--radius-md); background-image: var(--glass-fill); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); color: #e6e1d6; font-size: 0.72rem; line-height: 1.35; text-align: right; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.35s var(--ease-glass), transform 0.35s var(--ease-glass); } .power-hint[data-visible="true"] { opacity: 1; transform: none; } .visualizer-wrap { position: relative; width: min(260px, 70%); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .visualizer { position: absolute; inset: 0; border-radius: 50%; } /* Regla 23-j: el visualizador NUNCA usa animación CSS. Toda la animación ocurre dibujada a mano en (ver visualizerService.js, NativeRadialAnalyzer) o la delega la propia librería sobre su canvas. Aquí solo se define el tamaño/posición del canvas nativo. */ .visualizer-canvas { position: absolute; inset: 0; border-radius: 50%; display: block; } .play-pause-btn { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50%; border: none; background: #0000007a; color: #2a2a2a87; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px -8px rgb(255 255 255); transition: transform 0.2s var(--ease-glass), box-shadow 0.2s var(--ease-glass); } .play-pause-btn:hover:not(:disabled) { transform: scale(1.05); } .play-pause-btn:active:not(:disabled) { transform: scale(0.96); } .play-pause-btn:disabled { opacity: 0.5; cursor: not-allowed; } #playPauseIcon { font-size: 71px; line-height: 1; color: #ffffff9c;} /* Play/Pausa/Buffering 100% CSS con Google Material Symbols, por código de punto (regla nueva) — nunca por texto-ligadura ("sound_sampler" no se escribe como texto en ningún lado; se resuelve directo por glifo, más confiable entre navegadores para contenido generado por CSS). uiRenderer.renderPlayerState() solo fija data-state en el botón; todo el resto (qué ícono, si gira) lo decide este bloque. */ #playPauseIcon::before { font-family: "Material Symbols Outlined"; content: "\f6b4"; /* sound_sampler — Play (estado por defecto: off/idle/paused/error) */ } .play-pause-btn[data-state="playing"] #playPauseIcon::before { content: "\e9c2"; /* pause_circle — Pausa alternative f6b6 */ } .play-pause-btn[data-state="buffering"] #playPauseIcon::before { content: "\e41a"; /* rotate_right — Cargando */ box-shadow: 0 10px 30px -8px rgb(3, 89, 187); display: inline-block; animation: spin 1s linear infinite; } /* Utilidad de rotación reusable en toda la app (buffering, reconectando, etc). */ .spin { display: inline-block; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ */ /* Progreso */ /* ------------------------------------------------------------------ */ .progress-block { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 380px; } .time-label { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--text-secondary); min-width: 38px; } .progress-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-amber)); transition: width 1s linear; } /* ------------------------------------------------------------------ */ /* Volumen vertical (100% JS) */ /* ------------------------------------------------------------------ */ .volume-control { position: absolute; bottom: 1.5rem; right: 1.5rem; } .volume-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; } .volume-panel { position: absolute; bottom: 48px; right: 0; width: 44px; height: 140px; padding: 12px 0; display: flex; justify-content: center; border-radius: 999px; background: rgba(10, 12, 20, 0.65); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; transition: opacity 0.2s var(--ease-glass), transform 0.2s var(--ease-glass); } .volume-panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; } .volume-track { position: relative; width: 4px; height: 100%; border-radius: 999px; background: rgba(255,255,255,0.12); cursor: pointer; touch-action: none; } .volume-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; border-radius: 999px; background: var(--volume-fill-color, var(--accent-amber)); } .volume-thumb { position: absolute; left: 50%; bottom: 80%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, 50%); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } /* ------------------------------------------------------------------ */ /* Vista de página del menú (navegación tipo tab, URL limpia) */ /* Reemplaza a #homeView DENTRO de
— se ve como cambiar de */ /* página real, NO un modal/diálogo flotante encima de la app. */ /* ------------------------------------------------------------------ */ .tab-page { animation: tab-page-in 0.25s var(--ease-glass); } @keyframes tab-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tab-page-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: color 0.2s var(--ease-glass), transform 0.2s var(--ease-glass); } .tab-page-back:hover { color: var(--accent-amber); transform: translateX(-2px); } .tab-page-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; margin: 0 0 1.5rem; } .tab-page-loading, .tab-page-error { display: none; align-items: center; gap: 0.6rem; color: var(--text-secondary); font-size: 0.92rem; padding: 1rem 0; } .tab-page[data-state="loading"] .tab-page-loading { display: flex; } .tab-page[data-state="error"] .tab-page-error { display: flex; color: var(--accent-danger); } .tab-page[data-state="loading"] .tab-page-body, .tab-page[data-state="error"] .tab-page-body { display: none; } .tab-page-body p { color: var(--text-secondary); line-height: 1.7; margin: 0 0 1.1rem; max-width: 65ch; } .tab-page-body p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ */ /* Notificación de estado / error — flotante, esquina inferior derecha */ /* (antes vivía centrada dentro del footer; mismas propiedades por */ /* nivel, solo cambia la posición/contenedor). */ /* ------------------------------------------------------------------ */ .status-banner { display: none; /* oculto por completo cuando no hay reportes */ position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; align-items: flex-start; gap: 0.75rem; width: min(360px, calc(100vw - 2.5rem)); padding: 0.85rem 1.1rem; border-radius: var(--radius-md); backdrop-filter: blur(12px); box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.65); transition: opacity 0.3s var(--ease-glass), transform 0.3s var(--ease-glass); } .status-banner[data-visible="true"] { display: flex; } .status-banner[data-level="reconnecting"] { background: var(--statusradio-background-reconnecting); border: 1px solid var(--statusradio-bordercolor-reconnecting); color: var(--statusradio-colortext-reconnecting); } .status-banner[data-level="fatal"] { background: var(--statusradio-background-fatal); border: 1px solid var(--statusradio-bordercolor-fatal); color: var(--statusradio-colortext-fatal); } .status-banner[data-level="restored"] { background: var(--statusradio-background-restored); border: 1px solid var(--statusradio-bordercolor-restored); color: var(--statusradio-colortext-restored); } .status-banner-icon { flex-shrink: 0; margin-top: 1px; font-size: 1.1rem; line-height: 1; } .status-banner[data-level="reconnecting"] .status-banner-icon.bi-arrow-repeat { display: inline-block; animation: spin 1s linear infinite; } .status-banner-body { flex: 1; text-align: left; } .status-banner-message { margin: 0; font-size: 0.85rem; font-weight: 500; } .status-banner-suggestions { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; opacity: 0.9; } .status-banner-suggestions:empty { display: none; } .status-banner-suggestions li { margin-bottom: 0.15rem; } .status-banner-retry { display: none; flex-shrink: 0; font-size: 0.75rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background 0.2s var(--ease-glass); } .status-banner-retry:hover { background: rgba(255,255,255,0.1); } .status-banner[data-level="fatal"] .status-banner-retry { display: inline-block; } /* ------------------------------------------------------------------ */ /* Footer */ /* ------------------------------------------------------------------ */ .app-footer { background: var(--glass-fill); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(22px) saturate(150%); padding: 2.5rem 0 1.75rem; } .footer-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 0.9rem; justify-content: space-between; } .footer-brand-name { font-family: var(--font-brand-name); font-size: 20px; color: var(--text-primary); text-transform: uppercase; } .footer-brand-tagline { font-size: 17px; font-weight: 800; font-family: var(--font-brand-slogan); color: var(--text-secondary); } .footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); } /* Reutiliza .header-menu-item pero en fila horizontal más compacta, sin el layout específico del header. */ .footer-menu.header-menu { gap: 1.4rem; justify-self: auto; } .footer-menu .header-menu-item { font-size: 0.8rem; } .footer-social { display: flex; align-items: center; gap: 0.75rem; } .footer-social-item { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; text-decoration: none; transition: color 0.2s var(--ease-glass), transform 0.2s var(--ease-glass), border-color 0.2s var(--ease-glass); } .footer-social-item:hover { color: var(--accent-amber); border-color: var(--accent-amber); transform: translateY(-2px); } .footer-bottom { padding-top: 1.25rem; border-top: 1px solid var(--glass-border); font-family: var(--font-brand-slogan); text-align: center; } .footer-bottom p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } /**increment classes*/ .tab-panel h4{ font-family: var(--font-title-cancion); } .tab-panel p{ font-family: var(--font-album-artist); } a.header-menu-item { font-family: var(--font-title-cancion) !important; } span.live-label { font-family: var(--font-title-cancion); } @media (max-width: 767px) { .footer-inner { padding: 0 1.25rem; } .footer-row { flex-direction: column; align-items: flex-start; gap: 1.1rem; } .footer-menu.header-menu { flex-wrap: wrap; gap: 0.9rem 1.2rem; } } /* ------------------------------------------------------------------ */ /* Accesibilidad */ /* ------------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } @media (max-width: 991px) { .layout { padding: 0.5rem 1.25rem 2.5rem; } .glass-panel { padding: 1.5rem; } .block7-container { padding: 1.5rem; } .block7-inner { gap: 1.5rem; } .player-block.block7-part.block7-square { width: 100%; } }