/* =========================================================
   rt-nutri · CSS de UI de producto (capa única) · tema v2 "Peltre"
   Fuente de verdad: proyectos/rt-nutri/tema.md (v2, 2026-10-11).
   · Tokens en 3 capas (tema.md §3): primitivos --rtn-p-* (ÚNICOS literales
     de color del archivo, solo en :root) → semánticos --rtn-* → componente
     --rtn-<componente>-*. Las reglas de componente usan solo semánticos y de
     componente, y NUNCA se tocan por esquema (§3.1 regla 1).
   · Esquemas (§2, §9): claro por defecto; oscuro por
     :root[data-esquema="oscuro"] (elección manual, la pone app/rtn-esquema.js)
     y por @media (prefers-color-scheme: dark) sin atributo "claro". Los dos
     bloques oscuros son COPIA IDÉNTICA (§3.1 regla 3: sin la función de color
     de dos valores): mismas propiedades con los mismos valores.
   · Impresión: siempre en claro. @media print re-declara EXACTAMENTE las
     capas 2 y 3 claras del :root (mismos pares) más color-scheme: light.
   · Mobile-first · BEM · tipografía Recursive Linear/Casual (§5).
   ========================================================= */

/* ---- Fuentes (Recursive, OFL; subset latin; autoalojadas y precacheadas
   por el SW). Medidas con fontTools 4.66.1 (2026-10-11): lineal variable
   400–700 = 38 580 B, Casual 700 = 25 392 B; total 63 972 B ≤ 120 KB.
   Licencia: ../fonts/OFL.txt ---- */

@font-face {
	font-family: "Recursive";
	src: url("../fonts/recursive-lineal-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Recursive Casual";
	src: url("../fonts/recursive-casual-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light dark;

	/* =========================================================
	   1 · PRIMITIVOS — la paleta cruda. Únicos hex del archivo.
	   ========================================================= */

	/* Neutros: peltre y tinta (H ≈ 255) */
	--rtn-p-n-100: #ffffff;  /* esmalte */
	--rtn-p-n-97:  #f2f5f9;  /* peltre (lienzo claro) */
	--rtn-p-n-95:  #e9edf3;  /* jaspe (sup-2 claro) · luz de esmalte (tinta oscura) */
	--rtn-p-n-80:  #b4bfcf;
	--rtn-p-n-70:  #919eb1;
	--rtn-p-n-63:  #7f8a9a;
	--rtn-p-n-58:  #6d7a90;
	--rtn-p-n-50:  #58647a;
	--rtn-p-n-44:  #46536a;
	--rtn-p-n-31:  #22304a;
	--rtn-p-n-29:  #1e2b41;  /* jarro alto */
	--rtn-p-n-26:  #182437;  /* jarro */
	--rtn-p-n-22:  #0f1b2e;  /* tinta RiosTec */
	--rtn-p-n-21:  #101a2b;  /* mesa de noche */

	--rtn-p-borde-dia:          rgba(15, 27, 46, .10);
	--rtn-p-borde-fuerte-dia:   rgba(15, 27, 46, .18);
	--rtn-p-borde-noche:        rgba(233, 237, 243, .12);
	--rtn-p-borde-fuerte-noche: rgba(233, 237, 243, .22);
	--rtn-p-velo-dia:           rgba(15, 27, 46, .45);
	--rtn-p-velo-noche:         rgba(4, 8, 16, .66);
	--rtn-p-sombra-dia:         rgba(15, 27, 46, .14);
	--rtn-p-sombra-noche:       rgba(0, 0, 0, .50);

	/* Azul RiosTec (H ≈ 264) */
	--rtn-p-a-95: #e8effb;
	--rtn-p-a-80: #9ebef8;
	--rtn-p-a-63: #6488d6;
	--rtn-p-a-54: #366bd3;
	--rtn-p-a-49: #2c5cc0;
	--rtn-p-a-44: #1b4db1;  /* azul RiosTec */
	--rtn-p-a-38: #163e8e;
	--rtn-p-a-31: #1d2f52;
	--rtn-p-a-borde-dia:   rgba(27, 77, 177, .45);
	--rtn-p-a-borde-noche: rgba(158, 190, 248, .45);

	/* Estados */
	--rtn-p-verde-95: #e3f3ec;  --rtn-p-verde-81: #86d29b;  --rtn-p-verde-53: #0c7a54;  --rtn-p-verde-29: #16321f;
	--rtn-p-ambar-96: #fbf1dc;  --rtn-p-ambar-80: #e7b369;  --rtn-p-ambar-50: #8a5a00;  --rtn-p-ambar-29: #3a270b;
	--rtn-p-rojo-95:  #fbeaec;  --rtn-p-rojo-79:  #fda19e;  --rtn-p-rojo-48:  #b02836;  --rtn-p-rojo-28:  #412120;

	/* Comida: 4 pasos por tono. 96 = fondo claro · 50 = sólido claro · 80 = sólido oscuro · 30 = fondo oscuro */
	--rtn-p-tostado-96: #f8eed8;  --rtn-p-tostado-50: #7d5a1e;  --rtn-p-tostado-80: #deb77c;  --rtn-p-tostado-30: #3c2a0d;  /* cereales */
	--rtn-p-hoja-96:    #e5f3e3;  --rtn-p-hoja-50:    #2a7a2f;  --rtn-p-hoja-80:    #91d191;  --rtn-p-hoja-30:    #1d341d;  /* verduras */
	--rtn-p-pitaya-96:  #fbe8f0;  --rtn-p-pitaya-50:  #b0306a;  --rtn-p-pitaya-80:  #f7a0be;  --rtn-p-pitaya-30:  #42232e;  /* frutas */
	--rtn-p-achiote-96: #fdece3;  --rtn-p-achiote-50: #b4441a;  --rtn-p-achiote-80: #fba589;  --rtn-p-achiote-30: #43251a;  /* origen animal */
	--rtn-p-frijol-96:  #efe9f7;  --rtn-p-frijol-50:  #6b3fa0;  --rtn-p-frijol-80:  #caadf9;  --rtn-p-frijol-30:  #322843;  /* leguminosas */
	--rtn-p-cielo-96:   #e5f1f8;  --rtn-p-cielo-50:   #0369a1;  --rtn-p-cielo-80:   #7cc6ff;  --rtn-p-cielo-30:   #153145;  /* lácteos */
	--rtn-p-oliva-96:   #f1f0dc;  --rtn-p-oliva-50:   #5c5a0a;  --rtn-p-oliva-80:   #c3c37a;  --rtn-p-oliva-30:   #30300f;  /* grasas */
	--rtn-p-piloncillo-96: #f1ece8; --rtn-p-piloncillo-50: #6b5f57; --rtn-p-piloncillo-80: #c8bbb2; --rtn-p-piloncillo-30: #362b24; /* azúcares */

	/* Avatares: 6 tonos × 2 esquemas (inicial en --rtn-tinta) */
	--rtn-p-av1-dia: #dbe7fb;  --rtn-p-av2-dia: #fde2cf;  --rtn-p-av3-dia: #d9f0e6;
	--rtn-p-av4-dia: #ece0f7;  --rtn-p-av5-dia: #fbf0c4;  --rtn-p-av6-dia: #f9dbe3;
	--rtn-p-av1-noche: #1f3358; --rtn-p-av2-noche: #4a2c1c; --rtn-p-av3-noche: #173a2e;
	--rtn-p-av4-noche: #35274d; --rtn-p-av5-noche: #3d3412; --rtn-p-av6-noche: #48222f;

	/* =========================================================
	   2 · SEMÁNTICOS — esquema CLARO (peltre de día)
	   ========================================================= */
	--rtn-lienzo:             var(--rtn-p-n-97);
	--rtn-superficie:         var(--rtn-p-n-100);
	--rtn-superficie-elevada: var(--rtn-p-n-100);
	--rtn-superficie-2:       var(--rtn-p-n-95);
	--rtn-tinta:   var(--rtn-p-n-22);
	--rtn-tinta-2: var(--rtn-p-n-44);
	--rtn-tinta-3: var(--rtn-p-n-50);
	--rtn-borde:         var(--rtn-p-borde-dia);
	--rtn-borde-fuerte:  var(--rtn-p-borde-fuerte-dia);
	--rtn-borde-control: var(--rtn-p-n-63);
	--rtn-velo:          var(--rtn-p-velo-dia);
	--rtn-foco:          var(--rtn-p-a-38);

	--rtn-azul:       var(--rtn-p-a-44);   /* RELLENO de acción (blanco encima) */
	--rtn-azul-hover: var(--rtn-p-a-38);   /* hover del relleno */
	--rtn-azul-tinta: var(--rtn-p-a-38);   /* azul COMO TEXTO, enlace, ícono */
	--rtn-azul-trazo: var(--rtn-p-a-44);   /* azul COMO TRAZO no-texto: orillas, indicadores, borde de selección (G1) */
	--rtn-azul-dim:   var(--rtn-p-a-95);
	--rtn-azul-borde: var(--rtn-p-a-borde-dia);  /* borde decorativo del secundario */

	--rtn-sobre-azul:   var(--rtn-p-n-100);
	--rtn-sobre-estado: var(--rtn-p-n-100);
	--rtn-sobre-grupo:  var(--rtn-p-n-100);

	--rtn-exito: var(--rtn-p-verde-53);  --rtn-exito-dim: var(--rtn-p-verde-95);
	--rtn-aviso: var(--rtn-p-ambar-50);  --rtn-aviso-dim: var(--rtn-p-ambar-96);
	--rtn-error: var(--rtn-p-rojo-48);   --rtn-error-dim: var(--rtn-p-rojo-95);
	--rtn-info:     var(--rtn-azul-tinta);
	--rtn-info-dim: var(--rtn-azul-dim);

	--rtn-g-cereales:    var(--rtn-p-tostado-50);    --rtn-g-cereales-dim:    var(--rtn-p-tostado-96);
	--rtn-g-verduras:    var(--rtn-p-hoja-50);       --rtn-g-verduras-dim:    var(--rtn-p-hoja-96);
	--rtn-g-frutas:      var(--rtn-p-pitaya-50);     --rtn-g-frutas-dim:      var(--rtn-p-pitaya-96);
	--rtn-g-animal:      var(--rtn-p-achiote-50);    --rtn-g-animal-dim:      var(--rtn-p-achiote-96);
	--rtn-g-leguminosas: var(--rtn-p-frijol-50);     --rtn-g-leguminosas-dim: var(--rtn-p-frijol-96);
	--rtn-g-lacteos:     var(--rtn-p-cielo-50);      --rtn-g-lacteos-dim:     var(--rtn-p-cielo-96);
	--rtn-g-grasas:      var(--rtn-p-oliva-50);      --rtn-g-grasas-dim:      var(--rtn-p-oliva-96);
	--rtn-g-azucares:    var(--rtn-p-piloncillo-50); --rtn-g-azucares-dim:    var(--rtn-p-piloncillo-96);

	--rtn-av-1: var(--rtn-p-av1-dia); --rtn-av-2: var(--rtn-p-av2-dia); --rtn-av-3: var(--rtn-p-av3-dia);
	--rtn-av-4: var(--rtn-p-av4-dia); --rtn-av-5: var(--rtn-p-av5-dia); --rtn-av-6: var(--rtn-p-av6-dia);

	--rtn-sombra-card:  none;  /* las tarjetas no flotan: superficie, borde y orilla */
	--rtn-sombra-barra: 0 -2px 16px var(--rtn-p-sombra-dia);
	--rtn-sombra-modal: 0 16px 48px var(--rtn-p-sombra-dia);
	--rtn-sombra-menu:  0 8px 24px var(--rtn-p-sombra-dia);

	/* =========================================================
	   3 · COMPONENTE — solo lo que invierte o es propio
	   ========================================================= */
	--rtn-plato-orilla:    var(--rtn-azul-trazo);
	--rtn-plato-fondo:     var(--rtn-superficie);
	--rtn-conteo-contorno: var(--rtn-p-a-38);
	--rtn-conteo-relleno:  var(--rtn-p-a-63);
	--rtn-conteo-atenuado: var(--rtn-p-n-63);
	--rtn-toast-fondo:  var(--rtn-p-n-22);
	--rtn-toast-texto:  var(--rtn-p-n-100);
	--rtn-toast-ico:    var(--rtn-p-verde-95);
	--rtn-toast-accion: var(--rtn-p-a-95);
	--rtn-toast-foco:   var(--rtn-p-a-95);

	/* =========================================================
	   4 · NO-COLOR (no cambian por esquema)
	   ========================================================= */
	--rtn-font-ui:      "Recursive", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rtn-font-display: "Recursive Casual", "Recursive", system-ui, -apple-system, sans-serif;
	--rtn-fs-2xs:  .6875rem;  /* 11: solo insignias y avatares de 24 */
	--rtn-fs-xs:   .8125rem;  /* 13 */
	--rtn-fs-sm:   .875rem;   /* 14 */
	--rtn-fs-base: 1rem;      /* 16 */
	--rtn-fs-md:   1.125rem;  /* 18 */
	--rtn-fs-lg:   1.3125rem; /* 21 */
	--rtn-fs-xl:   1.5rem;    /* 24 */
	--rtn-fs-2xl:  clamp(1.875rem, 7vw, 2.25rem);  /* 30→36 */
	--rtn-fs-nino: clamp(2.25rem, 10vw, 3rem);     /* 36→48 */
	--rtn-lh-display: 1.1; --rtn-lh-tight: 1.2; --rtn-lh-base: 1.5;
	--rtn-tracking-display: -.01em;

	--rtn-esp-1: 4px;  --rtn-esp-2: 8px;  --rtn-esp-3: 12px; --rtn-esp-4: 16px;
	--rtn-esp-5: 24px; --rtn-esp-6: 32px; --rtn-esp-7: 48px; --rtn-esp-8: 64px;

	--rtn-radio-hero:  24px;  /* tarjeta protagonista ("Ahora toca", plato del niño) */
	--rtn-radio:       20px;  /* hoja, panel, diálogo, tarjetas del niño */
	--rtn-radio-lista: 14px;  /* lista agrupada (agenda, familia, súper, ajustes), atajo al súper */
	--rtn-radio-sm:    12px;  /* botón, input, celda de día, nota, chip de sync, cabecera de pasillo, celda de rejilla */
	--rtn-radio-xs:    8px;   /* casilla del súper, ítem de menú */
	--rtn-radio-pill:  999px; /* SOLO badge numérico y pista del switch */

	--rtn-orilla:       2px;  /* orilla de la protagonista y del día de hoy */
	--rtn-orilla-plato: 3px;
	--rtn-plato-m: 96px;
	--rtn-plato-l: 176px;

	--rtn-tap: 48px; --rtn-tap-min: 44px;
	--rtn-fila-super: 56px; --rtn-check: 32px; --rtn-fila-agenda: 64px; --rtn-col-hora: 64px;
	--rtn-topbar: 56px; --rtn-tabbar: 64px; --rtn-sidebar: 240px;
	--rtn-ancho-lectura: 640px;
	--rtn-ancho-login: 440px; --rtn-ancho-panel: 420px; --rtn-ancho-dialogo: 480px;
	--rtn-barra-super: 52px;
	--rtn-conteo-pic: 36px;

	--rtn-dur-1: 120ms; --rtn-dur-2: 200ms;
	--rtn-dur-servir: 160ms; --rtn-escalon-servir: 40ms;
	--rtn-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---- Esquema elegido a mano ---- */
:root[data-esquema="claro"] { color-scheme: light; }

/* =========================================================
   BLOQUE OSCURO (peltre de noche). Solo re-apunta semánticos y de
   componente; CERO literales de color. Se repite IDÉNTICO en la media query.
   ========================================================= */
:root[data-esquema="oscuro"] {
	color-scheme: dark;
	--rtn-lienzo:             var(--rtn-p-n-21);
	--rtn-superficie:         var(--rtn-p-n-26);
	--rtn-superficie-elevada: var(--rtn-p-n-29);
	--rtn-superficie-2:       var(--rtn-p-n-31);
	--rtn-tinta:   var(--rtn-p-n-95);
	--rtn-tinta-2: var(--rtn-p-n-80);
	--rtn-tinta-3: var(--rtn-p-n-70);
	--rtn-borde:         var(--rtn-p-borde-noche);
	--rtn-borde-fuerte:  var(--rtn-p-borde-fuerte-noche);
	--rtn-borde-control: var(--rtn-p-n-58);
	--rtn-velo:          var(--rtn-p-velo-noche);
	--rtn-foco:          var(--rtn-p-a-80);

	--rtn-azul:       var(--rtn-p-a-54);
	--rtn-azul-hover: var(--rtn-p-a-49);   /* MÁS oscuro: aclarar bajaría el blanco de 4.5 */
	--rtn-azul-tinta: var(--rtn-p-a-80);
	--rtn-azul-trazo: var(--rtn-p-a-63);   /* G1: ≥ 3:1 también sobre elevada y sup-2 */
	--rtn-azul-dim:   var(--rtn-p-a-31);
	--rtn-azul-borde: var(--rtn-p-a-borde-noche);

	--rtn-sobre-azul:   var(--rtn-p-n-100);
	--rtn-sobre-estado: var(--rtn-p-n-21);
	--rtn-sobre-grupo:  var(--rtn-p-n-21);

	--rtn-exito: var(--rtn-p-verde-81);  --rtn-exito-dim: var(--rtn-p-verde-29);
	--rtn-aviso: var(--rtn-p-ambar-80);  --rtn-aviso-dim: var(--rtn-p-ambar-29);
	--rtn-error: var(--rtn-p-rojo-79);   --rtn-error-dim: var(--rtn-p-rojo-28);

	--rtn-g-cereales:    var(--rtn-p-tostado-80);    --rtn-g-cereales-dim:    var(--rtn-p-tostado-30);
	--rtn-g-verduras:    var(--rtn-p-hoja-80);       --rtn-g-verduras-dim:    var(--rtn-p-hoja-30);
	--rtn-g-frutas:      var(--rtn-p-pitaya-80);     --rtn-g-frutas-dim:      var(--rtn-p-pitaya-30);
	--rtn-g-animal:      var(--rtn-p-achiote-80);    --rtn-g-animal-dim:      var(--rtn-p-achiote-30);
	--rtn-g-leguminosas: var(--rtn-p-frijol-80);     --rtn-g-leguminosas-dim: var(--rtn-p-frijol-30);
	--rtn-g-lacteos:     var(--rtn-p-cielo-80);      --rtn-g-lacteos-dim:     var(--rtn-p-cielo-30);
	--rtn-g-grasas:      var(--rtn-p-oliva-80);      --rtn-g-grasas-dim:      var(--rtn-p-oliva-30);
	--rtn-g-azucares:    var(--rtn-p-piloncillo-80); --rtn-g-azucares-dim:    var(--rtn-p-piloncillo-30);

	--rtn-av-1: var(--rtn-p-av1-noche); --rtn-av-2: var(--rtn-p-av2-noche); --rtn-av-3: var(--rtn-p-av3-noche);
	--rtn-av-4: var(--rtn-p-av4-noche); --rtn-av-5: var(--rtn-p-av5-noche); --rtn-av-6: var(--rtn-p-av6-noche);

	/* En oscuro la elevación es luminosidad + borde; la sombra casi no se ve */
	--rtn-sombra-card:  none;
	--rtn-sombra-barra: 0 -1px 0 var(--rtn-p-borde-noche);
	--rtn-sombra-modal: 0 16px 48px var(--rtn-p-sombra-noche), 0 0 0 1px var(--rtn-p-borde-noche);
	--rtn-sombra-menu:  0 8px 24px var(--rtn-p-sombra-noche), 0 0 0 1px var(--rtn-p-borde-fuerte-noche);

	--rtn-plato-fondo:     var(--rtn-p-n-21);  /* el plato se ve hondo dentro de la tarjeta */
	--rtn-conteo-contorno: var(--rtn-p-a-80);
	--rtn-conteo-relleno:  var(--rtn-p-a-54);
	--rtn-conteo-atenuado: var(--rtn-p-n-58);
	--rtn-toast-fondo:  var(--rtn-p-n-95);
	--rtn-toast-texto:  var(--rtn-p-n-21);
	--rtn-toast-ico:    var(--rtn-p-verde-53);
	--rtn-toast-accion: var(--rtn-p-a-44);
	--rtn-toast-foco:   var(--rtn-p-a-38);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-esquema="claro"]) {
		color-scheme: dark;
		--rtn-lienzo:             var(--rtn-p-n-21);
		--rtn-superficie:         var(--rtn-p-n-26);
		--rtn-superficie-elevada: var(--rtn-p-n-29);
		--rtn-superficie-2:       var(--rtn-p-n-31);
		--rtn-tinta:   var(--rtn-p-n-95);
		--rtn-tinta-2: var(--rtn-p-n-80);
		--rtn-tinta-3: var(--rtn-p-n-70);
		--rtn-borde:         var(--rtn-p-borde-noche);
		--rtn-borde-fuerte:  var(--rtn-p-borde-fuerte-noche);
		--rtn-borde-control: var(--rtn-p-n-58);
		--rtn-velo:          var(--rtn-p-velo-noche);
		--rtn-foco:          var(--rtn-p-a-80);

		--rtn-azul:       var(--rtn-p-a-54);
		--rtn-azul-hover: var(--rtn-p-a-49);   /* MÁS oscuro: aclarar bajaría el blanco de 4.5 */
		--rtn-azul-tinta: var(--rtn-p-a-80);
		--rtn-azul-trazo: var(--rtn-p-a-63);   /* G1: ≥ 3:1 también sobre elevada y sup-2 */
		--rtn-azul-dim:   var(--rtn-p-a-31);
		--rtn-azul-borde: var(--rtn-p-a-borde-noche);

		--rtn-sobre-azul:   var(--rtn-p-n-100);
		--rtn-sobre-estado: var(--rtn-p-n-21);
		--rtn-sobre-grupo:  var(--rtn-p-n-21);

		--rtn-exito: var(--rtn-p-verde-81);  --rtn-exito-dim: var(--rtn-p-verde-29);
		--rtn-aviso: var(--rtn-p-ambar-80);  --rtn-aviso-dim: var(--rtn-p-ambar-29);
		--rtn-error: var(--rtn-p-rojo-79);   --rtn-error-dim: var(--rtn-p-rojo-28);

		--rtn-g-cereales:    var(--rtn-p-tostado-80);    --rtn-g-cereales-dim:    var(--rtn-p-tostado-30);
		--rtn-g-verduras:    var(--rtn-p-hoja-80);       --rtn-g-verduras-dim:    var(--rtn-p-hoja-30);
		--rtn-g-frutas:      var(--rtn-p-pitaya-80);     --rtn-g-frutas-dim:      var(--rtn-p-pitaya-30);
		--rtn-g-animal:      var(--rtn-p-achiote-80);    --rtn-g-animal-dim:      var(--rtn-p-achiote-30);
		--rtn-g-leguminosas: var(--rtn-p-frijol-80);     --rtn-g-leguminosas-dim: var(--rtn-p-frijol-30);
		--rtn-g-lacteos:     var(--rtn-p-cielo-80);      --rtn-g-lacteos-dim:     var(--rtn-p-cielo-30);
		--rtn-g-grasas:      var(--rtn-p-oliva-80);      --rtn-g-grasas-dim:      var(--rtn-p-oliva-30);
		--rtn-g-azucares:    var(--rtn-p-piloncillo-80); --rtn-g-azucares-dim:    var(--rtn-p-piloncillo-30);

		--rtn-av-1: var(--rtn-p-av1-noche); --rtn-av-2: var(--rtn-p-av2-noche); --rtn-av-3: var(--rtn-p-av3-noche);
		--rtn-av-4: var(--rtn-p-av4-noche); --rtn-av-5: var(--rtn-p-av5-noche); --rtn-av-6: var(--rtn-p-av6-noche);

		/* En oscuro la elevación es luminosidad + borde; la sombra casi no se ve */
		--rtn-sombra-card:  none;
		--rtn-sombra-barra: 0 -1px 0 var(--rtn-p-borde-noche);
		--rtn-sombra-modal: 0 16px 48px var(--rtn-p-sombra-noche), 0 0 0 1px var(--rtn-p-borde-noche);
		--rtn-sombra-menu:  0 8px 24px var(--rtn-p-sombra-noche), 0 0 0 1px var(--rtn-p-borde-fuerte-noche);

		--rtn-plato-fondo:     var(--rtn-p-n-21);  /* el plato se ve hondo dentro de la tarjeta */
		--rtn-conteo-contorno: var(--rtn-p-a-80);
		--rtn-conteo-relleno:  var(--rtn-p-a-54);
		--rtn-conteo-atenuado: var(--rtn-p-n-58);
		--rtn-toast-fondo:  var(--rtn-p-n-95);
		--rtn-toast-texto:  var(--rtn-p-n-21);
		--rtn-toast-ico:    var(--rtn-p-verde-53);
		--rtn-toast-accion: var(--rtn-p-a-44);
		--rtn-toast-foco:   var(--rtn-p-a-38);
	}
}

/* Impresión: siempre en claro. Va DESPUÉS de los dos bloques oscuros: misma
   especificidad (0,2,0), gana por orden. Copia de las capas 2 y 3 claras. */
@media print {
	:root,
	:root[data-esquema="oscuro"],
	:root:not([data-esquema="claro"]) {
		color-scheme: light;
		--rtn-lienzo:             var(--rtn-p-n-97);
		--rtn-superficie:         var(--rtn-p-n-100);
		--rtn-superficie-elevada: var(--rtn-p-n-100);
		--rtn-superficie-2:       var(--rtn-p-n-95);
		--rtn-tinta:   var(--rtn-p-n-22);
		--rtn-tinta-2: var(--rtn-p-n-44);
		--rtn-tinta-3: var(--rtn-p-n-50);
		--rtn-borde:         var(--rtn-p-borde-dia);
		--rtn-borde-fuerte:  var(--rtn-p-borde-fuerte-dia);
		--rtn-borde-control: var(--rtn-p-n-63);
		--rtn-velo:          var(--rtn-p-velo-dia);
		--rtn-foco:          var(--rtn-p-a-38);
		--rtn-azul:       var(--rtn-p-a-44);
		--rtn-azul-hover: var(--rtn-p-a-38);
		--rtn-azul-tinta: var(--rtn-p-a-38);
		--rtn-azul-trazo: var(--rtn-p-a-44);
		--rtn-azul-dim:   var(--rtn-p-a-95);
		--rtn-azul-borde: var(--rtn-p-a-borde-dia);
		--rtn-sobre-azul:   var(--rtn-p-n-100);
		--rtn-sobre-estado: var(--rtn-p-n-100);
		--rtn-sobre-grupo:  var(--rtn-p-n-100);
		--rtn-exito: var(--rtn-p-verde-53);  --rtn-exito-dim: var(--rtn-p-verde-95);
		--rtn-aviso: var(--rtn-p-ambar-50);  --rtn-aviso-dim: var(--rtn-p-ambar-96);
		--rtn-error: var(--rtn-p-rojo-48);   --rtn-error-dim: var(--rtn-p-rojo-95);
		--rtn-info:     var(--rtn-azul-tinta);
		--rtn-info-dim: var(--rtn-azul-dim);
		--rtn-g-cereales:    var(--rtn-p-tostado-50);    --rtn-g-cereales-dim:    var(--rtn-p-tostado-96);
		--rtn-g-verduras:    var(--rtn-p-hoja-50);       --rtn-g-verduras-dim:    var(--rtn-p-hoja-96);
		--rtn-g-frutas:      var(--rtn-p-pitaya-50);     --rtn-g-frutas-dim:      var(--rtn-p-pitaya-96);
		--rtn-g-animal:      var(--rtn-p-achiote-50);    --rtn-g-animal-dim:      var(--rtn-p-achiote-96);
		--rtn-g-leguminosas: var(--rtn-p-frijol-50);     --rtn-g-leguminosas-dim: var(--rtn-p-frijol-96);
		--rtn-g-lacteos:     var(--rtn-p-cielo-50);      --rtn-g-lacteos-dim:     var(--rtn-p-cielo-96);
		--rtn-g-grasas:      var(--rtn-p-oliva-50);      --rtn-g-grasas-dim:      var(--rtn-p-oliva-96);
		--rtn-g-azucares:    var(--rtn-p-piloncillo-50); --rtn-g-azucares-dim:    var(--rtn-p-piloncillo-96);
		--rtn-av-1: var(--rtn-p-av1-dia); --rtn-av-2: var(--rtn-p-av2-dia); --rtn-av-3: var(--rtn-p-av3-dia);
		--rtn-av-4: var(--rtn-p-av4-dia); --rtn-av-5: var(--rtn-p-av5-dia); --rtn-av-6: var(--rtn-p-av6-dia);
		--rtn-sombra-card:  none;
		--rtn-sombra-barra: 0 -2px 16px var(--rtn-p-sombra-dia);
		--rtn-sombra-modal: 0 16px 48px var(--rtn-p-sombra-dia);
		--rtn-sombra-menu:  0 8px 24px var(--rtn-p-sombra-dia);
		--rtn-plato-orilla:    var(--rtn-azul-trazo);
		--rtn-plato-fondo:     var(--rtn-superficie);
		--rtn-conteo-contorno: var(--rtn-p-a-38);
		--rtn-conteo-relleno:  var(--rtn-p-a-63);
		--rtn-conteo-atenuado: var(--rtn-p-n-63);
		--rtn-toast-fondo:  var(--rtn-p-n-22);
		--rtn-toast-texto:  var(--rtn-p-n-100);
		--rtn-toast-ico:    var(--rtn-p-verde-95);
		--rtn-toast-accion: var(--rtn-p-a-95);
		--rtn-toast-foco:   var(--rtn-p-a-95);
	}
}

/* El lienzo va en <html> (iOS toma de ahí el color de la barra y del rebote del scroll). */
html { background: var(--rtn-lienzo); }

/* =========================================================
   GUARDAS Y BASE
   ========================================================= */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }

.rtn-ui {
	margin: 0;
	min-height: 100vh;
	background: var(--rtn-lienzo);
	color: var(--rtn-tinta);
	font-family: var(--rtn-font-ui);
	font-size: var(--rtn-fs-base);
	line-height: var(--rtn-lh-base);
	-webkit-text-size-adjust: 100%;
}

.rtn-ui a { color: var(--rtn-azul-tinta); }

/* Foco de controles (tema.md §6). */
.rtn-ui :focus-visible {
	outline: 3px solid var(--rtn-foco);
	outline-offset: 2px;
}

/* Títulos (h1/h2) con tabindex="-1": reciben foco SOLO por código (navegar,
   abrir hoja) para que el lector anuncie la vista; no son operables. Se quita
   el anillo cuando el navegador no marca :focus-visible, y en los encabezados
   también cuando sí lo marca: Chromium aplica :focus-visible a un focus()
   programático si la última interacción fue de teclado. Los controles
   conservan el anillo (tema.md §6, §14). */
.rtn-ui [tabindex="-1"]:focus:not(:focus-visible),
.rtn-ui h1[tabindex="-1"]:focus,
.rtn-ui h2[tabindex="-1"]:focus { outline: none; }

/* ---- Voces tipográficas (tema.md §5.2) ----
   Casual 700 SOLO en: h1 (.rtn-titulo), nombres de platillo, marca "Nutri"
   y saludo del niño (G7). Todo lo demás hereda Linear de .rtn-ui. */
.rtn-titulo,
.rtn-platillo,
.rtn-marca__nombre {
	font-family: var(--rtn-font-display);
	font-weight: 700;
	line-height: var(--rtn-lh-display);
}

.rtn-titulo {
	margin: 0 0 var(--rtn-esp-4);
	font-size: var(--rtn-fs-2xl);
	letter-spacing: var(--rtn-tracking-display);
}

/* h2 de páginas de lectura y de sección: Linear 700 21 (G7). */
.rtn-subtitulo,
.rtn-seccion__titulo {
	margin: 0 0 var(--rtn-esp-3);
	font-weight: 700;
	font-size: var(--rtn-fs-lg);
	line-height: var(--rtn-lh-tight);
}

.rtn-texto { margin: 0 0 var(--rtn-esp-3); }
.rtn-texto--suave { color: var(--rtn-tinta-2); }

.rtn-meta {
	margin: 0;
	color: var(--rtn-tinta-3);
	font-size: var(--rtn-fs-sm);
}
.rtn-fecha {
	margin: 0 0 var(--rtn-esp-1);
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-sm);
}

.rtn-lista { margin: 0 0 var(--rtn-esp-3); padding-left: var(--rtn-esp-5); }
.rtn-lista li { margin-bottom: var(--rtn-esp-2); }

.rtn-legal__seccion { margin-top: var(--rtn-esp-6); }

.rtn-cita {
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	border-left: 3px solid var(--rtn-azul-trazo);
	background: var(--rtn-superficie);
	font-size: var(--rtn-fs-sm);
}

/* Sello BORRADOR del aviso: estado de aviso (texto + color, nunca solo color). */
.rtn-sello {
	margin: 0 0 var(--rtn-esp-4);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	border: 1px solid var(--rtn-aviso);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-aviso-dim);
	color: var(--rtn-tinta);
}

.rtn-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtn-esp-3);
	margin: var(--rtn-esp-5) 0 0;
}
.rtn-acciones--columna { flex-direction: column; align-items: stretch; }

/* ---- Utilidades ---- */
.rtn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Cifras: Recursive no trae `tnum`; sus cifras ya son tabulares (las 10
   miden 600 u). La declaración documenta la intención y no hace daño
   (tema.md §5.1). `pnum` prohibido en cantidades. */
.rtn-num,
.rtn-persona__porcion,
.rtn-compra__cantidad,
.rtn-progreso__texto,
.rtn-dia__num,
.rtn-pasillo__cuenta,
.rtn-reparto__valor,
.rtn-conteo__texto,
.rtn-agenda__hora,
.rtn-comida__hora,
.rtn-nav__badge { font-variant-numeric: tabular-nums; }

.rtn-ico {
	display: inline-block;
	flex: none;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.rtn-ico--14 { width: 14px; height: 14px; }
.rtn-ico--16 { width: 16px; height: 16px; }
.rtn-ico--20 { width: 20px; height: 20px; }
.rtn-ico--28 { width: 28px; height: 28px; }
.rtn-ico--48 { width: 48px; height: 48px; }
.rtn-ico--64 { width: 64px; height: 64px; stroke-width: 1.25; }

/* Grupo de alimentos por ATRIBUTO (tema.md §3.2, §7): el JS nunca pinta
   color; pone data-grupo y aquí se resuelve el semántico. */
[data-grupo="cereales"]    { --rtn-g: var(--rtn-g-cereales);    --rtn-g-fondo: var(--rtn-g-cereales-dim); }
[data-grupo="verduras"]    { --rtn-g: var(--rtn-g-verduras);    --rtn-g-fondo: var(--rtn-g-verduras-dim); }
[data-grupo="frutas"]      { --rtn-g: var(--rtn-g-frutas);      --rtn-g-fondo: var(--rtn-g-frutas-dim); }
[data-grupo="animal"]      { --rtn-g: var(--rtn-g-animal);      --rtn-g-fondo: var(--rtn-g-animal-dim); }
[data-grupo="leguminosas"] { --rtn-g: var(--rtn-g-leguminosas); --rtn-g-fondo: var(--rtn-g-leguminosas-dim); }
[data-grupo="lacteos"]     { --rtn-g: var(--rtn-g-lacteos);     --rtn-g-fondo: var(--rtn-g-lacteos-dim); }
[data-grupo="grasas"]      { --rtn-g: var(--rtn-g-grasas);      --rtn-g-fondo: var(--rtn-g-grasas-dim); }
[data-grupo="azucares"]    { --rtn-g: var(--rtn-g-azucares);    --rtn-g-fondo: var(--rtn-g-azucares-dim); }

/* =========================================================
   MARCA "Nutri de RiosTec" (D5, tema.md §8.18)
   ========================================================= */
.rtn-marca {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--rtn-esp-2);
	margin: 0 0 var(--rtn-esp-3);
}
.rtn-marca__nombre {
	color: var(--rtn-azul-tinta);
	font-size: var(--rtn-fs-lg);
	letter-spacing: var(--rtn-tracking-display);
}
.rtn-marca__firma {
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-xs);
	font-weight: 600;
}

/* =========================================================
   PÁGINAS DE LECTURA Y LOGIN (tema.md §8.18)
   ========================================================= */
.rtn-pagina {
	max-width: var(--rtn-ancho-lectura);
	margin: 0 auto;
	padding: var(--rtn-esp-6) var(--rtn-esp-4) var(--rtn-esp-5);
}

/* Ícono del plato (48) arriba de la marca en login, landing y páginas. */
.rtn-plato-ico {
	display: block;
	margin: 0 0 var(--rtn-esp-3);
	color: var(--rtn-azul-trazo);
}

/* Login: columna de --rtn-ancho-login sobre el lienzo, sin tarjeta con
   sombra; el formulario va en superficie + borde (tema.md §8.18). */
.rtn-login {
	width: min(calc(100% - 2 * var(--rtn-esp-4)), var(--rtn-ancho-login));
	margin: 0 auto;
	padding: var(--rtn-esp-6) 0;
}
.rtn-login__form {
	margin: 0 0 var(--rtn-esp-4);
	padding: var(--rtn-esp-5) var(--rtn-esp-4);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio);
	background: var(--rtn-superficie);
}
.rtn-login__form > :last-child { margin-bottom: 0; }
/* Login con más carácter: el plato en un halo azul-dim y la marca más grande. */
.rtn-ui--login .rtn-plato-ico {
	box-sizing: content-box;
	padding: var(--rtn-esp-3);
	border-radius: 50%;
	background: var(--rtn-azul-dim);
}
.rtn-ui--login .rtn-marca__nombre { font-size: var(--rtn-fs-xl); }
.rtn-ui--login .rtn-marca { margin-bottom: var(--rtn-esp-4); }

.rtn-form { margin: 0 0 var(--rtn-esp-4); }

/* Tarjeta genérica (puerta de aviso / sesión caducada): sin sombra. */
.rtn-card {
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio);
	box-shadow: var(--rtn-sombra-card);
}

/* ---- Pie ----
   Sin padding lateral: el ancho lo da `width`, así el borde superior mide lo
   mismo que la columna de arriba. Cuenta a 1280 en la landing: .rtn-pagina =
   640 − 2×16 = 608 de texto; pie = min(100% − 32, 640 − 32) = 608. Login:
   columna = min(100% − 32, 440) = pie. A 360: 360 − 32 = 328 los dos. */
.rtn-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rtn-esp-2) var(--rtn-esp-4);
	width: min(calc(100% - 2 * var(--rtn-esp-4)), calc(var(--rtn-ancho-lectura) - 2 * var(--rtn-esp-4)));
	margin: 0 auto;
	padding: var(--rtn-esp-5) 0 var(--rtn-esp-6);
	border-top: 1px solid var(--rtn-borde-fuerte);
	font-size: var(--rtn-fs-sm);
}
.rtn-ui--login .rtn-pie { width: min(calc(100% - 2 * var(--rtn-esp-4)), var(--rtn-ancho-login)); }
.rtn-vista > .rtn-pie { width: 100%; margin-top: var(--rtn-esp-6); }

.rtn-enlace-tap,
.rtn-pie__enlace {
	display: inline-flex;
	align-items: center;
	min-height: var(--rtn-tap-min);
}

.rtn-pie__marca {
	margin: 0 0 0 auto;
	color: var(--rtn-tinta-2);
}

.rtn-app { min-height: 100vh; }
.rtn-app__cargando {
	margin: 0;
	padding: var(--rtn-esp-6) var(--rtn-esp-4);
	color: var(--rtn-tinta-2);
	text-align: center;
}

.rtn-puerta { max-width: var(--rtn-ancho-login); margin: var(--rtn-esp-6) auto; padding: var(--rtn-esp-5) var(--rtn-esp-4); }

/* =========================================================
   BOTONES (tema.md §8.1)
   ========================================================= */
.rtn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rtn-esp-2);
	min-height: var(--rtn-tap);
	padding: 0 var(--rtn-esp-5);
	border: 1.5px solid transparent;
	border-radius: var(--rtn-radio-sm);
	font-family: var(--rtn-font-ui);
	font-weight: 700;
	font-size: var(--rtn-fs-base);
	line-height: var(--rtn-lh-tight);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rtn-dur-1) var(--rtn-ease), border-color var(--rtn-dur-1) var(--rtn-ease);
}
.rtn-btn:active { transform: translateY(1px); }

.rtn-btn--primario,
.rtn-ui .rtn-btn--primario { background: var(--rtn-azul); color: var(--rtn-sobre-azul); }
.rtn-btn--primario:hover { background: var(--rtn-azul-hover); }

.rtn-btn--secundario,
.rtn-ui .rtn-btn--secundario {
	background: var(--rtn-superficie);
	color: var(--rtn-azul-tinta);
	border-color: var(--rtn-azul-borde);
}
.rtn-btn--secundario:hover { background: var(--rtn-azul-dim); }

.rtn-btn--fantasma,
.rtn-ui .rtn-btn--fantasma {
	background: transparent;
	color: var(--rtn-tinta-2);
	padding: 0 var(--rtn-esp-3);
}
.rtn-btn--fantasma:hover { background: var(--rtn-superficie-2); }

.rtn-btn--peligro {
	background: var(--rtn-superficie);
	color: var(--rtn-error);
	border-color: var(--rtn-error-dim);
}
.rtn-btn--peligro:hover { background: var(--rtn-error-dim); }

/* Secundario/fantasma chico: 44 de alto ("Elegir platillo" en la agenda). */
.rtn-btn--chico { min-height: var(--rtn-tap-min); padding: 0 var(--rtn-esp-4); font-size: var(--rtn-fs-sm); }

/* Botón de solo ícono (⋯, cerrar, flechas): 44×44, hover = cuadrado redondeado. */
.rtn-btn--icono,
.rtn-ui .rtn-btn--icono {
	min-width: var(--rtn-tap-min);
	min-height: var(--rtn-tap-min);
	padding: 0;
	background: transparent;
	color: var(--rtn-tinta-2);
}
.rtn-btn--icono:hover { background: var(--rtn-superficie-2); color: var(--rtn-azul-tinta); }
/* Flecha sin semana previa/siguiente: solo el ícono atenuado (no es texto). */
.rtn-btn--icono:disabled,
.rtn-btn--icono:disabled:hover { background: transparent; color: var(--rtn-borde-control); }

.rtn-btn:disabled,
.rtn-btn[aria-disabled="true"] {
	background: var(--rtn-superficie-2);
	color: var(--rtn-tinta-3);
	border-color: transparent;
	cursor: default;
}

.rtn-btn--ancho { width: 100%; }

/* Cargando: aria-busy → spinner sin cambiar el tamaño del botón. */
.rtn-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.rtn-btn[aria-busy="true"] > * { visibility: hidden; }
.rtn-btn[aria-busy="true"]::after,
.rtn-spinner {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rtn-girar .7s linear infinite;
}
.rtn-btn[aria-busy="true"]::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	color: var(--rtn-azul-tinta);
}
.rtn-btn--primario[aria-busy="true"] { background: var(--rtn-azul); }
.rtn-btn--primario[aria-busy="true"]::after { color: var(--rtn-sobre-azul); }

@keyframes rtn-girar { to { transform: rotate(360deg); } }

/* =========================================================
   CAMPOS, SEGMENTADO, OPCIONES, SWITCH (tema.md §8.2, §8.3)
   ========================================================= */
.rtn-campo { margin: 0 0 var(--rtn-esp-4); }

.rtn-campo__label {
	display: block;
	margin-bottom: var(--rtn-esp-2);
	font-weight: 600;
}

.rtn-campo__input {
	display: block;
	width: 100%;
	min-height: var(--rtn-tap);
	padding: 0 var(--rtn-esp-3);
	border: 1.5px solid var(--rtn-borde-control);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie);
	color: var(--rtn-tinta);
	font-family: var(--rtn-font-ui);
	font-size: var(--rtn-fs-base);
}
/* Foco del input: borde --rtn-azul-trazo (≥3:1 en los dos esquemas) + halo. */
.rtn-campo__input:focus,
.rtn-campo__input:focus-visible {
	border-color: var(--rtn-azul-trazo);
	box-shadow: 0 0 0 3px var(--rtn-azul-dim);
	outline: none;
}

.rtn-campo__ayuda {
	margin: var(--rtn-esp-1) 0 0;
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-sm);
}

.rtn-campo__error {
	margin: var(--rtn-esp-1) 0 0;
	color: var(--rtn-error);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
}
.rtn-campo__error::before { content: "⚠ "; }
.rtn-campo--error .rtn-campo__input { border-color: var(--rtn-error); }

select.rtn-campo__input { padding-right: var(--rtn-esp-2); }

.rtn-campo__con-unidad { position: relative; }
.rtn-campo__con-unidad .rtn-campo__input { padding-right: var(--rtn-esp-7); }
.rtn-campo__unidad {
	position: absolute;
	top: 0;
	right: var(--rtn-esp-3);
	display: flex;
	align-items: center;
	height: var(--rtn-tap);
	color: var(--rtn-tinta-3);
	pointer-events: none;
}

.rtn-fecha3 {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1.2fr;
	gap: var(--rtn-esp-2);
}

fieldset.rtn-campo { border: 0; padding: 0; min-width: 0; }
fieldset.rtn-campo > legend { padding: 0; }

/* Error de formulario / servidor. */
.rtn-error {
	margin: 0 0 var(--rtn-esp-4);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	border: 1px solid var(--rtn-error);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-error-dim);
	color: var(--rtn-error);
}
.rtn-error::before { content: "⚠ "; }

/* Segmentado (Sí / No / No sé; sexo; esquema; cuartos): radio nativo oculto. */
.rtn-segmentado {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--rtn-esp-2);
}
.rtn-segmentado__opcion { position: relative; display: block; min-width: 0; }

.rtn-segmentado__input,
.rtn-opcion__input,
.rtn-avatar-radio__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Si una etiqueta no cabe, la opción crece a 2 líneas (sin recorte). */
.rtn-segmentado__texto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rtn-esp-1);
	min-height: var(--rtn-tap);
	padding: var(--rtn-esp-1) var(--rtn-esp-2);
	border: 1.5px solid var(--rtn-borde-control);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie);
	color: var(--rtn-tinta);
	font-weight: 600;
	line-height: var(--rtn-lh-tight);
	text-align: center;
	cursor: pointer;
}
.rtn-segmentado__input:checked + .rtn-segmentado__texto {
	border-color: var(--rtn-azul-trazo);
	background: var(--rtn-azul-dim);
	color: var(--rtn-azul-tinta);
}
.rtn-segmentado__input:checked + .rtn-segmentado__texto::before { content: "✓"; }

.rtn-segmentado__input:focus-visible + .rtn-segmentado__texto,
.rtn-opcion__input:focus-visible + .rtn-opcion__cuerpo,
.rtn-avatar-radio__input:focus-visible + .rtn-avatar {
	outline: 3px solid var(--rtn-foco);
	outline-offset: 2px;
}

/* Tarjeta-radio (actividad, objetivo). */
.rtn-opciones { display: grid; gap: var(--rtn-esp-2); }
.rtn-opcion { position: relative; display: block; }
.rtn-opcion__cuerpo {
	display: flex;
	align-items: center;
	gap: var(--rtn-esp-3);
	min-height: var(--rtn-tap);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	border: 1.5px solid var(--rtn-borde-control);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie);
	cursor: pointer;
}
.rtn-opcion__titulo { display: block; font-weight: 600; }
.rtn-opcion__ayuda { display: block; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-opcion__marca {
	flex: none;
	width: 24px;
	height: 24px;
	margin-left: auto;
	border: 2px solid var(--rtn-borde-control);
	border-radius: 50%;
}
.rtn-opcion__input:checked + .rtn-opcion__cuerpo {
	border-color: var(--rtn-azul-trazo);
	background: var(--rtn-azul-dim);
}
/* El punto marcado es un indicador (trazo): --rtn-azul-trazo, G1. */
.rtn-opcion__input:checked + .rtn-opcion__cuerpo .rtn-opcion__marca {
	border-color: var(--rtn-azul-trazo);
	background: var(--rtn-azul-trazo);
	box-shadow: inset 0 0 0 4px var(--rtn-azul-dim);
}

.rtn-avatares { display: flex; flex-wrap: wrap; gap: var(--rtn-esp-2); }
.rtn-avatar-radio { position: relative; display: block; cursor: pointer; }
.rtn-avatar-radio .rtn-avatar { width: var(--rtn-tap); height: var(--rtn-tap); border: 2px solid transparent; }
.rtn-avatar-radio__input:checked + .rtn-avatar { border-color: var(--rtn-azul-trazo); box-shadow: 0 0 0 2px var(--rtn-azul-dim); }

/* Casilla de consentimiento: checkbox de 24 en fila de 48. */
.rtn-casilla {
	display: flex;
	align-items: flex-start;
	gap: var(--rtn-esp-3);
	min-height: var(--rtn-tap);
	padding: var(--rtn-esp-3) 0;
	cursor: pointer;
}
.rtn-casilla__input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--rtn-azul);
}
.rtn-casilla__ayuda { display: block; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-xs); }

.rtn-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 var(--rtn-esp-3); }
.rtn-checks .rtn-casilla { padding: var(--rtn-esp-2) 0; align-items: center; }

/* Switch (tema.md §8.3): apagado = pista sup-2 + borde de control y perilla
   --rtn-tinta-3 (G2: 5.08 / 4.86 contra la pista); encendido = pista azul y
   perilla --rtn-sobre-azul. Sin sombra en la perilla. */
.rtn-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-2);
	min-height: var(--rtn-tap);
	padding: 0 var(--rtn-esp-2);
	border: 0;
	background: transparent;
	color: var(--rtn-tinta-2);
	font: inherit;
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
	cursor: pointer;
}
.rtn-switch__pista {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	border: 1.5px solid var(--rtn-borde-control);
	border-radius: var(--rtn-radio-pill);
	background: var(--rtn-superficie-2);
	transition: background-color var(--rtn-dur-1) var(--rtn-ease);
}
.rtn-switch__pista::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--rtn-tinta-3);
	transition: transform var(--rtn-dur-1) var(--rtn-ease);
}
.rtn-switch[aria-checked="true"] .rtn-switch__pista { border-color: var(--rtn-azul); background: var(--rtn-azul); }
.rtn-switch[aria-checked="true"] .rtn-switch__pista::after { background: var(--rtn-sobre-azul); transform: translateX(18px); }
.rtn-switch__ayuda { display: block; color: var(--rtn-tinta-3); font-size: var(--rtn-fs-xs); font-weight: 400; }
.rtn-switch--fila { display: flex; justify-content: space-between; width: 100%; max-width: var(--rtn-ancho-lectura); margin: 0 0 var(--rtn-esp-3); padding: var(--rtn-esp-1) 0; text-align: left; }

/* =========================================================
   SHELL: TOPBAR, TAB BAR, SIDEBAR (tema.md §8.18)
   ========================================================= */
.rtn-shell { min-height: 100vh; }

.rtn-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-3);
	height: var(--rtn-topbar);
	padding: 0 var(--rtn-esp-4);
	background: var(--rtn-superficie);
	border-bottom: 1px solid var(--rtn-borde);
}
.rtn-topbar .rtn-marca,
.rtn-nav .rtn-marca { flex-wrap: nowrap; margin: 0; white-space: nowrap; }
.rtn-topbar__familia {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tab bar: 64 + área segura; borde superior de 1px (alto real 64 + 1). */
.rtn-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--rtn-superficie);
	border-top: 1px solid var(--rtn-borde);
}
.rtn-nav__marca,
.rtn-nav__pie { display: none; }
.rtn-nav__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rtn-nav__enlace,
.rtn-ui .rtn-nav__enlace {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: var(--rtn-tabbar);
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-xs);
	font-weight: 600;
	text-decoration: none;
}
.rtn-nav__ico-wrap { display: flex; align-items: center; justify-content: center; }
/* Activa: orilla 3×32 --rtn-azul-trazo pegada al borde superior (radio
   0 0 3 3) + ícono y etiqueta 700 --rtn-azul-tinta (tema.md §8.18). */
.rtn-ui .rtn-nav__enlace[aria-current="page"] { color: var(--rtn-azul-tinta); font-weight: 700; }
.rtn-nav__enlace[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 16px);
	width: 32px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--rtn-azul-trazo);
}
.rtn-nav__badge {
	position: absolute;
	top: 6px;
	left: calc(50% + 8px);
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--rtn-radio-pill);
	background: var(--rtn-azul);
	color: var(--rtn-sobre-azul);
	font-size: var(--rtn-fs-2xs); /* 11: insignia de 20 px de alto */
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.rtn-main {
	padding: var(--rtn-esp-4) var(--rtn-esp-4) calc(var(--rtn-tabbar) + var(--rtn-esp-6) + env(safe-area-inset-bottom));
}
.rtn-main:focus { outline: none; }
.rtn-main--con-barra { padding-bottom: calc(var(--rtn-tabbar) + var(--rtn-tap) + var(--rtn-esp-8) + env(safe-area-inset-bottom)); }

.rtn-vista {
	max-width: var(--rtn-ancho-lectura);
	margin: 0 auto;
}
.rtn-vista__titulo { margin-bottom: var(--rtn-esp-5); }
.rtn-seccion { margin-top: var(--rtn-esp-6); }

/* CTA en la zona del pulgar: barra sticky sobre la tab bar (tema.md §8.1). */
.rtn-barra-cta {
	position: fixed;
	right: 0;
	bottom: calc(var(--rtn-tabbar) + 1px + env(safe-area-inset-bottom)); /* 1px = border-top de .rtn-nav */
	left: 0;
	z-index: 25;
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	background: var(--rtn-superficie);
	box-shadow: var(--rtn-sombra-barra);
}
.rtn-barra-cta__interior { max-width: var(--rtn-ancho-lectura); margin: 0 auto; }

/* =========================================================
   PLATO Y LEYENDA (tema.md §8.4) — el elemento memorable
   · Lugar fijo por grupo: rejilla 3×3 inscrita en el disco con
     grid-template-areas; el lugar sale de [data-grupo] + grid-area.
   · Lácteos van FUERA del disco (vaso), abajo a la derecha, en posición
     absoluta: así la figura mide lo mismo que el disco y la aritmética de la
     protagonista (plato 96 + gap 16 → 180 px de texto a 360) se conserva.
     El vaso se separa del disco: su centro queda a (tam − mancha/2 + off)
     en x e y; M (mancha 20): (96 − 10 + 6) = 92 → distancia al centro del
     disco √2 × (92 − 48) = 62.2 ≥ 48 + 10 = 58 (fuera del disco). L: (176 − 20 +
     10) = 166 → √2 × 78 = 110.3 ≥ 88 + 20 = 108.
   · padding del disco = 14 % del TAMAÑO del disco (calc con el token: un
     padding en % se resolvería contra el ancho del contenedor). Celda a M:
     (96 − 2×3 − 2×13.44) / 3 = 21.0 px. Con la mancha de 22 de §8.4, dos
     manchas vecinas se encimaban 1 px en render (medido 2026-10-11 con los 8
     grupos), así que M usa el respaldo de §8.4: mancha 20 e ícono 14
     (21.0 − 20 = 1 px de aire por celda). L: (176 − 6 − 2×24.64) / 3 = 40.2
     ≥ 40.
   ========================================================= */
.rtn-plato {
	--rtn-plato-tam: var(--rtn-plato-m);
	--rtn-plato-mancha: 20px;
	--rtn-plato-pic: 14px;
	--rtn-plato-vaso-off: 6px;
	position: relative;
	flex: none;
	width: var(--rtn-plato-tam);
	height: var(--rtn-plato-tam);
	margin: 0;
}
.rtn-plato--l {
	--rtn-plato-tam: var(--rtn-plato-l);
	--rtn-plato-mancha: 40px;
	--rtn-plato-pic: 28px;
	--rtn-plato-vaso-off: 10px;
}
.rtn-plato__disco {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"verduras azucares cereales"
		". grasas ."
		"frutas animal leguminosas";
	place-items: center;
	width: 100%;
	height: 100%;
	padding: calc(var(--rtn-plato-tam) * .14);
	border: var(--rtn-orilla-plato) solid var(--rtn-plato-orilla);
	border-radius: 50%;
	background: var(--rtn-plato-fondo);
}
.rtn-plato__comida,
.rtn-plato__vaso {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--rtn-plato-mancha);
	height: var(--rtn-plato-mancha);
	border-radius: 50%;
	background: var(--rtn-g-fondo);
	color: var(--rtn-g);
}
.rtn-plato__comida .rtn-ico,
.rtn-plato__vaso .rtn-ico { width: var(--rtn-plato-pic); height: var(--rtn-plato-pic); }
.rtn-plato__comida[data-grupo="verduras"]    { grid-area: verduras; }
.rtn-plato__comida[data-grupo="azucares"]    { grid-area: azucares; }
.rtn-plato__comida[data-grupo="cereales"]    { grid-area: cereales; }
.rtn-plato__comida[data-grupo="grasas"]      { grid-area: grasas; }
.rtn-plato__comida[data-grupo="frutas"]      { grid-area: frutas; }
.rtn-plato__comida[data-grupo="animal"]      { grid-area: animal; }
.rtn-plato__comida[data-grupo="leguminosas"] { grid-area: leguminosas; }
.rtn-plato__vaso {
	position: absolute;
	right: calc(-1 * var(--rtn-plato-vaso-off));
	bottom: calc(-1 * var(--rtn-plato-vaso-off));
}
/* Plato con pocos grupos (1 a 3): las manchas se agrandan y se centran en fila,
   en vez de quedar sueltas en la rejilla de 3x3. Cuenta: disco útil = 72 % del
   lado (100 % - 2 x 14 %); n=1 → .42; n=2 → 2 x .32 + .04 = .68; n=3 → 3 x .22
   + 2 x .03 = .72 (todo en fracciones del lado). Pictograma = 60 % de la mancha. */
.rtn-plato__disco[data-n="1"],
.rtn-plato__disco[data-n="2"],
.rtn-plato__disco[data-n="3"] {
	display: flex;
	align-items: center;
	justify-content: center;
	--rtn-plato-pic: calc(var(--rtn-plato-mancha) * .6);
}
.rtn-plato__disco[data-n="1"] { --rtn-plato-mancha: calc(var(--rtn-plato-tam) * .42); }
.rtn-plato__disco[data-n="2"] { --rtn-plato-mancha: calc(var(--rtn-plato-tam) * .32); gap: calc(var(--rtn-plato-tam) * .04); }
.rtn-plato__disco[data-n="3"] { --rtn-plato-mancha: calc(var(--rtn-plato-tam) * .22); gap: calc(var(--rtn-plato-tam) * .03); }
/* Comida aparte (niño): disco sin manchas + escudo de cuidado al centro. */
.rtn-plato__escudo { grid-area: grasas; color: var(--rtn-azul-tinta); }

/* "Se sirve el plato" (tema.md §6): única animación orquestada. Cada mancha
   scale(.6) → 1 + opacity, --rtn-dur-servir (160) con escalón
   --rtn-escalon-servir (40) según data-orden (posición en el orden canónico
   entre los grupos presentes, 0…7). Con 8: 160 + 7×40 = 440 ms en total;
   ninguna animación individual pasa de 160. JS quita .rtn-plato--servir al
   terminar la última (animationend). */
.rtn-plato--servir .rtn-plato__comida,
.rtn-plato--servir .rtn-plato__vaso {
	animation: rtn-servir var(--rtn-dur-servir) var(--rtn-ease) both;
}
.rtn-plato--servir [data-orden="1"] { animation-delay: calc(1 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="2"] { animation-delay: calc(2 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="3"] { animation-delay: calc(3 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="4"] { animation-delay: calc(4 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="5"] { animation-delay: calc(5 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="6"] { animation-delay: calc(6 * var(--rtn-escalon-servir)); }
.rtn-plato--servir [data-orden="7"] { animation-delay: calc(7 * var(--rtn-escalon-servir)); }
@keyframes rtn-servir {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}

/* Leyenda: pictograma 16 en el color del grupo + nombre 14/600 en tinta;
   sin fondo ni píldora; orden canónico. */
.rtn-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtn-esp-1) var(--rtn-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rtn-leyenda__item {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	color: var(--rtn-tinta);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
	line-height: var(--rtn-lh-tight);
}
.rtn-leyenda__item .rtn-ico { width: 16px; height: 16px; color: var(--rtn-g); }

/* Íconos de grupo de 16 SIN círculo (filas de agenda, celdas, alternativas
   compactas). El nombre va en .rtn-sr junto a cada ícono. */
.rtn-iconos { display: inline-flex; flex-wrap: wrap; gap: var(--rtn-esp-1); margin: 0; padding: 0; list-style: none; }
.rtn-iconos__item { display: inline-flex; color: var(--rtn-g, var(--rtn-tinta-2)); }
.rtn-iconos__item .rtn-ico { width: 16px; height: 16px; }
/* Excepciones junto a los grupos: escudo de cuidado en azul (§8.11), sobras
   y trozos en tinta-2 (neutro de cocina, §8.12). */
.rtn-iconos__item--aparte { color: var(--rtn-azul-tinta); }
.rtn-iconos__item--sobras,
.rtn-iconos__item--trozos { color: var(--rtn-tinta-2); }

/* =========================================================
   AVATAR Y PILA "A LA MESA" (tema.md §8.8)
   ========================================================= */
.rtn-avatar {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	--rtn-av-tam: 36px;
	width: var(--rtn-av-tam);
	height: var(--rtn-av-tam);
	border-radius: 50%;
	color: var(--rtn-tinta);
	font-family: var(--rtn-font-ui);
	font-weight: 700;
	font-size: calc(var(--rtn-av-tam) * .45); /* 45 % del lado (36 → 16.2) */
	line-height: 1;
}
.rtn-avatar[data-avatar="1"] { background: var(--rtn-av-1); }
.rtn-avatar[data-avatar="2"] { background: var(--rtn-av-2); }
.rtn-avatar[data-avatar="3"] { background: var(--rtn-av-3); }
.rtn-avatar[data-avatar="4"] { background: var(--rtn-av-4); }
.rtn-avatar[data-avatar="5"] { background: var(--rtn-av-5); }
.rtn-avatar[data-avatar="6"] { background: var(--rtn-av-6); }
.rtn-avatar--24 { --rtn-av-tam: 24px; }
.rtn-avatar--32 { --rtn-av-tam: 32px; }
.rtn-avatar--40 { --rtn-av-tam: 40px; }
.rtn-avatar--72 { --rtn-av-tam: 72px; }

/* La pila vive SOLO en la protagonista y en la hoja (D4). El anillo es del
   color del fondo donde se pinta (superficie o elevada). */
.rtn-pila { --rtn-pila-anillo: var(--rtn-superficie); display: flex; align-items: center; gap: var(--rtn-esp-2); }
.rtn-pila__lista { display: flex; margin: 0; padding: 0 0 0 8px; list-style: none; }
.rtn-pila__lista > li { margin-left: -8px; }
.rtn-pila__lista .rtn-avatar { box-shadow: 0 0 0 2px var(--rtn-pila-anillo); }
.rtn-pila__texto { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
/* Mini-escudo de "come aparte" en la esquina del avatar (tema.md §8.8). */
.rtn-avatar__escudo {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--rtn-pila-anillo, var(--rtn-superficie));
	color: var(--rtn-azul-tinta);
}
.rtn-avatar__escudo .rtn-ico { width: 14px; height: 14px; }

/* =========================================================
   TARJETA DE COMIDA Y PROTAGONISTA "AHORA TOCA" (tema.md §8.5)
   ========================================================= */
.rtn-comida {
	position: relative;
	padding: var(--rtn-esp-4);
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio);
}
/* Protagonista: orilla COMPLETA de 2px --rtn-azul-trazo, radio 24, sin
   sombra. Aritmética a 360: 328 − 2×2 − 2×16 = 292 de interior; plato 96 +
   gap 16 → 180 px para el nombre del platillo. */
.rtn-comida--ahora {
	border: var(--rtn-orilla) solid var(--rtn-azul-trazo);
	border-radius: var(--rtn-radio-hero);
	transition: border-color var(--rtn-dur-1) var(--rtn-ease);
}
/* Hover: orilla --rtn-azul-tinta (G3: en oscuro --rtn-azul-hover la apagaba). */
.rtn-comida--abrible:hover { border-color: var(--rtn-azul-tinta); }
.rtn-comida--abrible:active { transform: translateY(1px); }

.rtn-comida__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	margin: 0 0 var(--rtn-esp-3);
}
.rtn-comida__ahora {
	margin: 0;
	font-size: var(--rtn-fs-base);
	font-weight: 600;
	line-height: var(--rtn-lh-tight);
}
.rtn-comida__hora { flex: none; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }

.rtn-comida__cuerpo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--rtn-esp-4);
	align-items: center;
	margin: 0 0 var(--rtn-esp-3);
}
.rtn-comida__cuerpo--sin-plato { grid-template-columns: minmax(0, 1fr); }

.rtn-comida__titulo {
	margin: 0;
	font-size: var(--rtn-fs-lg);
	letter-spacing: var(--rtn-tracking-display);
}
.rtn-comida__acomp { margin: var(--rtn-esp-1) 0 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-comida__vacia { color: var(--rtn-tinta-3); font-family: var(--rtn-font-ui); font-size: var(--rtn-fs-base); font-weight: 600; letter-spacing: 0; }

/* Toda la tarjeta abre la hoja: el <button> va en el título y su ::after
   cubre la tarjeta (área de toque = tarjeta entera; nombre accesible = el
   platillo). El anillo de foco se pinta en el ::after, por fuera de la orilla. */
.rtn-comida__abrir {
	min-height: 24px; /* el área de toque real es la tarjeta entera (::after) */
	padding: 2px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}
.rtn-comida__abrir::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--rtn-orilla));
	border-radius: var(--rtn-radio-hero);
}
.rtn-ui .rtn-comida__abrir:focus-visible { outline: none; }
.rtn-comida__abrir:focus-visible::after { outline: 3px solid var(--rtn-foco); outline-offset: 2px; }

.rtn-comida__leyenda { margin: 0 0 var(--rtn-esp-3); }
.rtn-comida__etiquetas { display: flex; flex-wrap: wrap; gap: var(--rtn-esp-1) var(--rtn-esp-3); margin: 0 0 var(--rtn-esp-3); padding: 0; list-style: none; }
.rtn-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-sm);
}
/* Divisor y pila "a la mesa" al pie de la protagonista (D4). */
.rtn-comida__mesa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	margin: 0;
	padding: var(--rtn-esp-3) 0 0;
	border-top: 1px solid var(--rtn-borde-fuerte);
}
.rtn-comida__chevron { flex: none; color: var(--rtn-tinta-3); }

.rtn-comida__personas {
	margin: var(--rtn-esp-3) 0 0;
	padding: 0;
	list-style: none;
}
/* [Elegir platillo] de una protagonista vacía: por ENCIMA del ::after que
   cubre la tarjeta, para que el toque llegue a este botón y no al de abrir. */
.rtn-comida__accion { position: relative; z-index: 1; margin: 0 0 var(--rtn-esp-3); }
/* Mi plato adulto: porción → leyenda → complementos bajo el platillo. */
.rtn-plato__detalle { display: flex; flex-direction: column; gap: var(--rtn-esp-2); margin-top: var(--rtn-esp-2); }
.rtn-plato__detalle .rtn-persona__comps { margin: 0; }

/* =========================================================
   INTEGRANTE EN LA HOJA (tema.md §8.7, §8.11, §8.12)
   ========================================================= */
.rtn-persona {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: 0 var(--rtn-esp-3);
	align-items: start;
	padding: var(--rtn-esp-2) 0;
}
.rtn-persona + .rtn-persona { border-top: 1px solid var(--rtn-borde); }
.rtn-persona__cuerpo { min-width: 0; }
.rtn-persona__nombre { margin: 0; font-weight: 600; line-height: 40px; }
.rtn-persona__porcion { margin: 0; font-size: var(--rtn-fs-md); }
.rtn-persona__porcion b { font-weight: 700; }
.rtn-persona__porcion--vacia { color: var(--rtn-tinta-3); font-size: var(--rtn-fs-sm); }
.rtn-persona__nota { display: flex; align-items: center; gap: var(--rtn-esp-1); margin: 0; color: var(--rtn-tinta-3); font-size: var(--rtn-fs-sm); }
.rtn-persona__linea { margin: var(--rtn-esp-1) 0 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-persona .rtn-nota { margin-top: var(--rtn-esp-2); }
.rtn-persona > .rtn-menu { grid-column: 1 / -1; }

/* Complementos: texto en línea con el pictograma del grupo, sin píldora
   ("+ 1½ kiwis"), 16 tinta-2; la línea hace wrap con gap 4 / 16. */
.rtn-persona__comps { display: flex; flex-wrap: wrap; gap: var(--rtn-esp-1) var(--rtn-esp-4); margin: var(--rtn-esp-1) 0 0; padding: 0; list-style: none; }
.rtn-comp {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	color: var(--rtn-tinta-2);
	font-size: var(--rtn-fs-base);
}
.rtn-comp .rtn-ico { width: 16px; height: 16px; color: var(--rtn-g, var(--rtn-tinta-2)); }

/* ---- Avisos sin números (tema.md §8.12) ---- */
.rtn-nota {
	display: flex;
	align-items: flex-start;
	gap: var(--rtn-esp-2);
	margin: var(--rtn-esp-2) 0 0;
	padding: var(--rtn-esp-2) var(--rtn-esp-3);
	border-radius: var(--rtn-radio-sm);
	font-size: var(--rtn-fs-sm);
}
.rtn-nota .rtn-ico { width: 20px; height: 20px; margin-top: 1px; }
.rtn-nota__texto { margin: 0; }
.rtn-nota__fuerte { display: block; color: var(--rtn-tinta); font-weight: 600; }
.rtn-nota__suave { display: block; color: var(--rtn-tinta-2); }
.rtn-nota__accion { margin: var(--rtn-esp-2) 0 0; }
/* Toda nota con fondo lleva orilla de 1 px en --rtn-borde (R3/H1): el fondo solo
   no separa la nota del lienzo en oscuro. */
.rtn-nota--cuidado,
.rtn-nota--cocina { box-shadow: inset 0 0 0 1px var(--rtn-borde); }
.rtn-nota--cuidado { background: var(--rtn-info-dim); }
.rtn-nota--cuidado .rtn-ico { color: var(--rtn-azul-tinta); }
.rtn-nota--cocina { background: var(--rtn-superficie-2); }
.rtn-nota--cocina .rtn-ico { color: var(--rtn-tinta-2); }
/* Nota de cocina (§8.12-C): una caja por tiempo; un bloque "Para X" por grupo. */
.rtn-nota--cocina { flex-direction: column; gap: var(--rtn-esp-2); hyphens: auto; overflow-wrap: break-word; }
.rtn-cocina__quien {
	display: flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	margin: 0 0 var(--rtn-esp-1);
	color: var(--rtn-tinta);
	font-weight: 600;
}
.rtn-cocina__quien .rtn-avatar + .rtn-avatar { margin-left: calc(-1 * var(--rtn-esp-1)); }
.rtn-cocina__lineas { margin: 0; padding: 0; list-style: none; }
.rtn-cocina__linea { display: flex; align-items: flex-start; gap: var(--rtn-esp-2); color: var(--rtn-tinta-2); }
.rtn-cocina__linea + .rtn-cocina__linea { margin-top: var(--rtn-esp-1); }
.rtn-cocina__linea .rtn-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.rtn-cocina__grupo + .rtn-cocina__grupo { padding-top: var(--rtn-esp-2); border-top: 1px solid var(--rtn-borde); }
/* Consejo (R7): sin fondo, info 16 + texto 14 tinta-2. */
.rtn-nota--consejo { align-items: center; gap: var(--rtn-esp-1); padding: 0; color: var(--rtn-tinta-2); }
.rtn-nota--consejo .rtn-ico { width: 16px; height: 16px; margin: 0; color: var(--rtn-azul-tinta); }
/* Protagonista: una línea "Cómo servirle a Sofía" bajo la leyenda. */
.rtn-comida__cocina { display: flex; align-items: center; gap: var(--rtn-esp-2); margin: 0 0 var(--rtn-esp-3); color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; }
.rtn-comida__cocina .rtn-ico { flex: none; }
/* Resultado de búsqueda que aparta (R10): informa, no atenúa. */
.rtn-alt__aparta { display: flex; align-items: center; gap: var(--rtn-esp-1); margin-top: var(--rtn-esp-1); color: var(--rtn-azul-tinta); font-size: var(--rtn-fs-sm); }
.rtn-alt__aparta .rtn-ico { flex: none; }
/* --ajuste: sin fondo, lápiz 16 + texto 14 tinta-2 (no interactiva). */
.rtn-nota--ajuste {
	align-items: center;
	gap: var(--rtn-esp-1);
	padding: 0;
	color: var(--rtn-tinta-2);
}
.rtn-nota--ajuste .rtn-ico { width: 16px; height: 16px; margin: 0; }

/* "Con nutriólogo" y estado neutro (sin píldora, tema.md §8.17). */
.rtn-con-nutri {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	color: var(--rtn-azul-tinta);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
}
.rtn-con-nutri .rtn-ico { width: 16px; height: 16px; }
.rtn-estado-neutro { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; }

.rtn-sustitucion { margin: var(--rtn-esp-2) 0 0; padding: var(--rtn-esp-2) var(--rtn-esp-3); border-radius: var(--rtn-radio-sm); background: var(--rtn-info-dim); color: var(--rtn-azul-tinta); font-size: var(--rtn-fs-sm); }

/* =========================================================
   AGENDA (tema.md §8.6) — Hoy "Más tarde", día de Semana, Mi plato
   Aritmética a 360: cuerpo = 328 − 2×16 − 64 − 12 − 24 = 196 px.
   ========================================================= */
.rtn-agenda {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
	list-style: none;
}
.rtn-agenda__fila + .rtn-agenda__fila { border-top: 1px solid var(--rtn-borde); }
.rtn-agenda__contenido {
	display: grid;
	grid-template-columns: var(--rtn-col-hora) minmax(0, 1fr) 24px;
	gap: 0 var(--rtn-esp-3);
	align-items: start;
	width: 100%;
	min-height: var(--rtn-fila-agenda);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
}
.rtn-agenda__contenido--fija { grid-template-columns: var(--rtn-col-hora) minmax(0, 1fr); }
.rtn-agenda__boton {
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.rtn-agenda__boton:hover { background: var(--rtn-superficie-2); }
.rtn-ui .rtn-agenda__boton:focus-visible { outline-offset: -3px; }
.rtn-agenda__hora {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	line-height: var(--rtn-lh-tight);
}
.rtn-agenda__sufijo { color: var(--rtn-tinta-3); font-size: var(--rtn-fs-xs); font-weight: 400; }
.rtn-agenda__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rtn-esp-1); min-width: 0; }
.rtn-agenda__platillo { font-size: var(--rtn-fs-md); overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.rtn-agenda__vacia { color: var(--rtn-tinta-3); font-weight: 600; }
.rtn-agenda__tiempo { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-agenda__excepcion { display: inline-flex; align-items: center; gap: var(--rtn-esp-2); color: var(--rtn-azul-tinta); font-size: var(--rtn-fs-sm); font-weight: 600; }
.rtn-agenda__chevron { align-self: center; color: var(--rtn-tinta-3); }
/* "Elegir platillo" fuera del botón de la fila (no se anidan botones),
   alineado con la columna del cuerpo: 16 + 64 + 12 = 92. */
.rtn-agenda__accion { margin: 0; padding: 0 var(--rtn-esp-4) var(--rtn-esp-3) calc(var(--rtn-esp-4) + var(--rtn-col-hora) + var(--rtn-esp-3)); }
.rtn-agenda .rtn-leyenda { margin-top: var(--rtn-esp-1); }

/* Atajo al súper: fila suelta de lista agrupada con el <a> DENTRO. */
.rtn-atajo {
	overflow: hidden;
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
}
.rtn-atajo__enlace,
.rtn-ui .rtn-atajo__enlace {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 24px;
	gap: var(--rtn-esp-3);
	align-items: center;
	min-height: var(--rtn-fila-super);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	color: var(--rtn-tinta);
	text-decoration: none;
}
.rtn-atajo__enlace:hover { background: var(--rtn-superficie-2); }
.rtn-ui .rtn-atajo__enlace:focus-visible { outline-offset: -3px; }
.rtn-atajo__enlace > .rtn-ico:first-child { color: var(--rtn-azul-tinta); }
.rtn-atajo__enlace > .rtn-ico:last-child { color: var(--rtn-tinta-3); }
.rtn-atajo__texto { font-weight: 600; }

/* "Antes hoy": comidas ya pasadas, plegadas (Hoy y Mi plato). */
.rtn-antes { margin-top: var(--rtn-esp-6); }
.rtn-antes > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--rtn-tap);
	margin-bottom: var(--rtn-esp-2);
	font-weight: 700;
	font-size: var(--rtn-fs-lg);
	cursor: pointer;
	list-style: none;
}
.rtn-antes > summary::-webkit-details-marker { display: none; }
.rtn-antes[open] > summary .rtn-ico { transform: rotate(180deg); }

/* =========================================================
   SEMANA: SELECTOR, TIRA DE DÍAS (tema.md §8.9)
   Aritmética a 360: padding lateral 12 → 336; 7×44 + 6×4 = 332 ≤ 336.
   ========================================================= */
.rtn-semana { margin: 0 calc(-1 * var(--rtn-esp-1)) var(--rtn-esp-4); }
.rtn-semana__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	margin-bottom: var(--rtn-esp-2);
}
.rtn-semana__titulo { margin: 0; font-weight: 600; text-align: center; }
.rtn-semana__dias {
	display: grid;
	grid-template-columns: repeat(7, minmax(44px, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rtn-dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 100%;
	min-height: 56px;
	padding: var(--rtn-esp-1) 0;
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie);
	color: var(--rtn-tinta);
	font-family: var(--rtn-font-ui);
	line-height: var(--rtn-lh-tight);
	cursor: pointer;
}
.rtn-dia__nombre { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-xs); font-weight: 600; }
.rtn-dia__num { font-size: var(--rtn-fs-md); font-weight: 700; }
.rtn-dia__punto { width: 6px; height: 6px; border-radius: 50%; }
.rtn-dia__punto[data-plan="completo"] { background: var(--rtn-tinta-3); }
.rtn-dia__punto[data-plan="incompleto"] { border: 1.5px solid var(--rtn-tinta-3); }
/* Hoy = orilla interna 2px --rtn-azul-trazo; seleccionado = relleno azul
   (gana el relleno si es hoy y seleccionado). */
.rtn-dia--hoy { box-shadow: inset 0 0 0 var(--rtn-orilla) var(--rtn-azul-trazo); }
.rtn-dia[aria-current="date"] { background: var(--rtn-azul); border-color: var(--rtn-azul); box-shadow: none; }
.rtn-dia[aria-current="date"] .rtn-dia__nombre,
.rtn-dia[aria-current="date"] .rtn-dia__num { color: var(--rtn-sobre-azul); }
.rtn-dia[aria-current="date"] .rtn-dia__punto[data-plan="completo"] { background: var(--rtn-sobre-azul); }
.rtn-dia[aria-current="date"] .rtn-dia__punto[data-plan="incompleto"] { border-color: var(--rtn-sobre-azul); }

.rtn-dia-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	margin: 0 0 var(--rtn-esp-3);
}
.rtn-dia-cabecera__titulo { margin: 0; font-size: var(--rtn-fs-lg); font-weight: 700; line-height: var(--rtn-lh-tight); }

/* Rejilla de escritorio: solo ≥1024 (ver media query). */
.rtn-rejilla { display: none; }

/* =========================================================
   HOJA / PANEL / DIÁLOGO / MENÚ (tema.md §8.7, §8.11)
   ========================================================= */
.rtn-velo {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--rtn-velo);
	animation: rtn-velo-in var(--rtn-dur-2) var(--rtn-ease);
}
@keyframes rtn-velo-in { from { opacity: 0; } to { opacity: 1; } }

.rtn-hoja {
	--rtn-pila-anillo: var(--rtn-superficie-elevada);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--rtn-ancho-lectura);
	max-height: 85vh;
	background: var(--rtn-superficie-elevada);
	border-radius: var(--rtn-radio) var(--rtn-radio) 0 0;
	box-shadow: var(--rtn-sombra-modal);
	animation: rtn-subir var(--rtn-dur-2) var(--rtn-ease);
}
@keyframes rtn-subir { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.rtn-hoja__agarradera {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--rtn-tap-min); /* área táctil 44; la barrita visible es 4×36 */
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.rtn-hoja__agarradera::before {
	content: "";
	width: 36px;
	height: 4px;
	border-radius: var(--rtn-radio-xs);
	background: var(--rtn-borde-fuerte);
}
.rtn-hoja__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	padding: 0 var(--rtn-esp-4) var(--rtn-esp-2);
}
.rtn-hoja__titulo {
	margin: 0;
	font-weight: 700;
	font-size: var(--rtn-fs-xl);
	line-height: var(--rtn-lh-tight);
}
.rtn-hoja__titulo:focus { outline: none; }
.rtn-hoja__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 var(--rtn-esp-4) var(--rtn-esp-4);
	overscroll-behavior: contain;
}
.rtn-hoja__acciones {
	position: relative;
	flex: none;
	display: grid;
	gap: var(--rtn-esp-2);
	padding: var(--rtn-esp-3) var(--rtn-esp-4) calc(var(--rtn-esp-3) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--rtn-borde);
	background: var(--rtn-superficie-elevada);
}
/* La tarjeta interna pierde borde y padding: la hoja ya es el contenedor. */
.rtn-hoja .rtn-comida { padding: 0; border: 0; background: transparent; }
.rtn-hoja .rtn-comida__cuerpo { margin-top: var(--rtn-esp-1); }

/* Detalle de comida: [Cambiar platillo] a lo ancho; debajo [Ver receta][⋯].
   Alto = 12 + 48 + 8 + 48 + 12 = 128 px. */
.rtn-detalle-acciones { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rtn-esp-2); }
.rtn-detalle-acciones > :first-child { grid-column: 1 / -1; }
.rtn-detalle-acciones--una-fila > :first-child { grid-column: auto; }
.rtn-ui .rtn-detalle-acciones .rtn-btn--icono { min-width: var(--rtn-tap); min-height: var(--rtn-tap); border: 1.5px solid var(--rtn-azul-borde); border-radius: var(--rtn-radio-sm); color: var(--rtn-azul-tinta); }
.rtn-detalle-acciones .rtn-btn--icono[aria-expanded="true"] { background: var(--rtn-azul-dim); }
/* "Más opciones" se abre HACIA ARRIBA sobre la barra. */
.rtn-menu--flotante {
	position: absolute;
	right: var(--rtn-esp-4);
	bottom: calc(100% - var(--rtn-esp-2));
	z-index: 2;
	width: min(300px, calc(100% - 2 * var(--rtn-esp-4)));
	margin: 0;
}

/* Diálogo de bloqueo (centrado; título Linear 700 21, G7). */
.rtn-dialogo { text-align: center; }
.rtn-dialogo .rtn-hoja__cabecera { justify-content: center; }
.rtn-dialogo .rtn-hoja__titulo { font-size: var(--rtn-fs-lg); }
.rtn-dialogo__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--rtn-esp-3);
	border-radius: 50%;
	background: var(--rtn-info-dim);
	color: var(--rtn-azul-tinta);
}
.rtn-dialogo__texto { max-width: 34ch; margin: 0 auto var(--rtn-esp-3); }
.rtn-dialogo .rtn-pila { justify-content: center; margin-bottom: var(--rtn-esp-3); }

/* Menú ⋯ */
.rtn-menu {
	margin: var(--rtn-esp-2) 0 0;
	padding: var(--rtn-esp-1);
	border: 1px solid var(--rtn-borde-fuerte);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie-elevada);
	box-shadow: var(--rtn-sombra-menu);
	list-style: none;
}
.rtn-menu__item {
	display: flex;
	align-items: center;
	gap: var(--rtn-esp-2);
	width: 100%;
	min-height: var(--rtn-tap);
	padding: 0 var(--rtn-esp-3);
	border: 0;
	border-radius: var(--rtn-radio-xs);
	background: transparent;
	color: var(--rtn-tinta);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.rtn-menu__item:hover { background: var(--rtn-azul-dim); color: var(--rtn-azul-tinta); }

.rtn-cuartos { display: flex; flex-wrap: wrap; gap: var(--rtn-esp-2); }
.rtn-cuartos .rtn-segmentado__opcion { min-width: var(--rtn-tap); }

/* ---- Alternativas y búsqueda (tema.md §8.12-D, §10.2) ---- */
.rtn-alt { display: grid; gap: var(--rtn-esp-2); margin: var(--rtn-esp-3) 0; padding: 0; list-style: none; }
.rtn-alt__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--rtn-esp-2);
	align-items: center;
	width: 100%;
	min-height: var(--rtn-tap);
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	border: 1px solid var(--rtn-borde-fuerte);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.rtn-alt__item:hover { border-color: var(--rtn-azul-trazo); background: var(--rtn-azul-dim); }
.rtn-alt__texto { display: flex; flex-direction: column; gap: var(--rtn-esp-1); min-width: 0; }
.rtn-alt__nombre { font-size: var(--rtn-fs-md); }
.rtn-alt__item > .rtn-ico { color: var(--rtn-tinta-3); }
.rtn-buscar { position: relative; margin-top: var(--rtn-esp-3); }
.rtn-buscar .rtn-campo__input { padding-left: var(--rtn-esp-7); }
.rtn-buscar__ico { position: absolute; top: 12px; left: var(--rtn-esp-3); color: var(--rtn-tinta-3); pointer-events: none; }

/* Receta escalada. */
.rtn-receta__lista { margin: 0 0 var(--rtn-esp-4); padding-left: var(--rtn-esp-5); }
.rtn-receta__lista li { margin-bottom: var(--rtn-esp-1); }
.rtn-receta__omitido { color: var(--rtn-tinta-3); text-decoration: line-through; }

/* =========================================================
   SÚPER (tema.md §8.13)
   ========================================================= */
.rtn-super__cabecera .rtn-titulo { margin-bottom: var(--rtn-esp-1); }
.rtn-super__semana { display: flex; align-items: center; gap: var(--rtn-esp-1); margin: 0 0 var(--rtn-esp-2) calc(-1 * var(--rtn-esp-2)); }
.rtn-super__semana-titulo { margin: 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; }
.rtn-super__herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rtn-esp-2); margin: var(--rtn-esp-2) 0 var(--rtn-esp-3); }

/* Fila sticky de alto --rtn-barra-super (52): la cabecera de pasillo se pega
   JUSTO debajo (top = topbar + 52). */
.rtn-super__estado {
	position: sticky;
	top: var(--rtn-topbar);
	z-index: 15;
	display: flex;
	align-items: center;
	gap: var(--rtn-esp-3);
	height: var(--rtn-barra-super);
	margin: 0 calc(-1 * var(--rtn-esp-4));
	padding: 0 var(--rtn-esp-4);
	background: var(--rtn-lienzo);
}
.rtn-super__estado .rtn-progreso { flex: 1 1 auto; min-width: 0; margin: 0; }
.rtn-super__estado .rtn-sync { position: static; flex: none; margin: 0; max-width: 60%; }

.rtn-progreso { display: flex; align-items: center; gap: var(--rtn-esp-3); margin: var(--rtn-esp-3) 0; }
.rtn-progreso__barra {
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: var(--rtn-radio-xs);
	background: var(--rtn-superficie-2);
}
/* Ancho por CSSOM (element.style.width), nunca style="" (CSP). */
.rtn-progreso__relleno {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--rtn-exito);
	transition: width var(--rtn-dur-2) var(--rtn-ease);
}
.rtn-progreso__texto { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; white-space: nowrap; }

/* Chip de sincronía: radio 12, no píldora. */
.rtn-sync {
	position: sticky;
	top: calc(var(--rtn-topbar) + var(--rtn-esp-2));
	z-index: 15;
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-2);
	max-width: 100%;
	min-height: 36px;
	margin: 0 0 var(--rtn-esp-3);
	padding: var(--rtn-esp-1) var(--rtn-esp-3);
	border-radius: var(--rtn-radio-sm);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
}
.rtn-sync[data-estado="guardado"]  { background: var(--rtn-exito-dim); color: var(--rtn-exito); }
.rtn-sync[data-estado="sin_senal"] { background: var(--rtn-superficie-2); color: var(--rtn-tinta-2); }
.rtn-sync[data-estado="subiendo"]  { background: var(--rtn-azul-dim); color: var(--rtn-azul-tinta); }
.rtn-sync[data-estado="aviso"]     { background: var(--rtn-aviso-dim); color: var(--rtn-aviso); }
.rtn-sync .rtn-spinner { width: 16px; height: 16px; border-width: 2px; }
.rtn-sync__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtn-sync--compacto .rtn-sync__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rtn-sync--compacto { padding: var(--rtn-esp-1) var(--rtn-esp-2); }

.rtn-aviso-lista {
	display: flex;
	align-items: flex-start;
	gap: var(--rtn-esp-2);
	margin: 0 0 var(--rtn-esp-3);
	padding: var(--rtn-esp-3);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-aviso-dim);
	color: var(--rtn-aviso);
	font-size: var(--rtn-fs-sm);
	font-weight: 600;
}

.rtn-pasillos { margin: 0; padding: 0; list-style: none; }
.rtn-pasillo { margin: 0 0 var(--rtn-esp-4); break-inside: avoid; }
.rtn-pasillo__cabecera {
	position: sticky;
	top: calc(var(--rtn-topbar) + var(--rtn-barra-super));
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-2);
	width: 100%;
	min-height: var(--rtn-tap-min);
	padding: 0 var(--rtn-esp-3);
	border: 0;
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-superficie-2);
	color: var(--rtn-tinta);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.rtn-pasillo__cuenta { display: inline-flex; align-items: center; gap: var(--rtn-esp-1); color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; }
/* Pasillo completo: "Listo" en tinta y solo la ✓ en verde (éxito como texto
   sobre sup-2 daría 4.55, demasiado justo; tema.md §4.1). */
.rtn-pasillo--listo .rtn-pasillo__cuenta { color: var(--rtn-tinta); }
.rtn-pasillo--listo .rtn-pasillo__cuenta .rtn-ico { color: var(--rtn-exito); }
.rtn-pasillo__cabecera .rtn-ico { transition: transform var(--rtn-dur-2) var(--rtn-ease); }
.rtn-pasillo__cabecera[aria-expanded="false"] .rtn-pasillo__flecha { transform: rotate(-90deg); }
.rtn-pasillo__lista {
	margin: var(--rtn-esp-1) 0 0;
	padding: 0;
	overflow: hidden;
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
	list-style: none;
}
.rtn-pasillo__lista > li + li { border-top: 1px solid var(--rtn-borde); }

/* Fila del súper: el <label> entero es el área táctil (56). Sin hover a
   sup-2 (la casilla con --rtn-borde-control no va sobre sup-2, §4.1). */
.rtn-compra {
	display: grid;
	grid-template-columns: var(--rtn-check) minmax(0, 1fr) auto;
	gap: 0 var(--rtn-esp-3);
	align-items: center;
	min-height: var(--rtn-fila-super);
	padding: var(--rtn-esp-2) var(--rtn-esp-3);
	cursor: pointer;
}
.rtn-compra:focus-within { outline: 3px solid var(--rtn-foco); outline-offset: -3px; border-radius: var(--rtn-radio-sm); }
.rtn-compra__check,
input.rtn-compra__check {
	font: inherit; /* el <input> no hereda la fuente del navegador por defecto */
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-content: center;
	width: var(--rtn-check);
	height: var(--rtn-check);
	margin: 0;
	border: 2px solid var(--rtn-borde-control);
	border-radius: var(--rtn-radio-xs);
	background: var(--rtn-superficie);
	cursor: pointer;
}
.rtn-compra__check:focus-visible { outline: none; }
.rtn-compra__check::before {
	content: "";
	width: 14px;
	height: 8px;
	margin-top: -4px;
	border-bottom: 3px solid var(--rtn-sobre-estado);
	border-left: 3px solid var(--rtn-sobre-estado);
	transform: rotate(-45deg) scale(0);
}
.rtn-compra__check:checked { border-color: var(--rtn-exito); background: var(--rtn-exito); animation: rtn-pop var(--rtn-dur-1) var(--rtn-ease); }
.rtn-compra__check:checked::before { transform: rotate(-45deg) scale(1); }
@keyframes rtn-pop { from { transform: scale(.85); } to { transform: scale(1); } }

.rtn-compra__nombre { display: block; font-weight: 600; font-size: var(--rtn-fs-md); line-height: var(--rtn-lh-tight); overflow-wrap: break-word; }
.rtn-compra__det { display: block; color: var(--rtn-tinta-3); font-size: var(--rtn-fs-xs); }
.rtn-compra__cantidad { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-md); white-space: nowrap; text-align: right; }
.rtn-compra--marcada .rtn-compra__nombre,
.rtn-compra--marcada .rtn-compra__cantidad { color: var(--rtn-tinta-3); text-decoration: line-through; }
.rtn-super--ocultar .rtn-compra-fila--marcada { display: none; }

/* =========================================================
   FAMILIA Y "ESTE TELÉFONO" (tema.md §8.18, §9)
   Lista agrupada: los divisores son borde superior (y en 2 columnas, borde
   izquierdo) de cada fila con margen −1px; el overflow:hidden de la lista
   recorta el de la primera fila/columna, así no se duplica con el borde
   de la lista.
   ========================================================= */
.rtn-familia {
	display: grid;
	margin: 0 0 var(--rtn-esp-5);
	padding: 0;
	overflow: hidden;
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
	list-style: none;
}
.rtn-familia > li { margin-top: -1px; border-top: 1px solid var(--rtn-borde); }
.rtn-miembro {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 24px;
	gap: 0 var(--rtn-esp-3);
	align-items: center;
	width: 100%;
	min-height: 64px;
	padding: var(--rtn-esp-2) var(--rtn-esp-4);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.rtn-miembro:hover { background: var(--rtn-superficie-2); }
.rtn-ui .rtn-miembro:focus-visible { outline-offset: -3px; }
.rtn-miembro > .rtn-ico { color: var(--rtn-tinta-3); }
.rtn-miembro__texto { min-width: 0; }
.rtn-miembro__nombre { display: block; font-weight: 600; }
.rtn-miembro__meta { display: block; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-miembro__estado { display: block; margin-top: 2px; }

.rtn-ajustes {
	margin: 0;
	padding: var(--rtn-esp-4);
	background: var(--rtn-superficie);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
}
.rtn-ajustes__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.rtn-ajustes__legend { display: block; margin: 0 0 var(--rtn-esp-3); padding: 0; font-weight: 600; }
.rtn-ajustes__lista { overflow: hidden; border: 1px solid var(--rtn-borde); border-radius: var(--rtn-radio-lista); }
.rtn-ajustes__radio {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rtn-esp-3);
	min-height: var(--rtn-tap);
	padding: 0 var(--rtn-esp-4);
	cursor: pointer;
}
.rtn-ajustes__radio + .rtn-ajustes__radio::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: var(--rtn-esp-4);
	border-top: 1px solid var(--rtn-borde);
}
.rtn-ajustes__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rtn-ajustes__radio .rtn-ico { color: var(--rtn-azul-tinta); visibility: hidden; }
.rtn-ajustes__input:checked ~ .rtn-ico { visibility: visible; }
.rtn-ajustes__input:checked + .rtn-ajustes__texto { font-weight: 600; }
.rtn-ajustes__radio:has(.rtn-ajustes__input:focus-visible) { outline: 3px solid var(--rtn-foco); outline-offset: -3px; }
.rtn-ajustes__ayuda { max-width: 52ch; margin: var(--rtn-esp-3) 0 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }

/* =========================================================
   ALTA CON TAMIZAJE (tema.md §8.14)
   ========================================================= */
.rtn-alta__progreso {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rtn-esp-1);
	margin: 0 0 var(--rtn-esp-2);
	padding: 0;
	list-style: none;
}
.rtn-alta__progreso--2 { grid-template-columns: repeat(2, 1fr); } /* bebé: 2 pasos */
.rtn-alta__tramo { height: 4px; border-radius: var(--rtn-radio-xs); background: var(--rtn-superficie-2); }
.rtn-alta__tramo--hecho { background: var(--rtn-azul); }
.rtn-alta__paso { margin: 0 0 var(--rtn-esp-2); color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 600; }
.rtn-alta__pregunta {
	margin: 0 0 var(--rtn-esp-3);
	padding: var(--rtn-esp-4);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio);
	background: var(--rtn-superficie);
}
.rtn-alta__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.rtn-alta__legend { display: block; width: 100%; margin: 0 0 var(--rtn-esp-3); padding: 0; font-weight: 600; }
.rtn-alta__ayuda { margin: var(--rtn-esp-2) 0 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-alta__lista-alergias { margin-top: var(--rtn-esp-4); }
/* Barra [Atrás | Continuar] sticky sobre la tab bar (64 + 1px de borde). */
.rtn-alta__barra {
	position: sticky;
	bottom: calc(var(--rtn-tabbar) + 1px + env(safe-area-inset-bottom));
	z-index: 5;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--rtn-esp-2);
	margin: var(--rtn-esp-5) calc(-1 * var(--rtn-esp-4)) 0;
	padding: var(--rtn-esp-3) var(--rtn-esp-4);
	background: var(--rtn-superficie);
	box-shadow: var(--rtn-sombra-barra);
}
.rtn-porque { margin-top: var(--rtn-esp-2); color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-porque > summary {
	display: inline-flex;
	align-items: center;
	min-height: var(--rtn-tap-min);
	color: var(--rtn-azul-tinta);
	font-weight: 600;
	cursor: pointer;
}
.rtn-porque > p { margin: 0 0 var(--rtn-esp-2); }

.rtn-derivacion {
	margin: 0 0 var(--rtn-esp-4);
	padding: var(--rtn-esp-5) var(--rtn-esp-4);
	border-radius: var(--rtn-radio);
	background: var(--rtn-info-dim);
}
.rtn-derivacion__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--rtn-esp-3);
	border-radius: 50%;
	background: var(--rtn-superficie);
	color: var(--rtn-azul-tinta);
}
.rtn-derivacion__titulo {
	margin: 0 0 var(--rtn-esp-2);
	font-weight: 700;
	font-size: var(--rtn-fs-lg);
	line-height: var(--rtn-lh-tight);
}
.rtn-derivacion__texto { margin: 0 0 var(--rtn-esp-3); }
.rtn-derivacion__sub { margin: 0; font-weight: 600; }
.rtn-derivacion__suave { margin: 0; color: var(--rtn-tinta-2); }

/* =========================================================
   MI PLATO — ADULTO Y NIÑO (tema.md §8.15)
   ========================================================= */
.rtn-plato__volver { margin: 0 0 var(--rtn-esp-3) calc(-1 * var(--rtn-esp-3)); }
.rtn-plato__cabecera { display: flex; align-items: center; gap: var(--rtn-esp-4); margin-bottom: var(--rtn-esp-5); }
.rtn-plato__cabecera .rtn-titulo { margin: 0; }
.rtn-plato__objetivo { margin: var(--rtn-esp-1) 0 0; color: var(--rtn-tinta-2); }
.rtn-plato__columnas { display: grid; gap: var(--rtn-esp-5); }
.rtn-plato__kcal { margin: var(--rtn-esp-3) 0 0; color: var(--rtn-tinta-2); }
.rtn-plato__nota { margin: 0 0 var(--rtn-esp-4); }
.rtn-comida .rtn-persona__porcion,
.rtn-agenda .rtn-persona__porcion { margin-top: var(--rtn-esp-1); }

/* Pantalla completa del niño (sin topbar ni navegación; solo "Volver"). */
.rtn-shell--enfoque .rtn-topbar,
.rtn-shell--enfoque .rtn-nav { display: none; }
.rtn-shell--enfoque .rtn-main { padding-bottom: var(--rtn-esp-7); }

.rtn-reparto {
	padding: 0 var(--rtn-esp-4);
	border: 1px solid var(--rtn-borde);
	border-radius: var(--rtn-radio-lista);
	background: var(--rtn-superficie);
}
.rtn-reparto > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--rtn-tap);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.rtn-reparto > summary::-webkit-details-marker { display: none; }
.rtn-reparto[open] > summary .rtn-ico { transform: rotate(180deg); }
.rtn-reparto__lista { margin: 0 0 var(--rtn-esp-3); padding: 0; list-style: none; }
.rtn-reparto__fila {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: var(--rtn-esp-2);
	align-items: center;
	min-height: 40px;
	border-top: 1px solid var(--rtn-borde);
}
.rtn-reparto__fila .rtn-ico { color: var(--rtn-g); }
.rtn-reparto__valor { color: var(--rtn-tinta-2); }

/* Vista de niño: re-valúa SOLO tamaños y formas de letra (D3, tema.md §5.3);
   nunca colores. ss01/ss02 = "a" y "g" de un piso. */
[data-vista="nino"] {
	--rtn-tap: 56px;
	font-feature-settings: "ss01" 1, "ss02" 1;
}
[data-vista="nino"] .rtn-plato__volver .rtn-btn { min-height: var(--rtn-tap); }
[data-vista="nino"] .rtn-plato__cabecera { flex-direction: column; align-items: flex-start; gap: var(--rtn-esp-3); }
[data-vista="nino"] .rtn-plato__cabecera .rtn-titulo { font-size: var(--rtn-fs-nino); }
[data-vista="nino"] .rtn-plato__objetivo { font-size: var(--rtn-fs-md); }
[data-vista="nino"] .rtn-seccion__titulo { font-size: var(--rtn-fs-xl); }
[data-vista="nino"] .rtn-comida--ahora { border-width: var(--rtn-orilla-plato); }
[data-vista="nino"] .rtn-comida__ahora { font-size: var(--rtn-fs-md); font-weight: 700; }
[data-vista="nino"] .rtn-comida--ahora .rtn-comida__titulo { font-size: var(--rtn-fs-xl); }
[data-vista="nino"] .rtn-comida--nino .rtn-comida__titulo { font-size: var(--rtn-fs-lg); }
[data-vista="nino"] .rtn-persona__porcion,
[data-vista="nino"] .rtn-conteo__texto { font-size: 1.25rem; } /* 20 */
[data-vista="nino"] .rtn-leyenda__item { font-size: var(--rtn-fs-base); }
.rtn-comida__figura { display: flex; justify-content: center; margin: var(--rtn-esp-3) 0 var(--rtn-esp-4); }
.rtn-comida__especial { margin: 0 0 var(--rtn-esp-3); color: var(--rtn-azul-tinta); font-weight: 600; text-align: center; }
.rtn-comida__linea { display: flex; flex-wrap: wrap; gap: 0 var(--rtn-esp-2); margin: 0 0 var(--rtn-esp-1); color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); }
.rtn-pila-cards { display: grid; gap: var(--rtn-esp-3); margin: 0; padding: 0; list-style: none; }

/* Conteo visual (tema.md §8.15): entero = contorno --rtn-conteo-contorno +
   relleno --rtn-conteo-relleno; fracción (¼ ½ ¾) = contorno completo
   --rtn-conteo-atenuado y encima la silueta rellena recortada con clip-path.
   Vive SOLO sobre --rtn-superficie (§4.2). Fila = [pictogramas][texto]; el
   <ul> es rejilla max-content | 1fr y cada fila la hereda con subgrid. */
.rtn-conteo {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--rtn-esp-2) var(--rtn-esp-3);
	margin: var(--rtn-esp-3) 0;
	padding: 0;
	list-style: none;
}
.rtn-conteo__fila {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0 var(--rtn-esp-3);
	align-items: center;
	min-height: var(--rtn-tap);
}
@supports (grid-template-columns: subgrid) {
	.rtn-conteo__fila { grid-template-columns: subgrid; }
}
.rtn-conteo__pics {
	display: inline-flex;
	align-items: center;
	gap: var(--rtn-esp-1);
	color: var(--rtn-conteo-contorno);
}
.rtn-conteo__pic { width: var(--rtn-conteo-pic); height: var(--rtn-conteo-pic); fill: var(--rtn-conteo-relleno); }
.rtn-conteo__parcial { position: relative; display: inline-flex; flex: none; width: var(--rtn-conteo-pic); height: var(--rtn-conteo-pic); }
.rtn-conteo__parcial .rtn-conteo__pic--base { color: var(--rtn-conteo-atenuado); fill: none; }
.rtn-conteo__parcial .rtn-conteo__pic--relleno { position: absolute; inset: 0; }
/* La fracción se mide sobre el ANCHO DE LA SILUETA, no sobre la caja de 24:
   --x0/--x1 = bordes izquierdo/derecho del dibujo (trazo incluido) en % de la
   caja; el recorte deja ver x0 + f×(x1 − x0). Extremos leídos del sprite. */
.rtn-conteo__parcial { --x0: 0%; --x1: 100%; }
.rtn-conteo__parcial[data-medida="m-tortilla"]    { --x0: 10%;   --x1: 90%; }
.rtn-conteo__parcial[data-medida="m-tostada"]     { --x0: 6%;    --x1: 94%; }
.rtn-conteo__parcial[data-medida="m-taza"]        { --x0: 12.5%; --x1: 75%; }
.rtn-conteo__parcial[data-medida="m-vaso"]        { --x0: 21%;   --x1: 79%; }
.rtn-conteo__parcial[data-medida="m-huevo"]       { --x0: 18%;   --x1: 82%; }
.rtn-conteo__parcial[data-medida="m-pieza"]       { --x0: 12.5%; --x1: 87.5%; }
.rtn-conteo__parcial[data-medida="m-cuchara"]     { --x0: 27%;   --x1: 73%; }
.rtn-conteo__parcial[data-medida="m-taco"]        { --x0: 8%;    --x1: 92%; }
.rtn-conteo__parcial[data-medida="m-fruta-chica"] { --x0: 19%;   --x1: 81%; }
.rtn-conteo__parcial[data-medida="m-lata"]        { --x0: 21%;   --x1: 79%; }
.rtn-conteo__pic--relleno { clip-path: inset(0 calc(100% - var(--x0) - var(--f) * (var(--x1) - var(--x0))) 0 0); }
.rtn-conteo__pic--tres-cuartos { --f: .75; }
.rtn-conteo__pic--medio { --f: .5; }
.rtn-conteo__pic--cuarto { --f: .25; }
.rtn-conteo__texto { min-width: 0; margin: 0; font-weight: 600; }

/* =========================================================
   ESTADOS GLOBALES (tema.md §8.16)
   ========================================================= */
.rtn-skeleton { display: grid; gap: var(--rtn-esp-3); }
.rtn-skeleton__bloque {
	height: 112px;
	border-radius: var(--rtn-radio);
	background: linear-gradient(90deg, var(--rtn-superficie-2) 25%, var(--rtn-lienzo) 50%, var(--rtn-superficie-2) 75%);
	background-size: 200% 100%;
	animation: rtn-shimmer 1.2s linear infinite;
}
.rtn-skeleton__bloque--linea { height: 20px; width: 60%; border-radius: var(--rtn-radio-xs); }
.rtn-skeleton__bloque--titulo { height: 36px; width: 75%; border-radius: var(--rtn-radio-xs); }
.rtn-skeleton__bloque--chico { height: 56px; }
@keyframes rtn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.rtn-vacio { padding: var(--rtn-esp-6) var(--rtn-esp-4); text-align: center; }
.rtn-vacio__ico { margin-bottom: var(--rtn-esp-3); color: var(--rtn-tinta-3); }
.rtn-vacio__titulo {
	margin: 0 0 var(--rtn-esp-2);
	font-weight: 700;
	font-size: var(--rtn-fs-xl);
	line-height: var(--rtn-lh-tight);
}
.rtn-vacio__texto { max-width: 36ch; margin: 0 auto var(--rtn-esp-4); color: var(--rtn-tinta-2); }
.rtn-vacio .rtn-acciones { justify-content: center; flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
.rtn-vacio--dia { padding-top: var(--rtn-esp-5); }

.rtn-falla {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--rtn-esp-2) var(--rtn-esp-3);
	margin: 0 0 var(--rtn-esp-4);
	padding: var(--rtn-esp-4);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-error-dim);
	color: var(--rtn-error);
}
.rtn-falla__texto { margin: 0; color: var(--rtn-tinta); }
.rtn-falla .rtn-btn { grid-column: 2; justify-self: start; }

/* Toast: invierte a propósito (tokens de componente de tema.md §3.2). */
.rtn-toast {
	position: fixed;
	right: var(--rtn-esp-4);
	bottom: calc(var(--rtn-tabbar) + var(--rtn-esp-3) + env(safe-area-inset-bottom));
	left: var(--rtn-esp-4);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: var(--rtn-esp-3);
	max-width: calc(var(--rtn-ancho-lectura) - 2 * var(--rtn-esp-4));
	min-height: var(--rtn-tap);
	margin: 0 auto;
	padding: var(--rtn-esp-2) var(--rtn-esp-2) var(--rtn-esp-2) var(--rtn-esp-4);
	border-radius: var(--rtn-radio-sm);
	background: var(--rtn-toast-fondo);
	color: var(--rtn-toast-texto);
	box-shadow: var(--rtn-sombra-menu);
	animation: rtn-subir var(--rtn-dur-2) var(--rtn-ease);
}
.rtn-toast__ico { color: var(--rtn-toast-ico); }
.rtn-toast__texto { flex: 1; margin: 0; font-size: var(--rtn-fs-sm); font-weight: 600; }
.rtn-toast__accion {
	min-height: var(--rtn-tap-min);
	padding: 0 var(--rtn-esp-3);
	border: 0;
	border-radius: var(--rtn-radio-xs);
	background: transparent;
	color: var(--rtn-toast-accion);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}
.rtn-ui .rtn-toast :focus-visible { outline-color: var(--rtn-toast-foco); }

/* =========================================================
   ESCALADO (tema.md §8.19)
   ========================================================= */
@media (min-width: 640px) {
	.rtn-pagina { padding-top: var(--rtn-esp-7); }
	.rtn-login { padding-top: var(--rtn-esp-8); }
	.rtn-login__form { padding: var(--rtn-esp-6); }
	.rtn-familia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.rtn-familia > li { margin-left: -1px; border-left: 1px solid var(--rtn-borde); }
	.rtn-velo { align-items: center; }
	.rtn-hoja { border-radius: var(--rtn-radio); }
}

@media (min-width: 1024px) {
	/* minmax(0,1fr): sin él la columna crece al min-content de la rejilla y
	   aparece scroll horizontal. Filas fijas (topbar | resto) con
	   align-content:start (el contenido arranca en y = 56). */
	.rtn-shell {
		display: grid;
		grid-template-columns: var(--rtn-sidebar) minmax(0, 1fr);
		grid-template-rows: var(--rtn-topbar) 1fr;
		align-content: start;
	}
	.rtn-topbar { grid-column: 2; }
	/* La marca vive en la barra lateral: en la superior se quita (no solo se oculta)
	   y el nombre de la cuenta pasa al inicio, en vez de quedar solo a la derecha. */
	.rtn-topbar .rtn-marca { display: none; }
	.rtn-topbar { justify-content: flex-start; padding: 0 var(--rtn-esp-6); }
	.rtn-topbar__familia { color: var(--rtn-tinta); font-size: var(--rtn-fs-base); }
	.rtn-nav {
		position: sticky;
		top: 0;
		right: auto;
		grid-row: 1 / span 2;
		grid-column: 1;
		height: 100vh;
		padding: var(--rtn-esp-4) var(--rtn-esp-3);
		border-top: 0;
		border-right: 1px solid var(--rtn-borde);
	}
	.rtn-nav__marca {
		display: flex;
		margin: 0 var(--rtn-esp-3) var(--rtn-esp-5);
		padding: var(--rtn-esp-2) 0 var(--rtn-esp-4);
		border-bottom: 1px solid var(--rtn-borde);
	}
	.rtn-nav__pie { display: block; position: absolute; right: var(--rtn-esp-3); bottom: var(--rtn-esp-4); left: var(--rtn-esp-3); }
	.rtn-nav__lista { grid-template-columns: 1fr; gap: var(--rtn-esp-1); }
	.rtn-nav__enlace,
	.rtn-ui .rtn-nav__enlace {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--rtn-esp-3);
		height: var(--rtn-tap);
		padding: 0 var(--rtn-esp-3);
		border-left: 3px solid transparent;
		border-radius: 0 var(--rtn-radio-sm) var(--rtn-radio-sm) 0;
		font-size: var(--rtn-fs-base);
	}
	/* Activa: lavado azul-dim + texto azul-tinta + barra izquierda 3px trazo. */
	.rtn-nav__enlace[aria-current="page"] { background: var(--rtn-azul-dim); border-left-color: var(--rtn-azul-trazo); }
	.rtn-nav__enlace[aria-current="page"]::before { display: none; }
	.rtn-nav__badge { position: static; margin-left: auto; }
	.rtn-main { grid-column: 2; grid-row: 2; min-width: 0; padding: var(--rtn-esp-5) var(--rtn-esp-6) var(--rtn-esp-7); }
	.rtn-main--con-barra { padding-bottom: calc(var(--rtn-tap) + var(--rtn-esp-8)); }
	.rtn-barra-cta { left: var(--rtn-sidebar); bottom: 0; }
	.rtn-alta__barra { bottom: 0; }
	.rtn-shell--enfoque { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.rtn-shell--enfoque .rtn-main { grid-column: 1; grid-row: 1; }
	.rtn-super__estado { margin: 0 calc(-1 * var(--rtn-esp-6)); padding: 0 var(--rtn-esp-6); }
	.rtn-toast { bottom: var(--rtn-esp-5); left: calc(var(--rtn-sidebar) + var(--rtn-esp-4)); }

	/* Semana = rejilla 7 columnas (tema.md §8.10). Aritmética a 1024 (el caso
	   más estrecho): main = 1024 − 240 − 2×32 = 720; columna = (720 − 6×4) / 7
	   = 99.4; contenido de la celda = 99.4 − 2×1 (borde) − 2×8 = 81.4. Lo más
	   ancho que no se parte: "Desayuno" a 13/600 Linear (≈ 62) y un ícono de
	   16; el platillo (Casual 14) parte por sílaba. Sin pila (G6). */
	.rtn-vista--ancha { max-width: none; }
	.rtn-rejilla {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: var(--rtn-esp-1);
		margin: 0 0 var(--rtn-esp-5);
	}
	.rtn-rejilla__col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--rtn-esp-1); min-width: 0; border-radius: var(--rtn-radio-sm); }
	/* Columna de hoy enmarcada con una orilla de 2px --rtn-azul-trazo. */
	.rtn-rejilla__col--hoy { box-shadow: 0 0 0 var(--rtn-orilla) var(--rtn-azul-trazo); }
	.rtn-rejilla__dia { margin: 0; padding: var(--rtn-esp-1) 0; color: var(--rtn-tinta-2); font-size: var(--rtn-fs-sm); font-weight: 700; text-align: center; }
	.rtn-rejilla__col--hoy .rtn-rejilla__dia { color: var(--rtn-azul-tinta); }
	.rtn-celda {
		min-width: 0;
		overflow: hidden;
		background: var(--rtn-superficie);
		border: 1px solid var(--rtn-borde);
		border-radius: var(--rtn-radio-sm);
	}
	.rtn-celda__boton {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rtn-esp-1);
		width: 100%;
		padding: var(--rtn-esp-2);
		border: 0;
		background: transparent;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.rtn-celda__boton:hover { background: var(--rtn-superficie-2); }
	.rtn-ui .rtn-celda__boton:focus-visible { outline-offset: -3px; }
	.rtn-celda__tiempo { color: var(--rtn-tinta-2); font-size: var(--rtn-fs-xs); font-weight: 600; line-height: var(--rtn-lh-tight); }
	/* break-word (no anywhere) + hyphens:auto con <html lang="es">: parte por
	   sílaba con guion solo cuando una palabra sola no cabe. */
	.rtn-celda__platillo { max-width: 100%; font-size: var(--rtn-fs-sm); overflow-wrap: break-word; hyphens: auto; }
	.rtn-celda__vacia { color: var(--rtn-tinta-3); font-size: var(--rtn-fs-xs); font-weight: 600; }
	.rtn-celda__accion { margin: 0; padding: 0 var(--rtn-esp-2) var(--rtn-esp-2); }
	.rtn-celda__accion .rtn-btn,
	.rtn-rejilla__col > .rtn-btn { width: 100%; padding: var(--rtn-esp-1); white-space: normal; text-align: center; }
	.rtn-rejilla__col > .rtn-meta { padding: 0 var(--rtn-esp-1); }
	.rtn-semana-movil { display: none; }

	/* Detalle = panel lateral derecho de 420 (mismo componente que la hoja). */
	.rtn-velo--panel { justify-content: flex-end; align-items: stretch; }
	.rtn-velo--panel .rtn-hoja {
		max-width: var(--rtn-ancho-panel);
		max-height: none;
		height: 100%;
		border-radius: var(--rtn-radio) 0 0 var(--rtn-radio);
		animation-name: rtn-panel-in;
	}
	.rtn-velo--panel .rtn-hoja__agarradera { display: none; }
	.rtn-velo--panel .rtn-hoja__cabecera { padding-top: var(--rtn-esp-4); }
	.rtn-dialogo { max-width: var(--rtn-ancho-dialogo); }

	.rtn-pasillos { columns: 2; column-gap: var(--rtn-esp-5); }
	.rtn-pasillo__cabecera { position: static; }
	.rtn-plato__columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.rtn-vista--super,
	.rtn-vista--plato { max-width: 960px; }
}
@keyframes rtn-panel-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================
   IMPRESIÓN DEL SÚPER (tema.md §8.13): 2 columnas, sin chrome, casillas
   vacías, SIEMPRE en claro (los tokens claros se re-declaran arriba en el
   bloque @media print de tokens).
   ========================================================= */
@media print {
	html, .rtn-ui { background: none; }
	/* Sin !important: estas reglas (una clase, 0,1,0) van DESPUÉS de las que
	   les dan display, así que ganan por orden. */
	.rtn-topbar, .rtn-nav, .rtn-barra-cta, .rtn-toast, .rtn-sync, .rtn-super__herramientas,
	.rtn-progreso, .rtn-super__estado, .rtn-aviso-lista, .rtn-velo, .rtn-no-imprimir { display: none; }
	.rtn-main { padding: 0; }
	.rtn-vista { max-width: none; }
	.rtn-pasillos { columns: 2; column-gap: var(--rtn-esp-5); }
	.rtn-pasillo__cabecera { position: static; background: none; border-bottom: 1px solid var(--rtn-tinta); border-radius: 0; }
	.rtn-pasillo__flecha { display: none; }
	/* EXCEPCIÓN justificada (estándares §4 CSS): contraparte de impresión del
	   guard de [hidden]; solo otra !important de mayor especificidad
	   (0,2,0 > 0,1,0) lo vence. Sin ella se omitirían los pasillos plegados. */
	.rtn-pasillo__lista[hidden] { display: block !important; }
	.rtn-pasillo__lista { border: 0; }
	.rtn-super--ocultar .rtn-compra-fila--marcada { display: list-item; }
	.rtn-compra { min-height: 0; padding: var(--rtn-esp-1) 0; }
	.rtn-compra__check { width: 16px; height: 16px; border-color: var(--rtn-tinta); background: none; animation: none; }
	.rtn-compra__check::before { display: none; }
	.rtn-compra--marcada .rtn-compra__nombre,
	.rtn-compra--marcada .rtn-compra__cantidad { color: var(--rtn-tinta); text-decoration: none; }
}