/* ========================================================================== Cocina · webapp — hoja de estilos única. Sin fuentes de terceros, sin CDN, sin compilación: esto es lo que se sirve. Tema oscuro por defecto; con prefers-color-scheme: light se invierten los tokens (mismos nombres) y ningún componente necesita saberlo. ========================================================================== */ :root { /* Superficies: gris muy oscuro, nunca negro puro. La elevación se hace ACLARANDO el fondo. Decisión del 2026-10-14 (razonada en docs/webapp-diseno.md §7): se adopta el modelo de UNA SOLA SUPERFICIE SIN BORDES, medido en la app de Revolut, porque es una OBSERVACIÓN de algo en producción y gana a la opinión de un artículo de tendencias. El escalón entre fondo y superficie tiene que VERSE sin ayuda de una línea: si hace falta dibujar un borde para saber dónde empieza una tarjeta, el problema es el escalón, no la falta de borde. */ /* ESCALONES MEDIDOS, no elegidos a ojo. El usuario dijo «veo todo apagado» y la causa NO era que faltaran bordes: era que faltaba ESCALÓN. Medido: los nuestros separaban 1,122:1 y 1,135:1, y los de Revolut 1,207:1. Un 7 % menos y sin bordes que taparan la diferencia se lee como una masa oscura uniforme. Ahora los tres separan ≥1,20:1. Lo vigila un criterio estático (C28), para que no se vuelva a aplanar sin que nadie lo vea. */ --fondo: #101115; /* Y=0.00565 */ --sup-1: #23252e; /* Y=0.01877 → 1.236:1 sobre el fondo */ --sup-2: #333642; /* Y=0.03738 → 1.271:1 sobre la superficie */ --borde: rgba(255, 255, 255, .09); --borde-fuerte: rgba(255, 255, 255, .16); /* Relleno de la barra de fondo de cada alimento de Despensa: solo un poco más claro que la tarjeta, para que la cantidad se lea sin convertir la fila en otro bloque. */ --despensa-relleno: rgba(255, 255, 255, .085); /* Velo de la cabecera y de la barra inferior. Es un rgba EXPLÍCITO y no un `color-mix()` a propósito: el verificador tiene que poder leer este color y componerlo, y un color-mix se serializa en un formato que se puede malinterpretar como números 0-255 y dar un contraste falso. */ --velo: rgba(23, 24, 27, .92); /* Texto */ --texto: #f1f2f4; /* blanco roto, no #fff */ --texto-2: #a6abb4; --texto-3: #8b919a; /* aclarado a propósito: con #7b8189 se quedaba en 4,1:1 sobre --sup-1 y no llegaba al 4,5:1 de texto normal */ /* REGLA DEL TERCIARIO (2026-10-14, medida): --texto-3 da 5,94:1 sobre --fondo y 4,81:1 sobre --sup-1, pero 3,79:1 sobre --sup-2 (#333642). Sobre la superficie MÁS CLARA el terciario NO se usa: ahí el texto sube a --texto-2 (5,21:1). NO se arregla aclarando --texto-3, porque para llegar a 4,5:1 sobre --sup-2 tendría que valer ~#a9aeb8, que ya es --texto-2: se perdería un nivel de jerarquía para tapar un error de USO. */ /* UN solo acento. */ --acento: #d9a15e; --acento-suave: rgba(217, 161, 94, .14); /* Rojo de error: definido en los DOS temas. Antes solo existía el fallback #ff8a7a, que en claro daba 2,29:1 sobre blanco. En oscuro este rojo da 6,67:1; en claro se usa un rojo más oscuro. */ --peligro: #ff8a7a; /* Ámbar de aviso (2026-10-30): la conservación de la despensa UNA VEZ ABIERTO sale del texto de la etiqueta, no de una fecha de caducidad, así que no puede llevar el rojo de error. Se dice «se pasó», no «está malo». */ --aviso: #e0b062; /* SEXTA TANDA (punto 2, corregido por el usuario) · EL MISMO COLOR PARA LAS DOS BARRAS. «en lugar de negro con que fuera del mismo color que el fondo de la barra superior valdría para que no haya diferencia entre la barra de navegación de android y dicho elemento». Es UNA variable: si cambia una, cambia la otra. */ --barra: var(--fondo); --radio-s: 8px; --radio: 12px; --radio-g: 16px; --ancho: 960px; --nav-alto: 72px; } @media (prefers-color-scheme: light) { :root { --fondo: #f7f7f5; --sup-1: #ffffff; --sup-2: #efefec; --borde: rgba(0, 0, 0, .10); --borde-fuerte: rgba(0, 0, 0, .18); --despensa-relleno: rgba(0, 0, 0, .085); --velo: rgba(247, 247, 245, .92); --texto: #1b1c1f; --texto-2: #5c6068; /* Oscurecido a propósito: con #6b7078 daba 4,33:1 sobre --sup-2 (#efefec), por debajo del 4,5:1. El fondo más exigente NO es el blanco de las tarjetas sino el gris de los recuadros internos (.dato), y ahí es donde fallaba. */ --texto-3: #646970; /* Oscurecido por el mismo motivo: el acento sobre su propio tinte (--acento-suave) se quedaba en 4,33:1 en la pestaña activa. */ --acento: #855719; --acento-suave: rgba(133, 87, 25, .12); --peligro: #b3261e; /* Ámbar de aviso en claro: oscurecido para pasar 4,5:1 sobre --sup-1. */ --aviso: #7a5410; --barra: var(--fondo); } } *, *::before, *::after { box-sizing: border-box; } /* EL ATRIBUTO `hidden` MANDA, SIEMPRE. Y no lo hacía: la regla del navegador para `[hidden]` es `display: none`, pero CUALQUIER regla nuestra de clase la gana (`.pie { display: flex }`), así que un elemento «oculto» seguía pintándose —con su borde de 1 px incluido—. Se descubrió en el ciclo 2 de las capturas del 2026-10-15: el pie de la app seguía dibujando la línea gris del punto 1 aunque su atributo `hidden` estuviera puesto, y el criterio C42 lo daba por bueno porque leía el atributo en vez de mirar lo que se pinta. Con `!important` esto no puede volver a pasar en ningún elemento. */ [hidden] { display: none !important; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--fondo); color: var(--texto); /* Tipografía del sistema: cero peticiones de red. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; /* Todas las cifras alineadas: se leen de un vistazo. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio-s); } /* ------------------------------------------------------------------ enlaces */ a { color: var(--acento); text-decoration: none; } /* EL SUBRAYADO DEL RATÓN, SOLO DONDE HAY RATÓN (quinta tanda, punto 13). En una pantalla táctil el `:hover` se queda pegado después de tocar, así que el usuario veía el texto de la pestaña subrayado «como si fuera un enlace» y no se iba hasta tocar otra cosa. Con `@media (hover: hover)` el subrayado no existe en el móvil; en el PC sigue igual. Lo mide el criterio en los dos temas: `text-decoration: none` en la etiqueta de la pestaña activa y de la pulsada. */ @media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 2px; } } code, pre, .mono { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; } .saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--sup-2); color: var(--texto); padding: 12px 16px; border-radius: 0 0 var(--radio) 0; } .saltar:focus { left: 0; } /* ------------------------------------------------------------------ cabecera */ .cabecera { position: sticky; top: 0; z-index: 20; flex: none; background: var(--velo); backdrop-filter: blur(8px); /* SEXTA TANDA (punto 3) · FUERA LA LÍNEA GRIS DE ARRIBA. El usuario mandó captura: «en la parte superior de todas las pestañas también tenemos una pequeña línea gris claro que sobra». Era este `border-bottom` de 1 px, que se quedaba pegado al borde de arriba al hacer scroll. Se quita en las tres pestañas (medido: 0 px de borde/línea en la parte superior). */ border-bottom: 0; } .cabecera-fila { max-width: var(--ancho); margin: 0 auto; padding: 14px 16px 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .marca { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; } .marca-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); flex: none; } .cabecera-nota { margin: 0; font-size: 13px; color: var(--texto-3); } /* Navegación: la misma