/* ═══════════════════════════════════════════════════════════════════════════ MONOLITO GRIS — implementación de la hoja de componentes de Claude Design Reglas que no se rompen en ningún componente nuevo: · Monocromo estricto. Ni un solo color con saturación. La jerarquía se resuelve por VALOR y por TAMAÑO, nunca por matiz. · Cero sombras y cero bordes. La separación de capas es #FFFFFF sobre #E5E5E5 y nada más. Prueba para un componente nuevo: ¿lo puedo separar del fondo solo con blanco? Si no, está mal dimensionado. · O es círculo perfecto, o es cápsula, o es línea recta. No hay radios intermedios "de tarjeta" salvo el 20 que el propio sistema deriva. · Etiquetas siempre en MAYÚSCULAS con tracking — y en español mexicano los acentos en caja alta SÍ se ponen. El semáforo lumbar no usa rojo: CLAUDE.md admite "fíltralos o márcalos en rojo" y se eligió filtrar, que además es más seguro. Ver dominio/semaforo.js. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bg-base: #E5E5E5; --surface: #FFFFFF; --text-primary: #333333; --text-secondary: #ADADAD; --text-disabled: #CACACA; --track: #D0D0D0; --overlay: #ACACAC; --on-dark: #FFFFFF; --margen: 30px; --contenido: 380px; /* Ø300 es la medida del entregable, pero es un techo y no un valor fijo: el disco encoge por ANCHO y por ALTO sin dejar de ser círculo perfecto. · 100dvw − 100 deja 50 px de aire a cada lado en pantallas angostas. · 100dvh − 360 es lo que ocupa todo lo demás de Hoy (barra 80, pie 76, riel 68, área segura 61, separación 30) más un respiro. En un iPhone 17 Pro Max —440 × 956— las dos ramas dan de sobra y el disco se queda en 300. En Safari con sus barras a la vista quedan ~745 de alto y también entra. Recién por debajo de 660 empieza a ceder, que es justo el punto en el que dejaría de caber. */ --hero: min(300px, calc(100dvw - 100px), calc(100dvh - 360px)); --chip: 32px; --marca: 10px; --icono: 24px; --toque: 44px; --alto-control: 64px; --capsula-platillo: 186px; /* ── LOS DOS ÚNICOS COLORES DEL PROYECTO ───────────────────────────────── Rompen la regla §1 del sistema —"monocromo estricto, ni un solo color con saturación"— y lo hacen con aprobación explícita de Alejandro (2026-08-06), registrada en docs/decisiones/ADR-006. Muestreados del video cuadro a cuadro, no elegidos: son los valores exactos del anillo de la referencia en el instante del estallido. Viven SOLO aquí, durante 168 ms, una vez al día, cuando se cierra la proteína. En ningún otro sitio de la app hay un píxel saturado. */ --destello-naranja: #FEA800; --destello-azul: #008DFE; --r-redondo: 9999px; --r-tarjeta: 20px; --r-hoja: 24px; --dur-instant: 120ms; --dur-quick: 240ms; --dur-base: 360ms; --dur-expressive: 560ms; --dur-ritual: 3000ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1); --ease-gravity: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* spring/settle del sistema: rigidez 220, amortiguación 22, masa 1. Resuelto de la ecuación del oscilador amortiguado (ζ = 0.742) y muestreado en 24 puntos. Sobrepasa 3.1 % y se asienta en 533 ms — el sistema permite hasta 6 % y prohíbe las curvas `back` y `bounce`, así que esto entra. Un cubic-bezier no puede expresar un rebote; `linear()` sí. */ --spring-settle: linear( 0.0000, 0.0460, 0.1554, 0.2943, 0.4396, 0.5764, 0.6963, 0.7958, 0.8741, 0.9329, 0.9747, 1.0025, 1.0193, 1.0280, 1.0309, 1.0301, 1.0270, 1.0229, 1.0184, 1.0140, 1.0102, 1.0069, 1.0044, 1.0024, 1.0010 ); --dur-settle: 533ms; /* ── MEDIDO DE LA REFERENCIA ──────────────────────────────────────────── Los tres valores de abajo NO son estimaciones ni curvas elegidas por gusto: salen de medir cuadro a cuadro una grabación de Not Boring Habits con ffmpeg. El método y los números están en docs/referencia-movimiento.md. `--spring-golpe` es literalmente la medición: cada muestra es el radio del disco en un cuadro, normalizado. No aproxima la curva con una bezier — ES la curva, muestreada a 30 Hz. Sobrepasa 8.9 % y asienta en 700 ms. Alejandro aprobó explícitamente que esto exceda el tope de 6 % de sobrepaso del sistema (2026-08-06). Es la única excepción viva. */ --spring-golpe: linear( 0.000, 0.177, 0.329, 0.468, 0.582, 0.684, 0.772, 0.848, 0.924, 0.975, 1.013, 1.051, 1.076, 1.089, 1.089, 1.089, 1.076, 1.063, 1.051, 1.025, 1.013, 1.000 ); --dur-crecer: 700ms; /* Salir acelera —como caer— y entrar frena. La referencia usa curvas OPUESTAS para las dos mitades, y es la diferencia entre "se va" y "llega". */ --dur-encoger: 200ms; /* El relleno del disco: 780 ms con una S casi simétrica. A la mitad del tiempo lleva 39 % del recorrido; --ease-standard llevaría 60 %. */ --dur-relleno: 780ms; --ease-relleno: cubic-bezier(0.45, 0, 0.55, 1); /* ── LAS DOS VELOCIDADES ───────────────────────────────────────────────── El patrón que aparece al medir las cinco animaciones de la referencia: NO tiene una duración, tiene dos, y la diferencia es de cinco veces. lo que ENTREGA algo 150-170 ms aviso, teclado, hoja lo que TRANSFORMA el objeto héroe 780-900 ms relleno, cambio de métrica Un aviso o un teclado son información que LLEGA: cuanto antes esté, antes se puede seguir. El disco es el objeto de la pantalla: su recorrido ES el contenido, y correrlo lo convierte en un parpadeo. Este proyecto tenía una sola —`--dur-base`, 360 ms— para todo: lenta para lo que entrega y rápida para lo que importa. Exactamente al revés. */ --dur-aviso: 170ms; --dur-hoja: 150ms; /* Apertura de la app: 280 ms de revelado, frenando fuerte. */ --dur-apertura: 280ms; /* El estallido: 333 ms, medidos del evento 2 del video (cuadros 497-517). */ --dur-estallido: 333ms; /* El disco NUNCA llega a cero al cambiar: se queda en el 14 % del radio. Desaparecer del todo se lee como "se fue"; encogerse, como "sigue aquí, cambiando". */ --escala-punto: 0.14; --display: Geist, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace; } @font-face { font-family: Geist; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/estatico/fuentes/geist.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/estatico/fuentes/geist-mono.woff2") format("woff2"); } * { box-sizing: border-box; } /* Los enlaces no se subrayan: en este sistema lo tocable se distingue por su superficie —la fila blanca, la cápsula, el chip— y no por el subrayado, que además es la pieza que marca la métrica activa del riel. Dos significados para la misma línea de 2 px es exactamente lo que hay que evitar. */ a { color: inherit; text-decoration: none; } /* `hidden` gana sobre cualquier `display` de clase. Sin esto, un elemento con [hidden] y una clase que declara display —`.bloque` es grid— se queda a la vista: así aparecía el temporizador de descanso en 0:00 al abrir la sesión, antes de existir ningún descanso que contar. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg-base); /* NUNCA cambia, en ningún estado ni transición */ color: var(--text-primary); font-family: var(--display); font-size: 16px; line-height: 21px; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } /* ── LO QUE DELATA QUE ES UNA PÁGINA ────────────────────────────────────── Instalada en la pantalla de inicio, la app se juzga contra las nativas, y estos cuatro gestos del navegador son los que rompen la ilusión: · el destello azul al tocar cualquier cosa · el menú de "copiar / compartir" al dejar el dedo apoyado · la selección de texto al arrastrar sobre una etiqueta · el zoom al tocar dos veces seguidas `touch-action: manipulation` es además el que quita el retraso de 300 ms que el navegador espera por si el segundo toque llega. La selección se recupera donde SÍ sirve: los números y las notas se pueden copiar. Bloquearlo todo por prolijidad quitaría algo que se usa. */ * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } button, a, .fila, .platillo, .chip, .tecla, .stepper, .metrica-item, .barra-superior, .riel-metricas { -webkit-user-select: none; user-select: none; touch-action: manipulation; } .t-metrica, .t-hero, .t-cuerpo, .fila-valor, .entrada-numero, .nota { -webkit-user-select: text; user-select: text; } /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────── */ .t-hero { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 32px; } .t-cuerpo { font-size: 16px; font-weight: 400; line-height: 21px; max-width: 268px; text-wrap: pretty; } .t-metrica { font-family: var(--mono); font-size: 17px; font-weight: 400; letter-spacing: 0.04em; line-height: 20px; } .t-contador { font-family: var(--mono); font-size: 15px; font-weight: 400; letter-spacing: 0.04em; line-height: 18px; } .t-etiqueta { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; line-height: 14px; text-transform: uppercase; } .t-pestana { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.10em; line-height: 18px; text-transform: uppercase; } .gris { color: var(--text-secondary); } .tenue { color: var(--text-disabled); } /* ── ESTRUCTURA — tres bandas en FLUJO, nunca superpuestas ──────────────── Medidas tomadas del entregable, sobre su lienzo de 440 × 956: barra superior top 80 · alto 24 · márgenes 30 objeto héroe top 326 · 300 × 300 → centro y = 476 riel de métricas top 827 · alto 68 → termina en 895 Esos 80 de arriba y esos 61 de abajo (956 − 895) NO son números sueltos: son el área segura de un iPhone con isla dinámica más un margen. 80 = 59 (isla) + 21 61 = 34 (barra de inicio) + 27 Por eso van con env(safe-area-inset-*) y no clavados: en el navegador de escritorio los insets valen 0 y las bandas suben, que es lo correcto. ─── LO QUE ESTABA MAL ──────────────────────────────────────────────────── Las dos bandas eran `position:absolute` —una centrada al 50 %, la otra anclada al fondo— sin ninguna relación entre ellas. Mientras la banda inferior fue un riel de 68 px funcionó; en cuanto creció (Peso trae traza, fila y dos botones; Yo trae ocho listas) invadió al héroe y el texto quedó encimado, ilegible y en parte fuera de la pantalla. Ahora las tres bandas son hijas de un flex en columna: el héroe se lleva el espacio sobrante y las otras dos ocupan lo suyo. Superponerse ya no es un estado alcanzable, no un caso que haya que recordar probar. El costo es que el héroe queda centrado en el HUECO entre barras y no sobre la pantalla completa: en Hoy son 11 px más arriba que en el entregable. Es un intercambio deliberado — 11 px imperceptibles a cambio de que ninguna pantalla pueda volver a encimarse. ───────────────────────────────────────────────────────────────────────── */ :root { --seguro-arriba: env(safe-area-inset-top, 0px); --seguro-abajo: env(safe-area-inset-bottom, 0px); --banda-arriba: calc(var(--seguro-arriba) + 21px); --banda-abajo: calc(var(--seguro-abajo) + 27px); } .pantalla { position: relative; min-height: 100dvh; max-width: 440px; margin: 0 auto; padding: 0 var(--margen); display: flex; flex-direction: column; } /* `height` incluye el relleno (border-box), así que el alto total es relleno + 24 y la caja de contenido mide exactamente los 24 del icono. Los blancos de toque de 44 se desbordan 10 px por lado y quedan centrados sobre esa línea, igual que en el entregable. Antes esto era `height:24px` + `padding-top:24px`: con border-box la caja de contenido salía de 0 px de alto y la barra entera se montaba en el borde superior de la pantalla, encima de la isla dinámica. */ .barra-superior { flex: none; position: relative; z-index: 2; height: calc(var(--banda-arriba) + var(--icono)); padding-top: var(--banda-arriba); display: flex; align-items: center; justify-content: space-between; } /* ── RIEL DE PESTAÑAS — se desplaza, y la abierta se centra ─────────────── Antes eran tres nombres fijos más un menú de tres puntos, y no cabía una cuarta sección: por eso COMIDA vivía detrás de unos puntos que no dicen a dónde llevan. Con el riel desplazable el número de secciones deja de estar limitado por el ancho de la pantalla. El hueco lateral que permite centrar la PRIMERA y la ÚLTIMA pestaña son dos separadores HIJOS, y no `padding` del riel. La diferencia no es de estilo: el relleno forma parte de la caja, así que con `padding-inline: 50%` el tamaño mínimo del riel crecía 380 px, se comía todo el ancho de la barra y empujaba la hamburguesa fuera de la pantalla. Como hijos, el hueco vive DENTRO del desplazamiento, que es donde hace falta. El desplazamiento es una consecuencia, no el gesto: quien manda es el toque, y `navegacion.js` centra la activa sola. */ .barra-superior nav { display: flex; align-items: center; gap: 20px; flex: 1 1 0; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; /* SIN scroll-snap a propósito: el navegador reajustaba al punto de anclaje más cercano después de cada centrado programático, y las dos primeras pestañas quedaban 65 px descentradas mientras las tres últimas caían perfectas. Aquí quien decide dónde para el riel es `navegacion.js`; el anclaje era una segunda autoridad discutiendo con la primera. */ /* Las pestañas que salen del riel se desvanecen en vez de cortarse en seco: un corte limpio parece un error de maquetación, un desvanecido dice "hay más de esto hacia allá". A 20 px apenas se notaba; 40 es la mitad de un nombre corto, que es lo que hace falta para leerlo como degradado. */ -webkit-mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } .barra-superior nav::-webkit-scrollbar { display: none; } .barra-superior nav::before, .barra-superior nav::after { content: ""; flex: none; width: 50%; } .barra-superior nav .pestana { flex: none; } /* ── GLIFOS DE 2 PT ────────────────────────────────────────────────────────── Se dibujan, no se escriben. El "+" tipográfico de cada fuente trae su propio grosor y su propia caja, y no coincide con el trazo de 2 pt del resto de los iconos. Dibujarlos mantiene un solo grosor en toda la barra. */ .glifo-mas { position: relative; width: var(--icono); height: var(--icono); } .glifo-mas::before, .glifo-mas::after { content: ""; position: absolute; background: var(--text-disabled); transition: background var(--dur-instant) var(--ease-standard); } .glifo-mas::before { top: 11px; left: 0; width: 24px; height: 2px; } .glifo-mas::after { left: 11px; top: 0; width: 2px; height: 24px; } .icono-desnudo:active .glifo-mas::before, .icono-desnudo:active .glifo-mas::after { background: var(--text-primary); } .glifo-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .glifo-menu i { height: 2px; background: var(--text-disabled); } .glifo-menu i:nth-child(1) { width: 26px; } .glifo-menu i:nth-child(2) { width: 18px; } .glifo-menu i:nth-child(3) { width: 22px; } .glifo-puntos { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px; margin: -10px 0; min-height: auto; } .glifo-puntos i { width: 4px; height: 4px; background: var(--text-disabled); } /* Pantalla de OBJETO: el héroe se queda con todo el espacio sobrante y flota en su centro; la banda inferior ocupa lo suyo, abajo. El vacío entre las dos no se rellena nunca: si hay más contenido, es una pantalla de LISTA. Las tres filas `1fr auto 1fr` centran EL DISCO, no el conjunto del disco con su pie. No es lo mismo: centrando el conjunto, el disco sube ~80 px y deja un hueco muerto entre el pie y el riel. El pie cuelga en la fila de abajo, que es exactamente lo que hace el entregable —disco en el centro, métrica secundaria colgando— y lo que el sistema llama objeto suspendido (§5.2). Lo que queda arriba del disco entra en la primera fila pegado a su borde inferior: en Hoy son los registros pendientes de enviar, que el entregable pone en y=250, sobre el disco, porque son estado y no una acción. */ /* `min-height: min-content` es la red de seguridad: sin ella, flex COMPRIME la región por debajo de su contenido cuando no alcanza el espacio, y el pie del héroe se desborda encima de la banda inferior. Con ella, el contenido empuja y lo que cede es el disco, que para eso tiene su min() en --hero. */ .centro { flex: 1; min-height: min-content; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; } .centro > .hero { grid-row: 2; } .centro > .hero-pie { grid-row: 3; align-self: start; } .centro > :not(.hero):not(.hero-pie) { grid-row: 1; align-self: end; margin-bottom: 40px; } .banda-inferior { flex: none; display: grid; gap: 16px; justify-items: center; width: 100%; padding-bottom: var(--banda-abajo); } /* Pantalla de LISTA: el contenido no cabe en el hueco, así que se le da su propia región con scroll interno. Las barras nunca se mueven ni se colapsan al hacer scroll (§8.4: la retícula no se anima). El scroll vive AQUÍ y no en el documento a propósito: la barra superior y la acción del pie tienen que seguir en su sitio con la lista a medio recorrer. Yo tiene ocho listas y Alimentación crece con cada comida del día; con el scroll en el documento, la acción principal se iba al fondo del recorrido. */ .pantalla--lista { height: 100dvh; } .pantalla--lista .contenido { flex: 1; min-height: 0; margin-top: 32px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 24px; scrollbar-width: none; /* Sin acción al pie, el propio scroll respeta el área segura. Con acción, la respeta la acción y aquí basta un respiro. */ padding-bottom: var(--banda-abajo); } .pantalla--lista .contenido::-webkit-scrollbar { display: none; } /* La acción principal queda FUERA del scroll, fija al pie y al alcance del pulgar. Es la regla de "una pantalla, una acción" del sistema: si hay que recorrer la lista entera para encontrar el botón, no está al alcance. */ .pantalla--lista .accion { flex: none; display: grid; gap: 8px; justify-items: center; width: 100%; padding: 12px 0 var(--banda-abajo); /* Difumina el final del scroll contra el fondo, que nunca cambia de color. */ background: linear-gradient(to bottom, rgb(229 229 229 / 0) 0%, var(--bg-base) 14px); } /* Dentro de una lista, héroe y banda son bloques más del flujo: no hay espacio sobrante que repartir, así que las filas de centrado no aplican. */ .pantalla--lista .centro { flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 8px; } .pantalla--lista .centro > .hero, .pantalla--lista .centro > .hero-pie, .pantalla--lista .centro > :not(.hero) { margin-bottom: 0; align-self: center; } .pantalla--lista .banda-inferior { padding-bottom: 0; } /* ── NAVEGACIÓN — el único indicador es el contraste ─────────────────────── */ .pestana { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-disabled); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; transition: color var(--dur-instant) var(--ease-standard); } .pestana[aria-current="page"] { color: var(--text-primary); } .icono-desnudo { width: var(--toque); height: var(--toque); display: grid; place-items: center; color: var(--text-disabled); background: none; border: 0; cursor: pointer; font-size: var(--icono); line-height: 1; text-decoration: none; transition: color var(--dur-instant) var(--ease-standard); } .icono-desnudo:active { color: var(--text-primary); } /* Los blancos de toque de 44 se salen 10 px hacia el margen para que el DIBUJO quede alineado con el contenido y no el rectángulo invisible que lo rodea. Sin esto la hamburguesa caía en x=375 con el margen en 410: se veía metida hacia dentro y desalineada con todo lo demás de la pantalla. */ .barra-superior > .icono-desnudo:first-child { margin-left: calc(-1 * (var(--toque) - var(--icono)) / 2); } .barra-superior > .icono-desnudo:last-child { margin-right: calc(-1 * (var(--toque) - var(--icono)) / 2); } /* Las tres barras son de largos distintos (26/18/22): se alinean por la derecha, que es su lado recto. Centrarlas deja el borde izquierdo dentado. */ .barra-superior > .icono-desnudo:last-child { place-items: center end; } /* ── OBJETO HÉROE ────────────────────────────────────────────────────────── */ /* El relleno son DOS piezas, como en el entregable: 1 · un disco oscuro real, centrado, que crece por width/height 2 · una copia del texto recortada a ese mismo círculo, en blanco El texto se invierte por máscara en vez de desvanecerse o moverse. Animar width/height y no clip-path es a propósito: clip-path no interpola igual de suave en todos los navegadores, y el relleno es el movimiento más visible de la app. */ .hero { position: relative; width: var(--hero); height: var(--hero); border-radius: var(--r-redondo); background: var(--surface); overflow: hidden; flex: none; } /* El relleno se mide en PORCENTAJE del disco, no en px. El disco encoge en pantallas cortas o angostas (ver --hero) y con un diámetro en píxeles el relleno se quedaba con la medida del disco de 300: al 100 % se desbordaba, y al 40 % mostraba una proporción que no era la del dato. */ .hero-relleno { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--llenado, 0%); height: var(--llenado, 0%); border-radius: var(--r-redondo); background: #1A1A1A; transition: width var(--dur-base) var(--ease-standard), height var(--dur-base) var(--ease-standard); } .hero-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; text-align: center; } /* Sobre una caja cuadrada, circle(R%) toma como referencia el lado: R = la mitad del diámetro, en las mismas unidades que .hero-relleno. */ .hero-capa--llena { color: var(--on-dark); clip-path: circle(var(--radio-llenado, 0%) at 50% 50%); } /* Sin dato no rellena NADA. Un disco a medias comunicaría una proporción que no se conoce, que es peor que no comunicar nada. */ .hero--sin-dato .hero-relleno, .hero--sin-dato .hero-capa--llena { display: none; } /* La métrica secundaria vive DEBAJO del disco, a 24 px: dentro, el borde del relleno la cortaba a la mitad justo en el rango de 30-45 %, que es el que se ve casi todas las mañanas. */ .hero-pie { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 24px; text-align: center; } /* ── CHIP DE MÉTRICA · Ø32 ───────────────────────────────────────────────── */ .riel-metricas { display: flex; gap: 12px; justify-content: center; } /* Ancho fijo de 32 y separaciones por espaciadores de 10 y 8, no por `gap`: así la etiqueta y el subrayado quedan a distancia constante del chip aunque el texto cambie de largo (PROT / KCAL / CARB / GRAS / FIB / AGUA). */ .metrica-item { width: var(--chip); display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; min-height: auto; min-width: auto; color: inherit; text-decoration: none; } .chip { width: var(--chip); height: var(--chip); border-radius: var(--r-redondo); display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-primary); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; transition: transform var(--dur-instant) var(--ease-standard); } .metrica-item:active .chip { transform: scale(0.96); } /* Cumplido cambia el SÍMBOLO y el relleno, no agrega insignia ni color. */ .chip--cumplido { background: var(--text-primary); color: var(--on-dark); } .chip--inactivo, .chip--sin-dato { color: var(--text-secondary); } .metrica-hueco-etiqueta { height: 10px; } .metrica-hueco-subrayado { height: 8px; } /* La etiqueta no puede ensanchar la columna. `es-piso` le cuelga un "+" y eso llevaba CARB y GRAS de 32 a 38 px: cada una se desbordaba 3 px por lado y tocaba a sus vecinas, con el riel entero descuadrado. Ahora la etiqueta mide los 32 del chip y el "+" se dibuja fuera del flujo. */ .metrica-item > .t-etiqueta { position: relative; width: 100%; text-align: center; white-space: nowrap; } .metrica-item > .t-etiqueta .es-piso { position: absolute; top: -1px; left: 100%; } /* El indicador de selección es un subrayado de 24×2, la misma pieza que usa la navegación inferior del sistema. Siempre presente, transparente si no está activo: si apareciera y desapareciera, la retícula se movería, y §8.4 dice que la retícula no se anima. */ .metrica-subrayado { width: 24px; height: 2px; background: transparent; transition: background var(--dur-instant) var(--ease-standard); } .metrica-item[aria-current="true"] .metrica-subrayado { background: var(--text-primary); } /* ── MARCA · Ø10 — seguridad y envío comparten pieza ─────────────────────── */ .marca { width: var(--marca); height: var(--marca); border-radius: var(--r-redondo); flex: none; } .marca--permitido { background: var(--text-primary); } .marca--revisar { background: var(--text-secondary); } .marca--excluido { background: var(--text-disabled); } .marca--enviado { background: var(--text-primary); } .marca--pendiente { background: var(--text-disabled); } /* Un ejercicio excluido se tacha además del disco: los tres estados tienen que distinguirse en blanco y negro puro y a tres metros. */ .excluido-nombre { color: var(--text-secondary); text-decoration: line-through 1.5px; } /* ── FILA DE LISTA · 64 pt, radio 20 ─────────────────────────────────────── */ .fila { display: flex; align-items: center; gap: 12px; min-height: var(--alto-control); padding: 0 20px; background: var(--surface); border-radius: var(--r-tarjeta); width: 100%; border: 0; text-align: left; color: inherit; cursor: pointer; font-family: inherit; font-size: 16px; transition: transform var(--dur-instant) var(--ease-standard); } .fila:active { transform: scale(0.98); } .fila--estatica { cursor: default; } .fila--estatica:active { transform: none; } .fila-cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; } .fila-valor { font-family: var(--mono); font-size: 14px; color: var(--text-secondary); flex: none; } .lista { display: grid; gap: 8px; width: 100%; } /* Un grupo suelto dentro de una lista: la traza con su leyenda, un par de números. No es una lista de filas y no lleva superficie blanca. */ .bloque { display: grid; gap: 12px; justify-items: center; width: 100%; } /* El texto explicativo se centra y se limita en ancho: a 380 px de ancho completo, 16/21 da renglones de más de 70 caracteres. */ .nota { text-align: center; margin: 0 auto; max-width: 300px; } /* ── CÁPSULA DE PLATILLO · 186 × 64, dos columnas ────────────────────────── */ /* Un disco Ø96 no cabía los nombres de platillo completos, y con ingredientes sueltos registrar una comida costaba cuatro toques. La cápsula es un radio que el sistema ya permite. */ .reticula-platillos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; } .platillo { min-height: var(--alto-control); border-radius: var(--r-redondo); background: var(--surface); color: var(--text-primary); border: 0; cursor: pointer; padding: 8px 16px; display: grid; align-content: center; gap: 2px; text-align: center; transition: transform var(--dur-instant) var(--ease-standard); } .platillo:active { transform: scale(0.96); } .platillo--receta { background: var(--text-primary); color: var(--on-dark); } .platillo-nombre { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .platillo-macros { font-family: var(--mono); font-size: 12px; opacity: 0.65; } /* ── BOTONES ─────────────────────────────────────────────────────────────── */ /* Se centra con flex y no con `text-align`: la mitad de los botones de la app son —anterior, siguiente, volver— y un ancla no hereda el centrado que un