/* =============================================================================
NUTRITUPP · cfg-01-aspecto.css — el configurador habla el idioma de /nueva
-----------------------------------------------------------------------------
Se carga LA ÚLTIMA de /pedidos, detrás de sistema.css, componentes.css y
planificador.css. No edita ninguna de las tres: las anula donde toca.
ANTES DE NADA, LO QUE SE ENCONTRÓ AL MEDIR (no es opinión, es cuentagotas):
la mitad de la paleta de /pedidos NO EXISTE en el navegador.
1. planificador.css:24-30 escribe, sobre `body`:
--teal: var(--teal, #145961);
--linea: var(--linea, #dcd2c4);
Una propiedad personalizada que se referencia A SÍ MISMA en el mismo
elemento es un CICLO. La regla completa pasa a ser inválida en tiempo de
cálculo y la variable queda en el valor GARANTIZADO-INVÁLIDO para body y
todo lo que cuelga de él. El fallback del var() NO salva nada: el ciclo
se detecta antes de llegar a él.
Medido en /pedidos con getComputedStyle sobre un hijo de body:
--teal -> "" (cadena vacía)
--linea -> ""
2. planificador.css usa además --texto (≈40 veces), --rojo (≈10),
--verde-osc, --teal-osc, --curva, --medio, --sombra-quieta y
--sombra-encima. NINGUNA de las ocho se declara en ninguna de las tres
hojas que carga la página. Ocho tokens fantasma.
Consecuencias, todas verificadas en pantalla a 1440 y a 390:
· `.hueco { border: 1.5px dashed var(--linea) }` -> el atajo entero es
inválido: border-style NONE, border-width 0. El hueco del calendario
—que es el único sitio donde se pulsa para añadir comida— NO TIENE
BORDE. No hay diana. Se lee "Añadir plato" flotando en un rectángulo.
· `.plan[aria-pressed="true"] { border-color: var(--teal) }` -> currentColor.
El plan elegido lleva un cerco NEGRO de 2 px. Parece un error, no una
elección.
· `.filtros button[aria-pressed="true"] { background: var(--teal); color:#fff }`
-> fondo transparente y letra BLANCA sobre la crema: 1,14:1. El filtro
activo —el botón "Toda la carta" y el "Todo" del diálogo— es literalmente
INVISIBLE. En el diálogo de añadir plato no hay forma de volver a la
carta completa: el botón está ahí y no se ve.
· `.pie { background: var(--teal-osc) }` -> transparente. El pie es texto
#cfe3e0 sobre crema: 1,3:1. Y `.brindis` igual: el aviso de "plato
añadido" sale en blanco sobre crema, o sea no sale.
· `.boton` (Móntamelo tú / Vaciar) se queda sin borde y en negro: dos
palabras sueltas donde había dos botones.
· El semáforo del día (verde/ámbar/rojo) y TODO el teal de marca han
desaparecido de la página. En /pedidos hoy no hay ni un píxel de #145961.
Por eso el bloque 0 de esta hoja no es decoración: sin tinta no se puede
hablar ningún idioma. Va primero y arregla los diez tokens.
-----------------------------------------------------------------------------
LA COLISIÓN DE .plan — cómo se resuelve aquí
`.plan` significa dos cosas distintas: en /nueva es la tarjeta grande que se
apila; en /pedidos son los tres botones del selector. Enlazar nueva-03/05/06
en pedidos.html las destroza mutuamente, y renombrar en planificador.js
corrompe estado.plan y PLANES[estado.plan], que son PROPIEDADES de un objeto,
no clases de CSS.
Decisión: NO se enlaza ni una sola hoja nueva-*.css en /pedidos. El idioma se
vuelve a escribir aquí, a mano, con los mismos valores medidos, y esta hoja
no declara NUNCA un `.plan {}` a secas: siempre `#planes .plan`. Así el
selector del configurador y la tarjeta de la landing no pueden verse jamás.
Cuesta unas 40 líneas de repetición y a cambio las dos páginas quedan
independientes: cambiar la landing no puede romper la herramienta.
Los tokens propios van prefijados --cfg-*. Con diez agentes escribiendo en
:root, el nombre de un token es un recurso compartido y el que carga último
gana en silencio.
-----------------------------------------------------------------------------
TÉCNICA PORTADA (21st.dev -> CSS plano, aquí no hay React ni librerías)
· Paper Texture (@paper-design) y Ocean grain (@hazelgrace3026): allí son
shaders WebGL; aquí una feTurbulence de 380 bytes en un data-URI, fundida
en overlay. Cero peticiones de red.
· Material (@shugar): la rampa de elevación de dos capas —contacto corto y
ambiente larga— desplazada en X porque la luz viene de un lado, y teñida
de marrón en vez del gris de interfaz.
· Cursor Spotlight (@pulkitxm): la capa radial suelta sobre el bloque
oscuro. Clavada donde estaría la ventana en vez de seguir al puntero: en
un móvil no hay puntero al que seguir.
· Billing Upgrade Prompt (@preetsuthar17): el descuento como distintivo con
tinta oscura sobre el verde de marca, no blanco (2,43:1) sobre verde.
LO QUE ESTA HOJA NO HACE, A PROPÓSITO
No quita las superficies del calendario ni del panel. /nueva no tiene ni una
caja porque es una página que se LEE; el configurador es una herramienta que
se OPERA, y una rejilla de 28 celdas sin superficie deja de ser un calendario.
Lo que se va es el BLANCO (#fff sobre crema: un salto de luminosidad de 8
puntos en una página que no tiene ni uno más) y la sombra fría. Lo que queda
es papel sobre papel, separado por un pelo y una sombra cálida.
Donde sí se va la caja entera es en el catálogo: 31 tarjetas blancas
repetidas es exactamente el vocabulario que /nueva borró.
========================================================================== */
/* =============================================================================
0 · LA TINTA — los diez tokens que faltaban
-----------------------------------------------------------------------------
`html body` (0-0-2) y no `body` (0-0-1): así gana a planificador.css por
ESPECIFICIDAD y no por orden de carga. Si mañana alguien mueve un ,
esto sigue en pie. Es el suelo de la página: no puede depender del orden.
========================================================================== */
html body {
/* --- los dos ciclos, rotos ---------------------------------------------- */
--teal: #145961;
--linea: #dcd2c4;
/* --- los ocho fantasmas ------------------------------------------------- */
--texto: #556354; /* = --tinta del sistema. 5,3:1 sobre crema */
--teal-osc: #073439; /* el pie y el brindis lo piden desde el día uno */
--verde-osc: #3a7026; /* el verde de marca bajado hasta poder ser TEXTO:
4,96:1 sobre crema y 5,96:1 con blanco encima */
--rojo: #a82c2c; /* 6,1:1 sobre el papel; 6,4:1 con blanco encima.
El #ce3939 que insinuaba la hoja daba 4,0:1 y se
usa como fondo de botón con letra blanca */
--curva: cubic-bezier(.22, .61, .36, 1);
--medio: 220ms;
--sombra-quieta: var(--cfg-sombra-1);
--sombra-encima: var(--cfg-sombra-2);
/* El ámbar heredado (#b4762a) da 4,3:1 sobre el papel y lleva el aviso de
"este día se queda corto". Se baja un escalón hasta pasar AA. */
--amarillo: #8a5a12;
}
:root {
/* --- El papel. Se cambia --pl-papel, que es de donde planificador.css saca
su --papel: un token en vez de perseguir treinta reglas. #f7f2ec es el
"techo" de la rampa de luz de /nueva, no el blanco puro. ---------------- */
--pl-papel: #f7f2ec;
--pl-linea-fina: #e6ddd0;
--pl-sombra: var(--cfg-sombra-1);
/* --- La rampa de sombras. Dos capas: contacto (corta, dura, pegada) y
ambiente (larga, tenue). Desplazadas en X: es lo que hace que se lea "luz
que entra por un lado" y no "drop shadow de interfaz". Y en marrón
(60 42 24), porque la sombra de una cocina con luz cálida tira a marrón;
el gris azulado que había (rgba(7,52,57,…)) ensucia la crema. ---------- */
--cfg-sombra-contacto: 1px 1px 2px -1px rgb(60 42 24 / .30);
--cfg-sombra-1: var(--cfg-sombra-contacto), 2px 10px 18px -12px rgb(60 42 24 / .34);
--cfg-sombra-2: var(--cfg-sombra-contacto), 4px 22px 40px -22px rgb(60 42 24 / .42);
--cfg-sombra-3: var(--cfg-sombra-contacto), 8px 46px 84px -34px rgb(60 42 24 / .50);
--cfg-pelo: 0 0 0 1px rgb(60 42 24 / .09);
/* --- El grano. fractalNoise a 3 octavas, desaturado y tejido (stitchTiles)
para que la baldosa de 140 px no deje costura. 380 bytes, cero peticiones,
cero JavaScript. Es lo único que separa "campo de color" de "papel". ---- */
--cfg-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
--cfg-grano-medida: 140px 140px;
/* --- Tres radios y ni uno más. Hoy conviven ocho (6, 7, 8, 10, 12, 14, 16
y 999) para tres cosas: un mando, una foto y una superficie. ------------ */
--cfg-r-foto: 12px;
--cfg-r-caja: 18px;
--cfg-r-losa: 22px;
/* --- Sobre el bloque oscuro (#073439). Medidos, no elegidos a ojo. ------ */
--cfg-sobre-alto: #f7f2ec; /* 14,6:1 */
--cfg-sobre-medio: #a9bcb7; /* 6,7:1 */
--cfg-sobre-bajo: #9db0ab; /* 5,9:1 */
--cfg-sobre-rojo: #f0a3a3; /* 8,6:1 */
--cfg-sobre-ambar: #e6bd76; /* 9,4:1 */
/* El anillo de foco NO puede ser un color fijo: ninguno da 3:1 a la vez
sobre la crema y sobre el teal hondo (WCAG 1.4.11). Va por contexto. */
--cfg-anillo: #3a7026;
}
/* =============================================================================
1 · EL PAPEL Y LA VOZ
-----------------------------------------------------------------------------
Dos cambios y ya no es la misma página:
· El fondo deja de ser un color y pasa a ser una superficie con grano.
· El cuerpo pasa de Work Sans a Manrope, que es lo que habla /nueva.
Lo segundo además ADELGAZA la página: nada vuelve a pedir Work Sans, así que
work-sans-lat.woff2 (~17 KB, hoy se descarga en la primera visita) deja de
pedirse. Se gana peso, no se pierde.
========================================================================== */
html { background-color: var(--crema); }
html body {
font-family: var(--tipo, "Manrope", "Manrope respaldo", system-ui, "Segoe UI", sans-serif);
background-color: var(--crema);
background-image: var(--cfg-grano);
background-size: var(--cfg-grano-medida);
background-repeat: repeat;
background-blend-mode: overlay;
color: var(--tinta);
/* Manrope apaga kerning y ligaduras por debajo de 20 px si no se le insiste */
font-kerning: normal;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* Cifras tabulares en TODO lo que sea un número que se compara. Sin esto, siete
columnas de kcal no alinean y el ojo lee un fallo de maquetación. */
.dia__kcal, .ficha__dato, .cifra__valor, .macro__valor, .macro__extra,
.precio, .progreso__pie, .objetivo button, .etiqueta,
.plato__precio, .opcion__datos, .plan__dto {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1;
}
/* La barra: crema sobre crema no dibuja ninguna línea, y así la costura con el
cuerpo deja de existir en vez de disimularse. */
.barra {
background: var(--crema);
border-bottom: 1px solid rgb(60 42 24 / .10);
}
.barra__nav a { color: var(--tinta); font-weight: 600; letter-spacing: -.005em; }
.barra__nav a:hover { color: var(--teal); }
/* =============================================================================
2 · LA CABECERA — la voz display de /nueva
El rótulo versal es un ::before con alt vacío: es decoración tipográfica, no
contenido, y así no lo lee el lector de pantalla ni toca el H1 (que está
congelado por SEO).
========================================================================== */
.cabecera { padding-block: clamp(28px, 4vw, 52px) clamp(20px, 2.6vw, 32px); }
.cabecera::before {
content: "Tu plan de comidas" / "";
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 1.1em;
}
.cabecera h1 {
font-size: clamp(2.05rem, 1.2rem + 3.1vw, 3.6rem);
line-height: .98;
letter-spacing: -.042em;
max-width: 17ch;
/* Alineación óptica: la P de Manrope tiene lateral izquierdo y sin esto el
titular parece sangrado respecto al párrafo de debajo. */
margin-left: -.035em;
}
.cabecera p {
color: var(--tinta);
font-size: 1.05rem;
line-height: 1.6;
max-width: 46ch;
margin-top: 14px;
text-wrap: pretty;
}
/* =============================================================================
3 · EL SELECTOR DE PLAN — la escalera, no tres rectángulos iguales
-----------------------------------------------------------------------------
SIEMPRE con `#planes` delante. Ver la nota de la colisión, arriba.
El elegido es el único con superficie y sombra; los otros dos son fantasmas
con un pelo de línea. Es la escalera de /nueva traída a un selector: se ve
de un vistazo cuál está puesto sin tener que leer tres cajas iguales.
========================================================================== */
/* sistema.css ya pinta `#planes` de crema honda (su mapa de fondos), pero sin
relleno ni radio: sale una banda de color pegada al canto de las tarjetas que
parece un descuadre. Se convierte en lo que ya era: una BANDEJA. Los tres
planes viven dentro y el elegido se levanta de ella. */
.planes {
gap: clamp(10px, 1.2vw, 16px);
margin-block: clamp(18px, 2.4vw, 28px) clamp(26px, 3.4vw, 40px);
background: var(--crema-honda);
border-radius: calc(var(--cfg-r-caja) + 6px);
padding: clamp(8px, .9vw, 12px);
box-shadow: inset 0 1px 0 rgb(60 42 24 / .07);
}
#planes .plan {
background: transparent;
border: 1px solid rgb(60 42 24 / .13);
border-radius: var(--cfg-r-caja);
box-shadow: none;
padding: clamp(16px, 1.6vw, 22px);
transition: background var(--medio) var(--curva),
box-shadow var(--medio) var(--curva),
border-color var(--medio) var(--curva);
}
/* Una sola respuesta al puntero, y es de superficie. El translateY(-2px) que
había convierte tres botones contiguos en un cortacésped. */
#planes .plan:hover { transform: none; border-color: rgb(60 42 24 / .30); background: rgb(60 42 24 / .05); }
#planes .plan[aria-pressed="true"] {
background-color: var(--pl-papel);
background-image: var(--cfg-grano);
background-size: var(--cfg-grano-medida);
background-blend-mode: overlay;
border-color: transparent;
box-shadow: var(--cfg-sombra-2), var(--cfg-pelo), inset 0 1px 0 rgb(255 255 255 / .55);
}
/* El nombre y la descripción iban EN LA MISMA LÍNEA porque los dos son :
se leía "Pedido suelto Sin compromiso. Pides cuando te apetece.". Una línea
de CSS y son dos cosas. */
#planes .plan__nombre {
display: block;
font-size: clamp(1.1rem, .98rem + .45vw, 1.32rem);
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.1;
color: var(--titulo);
margin-bottom: 5px;
}
#planes .plan__desc {
display: block;
color: var(--tinta);
font-size: .93rem;
line-height: 1.45;
max-width: 34ch;
margin: 0;
}
/* El distintivo: blanco sobre #74B74E da 2,43:1 y no pasa AA. El verde de marca
es lo mejor que tiene la casa y no hay por qué apagarlo; lo que sobra es el
blanco. Con la tinta verde oscura sube a 5,9:1 y encima grita más. */
#planes .plan__dto {
display: inline-flex;
align-items: center;
margin-top: 12px;
background: var(--verde);
color: #14300c;
font-weight: 800;
font-size: .84rem;
letter-spacing: .01em;
padding: 4px 12px;
border-radius: 999px;
box-shadow: 0 1px 0 rgb(60 42 24 / .18), inset 0 1px 0 rgb(255 255 255 / .35);
}
/* El día suelto no tiene descuento: eso no es un distintivo, es su ausencia. */
#planes .plan__dto--vacio {
background: transparent;
color: var(--tinta);
border: 1px solid var(--linea);
box-shadow: none;
font-weight: 700;
}
/* El mes es el destino de la escalera: su cifra pesa más que las otras dos.
Es el único sitio donde esta hoja empuja comercialmente, y lo hace con
tamaño, no con un color nuevo. */
#planes .plan:nth-child(3) .plan__dto { font-size: .95rem; padding: 5px 14px; }
/* =============================================================================
4 · EL TABLERO — papel, no folio
-----------------------------------------------------------------------------
Aquí es donde NO se quitan las cajas. Un calendario de 28 celdas sin
superficie deja de ser un calendario. Lo que se quita es el BLANCO: #ffffff
sobre #EFEBE1 es el único salto de luminosidad de la página, y encima el
único que no significa nada. Papel (#f7f2ec) sobre papel: el escalón se lee,
no se grita.
========================================================================== */
.calendario,
.panel .tarjeta {
background-color: var(--pl-papel);
background-image: var(--cfg-grano);
background-size: var(--cfg-grano-medida);
background-blend-mode: overlay;
border-radius: var(--cfg-r-caja);
box-shadow: var(--cfg-sombra-1), var(--cfg-pelo);
}
.calendario { padding: clamp(16px, 1.8vw, 24px); }
.panel .tarjeta { padding: clamp(16px, 1.6vw, 20px); }
.calendario__titulo {
font-size: 1.3rem;
font-weight: 800;
letter-spacing: -.026em;
color: var(--titulo);
}
/* El titular de cada tarjeta del panel: la versalita de /nueva. Antes era un
h2 a 16 px en mayúsculas con tracking .06em, que es "encabezado de panel de
administración". A .72rem y .16em es un rótulo. */
.panel .tarjeta h2 {
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--teal);
}
/* --- Los mandos: una sola forma, la píldora ------------------------------- */
.boton,
.filtros button,
.alergenos button,
.objetivo button {
border-radius: 999px;
font-weight: 600;
transition: background var(--medio) var(--curva),
border-color var(--medio) var(--curva),
color var(--medio) var(--curva);
}
.boton {
border: 1.5px solid var(--linea);
background: transparent;
color: var(--teal);
padding: 8px 16px;
min-height: 38px;
}
.boton:hover { background: rgb(20 89 97 / .07); border-color: var(--teal); color: var(--teal); }
.boton--fantasma { border-color: transparent; color: var(--tinta); }
.boton--fantasma:hover { color: var(--rojo); background: rgb(168 44 44 / .08); }
.objetivo button { border-color: var(--linea); background: transparent; color: var(--tinta); padding: 7px 12px; }
.objetivo button[aria-pressed="true"] {
border-color: transparent;
background: var(--teal);
color: #fff; /* 7,98:1 */
}
.alergenos button { border-color: var(--linea); background: transparent; color: var(--tinta); padding: 6px 12px; }
.alergenos button:hover { border-color: var(--rojo); color: var(--rojo); }
.alergenos button[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
/* --- El día: una columna bajo una regla, y la regla ES el semáforo --------
El estado del día lo escribe el JS en un HIJO (.dia__kcal[data-estado]), así
que se lee con :has() sobre el padre. Donde :has() no exista, la regla sale
neutra y no se pierde nada: el número sigue coloreado.
Se quita el relleno de la celda porque siete rectángulos beige dentro de una
caja de papel dentro de una página de papel son tres superficies para decir
una sola cosa. -------------------------------------------------------- */
.rejilla-dias { column-gap: clamp(10px, 1vw, 16px); row-gap: 18px; }
.tablero .dia {
background: none;
border: 0;
border-top: 2px solid var(--linea);
border-radius: 0;
padding: 9px 0 0;
gap: 7px;
transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}
.tablero .dia:has(.dia__kcal[data-estado="ok"]) { border-top-color: var(--verde-osc); }
.tablero .dia:has(.dia__kcal[data-estado="corto"]) { border-top-color: var(--amarillo); }
.tablero .dia:has(.dia__kcal[data-estado="pasado"]) { border-top-color: var(--rojo); }
/* planificador.js hace `dia.classList.add('encima')` al arrastrar por encima,
y en toda la hoja NO hay ni una regla `.dia.encima`: soltar un plato sobre un
día no daba ninguna señal salvo si el puntero caía justo sobre el hueco. */
.tablero .dia.encima {
border-top-color: var(--verde-osc);
background: rgb(58 112 38 / .08);
}
/* El nombre y las kcal iban en la misma línea con space-between. A 124 px de
columna, "MIÉRCOLES 734 KCAL" no cabe: el dato se partía en dos y ese día
quedaba 14 px más bajo que los otros seis. Apilados, la altura es la misma
siempre y además el número deja de ser una coletilla del día y pasa a ser lo
que es: el dato en color. */
.dia__nombre { display: grid; justify-items: start; gap: 0; font-size: .64rem; letter-spacing: .11em; color: var(--tinta); }
.dia__kcal { color: var(--teal); letter-spacing: 0; font-size: .8rem; }
.dia__kcal[data-estado="ok"] { color: var(--verde-osc); }
.dia__kcal[data-estado="corto"] { color: var(--amarillo); }
.dia__kcal[data-estado="pasado"] { color: var(--rojo); }
/* --- El hueco: la diana que hoy NO EXISTE (ver la nota del principio) ----- */
.hueco {
border: 1.5px dashed var(--linea);
border-radius: var(--cfg-r-foto);
min-height: 46px;
color: var(--tinta);
font-size: .78rem;
font-weight: 600;
background: rgb(60 42 24 / .035);
}
.hueco:hover,
.hueco.encima {
background: rgb(58 112 38 / .10);
border-color: var(--verde-osc);
border-style: solid;
color: var(--verde-osc);
}
.hueco.lleno { border: 0; background: none; padding: 0; }
/* --- La ficha: papel con un canto de color que dice de qué tipo es -------- */
.ficha {
background: var(--pl-papel);
border: 1px solid rgb(60 42 24 / .12);
border-left: 4px solid var(--verde-osc);
border-radius: var(--cfg-r-foto);
padding: 7px 8px 7px 9px;
box-shadow: var(--cfg-sombra-contacto);
}
.ficha__nombre { color: var(--titulo); font-weight: 700; letter-spacing: -.008em; }
.ficha__dato { color: var(--tinta); }
.ficha[data-tipo="guarnicion"] { border-left-color: var(--amarillo); }
.ficha[data-tipo="plato"] { border-left-color: var(--teal); }
.ficha[data-tipo="extra"] { border-left-color: var(--linea); }
.ficha[data-alergeno="si"] { border-left-color: var(--rojo); background: #fbf1f1; }
.ficha__alerta { color: var(--rojo); }
.ficha__alerta--duda { color: #8a5a12; }
/* La aspa de quitar medía 18×18: por debajo de cualquier mínimo táctil. La caja
visible se deja pequeña (es un remate, no una acción principal) y se le
agranda la ZONA SENSIBLE con un pseudoelemento. */
.ficha__quitar {
width: 22px; height: 22px;
color: var(--tinta);
border-radius: 999px;
}
.ficha__quitar::before { content: ""; position: absolute; inset: -8px; }
.ficha__quitar:hover { background: rgb(168 44 44 / .12); color: var(--rojo); }
/* --- Las cifras del panel ------------------------------------------------- */
.cifra__valor {
font-size: clamp(2.1rem, 1.6rem + 1.3vw, 2.7rem);
letter-spacing: -.05em;
color: var(--teal-osc);
}
.cifra__unidad { color: var(--tinta); }
.progreso { background: rgb(60 42 24 / .12); }
.progreso__barra { background: var(--verde-osc); }
.progreso__barra[data-estado="pasado"] { background: var(--rojo); }
.progreso__pie, .macro__etiqueta, .macro__extra { color: var(--tinta); }
.macro__pista { background: rgb(60 42 24 / .12); }
.macro__valor { color: var(--titulo); }
.macro__extra { border-top-color: rgb(60 42 24 / .18); }
.macro__extra b { color: var(--titulo); }
.tarjeta__ayuda { color: var(--tinta); }
/* El total es la cifra por la que existe esta página. Va en teal hondo (9,2:1),
grande y con los céntimos en volado (los compone cfg-01-aspecto.js; sin él
se ve un precio normal y no se pierde nada). */
.precio__fila { color: var(--tinta); }
.precio__fila--dto { color: var(--verde-osc); font-weight: 700; }
.precio__total { border-top-color: rgb(60 42 24 / .18); }
.precio__total strong {
font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.15rem);
font-weight: 800;
letter-spacing: -.045em;
color: var(--teal-osc);
line-height: 1;
}
/* Los céntimos y el euro, en volado: como en una carta impresa. El entero manda
y el resto acompaña. */
.cfg-cent { font-size: .58em; font-weight: 700; letter-spacing: -.01em; vertical-align: .46em; }
.cfg-eur { font-size: .5em; font-weight: 700; vertical-align: .58em; margin-left: .06em; opacity: .78; }
.aviso { color: var(--tinta); border-top-color: rgb(60 42 24 / .22); }
.aviso--alerta { background: #fbf1f1; border-color: #e9cccc; color: #7f2727; }
.aviso--pendiente { background: #fbf3e2; border-color: #e8d6ae; color: #7a4f0f; }
.aviso--duda { color: #7a4f0f; }
/* El botón de confirmar. componentes.css lo deja sin suelo: un disco verde
pegado a la izquierda y el rótulo centrado sobre NADA. Se le devuelve la
píldora de debajo, que es lo que tiene el original de 21st.dev y se perdió
al portarlo. */
#confirmar.btn {
display: inline-grid;
place-items: center;
min-width: 0;
min-height: 54px;
padding: 4px 24px 4px 58px; /* 58 = 4 + 46 del disco + 8 de aire */
background: var(--crema-honda);
box-shadow: inset 0 0 0 1px rgb(20 89 97 / .22);
border-radius: 999px;
}
#confirmar.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgb(20 89 97 / .40), var(--cfg-sombra-contacto); }
#confirmar.btn:disabled { box-shadow: inset 0 0 0 1px rgb(20 89 97 / .14); opacity: .6; }
#confirmar.btn .btn__circulo { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 46px; height: auto; }
#confirmar.btn:hover:not(:disabled) .btn__circulo,
#confirmar.btn:focus-visible:not(:disabled) .btn__circulo { width: calc(100% - 8px); }
#confirmar.btn .btn__texto { position: relative; inset: auto; z-index: 1; translate: none; margin: 0; }
/* El verde de marca con rótulo crema encima da 2,0:1. El relleno pasa a verde
tinta; el verde claro se queda de distintivo, que es su sitio. */
#confirmar.btn--verde .btn__circulo { background: #2b5115; }
#confirmar.btn--verde:hover:not(:disabled) .btn__circulo { background: #22400f; }
/* =============================================================================
5 · EL BLOQUE OSCURO — la carta
-----------------------------------------------------------------------------
Uno. Solo uno, y justo donde está la comida.
Las fotos del cliente son bandejas NEGRAS sobre fondo OSCURO. Recortadas en
4/3 y puestas sobre crema dentro de una tarjeta blanca, cada plato es un
agujero negro flotando en un folio: el ojo lee "rectángulo oscuro", no
"comida". Son 31 seguidas, más de 3.000 px de página. Sobre el teal hondo del
propio cliente la bandeja desaparece y lo que queda encendido es el arroz, el
verde de la judía y el rosa del salmón.
Es la misma decisión que ya está tomada y medida en /nueva (nueva-05, §3);
aquí se trae con los mismos valores.
La losa va CONTENIDA (radio 22) y no a sangre. A sangre haría falta el truco
de `width:100vw; margin-left:-50vw`, que con la barra de desplazamiento
clásica de Windows mete ~15 px de scroll horizontal. En una página que otros
nueve están tocando a la vez, no merece la pena el riesgo por 20 px de
margen. En móvil sí sangra, y sin truco: el envoltorio tiene exactamente
20 px de relleno, así que un margen de −20 px llega al canto y no un píxel
más.
========================================================================== */
.catalogo {
position: relative;
isolation: isolate;
/* La barra es sticky y mide 64-84 px: sin esto, el enlace /pedidos#carta y
cualquier scrollIntoView dejan el titular de la carta DEBAJO de la barra. */
scroll-margin-top: 84px;
margin-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px);
padding: clamp(28px, 3.4vw, 54px) clamp(20px, 2.6vw, 44px) clamp(34px, 4vw, 60px);
border-radius: var(--cfg-r-losa);
background-color: var(--teal-osc);
background-image: var(--cfg-grano);
background-size: var(--cfg-grano-medida);
background-blend-mode: overlay;
color: var(--cfg-sobre-medio);
/* filo de luz arriba y peso abajo: 1 px que convierte un rectángulo oscuro en
un material con canto */
box-shadow:
inset 0 1px 0 rgb(241 233 226 / .16),
inset 0 -1px 0 rgb(0 0 0 / .35),
var(--cfg-sombra-3);
--cfg-anillo: var(--verde); /* 5,53:1 sobre el teal hondo */
}
/* La ventana. Capa radial suelta, encima del fondo y debajo del contenido, pero
FIJA: no depende del puntero, así que en un móvil se ve igual. Dos capas y
una regla física: la luz que entra es CÁLIDA y la sombra a la que cae es más
oscura, no más teal (un teal más saturado no es una sombra, es un baño de
color de marca). */
.catalogo::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(72% 46% at 14% -4%, rgb(255 238 208 / .13) 0%, rgb(255 238 208 / 0) 62%),
radial-gradient(80% 60% at 96% 108%, rgb(2 15 15 / .5) 0%, rgb(2 15 15 / 0) 70%);
}
.catalogo__cabecera { margin-bottom: 4px; }
.catalogo h2 {
color: var(--cfg-sobre-alto);
font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.5rem);
font-weight: 800;
line-height: .98;
letter-spacing: -.035em;
margin-left: -.035em;
}
.catalogo h2::before {
content: "La carta de hoy" / "";
display: block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--verde); /* 5,53:1, y el único verde del bloque */
margin-bottom: .95em;
margin-left: .04em;
}
.catalogo__ayuda { color: var(--cfg-sobre-bajo); max-width: 52ch; }
/* --- Los filtros. Aquí vivía el fallo más grave de la página: el botón activo
era letra blanca sobre fondo transparente (1,14:1). Invisible. -------- */
.catalogo .filtros button {
border: 1px solid rgb(241 233 226 / .26);
background: transparent;
color: var(--cfg-sobre-medio);
padding: 8px 15px;
}
.catalogo .filtros button:hover { border-color: rgb(241 233 226 / .55); color: var(--cfg-sobre-alto); }
.catalogo .filtros button[aria-pressed="true"] {
background: var(--crema);
border-color: var(--crema);
color: var(--teal-osc); /* 13,5:1 */
font-weight: 700;
}
/* --- La tarjeta de plato: AQUÍ SÍ desaparece la caja ----------------------
31 rectángulos blancos con sombra repetidos son exactamente el vocabulario
que /nueva borró. La foto es lo único con forma; el texto va debajo, sobre la
propia losa. Es la receta de sistema.css §8, que la página nunca aplicó. -- */
.catalogo .plato {
position: relative;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
gap: 0;
transition: none;
}
.catalogo .plato:hover,
.catalogo .plato:focus-visible { transform: none; box-shadow: none; }
.catalogo .plato__foto,
.catalogo .plato__sinfoto {
border-radius: var(--cfg-r-foto);
/* Las fotos vienen de estudio con el negro un poco lavado. 4 % y 6 %: no es
un filtro de Instagram, es devolverlas a la mesa oscura. */
filter: contrast(1.04) saturate(1.06);
box-shadow: 0 14px 30px -18px rgb(0 0 0 / .85);
}
/* El zoom al 105 % del hover se retira: mueve la comida, no dice nada, y sin
caja que recorte se saldría de sus propias esquinas redondeadas. La única
respuesta al puntero es la viñeta, que se abre. */
.catalogo .plato:hover .plato__foto { scale: 1; }
/* Viñeta interior. Varias fotos traen su propio fondo beige alrededor de la
bandeja: sobre la losa oscura eso es un halo claro que delata el recorte. Un
oscurecido de borde muy corto lo funde sin tocar la comida, que está en el
centro. Va en un ::before del artículo porque un no admite ni
pseudoelementos ni sombras interiores. */
.catalogo .plato::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
aspect-ratio: 222 / 164;
border-radius: var(--cfg-r-foto);
pointer-events: none;
box-shadow:
inset 0 1px 0 rgb(241 233 226 / .10),
inset 0 0 26px 4px rgb(4 22 22 / .42);
transition: box-shadow .38s var(--curva);
}
.catalogo .plato:hover::before { box-shadow: inset 0 1px 0 rgb(241 233 226 / .16), inset 0 0 26px 4px rgb(4 22 22 / .20); }
/* Las tres piezas sin foto llevaban un degradado verde claro: entre 28 bandejas
oscuras, una caja menta canta más que el propio hueco. Bandeja marcada a
rayas: se lee "pendiente", no "roto". */
.catalogo .plato__sinfoto {
background:
repeating-linear-gradient(45deg, transparent 0 8px, rgb(241 233 226 / .05) 8px 16px),
#0e2b2d;
color: var(--cfg-sobre-bajo); /* 6,3:1 */
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.catalogo .plato__cuerpo { padding: 12px 0 0; gap: 5px; }
.catalogo .plato__nombre { color: var(--cfg-sobre-alto); font-size: 1rem; letter-spacing: -.018em; }
.catalogo .plato__desc { color: var(--cfg-sobre-medio); }
.catalogo .plato__precio { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.catalogo .plato__precio .cfg-cent { font-size: .64em; vertical-align: .42em; }
.catalogo .plato__precio .cfg-eur { font-size: .58em; vertical-align: .5em; color: var(--cfg-sobre-medio); opacity: 1; }
.catalogo .etiqueta {
background: rgb(241 233 226 / .12);
color: var(--cfg-sobre-alto);
border-radius: 999px;
padding: 3px 9px;
font-size: .7rem;
letter-spacing: .06em;
}
.catalogo .etiqueta--vacia { background: rgb(241 233 226 / .08); color: var(--cfg-sobre-bajo); }
/* "Solo en el pedido" iba DEBAJO del precio, a lo ancho de la tarjeta: en los
ocho platos que lo llevan empujaba la fila del precio 26 px hacia arriba y
los precios de una fila dejaban de compartir línea base. Un distintivo va
sobre la foto, que es donde se mira. */
.catalogo .plato { padding-bottom: 0; }
.catalogo .etiqueta--nuevo {
position: absolute;
top: 10px; left: 10px;
z-index: 1;
width: auto;
margin: 0;
padding: 3px 9px;
border-radius: var(--cfg-r-foto);
background: rgb(7 52 57 / .82);
color: var(--cfg-sobre-ambar); /* 9,4:1 sobre ese fondo */
backdrop-filter: blur(2px);
font-size: .64rem;
letter-spacing: .09em;
}
/* Con el distintivo fuera del flujo, el pie se pega abajo y las 31 tarjetas de
la rejilla comparten la línea del precio. */
.catalogo .plato__pie { margin-top: auto; padding-top: 6px; }
/* Los alérgenos son información sanitaria (Reglamento UE 1169/2011): son la
última línea de la página que puede ir justa de contraste. */
.catalogo .plato__alerg { color: var(--cfg-sobre-medio); }
.catalogo .plato__alerg--limpio { color: var(--cfg-sobre-bajo); }
.catalogo .plato__alerg--duda { color: var(--cfg-sobre-ambar); }
.catalogo .plato__alerg--choca { color: var(--cfg-sobre-rojo); }
/* Sin caja, el cerco de "este plato lleva lo que evitas" y el de "elegido" se
dibujan por fuera, sobre la losa. */
.catalogo .plato[data-alergeno="si"] {
outline: 2px solid rgb(240 163 163 / .7);
outline-offset: 8px;
border-radius: 14px;
}
.catalogo .plato.elegido {
outline: 3px solid var(--verde);
outline-offset: 8px;
border-radius: 14px;
}
/* =============================================================================
6 · LOS DOS DIÁLOGOS
El