/* site.css — estilos del sitio sobre los tokens de ds-tokens.css. Traducción fiel de los estilos del prototipo (handoff/prototipo/Cancionero.dc.html). */ :root { --escala: 1; } body { margin: 0; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } a { color: var(--color-accent-700); } a:hover { color: var(--color-accent); } @keyframes eqbar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } .pagina { min-height: 100vh; display: flex; flex-direction: column; } .contenedor { max-width: 1240px; margin: 0 auto; padding-left: clamp(14px, 3vw, 32px); padding-right: clamp(14px, 3vw, 32px); width: 100%; box-sizing: border-box; } /* ─── header ─── */ .cabecera { background: var(--color-bg); border-bottom: 2px solid var(--color-regla); } .cabecera-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; } .marca { cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; } .marca:hover { color: inherit; } .marca .estrella { display: inline-flex; flex: none; color: var(--color-accent); } .marca-titulo { font-family: var(--font-heading); font-weight: 800; font-size: 17px; white-space: nowrap; } .marca-lema { font-size: 10.5px; letter-spacing: .14em; color: var(--color-neutral-600); white-space: nowrap; } .cabecera-espacio { flex: 1; } .buscador { position: relative; flex: 0 1 320px; min-width: 190px; display: flex; align-items: center; } .buscador .input { width: 100%; padding-right: 34px; box-sizing: border-box; } .buscador .lupa { position: absolute; right: 10px; display: flex; color: var(--color-neutral-600); pointer-events: none; } /* order:1 manda el buscador al final. Por debajo de 560 la cabecera ya se parte en dos filas, y sin esto el interruptor caería en una TERCERA fila él solo detrás del buscador ancho. Con él: fila 1 = marca + interruptor a la derecha, fila 2 = buscador. */ @media (max-width: 560px) { .buscador { flex: 1 1 100%; order: 1; } } /* El interruptor de tema. Sin JavaScript no haría nada, y el atributo que estampa el es justo la señal de que lo hay: si no está, el botón no se enseña. */ :root:not([data-tema]) #btn-tema { display: none; } #btn-tema { flex: none; } #btn-tema:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* Se enseña el icono del tema al que se VA, no el del que se está: en claro la luna, en oscuro el sol. Es la semántica que ya tenía el botón ☀/☾ de la proyección, de donde sale la regla. Va por ID y no por clase porque ds-tokens declara «.btn svg { display: block }» (0,1,1) y una sola clase perdería por especificidad — con los DOS iconos visibles a la vez. */ #btn-tema .icono-luna, #pj-tema .icono-luna { display: block; } #btn-tema .icono-sol, #pj-tema .icono-sol { display: none; } :root[data-tema="oscuro"] :is(#btn-tema, #pj-tema) .icono-luna { display: none; } :root[data-tema="oscuro"] :is(#btn-tema, #pj-tema) .icono-sol { display: block; } /* el color por defecto del navegador no sabe de temas */ .input::placeholder { color: color-mix(in srgb, var(--color-text) 55%, transparent); } /* ─── genéricos ─── */ .kicker { font-size: 11px; letter-spacing: .16em; color: var(--color-accent); font-weight: 600; } .regla-rotulo { border-top: 2px solid var(--color-regla); padding-top: 10px; font-size: 11px; letter-spacing: .16em; font-weight: 600; } main.principal { flex: 1; } /* ─── inicio ─── */ .hero { padding-top: clamp(28px, 6vw, 64px); padding-bottom: clamp(24px, 4vw, 44px); } .hero h1 { margin: 10px 0 0; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; letter-spacing: -.02em; } .hero p { margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 17.5px); max-width: 56ch; color: var(--color-neutral-700); text-wrap: pretty; } .hero-datos { display: flex; gap: 16px; margin-top: 22px; flex-wrap: wrap; font-size: 12px; letter-spacing: .1em; font-weight: 600; color: var(--color-neutral-700); } .hero-datos .sep { color: var(--color-neutral-400); } .seccion-albumes { padding-bottom: 64px; } .grid-albumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: 16px; align-items: start; } .tarjeta-album { cursor: pointer; background: var(--color-surface); border-top: 2px solid var(--color-regla); padding: 18px 18px 20px; display: flex; flex-direction: column; min-height: 190px; color: inherit; text-decoration: none; } .tarjeta-album:hover { background: var(--color-accent-100); color: inherit; } .tarjeta-album-tope { display: flex; justify-content: space-between; align-items: flex-start; } .tarjeta-album-num { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-neutral-400); } .tarjeta-album-cuadro { width: 12px; height: 12px; background: var(--color-accent); } .tarjeta-album-portada { margin-top: 14px; border: 1px solid var(--color-divider); line-height: 0; } .tarjeta-album-portada img { max-width: 100%; max-height: 300px; width: auto; height: auto; display: block; } .tarjeta-album h3 { margin: 0; font-size: 23px; line-height: 1.1; } .tarjeta-album .descripcion { margin: 8px 0 0; font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.45; } .tarjeta-album .tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; } .tarjeta-album-cuerpo { padding-top: 16px; } /* ─── álbum ─── */ .vista-album { padding-top: 18px; padding-bottom: 70px; } .btn-volver { padding-left: 0 !important; gap: 4px !important; } .album-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 10px; } .album-cabecera h1 { margin: 8px 0 0; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; } .album-cabecera .descripcion { margin: 10px 0 0; max-width: 60ch; color: var(--color-neutral-700); font-size: 14px; } .album-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .lista-canciones { margin-top: 20px; border-top: 2px solid var(--color-regla); } .fila-cancion { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--color-divider); cursor: pointer; color: inherit; text-decoration: none; } .fila-cancion:hover { background: var(--color-accent-100); color: inherit; } .fila-cancion .num { font-size: 12.5px; font-weight: 600; color: var(--color-neutral-500); } .fila-cancion .datos { min-width: 0; } .fila-cancion .titulo { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; } .fila-cancion .titulo .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila-cancion .autor { font-size: 12px; color: var(--color-neutral-600); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila-cancion .acciones { display: flex; gap: 8px; align-items: center; } .tag-video { padding: 3px 7px; } /* solo icono: sin palabra que separar, el relleno de 10px sobraba */ .ecualizador { display: none; gap: 2px; align-items: flex-end; height: 12px; flex: none; } .ecualizador span { width: 3px; height: 12px; background: var(--color-accent); transform-origin: bottom; animation: eqbar .9s ease-in-out infinite; } .ecualizador span:nth-child(2) { animation-delay: -.3s; } .ecualizador span:nth-child(3) { animation-delay: -.6s; } .fila-cancion.sonando .ecualizador { display: inline-flex; } /* ─── búsqueda ─── */ .vista-buscar { padding-top: 26px; padding-bottom: 70px; } .vista-buscar h2 { margin: 6px 0 18px; font-size: clamp(22px, 3vw, 30px); } .resultados { border-top: 2px solid var(--color-regla); } .fila-resultado { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--color-divider); cursor: pointer; flex-wrap: wrap; color: inherit; text-decoration: none; } .fila-resultado:hover { background: var(--color-accent-100); color: inherit; } .fila-resultado .play { color: var(--color-neutral-500); flex: none; display: flex; } .fila-resultado .titulo { font-weight: 600; font-size: 15px; } .fila-resultado .autor { font-size: 12.5px; color: var(--color-neutral-600); flex: 1; min-width: 120px; } .sin-resultados { margin: 22px 0 0; font-size: 14.5px; color: var(--color-neutral-700); } /* ——— búsqueda: agrupación, verso coincidente y resaltado ——— */ /* 12px de gap vertical era demasiado aire entre el título y el verso */ .fila-resultado { gap: 6px 12px; } /* La mitad de las canciones no tienen autor y aun así el hueco reservaba 120px. Se quita la reserva, NO el elemento: el .autor lleva flex:1 y es lo que empuja la etiqueta del álbum al borde derecho; con display:none las etiquetas quedarían dentadas de fila en fila. */ .fila-resultado .autor:empty { min-width: 0; } /* en móvil la etiqueta salta de línea y se quedaba pegada a la izquierda, dejando la lista dentada: con margin-left auto termina a la derecha vaya en la línea que vaya */ .fila-resultado .tag { margin-left: auto; } /* siempre en su propia línea: no pelea con el flex-wrap que la fila ya tiene */ .fila-resultado .verso { flex: 1 0 100%; min-width: 0; display: flex; align-items: baseline; gap: 8px; } .fila-resultado .cita { min-width: 0; font-size: 13px; font-style: italic; line-height: 1.4; color: var(--color-neutral-700); /* 5,83:1 — n600 se queda en 3,85:1 y no pasa AA. En oscuro, 6,97 y 4,59: el mismo orden. */ quotes: '«' '»' '“' '”'; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } .fila-resultado .mas-versos { flex: none; /* fuera del clamp: nunca se recorta */ font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--color-neutral-700); white-space: nowrap; } /* Cuatro señales, no una: el fondo accent-200 sobre el hover accent-100 de la fila da 1,13:1 y desaparecería justo al tocarla. El subrayado aguanta (3,84:1) y el font-style:normal endereza la palabra dentro de la cita en cursiva, que es una señal de FORMA. En tema oscuro las cifras salen calcadas (1,12 y 1,38): las rampas están espejadas en rol, así que la relación entre dos pasos vecinos se conserva. El razonamiento vale igual. */ .fila-resultado mark { background: var(--color-accent-200); color: var(--color-text); font-weight: 600; font-style: normal; box-shadow: inset 0 -2px 0 var(--color-accent); padding: 0 1px; } .fila-resultado:hover mark { background: var(--color-accent-300); } @media (forced-colors: active) { .fila-resultado mark { background: Highlight; color: HighlightText; box-shadow: none; } } .grupo-resultados { margin: 28px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .grupo-resultados:first-of-type { margin-top: 0; } .grupo-resultados .cuenta { font-weight: 400; letter-spacing: 0; color: var(--color-neutral-700); } /* .regla-rotulo y .resultados llevan los dos border-top 2px: evitar la doble raya */ .regla-rotulo + .resultados { border-top: 0; margin-top: 10px; } .pista-buscar { margin: 0 0 18px; font-size: 12.5px; color: var(--color-neutral-700); } /* el negativo solo vale cuando la pista va pegada al h2; tras .sin-resultados aplastaba los dos párrafos uno contra otro */ h2 + .pista-buscar { margin-top: -8px; } /* .oculto es display:none y por tanto invisible también al lector de pantalla */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ─── canción ─── */ .vista-cancion { max-width: 1020px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 32px) 90px; width: 100%; box-sizing: border-box; } .cancion-cabecera h1 { margin: 8px 0 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.04; } .cancion-cabecera .autor { margin: 8px 0 0; font-size: 13.5px; color: var(--color-neutral-600); } .pestanas { display: flex; margin-top: 20px; border: 2px solid var(--color-regla); width: max-content; max-width: 100%; overflow-x: auto; } .pestanas button { padding: 10px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; border: none; border-right: 2px solid var(--color-regla); cursor: pointer; background: transparent; color: var(--color-text); white-space: nowrap; } .pestanas button:last-child { border-right: none; } .pestanas button.activa { background: var(--color-accent); color: var(--color-sobre-acento); } .barra-reproductor { position: sticky; top: 0; z-index: 40; background: var(--color-bg); margin-top: 14px; border: 2px solid var(--color-regla); padding: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .btn-play { width: 46px; height: 46px; background: var(--color-accent); color: var(--color-sobre-acento); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .btn-play .icono-pausa { display: none; } .reproduciendo .btn-play .icono-pausa { display: block; } .reproduciendo .btn-play .icono-play { display: none; } .tiempo { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; flex: none; } .pista-progreso { flex: 1; min-width: 120px; height: 8px; background: var(--color-neutral-300); cursor: pointer; position: relative; } .pista-progreso .avance { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: var(--color-accent); } .separador-v { width: 2px; height: 26px; background: var(--color-divider); flex: none; } /* aleatorio encendido: el mismo relleno de acento con que se marca la pestaña activa, para que se lea de un vistazo si el álbum va a sonar en orden o revuelto */ .btn.activo { background: var(--color-accent); color: var(--color-sobre-acento); border-color: var(--color-accent); } .btn.activo:hover { background: var(--color-accent-600); } :root[data-tema="oscuro"] .btn.activo:hover { background: var(--color-accent-700); } .escenario { margin-top: 14px; border-top: 2px solid var(--color-regla); border-bottom: 2px solid var(--color-regla); background: var(--color-surface); padding: clamp(18px, 4vw, 32px) clamp(16px, 3vw, 30px); min-height: 210px; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; } .escenario .seccion { font-size: 11px; letter-spacing: .18em; color: var(--color-accent); font-weight: 600; } .escenario .linea-menor { font-size: calc(clamp(14px, 2vw, 19px) * var(--escala)); color: var(--color-neutral-500); font-weight: 600; line-height: 1.3; min-height: 1.3em; } .escenario .linea-menor-2 { font-size: calc(clamp(14px, 2vw, 19px) * var(--escala)); color: var(--color-neutral-400); line-height: 1.3; min-height: 1.3em; } .escenario .linea-actual { font-family: var(--font-heading); font-weight: 800; line-height: 1.16; letter-spacing: -.01em; font-size: calc(clamp(24px, 4.6vw, 46px) * var(--escala)); min-height: 1.2em; } .palabra { display: inline-block; padding: 0 .12em; margin: 0 .14em .08em 0; transition: background .12s, color .25s; color: color-mix(in srgb, var(--color-text) 45%, transparent); } .palabra.pasada { color: var(--color-accent-700); } .palabra.actual { background: var(--color-accent); color: var(--color-sobre-acento); } /* modo línea (sync sin tiempos por palabra): la línea entera se enciende al cantarse */ .palabra.cantando { color: var(--color-text); } /* Selector de vista de la letra: el MISMO control que .pestanas, un punto más abajo en la escala. Nada de píldoras sueltas con borde gris — aquí los grupos de opciones son una caja continua de 2px en tinta con las opciones separadas por la misma raya, y la activa se rellena en acento. La jerarquía frente a las pestañas la marca el tamaño (11px contra 12,5px, menos aire), no un color inventado: el rojo sigue queriendo decir «estás aquí» en los dos sitios. */ .vista-letra { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .vista-letra .etiqueta { font-size: 11px; letter-spacing: .16em; font-weight: 600; color: var(--color-neutral-700); flex: none; } .vista-letra .grupo { display: flex; border: 2px solid var(--color-regla); width: max-content; max-width: 100%; } .vista-letra button { font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .08em; padding: 7px 13px; border: none; border-right: 2px solid var(--color-regla); background: transparent; color: var(--color-text); cursor: pointer; white-space: nowrap; } .vista-letra button:last-child { border-right: none; } .vista-letra button:hover:not(.activa) { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .vista-letra button.activa { background: var(--color-accent); color: var(--color-sobre-acento); } /* Qué bloque de la letra se ve. Va por atributo en y no por una clase en cada bloque a propósito: el script en línea del lo estampa antes del primer pintado, así que la página nace ya en la vista elegida y no salta cuando carga player.js (que luego mantiene el mismo atributo). Sin atributo = SINCRONIZADA: es lo que se sirve y lo que ve quien no tiene JavaScript, exactamente como antes de que existieran las vistas. */ [data-bloque="acordes"] { display: none; } :root[data-vista-letra="plana"] #escenario { display: none; } /* el :has() acota esto a las canciones que DE VERDAD traen acordes: con la preferencia «con acordes» sobre una canción que no los tiene, ocultar los otros dos bloques dejaría la página en blanco hasta que el JS degradara la vista */ :root[data-vista-letra="acordes"] .vista-cancion:has([data-bloque="acordes"]) #escenario, :root[data-vista-letra="acordes"] .vista-cancion:has([data-bloque="acordes"]) .letra-completa[data-bloque~="plana"] { display: none; } :root[data-vista-letra="acordes"] [data-bloque="acordes"] { display: block; } .letra-completa { margin-top: 24px; } .letra-columnas { margin-top: 10px; column-width: 330px; column-gap: 44px; } .letra-seccion { break-inside: avoid; margin: 0 0 18px; } .letra-seccion .nombre { font-size: 11px; letter-spacing: .14em; color: var(--color-accent); font-weight: 600; margin-bottom: 5px; } .letra-linea { font-size: calc(15.5px * var(--escala)); line-height: 1.5; padding: 2px 6px; cursor: pointer; color: var(--color-neutral-800); transition: background .25s ease, color .25s ease; } .letra-linea:hover { background: var(--color-accent-100); } .letra-linea.actual { background: var(--color-accent-200); font-weight: 600; color: var(--color-text); } .sin-sync .letra-linea { cursor: default; } .sin-sync .letra-linea:hover { background: transparent; } .caja-vacia { margin-top: 16px; border: 2px solid var(--color-neutral-400); padding: 22px 24px; } .caja-vacia .titulo { font-family: var(--font-heading); font-weight: 800; font-size: 17px; } .caja-vacia p { margin: 8px 0 0; font-size: 13.5px; color: var(--color-neutral-700); max-width: 54ch; } .acordes-meta { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .acordes-meta .nota { font-size: 12.5px; color: var(--color-neutral-600); } .acordes-hoja { margin-top: 14px; column-width: 350px; column-gap: 48px; } .acordes-seccion { break-inside: avoid; margin-bottom: 20px; } .acordes-seccion .nombre { font-size: 11px; letter-spacing: .14em; color: var(--color-accent); font-weight: 600; margin-bottom: 6px; } .acordes-linea { margin: 0 0 9px; line-height: 1.15; } .acordes-linea .segmento { display: inline-block; vertical-align: bottom; white-space: pre-wrap; } .acordes-linea .acorde { display: block; min-height: calc(15px * var(--escala)); font-family: var(--font-heading); font-weight: 800; color: var(--color-accent-700); font-size: calc(12.5px * var(--escala)); line-height: 1.15; } .acordes-linea .texto { display: block; font-size: calc(15px * var(--escala)); line-height: 1.35; } .marco-video { margin-top: 16px; aspect-ratio: 16 / 9; background: var(--color-neutral-900); color: #f3f2f2; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 28px; box-sizing: border-box; } .marco-video .titulo { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: .04em; } .marco-video p { margin: 0; font-size: 13px; color: var(--color-neutral-400); max-width: 52ch; } .marco-video iframe { width: 100%; height: 100%; border: 0; } .marco-video.con-video { padding: 0; display: block; } /* ─── footer ─── */ .pie { border-top: 2px solid var(--color-regla); margin-top: auto; } .pie-fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--color-neutral-600); padding-top: 16px; padding-bottom: 16px; } .pie .estrella { display: inline-flex; flex: none; color: var(--color-accent); } .pie .nombre { font-weight: 600; letter-spacing: .1em; } .pie .espacio { flex: 1; } /* ─── proyección ─── */ /* La proyección YA NO tiene tema propio: hereda el del sitio. Antes eran doce pares de reglas (una oscura con los valores a mano y su gemela .clara con tokens) y un interruptor aparte; ahora es una sola serie en tokens, y el botón ☀/☾ de su barra cambia el tema de TODO. El motivo es el de siempre: salir de pantalla completa no puede ser un fogonazo. Los valores no se han inventado — cada uno reproduce lo que ya se veía. rgba(243,242,242,.X) sobre negro es, exactamente, la tinta del tema al X %; y --color-accent-700 da 7,68:1 en oscuro (antes accent-400, 8,51) y 6,41 en claro (lo que ya daba). */ .proyeccion { position: fixed; inset: 0; z-index: 999; display: none; flex-direction: column; background: var(--color-bg); color: var(--color-text); } .proyeccion.abierta { display: flex; } .proyeccion .barra { display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 36px); } .proyeccion .barra-tope { border-bottom: 2px solid var(--color-divider); } .proyeccion .barra-pie { border-top: 2px solid var(--color-divider); } .proyeccion .titulo-cancion { font-family: var(--font-heading); font-weight: 800; font-size: clamp(14px, 1.6vw, 19px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proyeccion .subtitulo { font-size: 10.5px; letter-spacing: .16em; font-weight: 600; color: color-mix(in srgb, var(--color-text) 45%, transparent); } .proyeccion .btn-proj { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid color-mix(in srgb, var(--color-text) 40%, transparent); color: inherit; cursor: pointer; font-weight: 800; font-size: 12.5px; font-family: var(--font-heading); flex: none; padding: 0; } .proyeccion .centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 24px); padding: 20px clamp(20px, 5vw, 80px); overflow: hidden; } .proyeccion .seccion { font-size: clamp(11px, 1.3vw, 15px); letter-spacing: .2em; font-weight: 600; color: var(--color-accent); } .proyeccion .linea-menor { font-size: calc(clamp(16px, 2.6vw, 32px) * var(--escala)); color: color-mix(in srgb, var(--color-text) 45%, transparent); font-weight: 600; line-height: 1.25; min-height: 1.25em; } .proyeccion .linea-actual { font-family: var(--font-heading); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; font-size: calc(clamp(30px, 7vw, 100px) * var(--escala)); text-wrap: balance; } /* .palabra, .palabra.actual y .palabra.cantando ya valen tal cual con los tokens del sitio: la proyección solo necesita subir de tamaño el resalte, no cambiarle el color */ .proyeccion .palabra.pasada { color: var(--color-accent-700); } /* «safe center»: centrado cuando la estrofa cabe, alineado arriba cuando no — con «center» a secas el desbordamiento superior queda recortado e inalcanzable */ .proyeccion .centro-acordes { flex: 1; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; gap: calc(clamp(8px, 1.6vh, 18px) * var(--ajuste, 1)); padding: 20px clamp(20px, 5vw, 80px); overflow-y: auto; min-height: 0; } .proyeccion .acordes-tope { display: flex; align-items: baseline; gap: 14px; } .proyeccion .contador { font-size: clamp(11px, 1.2vw, 14px); font-weight: 600; opacity: .55; font-variant-numeric: tabular-nums; } /* --ajuste lo fija el reproductor para que la estrofa quepa entera sin scroll */ .proyeccion .acordes-linea { margin: 0 0 calc(clamp(8px, 1.4vh, 16px) * var(--ajuste, 1)); line-height: 1.1; } .proyeccion .acordes-linea .acorde { min-height: 1.2em; color: var(--color-accent-700); font-size: calc(clamp(15px, 2vw, 28px) * var(--escala) * var(--ajuste, 1)); line-height: 1.2; } .proyeccion .acordes-linea .texto { font-size: calc(clamp(19px, 3vw, 42px) * var(--escala) * var(--ajuste, 1)); line-height: 1.3; font-weight: 600; } .proyeccion .ayuda { font-size: clamp(10px, 1.1vw, 13px); letter-spacing: .08em; opacity: .5; font-weight: 600; } .proyeccion .tiempo { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; color: color-mix(in srgb, var(--color-text) 45%, transparent); flex: none; } .proyeccion .pista-progreso { flex: 1; min-width: 80px; height: 8px; background: color-mix(in srgb, var(--color-text) 22%, transparent); cursor: pointer; position: relative; } /* ─── tema oscuro: lo que el giro de las rampas NO arregla ─── El marco del vídeo es una pantalla de cine: quiere ser oscuro en los DOS temas, así que no puede pedir «el paso 900» (que en oscuro es casi blanco) sino un negro de verdad. Y lo que va dentro de él tampoco puede leerse contra el fondo de la página, sino contra ese negro. */ :root[data-tema="oscuro"] .marco-video { background: #0e0d0d; /* un pozo por debajo de la página, no el paso 900 */ --color-accent-500: #ff563c; /* el icono de _iconos.njk lo cuece en el SVG (6,1:1) */ } :root[data-tema="oscuro"] .marco-video p { color: var(--color-neutral-700); } .nota-seccion { margin: 18px 0 0; font-size: 12.5px; color: var(--color-neutral-600); } /* objetivo táctil mínimo 44px en pantallas táctiles (README, Interacciones) */ @media (pointer: coarse) { .btn-icon { width: 44px; height: 44px; } .proyeccion .btn-proj { width: 44px; height: 44px; } .pestanas button { padding: 12px 16px; } .vista-letra button { min-height: 44px; } } /* ─── mini-reproductor (canción sonando en otra página) ─── */ .minireproductor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 10px; padding: 10px clamp(14px, 3vw, 32px); background: var(--color-bg); border-top: 2px solid var(--color-regla); } .minireproductor.abierta { display: flex; } body.con-mini .pie .pie-fila { padding-bottom: 76px; } .minireproductor .mini-info { display: flex; align-items: center; gap: 10px; min-width: 60px; flex: 0 1 auto; color: inherit; text-decoration: none; } .minireproductor .mini-info:hover { color: var(--color-accent-700); } .minireproductor .mini-titulo { font-family: var(--font-heading); font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .minireproductor .ecualizador { display: none; } .minireproductor.reproduciendo .ecualizador { display: inline-flex; } .minireproductor .pista-progreso { flex: 1; min-width: 60px; } @media (max-width: 560px) { .minireproductor #mini-anterior, .minireproductor #mini-siguiente { display: none; } } /* utilitario */ .oculto { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ MÓVIL Auditado a 320/360/390 px en todas las páginas. Los dos puntos de corte son 560px (el que el proyecto ya usaba) y 416px, este último medido: a partir de 417px la barra del reproductor ya se ordena sola y forzarla empeora. ═══════════════════════════════════════════════════════════════════════════ */ /* La marca no puede empujar la página: con white-space:nowrap el lema sacaba el documento a 373px en pantallas de 320 y 360, y con el texto al 200% (ajuste de accesibilidad del móvil) ni el título cabía. Con normal solo se parte cuando de verdad no cabe, así que en escritorio no cambia nada. */ .marca { flex-wrap: wrap; } .marca-titulo { white-space: normal; } /* Una palabra más ancha que su columna sacaba la página: «¿Sugerencias» en el h1 de /sugerencias, y el h3 del álbum en la tarjeta horizontal de inicio. */ h1, h2, h3 { overflow-wrap: break-word; } /* La regla de 44px que el proyecto ya se impone (más arriba) solo alcanzaba a .btn-icon, .btn-proj y las pestañas. Se quedaban fuera el botón grande rojo REPRODUCIR TODO, INICIO, PROYECTAR, ENVIAR, el buscador y la barra de progreso. */ @media (pointer: coarse) { .btn { min-height: 44px; } /* 16px es el umbral por debajo del cual Safari en iPhone hace zoom automático al tocar el campo y deja la página ampliada y descolocada */ .input { min-height: 44px; font-size: 16px; } .pestanas button { min-height: 44px; } .barra-reproductor .pista-progreso { height: 14px; } .pie-fila a { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 560px) { /* por debajo de 560 la cabecera ya está partida en dos filas y el lema no aporta nada; es el causante del desborde (53px a 320) en todo el sitio */ .marca-lema { display: none; } /* el separador flex:1 caía unas veces en la línea del enlace y otras no, así que «¿Sugerencias o cambios?» aparecía a la derecha a 320/360 y a la izquierda a 390 */ .pie .espacio { display: none; } /* al envolver, el separador se quedaba colgando al final de la línea: «7 ÁLBUMES / 323 CANCIONES /» apuntando a la nada */ .hero-datos { gap: 6px 18px; } .hero-datos .sep { display: none; } /* La rejilla pasa a DOS columnas a partir de 550px (auto-fit con minmax de 250px da 2×251px a 550). Con la tarjeta horizontal esas columnas quedan estrujadas —«63 CANCIONES» partido en dos líneas—, así que por debajo de 561 se fuerza una sola columna. Así no hace falta un punto de corte nuevo. */ .grid-albumes { grid-template-columns: minmax(0, 1fr); } /* Portada a la izquierda y texto al lado, como una lista de discos: en vertical cada tarjeta se comía media pantalla y los 7 álbumes pedían 3.700px de scroll. */ .tarjeta-album { display: grid; grid-template-columns: clamp(86px, 27vw, 116px) minmax(0, 1fr); grid-template-areas: "tope tope" "portada cuerpo"; column-gap: 14px; align-items: start; min-height: 0; padding: 12px 14px 16px; } /* Cancionero 2013 y Hugo Ancieta no tienen portada: sin columna fantasma */ .tarjeta-album:not(:has(.tarjeta-album-portada)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tope" "cuerpo"; } .tarjeta-album-tope { grid-area: tope; } .tarjeta-album-num { font-size: 26px; } /* fit-content ciñe el marco a la imagen: con las portadas verticales el recuadro encerraba una franja muerta a la derecha y parecía media carga */ .tarjeta-album-portada { grid-area: portada; margin-top: 8px; width: fit-content; } .tarjeta-album-portada img { max-height: 140px; } .tarjeta-album-cuerpo { grid-area: cuerpo; padding-top: 8px; } .tarjeta-album h3 { font-size: 20px; } /* el título envuelve a dos líneas en vez de cortarse a media palabra */ .fila-cancion { align-items: start; } .fila-cancion .num { padding-top: 2px; } .fila-cancion .acciones { align-self: center; } .fila-cancion .titulo .texto { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* LETRA sale en el 100% de las filas de Hugo Ancieta (53/53) y de Cancionero 2013 (20/20): una etiqueta que aparece siempre no distingue nada, y que la canción no tenga audio ya lo dice la ausencia del botón de play. Es lo que hace que las acciones no quepan. */ .fila-cancion .acciones .tag-neutral { display: none; } /* Solo las filas que de verdad no caben (etiqueta VISIBLE + botones) bajan las acciones a una segunda línea pegada a la derecha; el título ocupa todo el ancho. Las demás siguen en una sola línea, como siempre. La etiqueta de vídeo no entra en esta cuenta: al ser solo el icono cabe al lado de ACORDES sin comerse el título. */ .fila-cancion:has(.acciones .tag:not(.tag-neutral)):has(.acciones .btn) { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "num datos" ". acciones"; row-gap: 2px; padding-top: 8px; padding-bottom: 6px; } .fila-cancion:has(.acciones .tag:not(.tag-neutral)):has(.acciones .btn) .num { grid-area: num; } .fila-cancion:has(.acciones .tag:not(.tag-neutral)):has(.acciones .btn) .datos { grid-area: datos; } .fila-cancion:has(.acciones .tag:not(.tag-neutral)):has(.acciones .btn) .acciones { grid-area: acciones; justify-content: flex-end; align-self: auto; } /* Con flex-wrap el orden de los saltos dependía de lo largo que fuera cada título y no había dos filas iguales: en una lista de 5 salían 4 maquetas distintas. En rejilla: título + etiqueta arriba, autor debajo, verso al final, siempre. */ .fila-resultado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: baseline; } .fila-resultado .play { grid-column: 1; grid-row: 1; } .fila-resultado .titulo { grid-column: 2; grid-row: 1; } .fila-resultado .tag { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; } .fila-resultado .autor { grid-column: 2 / -1; grid-row: 2; min-width: 0; } .fila-resultado .autor:empty { display: none; } .fila-resultado .verso { grid-column: 2 / -1; grid-row: 3; } /* Las 4 pestañas no cabían: a 320px se perdían 94px y VÍDEO no aparecía en absoluto. Técnicamente se podía deslizar, pero sin ninguna señal de ello parecía roto. Repartidas a partes iguales caben las 4 sin carrusel. */ .pestanas { width: 100%; overflow-x: visible; } .pestanas button { flex: 1 1 0; min-width: 0; padding: 12px 4px; font-size: 11px; letter-spacing: .03em; } /* Con la etiqueta al lado, los tres rótulos dejan de caber: la etiqueta sube a su propia línea y el grupo ocupa el ancho entero, igual que hacen las pestañas aquí mismo. */ .vista-letra { flex-direction: column; align-items: stretch; gap: 6px; } .vista-letra .grupo { width: 100%; } /* base auto y no 0: en tercios exactos «SINCRONIZADA» se sale de su casilla y se come la raya. Repartido a partir del texto, cada rótulo se queda dentro de lo suyo. */ .vista-letra button { flex: 1 1 auto; min-width: 0; padding: 9px 4px; letter-spacing: .03em; } /* ACORDES: cada trozo de verso era un inline-block que rompía a mitad de palabra («por el cam / ino»). Pasan a inline y el acorde flota encima de su sílaba con ancho 0, así el verso fluye y envuelve por los espacios. ACOTADO A .acordes-hoja a propósito: sin acotar se cuela en el modo PROYECCIÓN, que usa el mismo marcado, y allí los acordes caen ENCIMA de la letra. */ .acordes-hoja { overflow-x: auto; } .acordes-hoja .acordes-linea { white-space: nowrap; margin-bottom: 14px; } .acordes-hoja .acordes-linea .segmento { display: inline; white-space: nowrap; } .acordes-hoja .acordes-linea .texto { display: inline; white-space: pre-wrap; line-height: 2.5; } .acordes-hoja .acordes-linea .acorde { display: inline-block; width: 0; height: 0; min-height: 0; overflow: visible; white-space: pre; position: relative; top: -1.25em; vertical-align: baseline; } /* Proyección: arriba el título quedaba en «C…» (24px de ancho) y el subtítulo cruzaba por debajo del botón A−. Abajo la barra medía 486px en una pantalla de 320: la barra de progreso y la duración quedaban fuera y no se podían tocar. */ .proyeccion .barra { flex-wrap: wrap; row-gap: 10px; } .proyeccion .barra-tope > div:has(#pj-titulo) { flex: 1 1 calc(100% - 40px); } .proyeccion .barra-tope > .btn-proj:first-of-type { margin-left: auto; } /* fila 1 = tiempo + progreso + tiempo, fila 2 = los botones; el ::before hace de salto de línea y así no hay que tocar layout.njk */ .proyeccion .barra-pie .tiempo, .proyeccion .barra-pie .pista-progreso { order: -1; } .proyeccion .barra-pie::before { content: ''; flex: 0 0 100%; height: 0; } /* Hace falta .abierta (no .minireproductor a secas) porque .abierta ya declara display:flex y ganaría por especificidad. Los botones anterior/siguiente ya están ocultos por debajo de 560, así que la rejilla no los ve. */ .minireproductor.abierta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 8px; } .minireproductor #mini-play { grid-column: 1; grid-row: 1; } .minireproductor .mini-info { grid-column: 2 / 4; grid-row: 1; min-width: 0; } .minireproductor #mini-t-cur { grid-column: 1; grid-row: 2; } .minireproductor .pista-progreso { grid-column: 2; grid-row: 2; min-width: 0; height: 12px; } .minireproductor #mini-t-dur { grid-column: 3; grid-row: 2; } /* el mini pasa de 68 a 95px: sin subir esto de 76 a 104 taparía el enlace del pie */ body.con-mini .pie .pie-fila { padding-bottom: 104px; } } /* Segundo punto de corte, justificado con medición: de 417px en adelante la barra ya cae sola en dos filas ordenadas de 124px, y forzarle tres filas la subía a 167. Medido uno a uno: 413-416 → 178px (revuelta); 417-420 → 124px (ordenada). */ @media (max-width: 416px) { .barra-reproductor { gap: 8px 6px; padding: 8px; } .barra-reproductor::before { content: ''; flex: 1 0 100%; height: 0; order: 1; } .barra-reproductor #t-cur, .barra-reproductor .pista-progreso, .barra-reproductor #t-dur { order: 2; } .barra-reproductor .separador-v { order: 3; flex: 1 0 100%; width: auto; height: 2px; margin: 2px 0; } .barra-reproductor #fs-menos, .barra-reproductor #fs-mas, .barra-reproductor #btn-proyectar, .barra-reproductor #btn-sala { order: 4; } .barra-reproductor a[download] { margin-left: auto; } .barra-reproductor #btn-proyectar { margin-left: auto; } .barra-reproductor .tag { flex: 1 0 100%; } } /* Con el móvil de lado sobra ancho y falta altura, y aun así el buscador se bajaba a una segunda fila porque flex decide si envuelve con el flex-basis de 320px sin haber encogido todavía. La condición de altura deja fuera tablets y ventanas de escritorio: sin ella la regla encogía el buscador también a 640-900px. */ @media (max-width: 900px) and (max-height: 480px) { .buscador { flex: 1 1 190px; } } /* Fuera de media query a propósito: el mismo apelmazamiento se ve en escritorio. Solo afecta al par del estado vacío de /buscar; la otra .pista-buscar (detrás del h2, con su margin-top negativo) no se toca. */ .sin-resultados + .pista-buscar { margin-top: 14px; } /* ————— cola de revisión (/admin/auditoria) ————— */ /* Reutiliza .escenario y .palabra tal cual: el resalte del inspector tiene que verse idéntico al del sitio, o revisar aquí no prueba nada de lo que se ve allí. */ .aud-filtros { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 22px 0 10px; } .aud-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--color-neutral-700); } .aud-filtros select { font: inherit; font-size: 14px; padding: 7px 8px; border: 2px solid var(--color-regla); background: var(--color-surface); } .aud-filtros .aud-check { flex-direction: row; align-items: center; gap: 7px; letter-spacing: 0; font-weight: 500; font-size: 13px; } .aud-tabla .aud-score { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; width: 62px; } .aud-tabla tr.resuelta { opacity: .45; } .aud-motivos { max-width: 40ch; } .chip { display: inline-block; font-size: 10.5px; letter-spacing: .06em; font-weight: 600; padding: 2px 6px; margin: 1px 3px 1px 0; background: var(--color-neutral-100, #eee); border: 1px solid var(--color-neutral-300, #ccc); } .chip.mas { background: transparent; } .aud-estado { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .1em; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; } .aud-estado.ok { color: #1c7c3a; } .aud-estado.realinear, .aud-estado.cambiada { color: var(--color-accent); } .aud-estado.descartado { color: var(--color-neutral-500); } .aud-inspector { position: sticky; top: 0; z-index: 5; background: var(--color-bg); border: 2px solid var(--color-regla); padding: 16px 18px 18px; margin: 18px 0; } .aud-inspector.oculto { display: none; } .insp-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .insp-transporte { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .insp-transporte progress { flex: 1; height: 8px; } .insp-saltos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .insp-saltos .salto { cursor: pointer; font: inherit; font-size: 11px; padding: 4px 8px; background: var(--color-surface); } .insp-saltos .salto.motivo { border-color: var(--color-accent); color: var(--color-accent-700); } .insp-escenario { min-height: 150px; } .insp-hallazgos { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; display: grid; gap: 4px; } .insp-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .insp-acciones input[type=text] { font: inherit; font-size: 13px; padding: 7px 9px; border: 2px solid var(--color-neutral-300, #ccc); flex: 1; min-width: 180px; } @media (max-width: 720px) { .aud-tabla .aud-motivos, .aud-tabla td:nth-child(3) { display: none; } .aud-inspector { position: static; } } /* ═══════════════════════════════════════════════════════════════════════════ SALAS PARA CANTAR JUNTOS Quién es quién lo dice , estampado en el antes del primer pintado (layout.njk): así a quien SIGUE una sala nunca le aparece un play que pueda tocar, ni por un fotograma. ═══════════════════════════════════════════════════════════════════════════ */ /* sin JavaScript no hay nadie escuchando: ni SALA, ni ABRIR UNA SALA, ni el corazón */ :root:not([data-tema]) :is(#btn-sala, .btn-abrir-sala, #btn-favorita) { display: none; } /* con una sala ya abierta el botón sobra: la barra de la sala manda */ :root[data-sala] :is(#btn-sala, .btn-abrir-sala) { display: none; } /* rótulos que solo tienen sentido para un papel */ .solo-anfitrion, .solo-seguidor { display: none; } :root[data-sala="anfitrion"] .solo-anfitrion { display: inline-flex; } :root[data-sala="seguidor"] .solo-seguidor { display: inline-flex; } .barra-reproductor .nota.solo-anfitrion { font-size: 12.5px; color: var(--color-neutral-700); } :root[data-sala="anfitrion"] .barra-reproductor .nota.solo-anfitrion { display: inline; } /* quien dirige puede tocar cualquier línea, también sin tiempos (site.css lo anula más arriba) */ :root[data-sala="anfitrion"] .sin-sync .letra-linea { cursor: pointer; } :root[data-sala="anfitrion"] .sin-sync .letra-linea:hover { background: var(--color-accent-100); } :root[data-sala="anfitrion"] .acordes-linea[data-linea] { cursor: pointer; } :root[data-sala="anfitrion"] .acordes-linea[data-linea]:hover { background: var(--color-accent-100); } /* Quien SIGUE una sala no tiene audio: fuera todo lo que suena o mueve el tiempo. Se quedan A−/A+, PROYECTAR (un móvil en la tele puede ser el proyector de la sala), la descarga, ACORDES, VER LETRA y el tema. KARAOKE no significa nada sin audio, y VIDEO sería un segundo sonido en el salón. */ :root[data-sala="seguidor"] :is(#btn-play, #btn-anterior, #btn-siguiente, #btn-aleatorio, #t-cur, #progreso, #t-dur, #pj-play, #pj-anterior, #pj-siguiente, #pj-progreso, #pj-t-cur, #pj-t-dur, #minireproductor, #reproducir-todo, #reproducir-aleatorio, [data-play-id], .pestanas button[data-tab="karaoke"], .pestanas button[data-tab="video"]) { display: none !important; } /* sin play ni progreso, el salto de fila del corte de 416 px dejaría una fila vacía */ :root[data-sala="seguidor"] .barra-reproductor::before { display: none; } :root[data-sala="seguidor"] .barra-reproductor .tag.solo-seguidor { flex: 1 1 auto; } :root[data-sala="seguidor"] .letra-linea { cursor: default; } :root[data-sala="seguidor"] .letra-linea:hover { background: transparent; } :root[data-sala="seguidor"] .letra-linea.actual:hover { background: var(--color-accent-200); } /* La línea señalada con el dedo. Con la misma fuerza que .actual (la que se canta, por tiempo) y, además, una barra de acento al margen, como un dedo apoyado en el papel. */ .puntero { box-shadow: inset 4px 0 0 var(--color-accent); background: var(--color-accent-200); font-weight: 600; color: var(--color-text); } :root[data-sala="seguidor"] .letra-linea.puntero:hover { background: var(--color-accent-200); } .acordes-linea.puntero, .acordes-linea.actual { padding-left: 8px; margin-left: -8px; } /* el seguidor también sigue la línea que se canta en la hoja de acordes */ .acordes-linea.actual { background: var(--color-accent-200); } /* seguidor: sin KARAOKE ni VIDEO, una barra con un CANTAR suelto no es una elección */ :root[data-sala="seguidor"] .pestanas:not(:has(button[data-tab="acordes"])) { display: none; } [data-linea] { scroll-margin-top: 150px; scroll-margin-bottom: 120px; } /* ─── barra de la sala (layout.njk): fija al pie, como el mini-reproductor ─── */ .barra-sala { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; flex-direction: column; background: var(--color-bg); border-top: 2px solid var(--color-regla); } .barra-sala.abierta { display: flex; } .barra-sala .sala-fila { display: flex; align-items: center; gap: 10px; padding: 8px clamp(14px, 3vw, 32px); min-height: 52px; } .barra-sala .sala-punto { width: 10px; height: 10px; background: var(--color-accent); flex: none; } .barra-sala.sala-final .sala-punto { background: var(--color-neutral-400); } .barra-sala .sala-codigo { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: .12em; background: transparent; border: none; color: inherit; padding: 4px 2px; cursor: pointer; min-height: 36px; } .barra-sala .sala-codigo:disabled { cursor: default; color: inherit; } .barra-sala .sala-tarjeta h2 { margin: 0; font-size: 11px; } .barra-sala .sala-estado { font-size: 11.5px; letter-spacing: .1em; font-weight: 600; color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .barra-sala .espacio { flex: 1; } .barra-sala .sala-fila .btn { white-space: nowrap; } .barra-sala .solo-anfitrion, .barra-sala .solo-seguidor { display: none; } :root[data-sala="anfitrion"] .barra-sala .solo-anfitrion { display: inline-flex; } :root[data-sala="seguidor"] .barra-sala .solo-seguidor { display: inline-flex; } /* tras cerrarse la sala ya no hay papel: se enseña solo ACEPTAR */ .barra-sala.sala-final .sala-fila .btn { display: none; } .barra-sala.sala-final #sala-salir { display: inline-flex; } /* la tarjeta con la que se invita: el código en grande, el enlace y la frase que se dice */ .barra-sala .sala-tarjeta { padding: 18px clamp(14px, 3vw, 32px) 14px; border-bottom: 2px solid var(--color-divider); } .barra-sala .sala-codigo-grande { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 9vw, 56px); line-height: 1; letter-spacing: .14em; margin-top: 6px; } .barra-sala .sala-enlace { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--color-accent-700); word-break: break-all; } .barra-sala .sala-explica { margin: 10px 0 0; font-size: 13.5px; color: var(--color-neutral-700); max-width: 52ch; } .barra-sala .sala-acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } /* el mini-reproductor se apila encima (la altura real de la barra la mide sala.js, porque la tarjeta desplegada la cambia), y el pie deja sitio a los dos */ body.con-sala .minireproductor { bottom: var(--alto-barra-sala, 52px); } body.con-sala .pie .pie-fila { padding-bottom: calc(var(--alto-barra-sala, 52px) + 24px); } body.con-sala.con-mini .pie .pie-fila { padding-bottom: calc(var(--alto-barra-sala, 52px) + 100px); } @media (max-width: 560px) { body.con-sala.con-mini .pie .pie-fila { padding-bottom: calc(var(--alto-barra-sala, 52px) + 124px); } .barra-sala .sala-fila .btn { padding-inline: 10px; font-size: 12.5px; } } @media (max-width: 416px) { /* VOLVER + SALIR (o INVITAR + CERRAR) y el estado no caben en una fila de 320 px */ .barra-sala .sala-fila { flex-wrap: wrap; row-gap: 6px; } .barra-sala .sala-estado { flex: 1 1 auto; white-space: normal; } .barra-sala .espacio { display: none; } .barra-sala .sala-fila .btn { margin-left: auto; } .barra-sala .sala-fila .btn + .btn { margin-left: 0; } /* el propio código abre la tarjeta: INVITAR sobra donde no cabe */ .barra-sala #sala-invitar { display: none !important; } } @media (pointer: coarse) { .barra-sala .sala-codigo { min-height: 44px; } } /* ─── portada y página de entrada ─── */ .seccion-sala { padding-top: 8px; padding-bottom: 28px; } .seccion-sala .descripcion { margin: 10px 0 0; font-size: 14px; color: var(--color-neutral-700); max-width: 60ch; } .form-sala { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; } .form-sala .input { width: 9ch; min-width: 120px; font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; text-align: center; } .form-sala .btn-abrir-sala { margin-left: auto; } .vista-sala { padding-top: 18px; padding-bottom: 70px; max-width: 720px; } .vista-sala .sala-titulo { margin: 8px 0 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.04; } .vista-sala .sala-palabra { color: var(--color-accent); letter-spacing: .1em; } .vista-sala .sala-mensaje { margin: 14px 0 0; font-size: 15.5px; max-width: 56ch; } .vista-sala .sala-mensaje.error { color: var(--color-accent-700); } @media (max-width: 560px) { .form-sala .btn-abrir-sala { margin-left: 0; flex: 1 1 100%; justify-content: center; } } /* ─── favoritas (solo en el dispositivo) ─── */ .cancion-titulo-fila { display: flex; align-items: flex-start; gap: 10px; } .cancion-titulo-fila h1 { min-width: 0; flex: 1; } /* centrado con la PRIMERA línea del h1 (1,04 de interlineado sobre su clamp), tenga el título una línea o tres */ .btn-favorita { flex: none; margin-top: calc(8px + (1.04 * clamp(30px, 5vw, 52px) - 36px) / 2); color: var(--color-neutral-600); } @media (pointer: coarse) { .btn-favorita { margin-top: calc(8px + (1.04 * clamp(30px, 5vw, 52px) - 44px) / 2); } } .btn-favorita:hover { color: var(--color-accent); } .btn-favorita .icono-corazon-lleno { display: none; } .btn-favorita[aria-pressed="true"] { color: var(--color-accent); } .btn-favorita[aria-pressed="true"] .icono-corazon-lleno { display: block; } .btn-favorita[aria-pressed="true"] .icono-corazon-vacio { display: none; } /* el hueco se reserva siempre: si apareciera y desapareciera, las pestañas y la barra saltarían 27 px bajo el dedo dos veces */ .aviso-favorita { margin: 6px 0 0; min-height: 1.55em; font-size: 12.5px; color: var(--color-accent-700); visibility: hidden; } .aviso-favorita.visible { visibility: visible; } /* la fila de la portada y el corazón de la cabecera solo existen si hay favoritas: cuelgan de , que el estampa antes del primer pintado (sin salto al cargar) */ #btn-favoritas, .seccion-favoritas { display: none; } :root[data-favoritas] #btn-favoritas { display: inline-flex; color: var(--color-accent); } :root[data-favoritas] .seccion-favoritas { display: block; } #btn-favoritas .icono-corazon-vacio { display: none; } .seccion-favoritas { padding-bottom: 28px; } .fila-favoritas { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; border-top: 2px solid var(--color-regla); padding-top: 10px; } .fila-favoritas:hover { color: var(--color-accent-700); } .fila-favoritas .regla-rotulo { flex: 1; display: flex; align-items: center; gap: 8px; border-top: 0; padding-top: 0; } .fila-favoritas .regla-rotulo svg { color: var(--color-accent); flex: none; } .fila-favoritas .regla-rotulo .icono-corazon-vacio { display: none; } .fila-favoritas .cuenta { font-weight: 400; letter-spacing: 0; color: var(--color-neutral-700); } .fila-favoritas .ver-todas { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--color-accent); white-space: nowrap; } /* la página entera */ .vista-favoritas { padding-top: 18px; padding-bottom: 70px; max-width: 900px; } .vista-favoritas h1 { margin: 8px 0 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.04; } .vista-favoritas h1 .cuenta { font-size: .5em; font-weight: 400; color: var(--color-neutral-600); margin-left: 8px; vertical-align: middle; } .vista-favoritas .descripcion { margin: 10px 0 0; max-width: 60ch; color: var(--color-neutral-700); font-size: 14px; } .vista-favoritas .resultados { margin-top: 20px; } .vista-favoritas .caja-vacia { margin-top: 20px; } @media (pointer: coarse) { .fila-favoritas { min-height: 44px; } }