/* * La hoja de estilos de Verses. * * Escrita a mano y sin generador: son unas cuantas pantallas, y un paso de * compilación de CSS obligaría a tener Node instalado para cambiar un margen. * Belenus compila Tailwind porque allí hay decenas de secciones de marketing; * aquí el sitio entero cabe en este fichero. * * Pero «a mano» no es «sin sistema». Todo lo que se repite —tamaños de letra, * espacios, radios, sombras, tiempos— sale de una escala declarada arriba. Un * valor suelto en mitad de una regla es un error, no un atajo: es así como una * hoja acaba con nueve grises y siete radios distintos y el sitio deja de * parecer de una sola pieza. * * El tema son variables y se cambia poniendo `data-theme` en el . El * valor lo escribe el script en línea del layout, antes de pintar: si se * esperara a esta hoja, la página aparecería un instante con el tema que no es. * * Claro y oscuro son los dos de primera. No hay un tema «de verdad» y otro * derivado a base de invertir: cada uno tiene sus superficies, sus bordes y sus * sombras, porque en claro la profundidad se hace con sombra y en oscuro con * luz. Lo que sí es común es la escala: los mismos pasos, distintos valores. */ /* ════════════════════════════════════════════════════════════════════════════ Escalas ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── Editorial: los saltos de arriba son grandes y los de abajo finos. Lo que mata una página es que el titular de una sección y el párrafo de al lado midan casi lo mismo — entonces no hay jerarquía, hay texto. */ --t-micro: 0.6875rem; /* 11 · rótulos de sección, marcas */ --t-mini: 0.75rem; /* 12 · pastillas, meta */ --t-pie: 0.8125rem; /* 13 · pies de figura, notas */ --t-menor: 0.875rem; /* 14 · interfaz secundaria */ --t-base: 1rem; /* 16 · el cuerpo */ --t-guia: 1.0625rem; /* 17 · entradillas cortas */ --t-h3: 1.1875rem; --t-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); --t-h1: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); /* El tope es 3.75rem y no más: el titular vive en la mitad izquierda del hero, no a lo ancho de la página, y a 4.5rem «Una canción no cabe» se parte en tres renglones y deja de ser una frase. */ --t-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); /* Interlineado por tamaño. Un titular a 4.5rem con `line-height: 1.6` se desmonta en líneas sueltas; un párrafo a 1rem con 1.15 no se lee. */ --i-apretado: 1.05; --i-titulo: 1.15; --i-medio: 1.35; --i-lectura: 1.65; /* El tracking negativo en los tamaños grandes es lo que separa un titular compuesto de uno escrito. Inter lo necesita a partir de ~2rem. */ --k-display: -0.035em; --k-titulo: -0.022em; --k-medio: -0.011em; --k-rotulo: 0.09em; --p-normal: 400; --p-medio: 500; --p-fuerte: 600; --p-titular: 680; /* ── Espacio ────────────────────────────────────────────────────────────── Base 4. No se usan valores fuera de esta escala. */ --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 2.5rem; --e8: 3rem; --e9: 4rem; --e10: 5.5rem; --e11: 7rem; /* El aire entre bloques de una página larga crece con la pantalla: 4rem en un móvil son un respiro y en un monitor de 27" son un renglón. */ --e-bloque: clamp(3.5rem, 2rem + 6vw, 7rem); /* ── Radios ─────────────────────────────────────────────────────────────── Cuatro pasos, no uno. Que una pastilla de 20px de alto y una tarjeta de 300 lleven el mismo radio es lo que hace que nada parezca de su tamaño. */ --r-xs: 6px; --r-s: 9px; --r-m: 13px; --r-g: 18px; --r-pastilla: 999px; /* El nombre viejo, que sigue vivo en sitios que no merecen tocarse. */ --radio: var(--r-m); /* ── Movimiento ─────────────────────────────────────────────────────────── Una sola curva para todo: sale rápido y frena. Dos duraciones, porque tres son indistinguibles. */ --curva: cubic-bezier(0.2, 0.75, 0.25, 1); --v-rapido: 110ms; --v-normal: 200ms; /* ── Medidas ──────────────────────────────────────────────────────────── */ --ancho: 71rem; /* el contenedor */ --ancho-lectura: 36rem; /* la medida cómoda de un párrafo */ --ancho-estrecho: 30rem; /* formularios */ --margen: clamp(1.25rem, 5vw, 3rem); --tactil: 44px; /* el área que se toca, por fina que se dibuje */ } /* ════════════════════════════════════════════════════════════════════════════ Tema claro — papel ════════════════════════════════════════════════════════════════════════════ */ :root { /* Un blanco levemente cálido en vez del gris azulado de antes. Sobre él la tinta negra descansa; el blanco puro con texto casi negro vibra, y una página que vibra cansa a los diez minutos de escribir en ella. */ --fondo: #faf9f7; --fondo-hondo: #f1efec; /* lo que se hunde: campos, sombras de bloque */ --fondo-alto: #ffffff; /* lo que se levanta: tarjetas, menús */ --fondo-mas-alto: #ffffff; --borde: #e7e4de; --borde-medio: #d5d1c8; /* el que se ve de verdad: campos, tablas */ --texto: #17161a; --texto-medio: #45434c; /* párrafos largos, que en negro puro pesan */ --texto-apagado: #6c6975; --texto-tenue: #a29fab; /* El acento manda en enlaces, foco y estado; no en los botones. Un morado saturado en cada botón primario es lo que hace que una web parezca hecha con la plantilla de todo el mundo. El botón primario va en tinta. */ --acento: #5b45e0; --acento-texto: #ffffff; /* lo que se escribe ENCIMA del acento */ --acento-suave: #efecfd; /* el acento rebajado a fondo */ --acento-borde: #cfc6fa; /* La tinta: el botón primario, el titular, el subrayado que importa. */ --tinta: #17161a; --tinta-encima: #faf9f7; --tinta-hover: #000000; --peligro: #b3392c; --peligro-suave: #fbeeec; --exito: #14724f; /* Sombras de papel: cortas, muy poco opacas y en dos capas. La de arriba dibuja el canto, la de abajo separa de la página. Una sola sombra grande y negra es lo que se ve en las plantillas y lo que hace que una tarjeta parezca pegada con celo. */ --sombra-1: 0 1px 2px rgb(24 22 26 / 0.05), 0 1px 1px rgb(24 22 26 / 0.03); --sombra-2: 0 1px 2px rgb(24 22 26 / 0.05), 0 4px 12px rgb(24 22 26 / 0.06); --sombra-3: 0 2px 4px rgb(24 22 26 / 0.06), 0 12px 32px rgb(24 22 26 / 0.10); /* En claro, el rótulo de una sección va con su color tal cual. */ --tipo-rotulo: var(--tipo); color-scheme: light; } /* ════════════════════════════════════════════════════════════════════════════ Tema oscuro — noche ════════════════════════════════════════════════════════════════════════════ */ [data-theme='dark'] { --fondo: #0c0c0f; --fondo-hondo: #08080a; --fondo-alto: #141418; --fondo-mas-alto: #1c1c22; --borde: #26262e; --borde-medio: #35353f; --texto: #edecef; --texto-medio: #c2c0c9; --texto-apagado: #918e9b; --texto-tenue: #5d5a66; --acento: #a896ff; --acento-texto: #0c0c0f; --acento-suave: #1c1930; --acento-borde: #382f66; /* En oscuro la tinta se da la vuelta: el botón primario es claro sobre fondo negro, que es como se lee un botón primario de noche. */ --tinta: #f0eeea; --tinta-encima: #0c0c0f; --tinta-hover: #ffffff; --peligro: #e8695a; --peligro-suave: #2a1614; --exito: #3ec98d; /* De noche la profundidad no la hace la sombra —sobre negro no se ve— sino la superficie más clara y un filo de luz arriba. La sombra se queda para lo que flota de verdad: menús y la vista de foco. */ --sombra-1: 0 1px 0 rgb(255 255 255 / 0.03) inset; --sombra-2: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 4px 16px rgb(0 0 0 / 0.4); --sombra-3: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 16px 40px rgb(0 0 0 / 0.55); /* El canto de color es el mismo en los dos temas —la forma de la canción no puede cambiar al anochecer— pero el rótulo escrito con ese mismo color no se lee sobre negro. Se aclara sólo la letra, no el canto. */ --tipo-rotulo: color-mix(in oklab, var(--tipo) 72%, white); color-scheme: dark; } /* ── Un color por tipo de sección ────────────────────────────────────────── La forma de la canción se reconoce por el color antes que por el rótulo, que es de lo que va el producto. El mismo en claro y en oscuro, a propósito. Están tocados respecto a los originales: eran los colores planos de 2013 —el rojo ladrillo, el turquesa— y se notaba la década. Mismo tono, la saturación bajada y la luminosidad puesta donde se lee sobre papel y sobre negro. Si cambian aquí, cambian en `tokens.dart` de la app. */ :root, [data-theme='dark'] { --intro: #7f8ca6; --verse: #4276d4; --pre-chorus: #c9843c; --chorus: #c8483a; --hook: #9558bd; --bridge: #16977f; --outro: #79868a; } /* ════════════════════════════════════════════════════════════════════════════ Cimientos ════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { /* El ancla de un enlace interno no debe quedar debajo de la cabecera pegajosa. */ scroll-padding-top: var(--e9); -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; background: var(--fondo); color: var(--texto); font-family: Inter, system-ui, -apple-system, sans-serif; font-size: var(--t-base); line-height: var(--i-lectura); /* La barra del móvil se come el fondo si no se llega hasta abajo. */ min-height: 100dvh; /* Inter trae versalitas y cifras tabulares apagadas por defecto. Las cifras proporcionales bailan en una tabla de números del panel. */ font-feature-settings: 'cv05' 1, 'cv08' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; } a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 0.2em; transition: color var(--v-rapido) var(--curva), text-decoration-color var(--v-rapido) var(--curva); } a:hover { text-decoration-color: currentColor; } /* Un foco visible y del mismo color en todo el sitio. Nunca `outline: none` sin poner otra cosa en su lugar: quien navega con teclado se queda sin saber dónde está. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-xs); } img, svg { display: block; max-width: 100%; } /* Que se pueda saltar la cabecera con el teclado. Sale del flujo hasta que recibe el foco: quien no usa teclado no lo ve, quien lo usa lo agradece. */ .saltar { position: absolute; left: -9999px; } .saltar:focus { left: var(--e4); top: var(--e4); z-index: 100; background: var(--fondo-alto); border: 1px solid var(--borde-medio); box-shadow: var(--sombra-2); padding: var(--e2) var(--e4); border-radius: var(--r-s); } /* ── Tipografía ──────────────────────────────────────────────────────────── Los títulos no heredan el interlineado de lectura ni el peso del cuerpo. Se declaran una vez aquí y no se vuelven a tocar por pantalla. */ h1, h2, h3 { font-weight: var(--p-titular); line-height: var(--i-titulo); letter-spacing: var(--k-titulo); text-wrap: balance; margin: 0; } h1 { font-size: var(--t-h1); margin: 0 0 var(--e4); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); letter-spacing: var(--k-medio); } p { margin: 0 0 var(--e4); } p:last-child { margin-bottom: 0; } /* El párrafo largo va en gris tinta y no en negro puro: en un bloque de seis líneas el negro absoluto pesa y el ojo se cansa antes de acabarlo. */ .texto-largo p, .entradilla, .problema p, .caracteristicas p { color: var(--texto-medio); } .apagado { color: var(--texto-apagado); } /* El rótulo de sección: mono, versalita y espaciado. Es la voz editorial del sitio —lo que en una revista sería el ladillo— y lo que hace que la tipografía parezca compuesta y no puesta. */ .etiqueta { display: flex; align-items: center; gap: var(--e3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: var(--p-medio); text-transform: uppercase; letter-spacing: var(--k-rotulo); line-height: 1; color: var(--texto-apagado); margin: 0 0 var(--e5); } /* La regla que sale del rótulo y se come el resto del ancho. Cuesta una pseudo-clase y es la diferencia entre un rótulo y un encabezado de sección. */ .etiqueta::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--borde); } .nota, .vacio, .pie-figura { color: var(--texto-apagado); font-size: var(--t-pie); line-height: var(--i-medio); } /* La nota que va detrás de un formulario necesita aire: pegada al botón de enviar parecía parte del botón. */ .formulario + .nota { margin-top: var(--e5); max-width: var(--ancho-lectura); } small { font-size: var(--t-pie); color: var(--texto-apagado); line-height: var(--i-medio); } /* ════════════════════════════════════════════════════════════════════════════ Cabecera y pie ════════════════════════════════════════════════════════════════════════════ */ /* * La barra va pegada arriba y con el fondo desenfocado. Pegada porque en la * canción hace falta —volver y el estado tienen que estar siempre— y una vez * que está pegada en una pantalla, no puede estar suelta en las demás. * * El filo de abajo es de un gris a medias con el fondo: se ve cuando hay algo * pasando por debajo y desaparece contra la página vacía. */ .barra { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 82%, transparent); border-bottom: 1px solid transparent; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: border-color var(--v-normal) var(--curva), background-color var(--v-normal) var(--curva); } /* Lo pone `tema.js` en cuanto la página se ha movido un pelo. Sin esto el filo se ve cortando el aire en una página que está arriba del todo. */ .barra.desplazada { border-bottom-color: var(--borde); background: color-mix(in srgb, var(--fondo) 92%, transparent); } /* Sin desenfoque —Firefox con la aceleración apagada, navegadores viejos— el fondo tiene que ser opaco o el texto se lee encima del contenido. */ @supports not (backdrop-filter: blur(1px)) { .barra { background: var(--fondo); } } .cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e3) var(--margen); max-width: var(--ancho); margin: 0 auto; min-height: 60px; } .marca { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-guia); font-weight: var(--p-titular); letter-spacing: var(--k-medio); text-decoration: none; color: var(--texto); } /* El isotipo, no un punto: las tres barras son las secciones de una canción vistas de lejos, que es de lo que va esto. Un círculo de acento no decía nada y encima se parecía a un aviso sin leer. Las barras de fuera van en `currentColor` y la del medio en el acento — véase el del layout. */ .marca-logo { width: 1.2rem; height: 1.2rem; flex: none; } .cabecera-acciones { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-menor); } .enlace-idioma { color: var(--texto-apagado); text-decoration: none; padding: var(--e2) var(--e2); border-radius: var(--r-s); transition: color var(--v-rapido) var(--curva); } .enlace-idioma:hover { color: var(--texto); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); display: inline-grid; place-items: center; font-size: var(--t-mini); font-weight: var(--p-fuerte); text-decoration: none; overflow: hidden; flex: none; /* Un filo del color del fondo separa la foto de lo que tenga detrás sin dibujar un borde gris encima de la cara de nadie. */ box-shadow: 0 0 0 1px var(--borde); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ── El pie ───────────────────────────────────────────────────────────────── */ .pie-marco { margin-top: auto; border-top: 1px solid var(--borde); background: var(--fondo); } .pie { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--margen); color: var(--texto-apagado); font-size: var(--t-pie); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--e4); } .pie nav { display: flex; gap: var(--e5); } .pie a { text-decoration: none; } .pie a:hover { color: var(--texto); } /* ════════════════════════════════════════════════════════════════════════════ El contenedor ════════════════════════════════════════════════════════════════════════════ */ main { flex: 1 1 auto; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: var(--e7) var(--margen) var(--e9); } main.estrecho { max-width: calc(var(--ancho-estrecho) + var(--margen) * 2); padding-top: var(--e9); } main.centrado { text-align: center; padding-top: var(--e10); } /* ════════════════════════════════════════════════════════════════════════════ Botones ════════════════════════════════════════════════════════════════════════════ */ /* * Tres pesos y no cinco: tinta (lo que quieres que se pulse), contorno (lo * demás) y fantasma (lo que no debería competir con nada). El acento no pinta * botones; pinta enlaces, foco y estado. */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); border: 1px solid var(--borde-medio); background: var(--fondo-alto); color: var(--texto); border-radius: var(--r-s); padding: 0 var(--e4); min-height: 2.5rem; font: inherit; font-size: var(--t-menor); font-weight: var(--p-medio); letter-spacing: -0.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--sombra-1); transition: background-color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva), color var(--v-rapido) var(--curva), box-shadow var(--v-rapido) var(--curva), transform var(--v-rapido) var(--curva); } .boton:hover { border-color: color-mix(in oklab, var(--texto) 28%, var(--borde-medio)); box-shadow: var(--sombra-2); } /* Se hunde un pelo al pulsar. Es lo único que le dice a un dedo que el toque ha entrado, antes de que la página conteste. */ .boton:active { transform: translateY(1px); box-shadow: var(--sombra-1); } .boton-fuerte { background: var(--tinta); color: var(--tinta-encima); border-color: var(--tinta); font-weight: var(--p-fuerte); } .boton-fuerte:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); color: var(--tinta-encima); } .boton-fino { min-height: 2.125rem; padding: 0 var(--e3); font-size: var(--t-pie); } .boton-peligro { color: var(--peligro); } .boton-peligro:hover { background: var(--peligro-suave); border-color: color-mix(in oklab, var(--peligro) 45%, transparent); } /* Sin caja hasta que se apunta. Para lo que tiene que estar y no tiene que pesar: borrar una canción desde la lista, quitar a alguien. */ .boton-fantasma { background: none; border-color: transparent; box-shadow: none; color: var(--texto-apagado); } .boton-fantasma:hover { background: var(--fondo-hondo); border-color: transparent; box-shadow: none; color: var(--texto); } .boton-fantasma.boton-peligro:hover { background: var(--peligro-suave); color: var(--peligro); } .boton:disabled, .boton[aria-disabled='true'] { opacity: 0.45; cursor: default; box-shadow: none; transform: none; } .en-linea { display: inline-flex; align-items: center; gap: var(--e2); } /* ════════════════════════════════════════════════════════════════════════════ Avisos ════════════════════════════════════════════════════════════════════════════ */ /* `display: block` gana al `display: none` que la hoja del navegador aplica a `[hidden]`, así que sin esta primera regla el aviso de sincronización de la canción —que nace oculto— sale siempre, vacío y con su filo de color. Es el mismo tropiezo que ya tenían los menús de sección. */ .error[hidden], .aviso[hidden] { display: none; } .error, .aviso { display: block; border: 1px solid var(--borde); border-left: 3px solid var(--acento); background: var(--fondo-alto); padding: var(--e3) var(--e4); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--t-menor); line-height: var(--i-medio); margin: 0 0 var(--e5); box-shadow: var(--sombra-1); } .error { border-left-color: var(--peligro); color: var(--peligro); background: var(--peligro-suave); border-color: color-mix(in oklab, var(--peligro) 22%, transparent); } .aviso strong { display: block; color: var(--texto); font-weight: var(--p-fuerte); } /* ════════════════════════════════════════════════════════════════════════════ Formularios ════════════════════════════════════════════════════════════════════════════ */ .formulario { display: grid; gap: var(--e4); margin: var(--e5) 0 0; } .formulario label { display: grid; gap: var(--e2); font-size: var(--t-menor); font-weight: var(--p-medio); color: var(--texto-medio); } .formulario label.en-linea { display: inline-flex; font-weight: var(--p-normal); color: var(--texto); } .formulario fieldset { border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--fondo-alto); padding: var(--e4); display: grid; gap: var(--e3); margin: 0; } .formulario legend { padding: 0 var(--e2); font-size: var(--t-mini); font-weight: var(--p-fuerte); text-transform: uppercase; letter-spacing: var(--k-rotulo); font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--texto-apagado); } /* El botón de un formulario no se estira de lado a lado: se pone donde empieza el texto y mide lo que dice. */ .formulario > .boton { justify-self: start; margin-top: var(--e1); } input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea { font: inherit; font-size: var(--t-base); padding: var(--e3); border: 1px solid var(--borde-medio); border-radius: var(--r-s); background: var(--fondo-alto); color: var(--texto); width: 100%; min-height: var(--tactil); transition: border-color var(--v-rapido) var(--curva), box-shadow var(--v-rapido) var(--curva); } input::placeholder, textarea::placeholder { color: var(--texto-tenue); } /* El foco de un campo es un anillo del acento y no el `outline` del sistema: así encaja con el radio del campo en vez de dibujar un rectángulo alrededor. */ input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, input[type='search']:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 22%, transparent); } /* Un campo bloqueado tiene que parecerlo, o se intenta escribir en él. */ input:disabled, .formulario input:disabled { color: var(--texto-apagado); background: var(--fondo-hondo); border-color: var(--borde); cursor: not-allowed; } input[type='radio'], input[type='checkbox'] { accent-color: var(--acento); width: 1.05rem; height: 1.05rem; margin: 0; flex: none; } /* ── Pestañas ────────────────────────────────────────────────────────────── */ .pestañas { display: flex; gap: var(--e5); border-bottom: 1px solid var(--borde); margin: 0 0 var(--e5); } .pestañas a { padding: var(--e3) 0; text-decoration: none; color: var(--texto-apagado); font-size: var(--t-menor); font-weight: var(--p-medio); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva); } .pestañas a:hover { color: var(--texto); } .pestañas a.activa { color: var(--texto); border-bottom-color: var(--tinta); } /* ── Rejillas ────────────────────────────────────────────────────────────── */ .rejilla-3 { display: grid; gap: var(--e6) var(--e7); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .rejilla-4 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* ════════════════════════════════════════════════════════════════════════════ La portada ════════════════════════════════════════════════════════════════════════════ */ .portada { padding-top: var(--e8); } /* * El hero es de dos columnas en pantalla ancha: el argumento a la izquierda y * la canción de ejemplo a la derecha. Antes era una columna de texto de 44rem * varada en una página de 68: media pantalla en blanco y el producto sin * enseñar hasta el tercer scroll. Lo que vende esto es ver una canción hecha * de secciones de colores, así que sale arriba y sin pedir permiso. */ .hero { display: grid; gap: var(--e8); align-items: center; /* Sin hueco abajo: el aire entre bloques lo pone el margen de la sección siguiente. Poniéndolo en los dos sitios salían catorce rem de nada. */ padding: var(--e6) 0 0; } @media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--e9); padding-top: var(--e8); } } .hero-texto { min-width: 0; } .hero-demo { margin: 0; min-width: 0; } .hero-demo .etiqueta { margin-bottom: var(--e3); } /* Dentro de la demostración las secciones son una miniatura, no la pantalla de escribir: menos aire, letra menor y sin sombra, que sobre el marco hundido no hace nada. */ .cancion-demo .seccion { padding: var(--e2) var(--e3) var(--e2) var(--e4); box-shadow: none; border-radius: var(--r-s); } .cancion-demo .seccion::before { top: var(--e1); bottom: var(--e1); } .cancion-demo .seccion p { font-size: var(--t-menor); color: var(--texto-medio); margin-top: 0.15rem; } .hero h1 { font-size: var(--t-display); line-height: var(--i-apretado); letter-spacing: var(--k-display); margin: 0 0 var(--e5); /* El corte de línea lo decide el `
` de la plantilla, que es donde acaba la primera mitad de la frase. `balance` repartía las palabras por su cuenta y dejaba «móvil.» solo en un renglón. */ text-wrap: pretty; } /* La segunda línea del titular, en gris. Es la mitad que remata la frase y va más apagada para que el ojo entre por la primera. */ .hero h1 .apagado { color: var(--texto-apagado); } .entradilla { font-size: var(--t-guia); line-height: var(--i-medio); max-width: 34rem; margin: 0 0 var(--e6); } .acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin: 0; } /* En un móvil los dos botones se ponen uno debajo del otro y ocupan el ancho. Encogidos y pegados a la izquierda parecen dos enlaces sueltos; a lo ancho son lo que son, la decisión de la pantalla. */ @media (max-width: 30rem) { .acciones { display: grid; gap: var(--e2); } } /* Los botones del hero son más grandes que los de la interfaz: es la única decisión de la página y tiene que pesar más que «volver». */ .hero .boton, .cierre .boton { min-height: 2.875rem; padding: 0 var(--e5); font-size: var(--t-base); border-radius: var(--r-m); } .problema, .demo, .caracteristicas, .cierre { margin: var(--e-bloque) 0; } /* ── Los problemas, numerados ────────────────────────────────────────────── Numerados porque son tres cosas que pasan en orden —se reparte, se copia, se pega— y porque un número en mono le da al bloque un ancla visual que tres párrafos sueltos no tienen. */ .problemas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e6) var(--e7); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: problema; } .problemas li { counter-increment: problema; border-top: 1px solid var(--borde); padding-top: var(--e4); } .problemas li::before { content: counter(problema, decimal-leading-zero); display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-mini); font-weight: var(--p-medio); color: var(--texto-tenue); margin-bottom: var(--e3); } .problemas h2, .caracteristicas h2 { font-size: var(--t-h3); margin: 0 0 var(--e2); } .caracteristicas article { border-top: 1px solid var(--borde); padding-top: var(--e4); } /* ── La canción de ejemplo ───────────────────────────────────────────────── La demostración es HTML servido y no una captura: pesa menos que una imagen, se lee con un lector de pantalla y se traduce sola. Va sobre un marco hundido y no sobre otra tarjeta blanca: tarjetas blancas dentro de una tarjeta blanca es lo que hacía que no se viera dónde acababa una y empezaba la otra. */ .cancion-demo { display: grid; gap: var(--e2); background: var(--fondo-hondo); border: 1px solid var(--borde); border-radius: var(--r-g); padding: var(--e4); margin: 0; } .cancion-demo-titulo { display: flex; align-items: center; gap: var(--e2); font-weight: var(--p-fuerte); font-size: var(--t-menor); letter-spacing: var(--k-medio); color: var(--texto-medio); margin: 0 0 var(--e1); padding: 0 var(--e1); } /* Los tres puntos de una ventana, en pequeño. No es decoración gratuita: dice «esto es una pantalla» sin tener que meter una captura de 200 kB. */ .cancion-demo-titulo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--borde-medio); box-shadow: 12px 0 0 var(--borde-medio), 24px 0 0 var(--borde-medio); margin-right: 22px; flex: none; } .pie-figura { margin: var(--e3) 0 0; padding-left: var(--e1); } /* El cierre no va centrado a lo ancho de la página entera: se centra el bloque y el texto se queda en su medida. */ .cierre { text-align: center; display: grid; justify-items: center; gap: var(--e4); border-top: 1px solid var(--borde); padding-top: var(--e9); } .cierre h2 { font-size: var(--t-h1); max-width: 20ch; } .cierre p { max-width: 46ch; color: var(--texto-medio); margin: 0; } /* ════════════════════════════════════════════════════════════════════════════ Secciones de una canción ════════════════════════════════════════════════════════════════════════════ */ /* * La pieza central del producto. El color del tipo va en el canto izquierdo: * se ve de reojo al recorrer la canción sin tener que leer el rótulo de cada * una. * * El canto es un pseudo-elemento y no un `border-left`: así puede tener su * propio radio y no queda el pico cuadrado contra la esquina redonda de la * tarjeta, que es de las cosas que más delatan una interfaz sin rematar. */ .seccion { position: relative; background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: var(--r-m); padding: var(--e3) var(--e4) var(--e4) var(--e5); box-shadow: var(--sombra-1); transition: border-color var(--v-rapido) var(--curva), box-shadow var(--v-rapido) var(--curva); } .seccion::before { content: ''; position: absolute; left: 0; top: var(--e2); bottom: var(--e2); width: 3px; border-radius: 0 3px 3px 0; background: var(--tipo, var(--borde-medio)); } .seccion:hover { border-color: var(--borde-medio); } .seccion p { margin: var(--e1) 0 0; white-space: pre-wrap; } .tipo-intro { --tipo: var(--intro); } .tipo-verse { --tipo: var(--verse); } .tipo-pre-chorus { --tipo: var(--pre-chorus); } .tipo-chorus { --tipo: var(--chorus); } .tipo-hook { --tipo: var(--hook); } .tipo-bridge { --tipo: var(--bridge); } .tipo-outro { --tipo: var(--outro); } .seccion-rotulo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: var(--p-fuerte); text-transform: uppercase; letter-spacing: var(--k-rotulo); line-height: 1; color: var(--tipo-rotulo, var(--texto-apagado)); } /* Una repetición no es una copia: el mismo bloque en otro sitio. Se marca porque escribir en ella cambia las demás, y eso hay que verlo antes. */ .marca-vinculada { display: inline-flex; align-items: center; gap: var(--e1); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); line-height: 1; border: 1px solid var(--borde); background: var(--fondo-hondo); border-radius: var(--r-pastilla); padding: 0.25rem var(--e2); color: var(--texto-apagado); margin-left: var(--e2); } /* ════════════════════════════════════════════════════════════════════════════ La lista de canciones ════════════════════════════════════════════════════════════════════════════ */ .lista-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); flex-wrap: wrap; margin: 0 0 var(--e6); padding-bottom: var(--e4); border-bottom: 1px solid var(--borde); } .lista-cabecera h1 { margin: 0; } .tarjetas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } /* * La tarjeta entera es el enlace y las acciones flotan encima. Antes el cuerpo * era el enlace y debajo iba un botón «Borrar» con todo su contorno rojo: la * cosa más visible de cada tarjeta era la de destruirla. Ahora borrar está * arriba a la derecha, sin caja, y sólo aparece del todo al apuntar la * tarjeta — en un móvil, donde no hay apuntar, se queda visible pero apagado. */ .tarjeta { position: relative; background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: var(--r-m); box-shadow: var(--sombra-1); transition: border-color var(--v-normal) var(--curva), box-shadow var(--v-normal) var(--curva), transform var(--v-normal) var(--curva); } .tarjeta:hover { border-color: var(--borde-medio); box-shadow: var(--sombra-2); transform: translateY(-2px); } /* El foco del teclado tiene que verse en la tarjeta, no sólo en el enlace de dentro, que ocupa toda la caja y no se distingue. */ .tarjeta:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 20%, transparent); } .tarjeta-cuerpo { display: block; padding: var(--e4); padding-right: var(--e8); text-decoration: none; color: inherit; min-height: 100%; } .tarjeta-cuerpo:focus-visible { outline: none; } .tarjeta-cuerpo h2 { font-size: var(--t-h3); margin: 0 0 var(--e2); /* Un título largo no puede empujar la tarjeta: dos líneas y elipsis. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Una canción sin título no se anuncia con un hueco: se dice en cursiva y apagado, que es lo que es. */ .tarjeta-cuerpo h2:has(+ .vistazo:empty), .tarjeta .sin-titulo { color: var(--texto-apagado); } .vistazo { color: var(--texto-apagado); font-size: var(--t-menor); line-height: var(--i-medio); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* Tres líneas de alto pase lo que pase: si no, las tarjetas de la fila quedan de alturas distintas y la rejilla se ve rota. */ min-height: calc(var(--t-menor) * var(--i-medio) * 3); } /* Salvo cuando no hay letra que enseñar: reservar tres renglones para nada deja un agujero en mitad de la tarjeta. */ .vistazo:empty { min-height: 0; } .meta { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-mini); color: var(--texto-apagado); margin: var(--e4) 0 0; } .papel { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); line-height: 1; letter-spacing: 0.02em; border: 1px solid var(--borde); background: var(--fondo-hondo); color: var(--texto-apagado); border-radius: var(--r-pastilla); padding: 0.3rem var(--e2); } .tarjeta-acciones { position: absolute; top: var(--e2); right: var(--e2); display: flex; gap: var(--e1); opacity: 0.55; transition: opacity var(--v-normal) var(--curva); } .tarjeta:hover .tarjeta-acciones, .tarjeta:focus-within .tarjeta-acciones { opacity: 1; } /* Con ratón se esconde del todo hasta que hace falta; con dedo no, porque no hay forma de «apuntar» antes de tocar. */ @media (hover: hover) and (pointer: fine) { .tarjeta-acciones { opacity: 0; } } .vacio { display: grid; justify-items: center; gap: var(--e4); border: 1px dashed var(--borde-medio); border-radius: var(--r-m); padding: var(--e8) var(--e4); text-align: center; margin: 0; } .vacio p { max-width: 32ch; margin: 0; } /* ════════════════════════════════════════════════════════════════════════════ La canción ════════════════════════════════════════════════════════════════════════════ */ .cancion { max-width: 48rem; padding-top: var(--e5); } /* * La barra de la canción. Va pegada debajo de la cabecera —de ahí el `top` * igual al alto de la cabecera— porque al bajar por una letra larga se sigue * necesitando el título, el estado y quién está dentro. */ .cancion-barra { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; flex-wrap: wrap; position: sticky; top: 60px; z-index: 10; background: var(--fondo); border-bottom: 1px solid var(--borde); margin-bottom: var(--e5); } /* * El título es un título, no un campo de formulario. Sin caja ni fondo hasta * que se apunta o se escribe en él: entonces sí aparece el campo, porque hay * que ver dónde se está escribiendo. Antes llevaba el contorno puesto siempre * y el nombre de la canción parecía el asunto de un correo. */ /* `input.` y no `.` a secas: el selector genérico de campos es `input[type='text']`, que pesa más que una clase suelta, y sin el tipo delante el título se quedaba con el fondo y el borde de un campo de formulario — que es justo lo que no queremos que parezca. */ input.cancion-titulo { flex: 1 1 12rem; min-width: 0; font-size: var(--t-h2); font-weight: var(--p-titular); letter-spacing: var(--k-titulo); line-height: var(--i-titulo); border-color: transparent; background: none; box-shadow: none; padding: var(--e2); margin-left: calc(var(--e2) * -1); min-height: 0; transition: background-color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva); } .cancion-titulo:hover:not(:read-only) { background: var(--fondo-hondo); } .cancion-titulo:focus { background: var(--fondo-alto); border-color: var(--acento); } .cancion-titulo:read-only { cursor: default; } .cancion-titulo::placeholder { color: var(--texto-tenue); font-weight: var(--p-medio); } /* El estado de la conexión: un punto y una palabra. El punto lleva el color y la palabra lo dice, porque un punto verde a secas no se lee con lector de pantalla ni se distingue con daltonismo. */ .estado { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-mini); font-weight: var(--p-medio); color: var(--texto-apagado); white-space: nowrap; } .estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* En vivo. No hace falta una clase nueva: la isla ya escribe `data-estado` con el estado del WebSocket, así que se cuelga de eso y no hay que recompilarla para que el punto se ponga verde. */ .estado[data-estado='connected'] { color: var(--exito); } .estado[data-estado='rechazado'], .estado[data-estado='disconnected'] { color: var(--peligro); } .presencia { display: flex; gap: calc(var(--e1) * -1); } .presencia span { position: relative; overflow: hidden; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-micro); font-weight: var(--p-fuerte); color: #fff; /* Se solapan un poco, como las fotos de quien está en una llamada, y el filo del fondo los separa. */ box-shadow: 0 0 0 2px var(--fondo); margin-left: -0.35rem; } .presencia span:first-child { margin-left: 0; } /* La foto va encima de la inicial, no en su lugar: si no llega, la isla quita la imagen y debajo sigue estando la letra. Nunca un hueco. */ .presencia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .secciones { display: grid; gap: var(--e3); } /* * Sin esto, la canción se sale de la pantalla en un móvil. * * Un elemento de rejilla no baja de su tamaño mínimo mientras no se le diga * (`min-width: auto`), y dentro de cada sección hay un `` —el rótulo— * que trae de fábrica un ancho intrínseco de unas veinte letras. Ese ancho * empujaba la sección a 422px dentro de una ventana de 390: la página cogía * scroll horizontal y las líneas de la letra quedaban cortadas por la derecha. * * Es el mismo motivo por el que los hijos de la cabecera de la sección lo * llevan también: ahí el que manda es `flex`, con la misma regla. */ .secciones > *, .seccion header > * { min-width: 0; } .seccion-texto, .secciones textarea { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-menor); line-height: 1.75; letter-spacing: -0.01em; color: var(--texto); } .secciones textarea { border: none; background: none; resize: none; padding: 0; min-height: 0; box-shadow: none; } .secciones textarea:focus { outline: none; border: none; box-shadow: none; } .cancion-acciones { display: flex; align-items: center; gap: var(--e2); margin: var(--e5) 0 var(--e8); flex-wrap: wrap; } /* Quien arrastra necesita ver dónde va a caer. */ .seccion.arrastrando { opacity: 0.4; } .seccion.destino { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 20%, transparent); } .tirador { display: grid; place-items: center; cursor: grab; color: var(--texto-tenue); background: none; border: none; font-size: var(--t-menor); line-height: 1; width: 1.5rem; height: 1.5rem; flex: none; border-radius: var(--r-xs); transition: color var(--v-rapido) var(--curva), background-color var(--v-rapido) var(--curva); } .tirador:hover { color: var(--texto-medio); background: var(--fondo-hondo); } .tirador:active { cursor: grabbing; } /* Con el dedo no se arrastra: `draggable` es cosa de ratón y no dispara nada en táctil. Un tirador que no tira es peor que no tenerlo, así que donde no sirve no se dibuja — para reordenar están «subir» y «bajar» del menú, que funcionan en todas partes. */ @media (pointer: coarse) { .tirador { display: none; } } /* ── La cabecera de una sección ──────────────────────────────────────────── El rótulo es un campo que no lo parece: se escribe encima y ya está. */ .seccion header { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); } .seccion header .seccion-rotulo { flex: 1 1 auto; min-width: 0; border: none; background: none; padding: var(--e1) var(--e2); margin-left: calc(var(--e2) * -1); border-radius: var(--r-xs); min-height: 0; font: inherit; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: var(--p-fuerte); text-transform: uppercase; letter-spacing: var(--k-rotulo); color: var(--tipo-rotulo, var(--texto-apagado)); transition: background-color var(--v-rapido) var(--curva); } input.seccion-rotulo:hover { background: var(--fondo-hondo); } input.seccion-rotulo:focus { outline: none; background: var(--fondo-hondo); box-shadow: none; border: none; } /* En estrecho la tarjeta sólo enseña: se toca para abrir el foco. */ .seccion.tocable { cursor: pointer; } .seccion.tocable:hover { border-color: var(--borde-medio); box-shadow: var(--sombra-2); } .seccion.tocable .seccion-texto { margin: var(--e1) 0 0; white-space: pre-wrap; } .seccion-texto.vacia { color: var(--texto-tenue); font-style: italic; } /* El `textarea` crece con lo que hay dentro: el alto lo pone el JavaScript con `scrollHeight`. `overflow: hidden` evita que asome una barra de un píxel mientras se ajusta. */ .secciones textarea { display: block; width: 100%; overflow: hidden; resize: none; } /* ════════════════════════════════════════════════════════════════════════════ Menús ════════════════════════════════════════════════════════════════════════════ */ .menu { position: relative; flex: none; } .menu-abrir, .tipo-abrir { display: grid; place-items: center; background: none; border: none; border-radius: var(--r-xs); /* Apagado, no tenue: el `⋯` es un botón y con el gris de las pistas se quedaba en 2.5 de contraste sobre blanco, por debajo de lo que se ve. */ color: var(--texto-apagado); cursor: pointer; font: inherit; font-size: var(--t-menor); line-height: 1; /* El área táctil es de 44px aunque el dibujo sea de 20. */ min-width: var(--tactil); min-height: var(--tactil); transition: color var(--v-rapido) var(--curva), background-color var(--v-rapido) var(--curva); } .menu-abrir:hover, .tipo-abrir:hover { color: var(--texto); background: var(--fondo-hondo); } .tipo-abrir { color: var(--tipo-rotulo, var(--texto-apagado)); min-width: 1.75rem; min-height: 1.75rem; } /* `display: grid` gana al `display: none` que la hoja del navegador aplica a `[hidden]`, así que sin esto los menús nacen abiertos: todos a la vez, uno por sección. */ .menu-lista[hidden] { display: none; } .menu-lista { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 11.5rem; display: grid; gap: 1px; padding: var(--e1); background: var(--fondo-mas-alto); border: 1px solid var(--borde-medio); border-radius: var(--r-m); box-shadow: var(--sombra-3); /* Aparece desde arriba, un palmo. Sin esto un menú «salta» y cuesta seguirlo con la vista. */ animation: menu-entra var(--v-rapido) var(--curva); transform-origin: top right; } @keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } .menu-opcion { display: flex; align-items: center; background: none; border: none; border-radius: var(--r-xs); color: var(--texto); cursor: pointer; font: inherit; font-size: var(--t-menor); padding: var(--e2) var(--e3); text-align: left; min-height: 2.25rem; transition: background-color var(--v-rapido) var(--curva); } .menu-opcion:hover { background: var(--fondo-hondo); } /* Una opción que está pero no se puede pulsar todavía —el tramo sin base—: * se ve apagada y dice qué falta en el `title`. */ .menu-opcion:disabled { color: var(--texto-tenue); cursor: default; } .menu-opcion:disabled:hover { background: none; } .menu-opcion-peligro { color: var(--peligro); } .menu-opcion-peligro:hover { background: var(--peligro-suave); } /* ── Las pastillas de tipo ───────────────────────────────────────────────── El selector de tipo son pastillas del color de cada uno: se elige por color, que es como se va a leer después. */ /* * El selector de tipo se abre hacia la derecha, así que en un móvil hay que * decirle hasta dónde puede llegar: con `min-width: 16rem` fijo, en una * pantalla de 390 se salía y «pre-coro» y «puente» quedaban cortados por el * borde. Ahora cabe siempre, y si no caben tres columnas caben dos. */ .tipo-lista { left: 0; right: auto; min-width: min(16rem, calc(100vw - var(--e6))); max-width: calc(100vw - var(--e6)); grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--e1); transform-origin: top left; } /* Y que no se abra fuera por el otro lado cuando la sección está pegada al borde derecho. */ .menu-lista { max-width: calc(100vw - var(--e6)); } .tipo-pastilla { border: 1px solid transparent; border-radius: var(--r-s); cursor: pointer; font: inherit; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: var(--p-fuerte); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--e2); min-height: 2.25rem; color: var(--tipo-rotulo); /* El color del tipo rebajado a fondo: la pastilla tiene que parecer tocable. */ background: color-mix(in oklab, var(--tipo) 13%, transparent); transition: background-color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva); } .tipo-pastilla:hover { background: color-mix(in oklab, var(--tipo) 22%, transparent); } .tipo-pastilla.activa { border-color: var(--tipo); } /* ════════════════════════════════════════════════════════════════════════════ La vista de foco ════════════════════════════════════════════════════════════════════════════ */ /* Una sección sola, a pantalla completa. En un móvil no cabe ver la canción entera y escribir a la vez, así que la lista enseña y esto escribe. `100dvh` y no `100vh`: con la barra del navegador y el teclado abiertos, `vh` mide la pantalla y no lo que queda a la vista, y el pie se va por debajo del teclado. */ body.con-foco { overflow: hidden; } .foco { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; height: 100dvh; background: var(--fondo); padding-bottom: env(safe-area-inset-bottom); animation: foco-entra var(--v-normal) var(--curva); } @keyframes foco-entra { from { opacity: 0; transform: translateY(8px); } } .foco-barra, .foco-pie { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--margen); flex: none; } .foco-barra { border-bottom: 1px solid var(--borde); } .foco-pie { border-top: 1px solid var(--borde); gap: var(--e3); } .foco-pie .boton { flex: 1 1 0; min-height: var(--tactil); } .foco-cuenta { margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-mini); color: var(--texto-apagado); font-variant-numeric: tabular-nums; } /* El cuerpo lleva el canto del color del tipo, como la tarjeta de la que viene: escribir a pantalla completa no puede hacer olvidar en qué parte de la canción se está. */ .foco-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; /* Y `min-width: 0`, por lo mismo que las secciones: aquí también hay un `` —el rótulo— con su ancho de fábrica, y sin esto la vista de foco se iba a 442px de ancho y el botón «siguiente» se quedaba fuera. */ min-width: 0; padding: var(--e4) var(--margen) 0; position: relative; } .foco-barra > *, .foco-pie > *, .foco-cuerpo > * { min-width: 0; } /* * El canto del tipo va **en la fila del rótulo**, no en el costado de la * pantalla. * * A toda altura y pegado al borde izquierdo parecía una barra de * desplazamiento y llegaba hasta el pie; recortado pero suelto a la izquierda * quedaba huérfano, a medio palmo de la palabra a la que se refiere. Pegado al * rótulo son una sola cosa: qué parte de la canción se está escribiendo. */ /* El rótulo y su selector de tipo, en la misma fila y pegados. */ .foco-rotulo-fila { display: flex; align-items: center; gap: var(--e1); flex: none; border-left: 3px solid var(--tipo, var(--borde-medio)); border-radius: 3px; padding: var(--e1) 0 var(--e1) var(--e2); margin-bottom: var(--e3); } .foco-rotulo { border: none; background: none; padding: 0; font: inherit; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-mini); font-weight: var(--p-fuerte); text-transform: uppercase; letter-spacing: var(--k-rotulo); color: var(--tipo-rotulo, var(--texto)); flex: none; min-height: 0; box-shadow: none; } .foco-rotulo:focus { outline: none; box-shadow: none; border: none; } /* Ocupa lo que queda y desplaza sólo cuando de verdad no cabe más. */ .foco-texto { flex: 1 1 auto; width: 100%; min-height: 0; border: none; background: none; padding: 0 0 var(--e4); resize: none; color: var(--texto); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-base); line-height: 1.8; box-shadow: none; } .foco-texto:focus { outline: none; box-shadow: none; border: none; } /* ════════════════════════════════════════════════════════════════════════════ Gente y enlaces ════════════════════════════════════════════════════════════════════════════ */ .gente { margin-top: var(--e8); } .gente h2 { font-size: var(--t-h3); margin: 0 0 var(--e4); } .gente ul, .enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .gente li, .enlaces li { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) 0; border-bottom: 1px solid var(--borde); font-size: var(--t-menor); } .gente li:first-child, .enlaces li:first-child { border-top: 1px solid var(--borde); } /* Un enlace gastado sigue en la lista porque saber que existió importa, pero no compite con los vivos. */ .enlaces li.gastado { opacity: 0.5; } /* Cada pregunta de un formulario, con su nombre encima y sus opciones debajo. */ .grupo-opciones { display: grid; gap: var(--e2); } /* Aire entre una pregunta y la siguiente: pegadas, las cuatro opciones vuelven a leerse como una sola lista. */ .grupo-opciones + .grupo-opciones { margin-top: var(--e3); } .grupo-titulo { margin: 0; font-size: var(--t-pie); font-weight: var(--p-fuerte); color: var(--texto-medio); } /* * El enlace ocupa su propio renglón: con el papel, la fecha y el botón de * revocar al lado, en una columna estrecha el botón se caía solo a la línea de * abajo y quedaba flotando sin nada a la izquierda. * * `input.` y no `.` a secas, por lo mismo que el título de la canción: el * selector genérico de campos lleva el tipo y pesa más que una clase suelta. */ input.enlace-texto { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-mini); flex: 1 1 100%; min-width: 0; background: var(--fondo-hondo); border-color: var(--borde); min-height: 2.25rem; padding: var(--e2) var(--e3); color: var(--texto-medio); } /* Las acciones de una fila van a la derecha, no pegadas al texto. */ .gente li form, .enlaces li form { margin-left: auto; } /* Copiado. Dura lo que dura el aviso y vuelve a su sitio. */ .boton.copiado { color: var(--exito); border-color: color-mix(in oklab, var(--exito) 45%, transparent); } /* ════════════════════════════════════════════════════════════════════════════ Tu cuenta ════════════════════════════════════════════════════════════════════════════ */ .bloque-perfil { border-top: 1px solid var(--borde); padding-top: var(--e6); margin-top: var(--e6); } .bloque-perfil:first-of-type { border-top: none; padding-top: 0; margin-top: var(--e6); } .bloque-perfil h2 { font-size: var(--t-h3); margin: 0 0 var(--e2); } /* ── La zona de peligro ───────────────────────────────────────────────────── Cambiar la contraseña, llevarte tus datos y borrar la cuenta: lo que no se deshace. Tenía el mismo aspecto que elegir una foto, y con el mismo aspecto se pulsa con la misma ligereza. Va con su marco y su color, y al final. */ .zona-peligro { border: 1px solid var(--peligro); border-radius: var(--r-m); background: var(--peligro-suave); padding: var(--e5); margin-top: var(--e7); } .zona-peligro > h2 { color: var(--peligro); } /* La advertencia de la zona respira antes de la primera cosa: pegada al siguiente título se lee como el pie del título y no como lo que es. */ .zona-peligro > .nota { margin-bottom: var(--e5); } /* Cada cosa dentro lleva su línea, no un marco propio: dos marcos anidados es una caja dentro de una caja y ya no se sabe qué separa qué. */ .peligro-bloque + .peligro-bloque { border-top: 1px solid color-mix(in oklab, var(--peligro) 30%, transparent); padding-top: var(--e5); margin-top: var(--e5); } .peligro-bloque h3 { font-size: var(--t-guia); margin: 0 0 var(--e2); } /* Elegir el tema ya es guardarlo, así que con JavaScript el botón sobra. Lo esconde la clase y no el script borrando nada: sin JavaScript sigue ahí. */ .tema-elegir.con-js button[type="submit"] { display: none; } .perfil-foto { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e4); } .perfil-foto-acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; } .avatar-grande { width: 68px; height: 68px; font-size: var(--t-h2); flex: none; } /* La letra pequeña de la foto, separada de la fila: pegada al avatar parecía un pie de la propia imagen. */ .perfil-foto + .nota { margin-top: var(--e3); } .foto-subir { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; } /* * El selector de fichero del sistema, tapado detrás de su etiqueta. * * No se puede estilar —lo pinta el sistema— y encima mide lo que quiere: en un * móvil sacaba el texto en el idioma del teléfono y estiraba la página a lo * ancho hasta echar fuera el botón de al lado. Así se ve un botón normal y el * control sigue estando donde tiene que estar. * * `opacity: 0` y no `display: none`: escondido del todo deja de poder recibir * el foco, y quien navegue con teclado se quedaría sin poder subir nada. */ .foto-subir label { position: relative; overflow: hidden; cursor: pointer; } .foto-subir input[type='file'] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; /* Safari en iOS le da un alto propio al control y estira la etiqueta. */ min-height: 0; padding: 0; border: none; } /* El foco lo recibe el campo, que es invisible: el anillo se dibuja en la etiqueta, que es lo que se ve. */ .foto-subir label:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; } /* Con JavaScript, elegir una foto la sube: el botón de guardar sobra. */ .foto-subir.con-js button[type='submit'] { display: none; } .opciones-tema { display: flex; gap: var(--e5); flex-wrap: wrap; } .opciones-tema label { display: inline-flex; align-items: center; gap: var(--e2); } /* ════════════════════════════════════════════════════════════════════════════ El panel ════════════════════════════════════════════════════════════════════════════ */ .panel .cabecera-acciones { gap: var(--e4); } .panel .cabecera-acciones a { text-decoration: none; color: var(--texto-apagado); font-size: var(--t-menor); } .panel .cabecera-acciones a:hover { color: var(--texto); } .panel-cuerpo { padding-bottom: var(--e9); } .dato { background: var(--fondo-alto); border: 1px solid var(--borde); border-radius: var(--r-m); padding: var(--e4); display: grid; gap: var(--e1); box-shadow: var(--sombra-1); } /* Las cifras en tabular: si no, cambiar de 9 a 10 mueve el número entero de sitio y el panel parpadea al recargar. */ .dato-valor { font-size: 2rem; font-weight: var(--p-titular); letter-spacing: var(--k-titulo); line-height: 1; font-variant-numeric: tabular-nums; } .dato-nombre { font-size: var(--t-mini); color: var(--texto-apagado); } .tabla { width: 100%; border-collapse: collapse; font-size: var(--t-menor); margin: var(--e4) 0; } .tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); } .tabla th { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: var(--p-medio); text-transform: uppercase; letter-spacing: var(--k-rotulo); color: var(--texto-apagado); } .tabla td { font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════════════════ Error y textos largos ════════════════════════════════════════════════════════════════════════════ */ .codigo-error { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 3rem; font-weight: var(--p-medio); color: var(--texto-tenue); letter-spacing: var(--k-titulo); margin: 0 0 var(--e4); } .texto-largo { max-width: calc(var(--ancho-lectura) + var(--margen) * 2); } .texto-largo p { max-width: var(--ancho-lectura); margin-bottom: var(--e4); } /* Los datos del titular en los legales: una lista de pares, sin viñetas. No es una enumeración de ideas —es una ficha—, y la viñeta la leería como si cada línea fuera un argumento más del texto de al lado. */ .lista-datos { max-width: var(--ancho-lectura); margin-bottom: var(--e4); padding: 0; list-style: none; color: var(--texto-medio); } .lista-datos li + li { margin-top: var(--e1); } .lista-datos li > span:first-child { color: var(--texto-apagado); } /* ════════════════════════════════════════════════════════════════════════════ Accesibilidad ════════════════════════════════════════════════════════════════════════════ */ /* Visible para un lector de pantalla y para nadie más. `display:none` no vale: eso lo esconde también del lector, que es justo a quien va dirigido. */ .solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ════════════════════════════════════════════════════════════════════════════ Con el dedo ════════════════════════════════════════════════════════════════════════════ */ /* * Lo que se toca mide 44. Con un ratón, 34px de alto es una densidad cómoda y * el puntero es de un píxel; con un dedo, 34px es un botón que se falla. En vez * de engordar la interfaz en todas partes —que dejaría el escritorio blando— * se engorda sólo donde se toca. * * Es la medida que ya cumplían los menús de sección y que el resto de la * interfaz no cumplía: «volver», «exportar», «compartir», «salir», «revocar» y * el selector de tipo andaban entre 28 y 34. */ @media (pointer: coarse) { .boton { min-height: var(--tactil); } .boton-fino { min-height: 2.5rem; padding: 0 var(--e4); } .tipo-abrir { min-width: var(--tactil); min-height: var(--tactil); } .avatar { width: 36px; height: 36px; } .avatar-grande { width: 68px; height: 68px; } /* Los enlaces sueltos —idioma, pie, «volver» de las páginas de texto— se tocan igual que un botón aunque no lo parezcan. `p > a:only-child` es el «volver» que cierra compartir y los legales: un párrafo que no tiene más que ese enlace. Escrito así no engorda los enlaces que van dentro de una frase, que no son dianas sino texto. */ .enlace-idioma, .pie nav a, .pestañas a, main p > a:only-child, .marca { min-height: var(--tactil); display: inline-flex; align-items: center; } /* Una opción con radio se toca en toda la fila, no en el círculo de 17px. */ .formulario label.en-linea, .opciones-tema label { min-height: var(--tactil); } } /* Quien haya pedido menos movimiento no lo pide sólo para las animaciones que nos parezcan importantes. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .tarjeta:hover { transform: none; } } /* Quien tenga puesto el contraste alto del sistema no quiere hairlines. */ @media (prefers-contrast: more) { :root { --borde: var(--borde-medio); --texto-apagado: var(--texto-medio); } } /* ════════════════════════════════════════════════════════════════════════════ La hoja de compartir ════════════════════════════════════════════════════════════════════════════ */ /* * Enlaces, personas y exportar, en el mismo sitio y con las mismas pestañas que * en la app. Sube desde abajo en un móvil —donde el pulgar llega— y se centra * como una ventana en una pantalla ancha, donde subir desde abajo no significa * nada. */ body.con-hoja { overflow: hidden; } .hoja-fondo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, #000 42%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: hoja-fondo var(--v-normal) var(--curva); } @keyframes hoja-fondo { from { opacity: 0; } } .hoja { display: flex; flex-direction: column; width: 100%; max-width: 34rem; max-height: min(85dvh, 44rem); background: var(--fondo-alto); border: 1px solid var(--borde); border-bottom: none; border-radius: var(--r-g) var(--r-g) 0 0; box-shadow: var(--sombra-3); padding-bottom: env(safe-area-inset-bottom); animation: hoja-sube var(--v-normal) var(--curva); } @keyframes hoja-sube { from { transform: translateY(12px); opacity: 0; } } @media (min-width: 40rem) { .hoja-fondo { align-items: center; } .hoja { border-bottom: 1px solid var(--borde); border-radius: var(--r-g); } } .hoja-cabecera { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3) 0 var(--e4); border-bottom: 1px solid var(--borde); } .hoja-pestañas { display: flex; gap: var(--e4); flex: 1 1 auto; min-width: 0; overflow-x: auto; /* El solape de un píxel sobre el borde de la cabecera va aquí y no en cada pestaña: dentro, el margen negativo dejaba el contenido un píxel más alto que la caja, y como `overflow-x: auto` obliga al eje Y a ser `auto`, aparecía una barra de scroll vertical en una fila de tres botones. */ margin-bottom: -1px; } .hoja-pestaña { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--e3) 0; font: inherit; font-size: var(--t-menor); font-weight: var(--p-medio); color: var(--texto-apagado); cursor: pointer; white-space: nowrap; transition: color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva); } .hoja-pestaña:hover { color: var(--texto); } .hoja-pestaña.activa { color: var(--texto); border-bottom-color: var(--tinta); } .hoja-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--e4); display: grid; gap: var(--e4); align-content: start; } .hoja-crear { display: grid; gap: var(--e3); border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--fondo); padding: var(--e4); } .hoja-crear .boton { justify-self: start; } /* Cada salida dice lo que hace **antes** de pulsarla: qué formato es y qué va a pasar. Antes «exportar» era una palabra y una sorpresa. */ .hoja-opciones { display: grid; gap: var(--e1); } .hoja-opcion { display: grid; gap: 2px; justify-items: start; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-m); padding: var(--e3); font: inherit; color: var(--texto); cursor: pointer; min-height: var(--tactil); transition: background-color var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva); } .hoja-opcion:hover { background: var(--fondo-hondo); border-color: var(--borde); } .hoja-opcion-titulo { font-size: var(--t-menor); font-weight: var(--p-medio); } .hoja-opcion-pista { font-size: var(--t-mini); color: var(--texto-apagado); line-height: var(--i-medio); } .hoja-aviso { margin: 0; font-size: var(--t-menor); color: var(--exito); } /* La lista de personas: cara, nombre y papel. */ .gente-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .gente-lista li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--borde); font-size: var(--t-menor); } .gente-lista li:first-child { border-top: 1px solid var(--borde); } .gente-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La cara: la foto encima de la inicial, nunca un hueco. */ .cara { position: relative; overflow: hidden; width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); font-size: var(--t-mini); font-weight: var(--p-fuerte); } .cara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* * Cada enlace: la dirección arriba a lo ancho y sus acciones debajo. * * Con todo en una fila, el ancho de la hoja decidía dónde partía y cada enlace * se rompía en un sitio distinto — uno dejaba «revocar» solo abajo, el * siguiente juntaba el papel con revocar. Puesto en dos renglones fijos, todos * se leen igual. */ .hoja .enlaces li { display: grid; grid-template-columns: auto auto 1fr; gap: var(--e2) var(--e3); align-items: center; padding: var(--e3) 0; } .hoja input.enlace-texto { grid-column: 1 / -1; flex: none; } .hoja .enlaces li form, .hoja .enlaces li .boton-peligro { justify-self: end; } /* ── El audio de la canción ────────────────────────────────────────────────── * * En la web sólo se oye. La barra de la base va al pie de la canción, que es * donde está en la app: quien usa las dos no tiene que buscarla dos veces. */ .audio-barra { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4); margin-top: var(--e4); background: var(--fondo-alto); border-top: 1px solid var(--borde); border-radius: var(--r-s) var(--r-s) 0 0; box-shadow: var(--sombra-1); } /* `hidden` es display:none del navegador, y el `display:flex` de arriba le * gana: sin esto, una canción sin base enseñaba una barra vacía con su borde y * su sombra, que es peor que no enseñar nada. */ .audio-barra[hidden] { display: none; } .audio-barra-datos { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .audio-nombre { font-size: var(--t-mini); font-weight: var(--p-medio); color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La línea de tiempo. Se dibuja fina y se toca gruesa: cuatro píxeles no se * aciertan con el ratón y menos con un dedo. */ .audio-linea { position: relative; height: var(--e1); border-radius: 999px; background: var(--borde-medio); cursor: pointer; } .audio-linea::before { content: ''; position: absolute; inset: calc(var(--e2) * -1) 0; } .audio-linea-hecho { height: 100%; width: 0; border-radius: 999px; background: var(--acento); } .audio-tiempo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); color: var(--texto-apagado); font-variant-numeric: tabular-nums; } /* Redondo y del tamaño del dedo: es lo que más se toca de todo esto. */ .audio-play { flex: none; width: var(--tactil); height: var(--tactil); display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--tinta); color: var(--tinta-encima); font-size: var(--t-mini); cursor: pointer; transition: transform var(--v-rapido) var(--curva), opacity var(--v-rapido) var(--curva); } .audio-play svg { display: block; } .audio-play:active { transform: translateY(1px); opacity: 0.72; } /* El contador de notas de una sección. Discreto: es un dato de la letra, no * una acción principal. */ .audio-boton { border: 0; background: none; padding: 0 var(--e1); color: var(--texto-apagado); font-size: var(--t-mini); cursor: pointer; } .audio-boton:hover { color: var(--acento); } /* El tramo de la base de una aparición: cuándo suena esto. Discreto como el * contador de notas, con la hora en cifras monoespaciadas para que no baile al * ir pasando los segundos. */ .audio-tramo { display: inline-flex; align-items: center; gap: var(--e1); border: 0; background: none; padding: 0 var(--e1); color: var(--texto-apagado); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); cursor: pointer; } .audio-tramo:hover, .audio-tramo.sonando { color: var(--acento); } .audio-tramo-icono { display: inline-flex; } .audio-tramo-icono svg { display: block; width: 10px; height: 10px; } .audio-tramo:active { transform: translateY(1px); opacity: 0.72; } /* La lista de notas de una sección, en hoja. Filas del alto de un dedo y con * su propio canto: es una lista para usarla, no un pie de foto. */ .audio-hoja-titulo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: var(--e2) 0; } .audio-hoja-seccion { font-size: var(--t-micro); font-weight: var(--p-fuerte); letter-spacing: var(--k-rotulo); text-transform: uppercase; color: var(--texto-apagado); } .audio-nota { display: flex; align-items: center; gap: var(--e3); padding: var(--e2); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alto); } .audio-nota + .audio-nota { margin-top: var(--e2); } .audio-nota.sonando { border-color: var(--acento-borde); } .audio-nota-datos { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .audio-nota-pie { font-size: var(--t-micro); color: var(--texto-apagado); } .audio-duracion { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-menor); font-weight: var(--p-medio); color: var(--texto); } /* Un icono suelto —la papelera, el ⋯— con área táctil de verdad alrededor. */ .audio-icono { flex: none; display: grid; place-items: center; width: var(--e6); height: var(--e6); border: 0; background: none; color: var(--texto-apagado); font-size: var(--t-menor); line-height: 1; cursor: pointer; border-radius: var(--r-s); } .audio-icono:hover { color: var(--texto); background: var(--fondo-hondo); } .audio-boton-micro { display: inline-flex; } .audio-boton-micro svg { display: block; } /* Sin base: la fila que la ofrece, en el hueco de la barra. */ .audio-invitacion { flex: 1 1 auto; min-width: 0; font-size: var(--t-mini); color: var(--texto-apagado); } .audio-hoja-texto { margin: 0 0 var(--e3); font-size: var(--t-mini); line-height: 1.5; color: var(--texto-apagado); } .boton-ancho { width: 100%; justify-content: center; } .boton-ancho + .boton-ancho { margin-top: var(--e2); } /* ── Grabando ──────────────────────────────────────────────────────────────── * * Al pie y por encima de todo, como el audio de WhatsApp: la hoja de notas se * cierra al empezar y esto se queda, para que la letra se lea mientras se canta * la idea. Sin esta barra, parar la grabación exigiría volver a abrir la hoja * que tapa justo lo que hay que leer. */ .audio-grabando { position: fixed; z-index: 65; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, var(--ancho)); display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3) var(--e2) var(--e4); padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom)); background: var(--peligro-suave); border-top: 1px solid var(--peligro); border-radius: var(--r-s) var(--r-s) 0 0; box-shadow: var(--sombra-2); } .audio-grabando[hidden] { display: none; } .audio-grabando-datos { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .audio-grabando-que { font-size: var(--t-mini); font-weight: var(--p-medio); color: var(--peligro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audio-grabando-reloj { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--peligro); } /* El punto late con el segundero: un rojo quieto se lee como un error, y esto * no es un error, es algo que está pasando ahora. */ .audio-punto { flex: none; width: var(--e2); height: var(--e2); border-radius: 999px; background: var(--peligro); animation: audio-latido 1s steps(1, end) infinite; } @keyframes audio-latido { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .audio-punto { animation: none; } } /* ── Marcar el tramo ───────────────────────────────────────────────────────── * * Se marca oyendo: el transporte arriba, los dos momentos debajo. Los números * en monoespaciada y tabulares, que si no bailan al correr los segundos. */ .audio-tramo-hoja { display: flex; flex-direction: column; gap: var(--e3); } .audio-tramo-transporte { display: flex; align-items: center; gap: var(--e3); } .audio-tramo-reloj { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-h3); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; color: var(--texto); } /* Dónde cae lo marcado dentro de la base entera: marcar dos números sin ver * contra qué es marcar a ciegas. */ .audio-linea-tramo { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--acento-suave); } .audio-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); } .audio-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--tactil); padding: var(--e2) var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alto); cursor: pointer; text-align: left; } .audio-marca.puesta { border-color: var(--acento-borde); } .audio-marca:active { transform: translateY(1px); } .audio-marca-que { font-size: var(--t-micro); color: var(--texto-apagado); } .audio-marca-cuando { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-menor); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; color: var(--texto); } /* Un tramo del revés se puede marcar —se está a medias— pero no se guarda: se * dice por qué en vez de dejar un botón muerto sin explicación. */ .audio-error { margin: 0; font-size: var(--t-mini); color: var(--peligro); } /* Lo que ha salido mal, al pie y sin robar el foco. */ .audio-aviso { position: fixed; z-index: 110; left: 50%; bottom: var(--e6); transform: translateX(-50%); max-width: min(92vw, 480px); padding: var(--e2) var(--e3); background: var(--tinta); color: var(--tinta-encima); border-radius: var(--r-s); font-size: var(--t-mini); line-height: 1.4; box-shadow: var(--sombra-2); } .audio-aviso[hidden] { display: none; }