/* App del nutriólogo, sistema de diseño: generado desde tokens.json */
:root, [data-theme="light"] {
  --mat-sys-primary: #2f5d4a;
  --mat-sys-on-primary: #fffbff;
  --mat-sys-primary-container: #cfe9da;
  --mat-sys-on-primary-container: #002c1e;
  --mat-sys-secondary: #53625a;
  --mat-sys-on-secondary: #fffbff;
  --mat-sys-secondary-container: #d7e6dc;
  --mat-sys-on-secondary-container: #1b2922;
  --mat-sys-tertiary: #9e4c00;
  --mat-sys-on-tertiary: #fffbff;
  --mat-sys-tertiary-container: #ffb875;
  --mat-sys-on-tertiary-container: #411b00;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #fffbff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #540003;
  --mat-sys-surface: #fcf5ed;
  --mat-sys-background: #fcf5ed;
  --mat-sys-on-background: #211d15;
  --mat-sys-surface-container-lowest: #fffbff;
  --mat-sys-surface-container-low: #f7f0e7;
  --mat-sys-surface-container: #f2eadf;
  --mat-sys-surface-container-high: #ece4d9;
  --mat-sys-surface-container-highest: #e4dcce;
  --mat-sys-surface-dim: #e0d9d0;
  --mat-sys-surface-bright: #fcf5ed;
  --mat-sys-on-surface: #211d15;
  --mat-sys-on-surface-variant: #4c4637;
  --mat-sys-outline: #736c5e;
  --mat-sys-outline-variant: #d4cbb9;
  --mat-sys-inverse-surface: #343027;
  --mat-sys-inverse-on-surface: #f8f0e2;
  --mat-sys-inverse-primary: #a0d1b9;
  --mat-sys-surface-tint: #2f5d4a;
  --logro: var(--mat-sys-tertiary-container);
  --on-logro: var(--mat-sys-on-tertiary-container);
  --aviso-container: #fdda75;
  --on-aviso-container: #302400;
  --grupo-verduras: #426834;
  --on-grupo-verduras: #fffbff;
  --grupo-verduras-container: #d7efc8;
  --on-grupo-verduras-container: #1b3711;
  --grupo-frutas: #8c4966;
  --on-grupo-frutas: #fffbff;
  --grupo-frutas-container: #ffe0ea;
  --on-grupo-frutas-container: #4e2136;
  --grupo-cereales: #6e5e0e;
  --on-grupo-cereales: #fffbff;
  --grupo-cereales-container: #f7e8b2;
  --on-grupo-cereales-container: #3a3000;
  --grupo-leguminosas: #8d4d39;
  --on-grupo-leguminosas: #fffbff;
  --grupo-leguminosas-container: #ffe2da;
  --on-grupo-leguminosas-container: #512314;
  --grupo-animal: #276674;
  --on-grupo-animal: #fffbff;
  --grupo-animal-container: #c7eff9;
  --on-grupo-animal-container: #00363f;
  --grupo-leche: #5a5b81;
  --on-grupo-leche: #fffbff;
  --grupo-leche-container: #e8e6ff;
  --on-grupo-leche-container: #2c2d50;
  --grupo-grasas: #855303;
  --on-grupo-grasas: #fffbff;
  --grupo-grasas-container: #ffe4c8;
  --on-grupo-grasas-container: #472a00;
  --grupo-azucares: #72537d;
  --on-grupo-azucares: #fffbff;
  --grupo-azucares-container: #fae0ff;
  --on-grupo-azucares-container: #41254c;
  --mat-sys-level2: 0 8px 24px -4px rgba(33, 29, 21, 0.18);
  --mat-sys-level3: 0 -8px 24px -4px rgba(33, 29, 21, 0.18);
}
[data-theme="dark"] {
  --mat-sys-primary: #a0d1b9;
  --mat-sys-on-primary: #033827;
  --mat-sys-primary-container: #204f3d;
  --mat-sys-on-primary-container: #cfe9da;
  --mat-sys-secondary: #bbcac1;
  --mat-sys-on-secondary: #26332d;
  --mat-sys-secondary-container: #3c4a43;
  --mat-sys-on-secondary-container: #d7e6dc;
  --mat-sys-tertiary: #ffb875;
  --mat-sys-on-tertiary: #411b00;
  --mat-sys-tertiary-container: #733600;
  --mat-sys-on-tertiary-container: #ffdcc0;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #8e1313;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface: #171512;
  --mat-sys-background: #181510;
  --mat-sys-on-background: #efe7d9;
  --mat-sys-surface-container-lowest: #100e0a;
  --mat-sys-surface-container-low: #1d1b17;
  --mat-sys-surface-container: #24211c;
  --mat-sys-surface-container-high: #2c2a24;
  --mat-sys-surface-container-highest: #3a372f;
  --mat-sys-surface-dim: #171512;
  --mat-sys-surface-bright: #3b3934;
  --mat-sys-on-surface: #f2eadf;
  --mat-sys-on-surface-variant: #c3bba9;
  --mat-sys-outline: #989080;
  --mat-sys-outline-variant: #4c4639;
  --mat-sys-inverse-surface: #eae1d4;
  --mat-sys-inverse-on-surface: #29251d;
  --mat-sys-inverse-primary: #2f5d4a;
  --mat-sys-surface-tint: #a0d1b9;
  --logro: var(--mat-sys-tertiary);
  --on-logro: var(--mat-sys-on-tertiary);
  --aviso-container: #514004;
  --on-aviso-container: #fce096;
  --grupo-verduras: #a2cd8e;
  --on-grupo-verduras: #0a2503;
  --grupo-verduras-container: #2b3e23;
  --on-grupo-verduras-container: #c9edb6;
  --grupo-frutas: #fca9ca;
  --on-grupo-frutas: #3a1024;
  --grupo-frutas-container: #512f3d;
  --on-grupo-frutas-container: #ffd9e5;
  --grupo-cereales: #d6c169;
  --on-grupo-cereales: #261f00;
  --grupo-cereales-container: #423912;
  --on-grupo-cereales-container: #f6e298;
  --grupo-leguminosas: #ffad95;
  --on-grupo-leguminosas: #3c1206;
  --grupo-leguminosas-container: #542f24;
  --on-grupo-leguminosas-container: #ffdbd1;
  --grupo-animal: #8fcad9;
  --on-grupo-animal: #00242a;
  --grupo-animal-container: #173e47;
  --on-grupo-animal-container: #b0ecfc;
  --grupo-leche: #bebde8;
  --on-grupo-leche: #1b1c3e;
  --grupo-leche-container: #363753;
  --on-grupo-leche-container: #e1dfff;
  --grupo-grasas: #f6b462;
  --on-grupo-grasas: #301b00;
  --grupo-grasas-container: #4d3413;
  --on-grupo-grasas-container: #ffddb8;
  --grupo-azucares: #d9b4e4;
  --on-grupo-azucares: #2f143a;
  --grupo-azucares-container: #46324d;
  --on-grupo-azucares-container: #f8d8ff;
  --mat-sys-level2: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --mat-sys-level3: 0 -8px 24px -4px rgba(0, 0, 0, 0.6);
}
[data-theme="marino"] {
  --mat-sys-primary: #1b365d;
  --mat-sys-on-primary: #fffbff;
  --mat-sys-primary-container: #d7e3fd;
  --mat-sys-on-primary-container: #06254c;
  --mat-sys-secondary: #585e6d;
  --mat-sys-on-secondary: #fffbff;
  --mat-sys-secondary-container: #dce2f4;
  --mat-sys-on-secondary-container: #1f2632;
  --mat-sys-tertiary: #9e4c00;
  --mat-sys-on-tertiary: #fffbff;
  --mat-sys-tertiary-container: #ffb875;
  --mat-sys-on-tertiary-container: #411b00;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #fffbff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #540003;
  --mat-sys-surface: #fcf5ed;
  --mat-sys-background: #fcf5ed;
  --mat-sys-on-background: #211d15;
  --mat-sys-surface-container-lowest: #fffbff;
  --mat-sys-surface-container-low: #f7f0e7;
  --mat-sys-surface-container: #f2eadf;
  --mat-sys-surface-container-high: #ece4d9;
  --mat-sys-surface-container-highest: #e4dcce;
  --mat-sys-surface-dim: #e0d9d0;
  --mat-sys-surface-bright: #fcf5ed;
  --mat-sys-on-surface: #211d15;
  --mat-sys-on-surface-variant: #4c4637;
  --mat-sys-outline: #736c5e;
  --mat-sys-outline-variant: #d4cbb9;
  --mat-sys-inverse-surface: #343027;
  --mat-sys-inverse-on-surface: #f8f0e2;
  --mat-sys-inverse-primary: #aec7f7;
  --mat-sys-surface-tint: #1b365d;
  --logro: var(--mat-sys-tertiary-container);
  --on-logro: var(--mat-sys-on-tertiary-container);
  --aviso-container: #fdda75;
  --on-aviso-container: #302400;
  --grupo-verduras: #426834;
  --on-grupo-verduras: #fffbff;
  --grupo-verduras-container: #d7efc8;
  --on-grupo-verduras-container: #1b3711;
  --grupo-frutas: #8c4966;
  --on-grupo-frutas: #fffbff;
  --grupo-frutas-container: #ffe0ea;
  --on-grupo-frutas-container: #4e2136;
  --grupo-cereales: #6e5e0e;
  --on-grupo-cereales: #fffbff;
  --grupo-cereales-container: #f7e8b2;
  --on-grupo-cereales-container: #3a3000;
  --grupo-leguminosas: #8d4d39;
  --on-grupo-leguminosas: #fffbff;
  --grupo-leguminosas-container: #ffe2da;
  --on-grupo-leguminosas-container: #512314;
  --grupo-animal: #276674;
  --on-grupo-animal: #fffbff;
  --grupo-animal-container: #c7eff9;
  --on-grupo-animal-container: #00363f;
  --grupo-leche: #5a5b81;
  --on-grupo-leche: #fffbff;
  --grupo-leche-container: #e8e6ff;
  --on-grupo-leche-container: #2c2d50;
  --grupo-grasas: #855303;
  --on-grupo-grasas: #fffbff;
  --grupo-grasas-container: #ffe4c8;
  --on-grupo-grasas-container: #472a00;
  --grupo-azucares: #72537d;
  --on-grupo-azucares: #fffbff;
  --grupo-azucares-container: #fae0ff;
  --on-grupo-azucares-container: #41254c;
  --mat-sys-level2: 0 8px 24px -4px rgba(33, 29, 21, 0.18);
  --mat-sys-level3: 0 -8px 24px -4px rgba(33, 29, 21, 0.18);
}
[data-theme="marino-dark"] {
  --mat-sys-primary: #aec7f7;
  --mat-sys-on-primary: #143057;
  --mat-sys-primary-container: #2e476f;
  --mat-sys-on-primary-container: #d7e3fd;
  --mat-sys-secondary: #c0c6d7;
  --mat-sys-on-secondary: #2a313d;
  --mat-sys-secondary-container: #404755;
  --mat-sys-on-secondary-container: #dce2f4;
  --mat-sys-tertiary: #ffb875;
  --mat-sys-on-tertiary: #411b00;
  --mat-sys-tertiary-container: #733600;
  --mat-sys-on-tertiary-container: #ffdcc0;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #8e1313;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface: #171512;
  --mat-sys-background: #181510;
  --mat-sys-on-background: #efe7d9;
  --mat-sys-surface-container-lowest: #100e0a;
  --mat-sys-surface-container-low: #1d1b17;
  --mat-sys-surface-container: #24211c;
  --mat-sys-surface-container-high: #2c2a24;
  --mat-sys-surface-container-highest: #3a372f;
  --mat-sys-surface-dim: #171512;
  --mat-sys-surface-bright: #3b3934;
  --mat-sys-on-surface: #f2eadf;
  --mat-sys-on-surface-variant: #c3bba9;
  --mat-sys-outline: #989080;
  --mat-sys-outline-variant: #4c4639;
  --mat-sys-inverse-surface: #eae1d4;
  --mat-sys-inverse-on-surface: #29251d;
  --mat-sys-inverse-primary: #1b365d;
  --mat-sys-surface-tint: #aec7f7;
  --logro: var(--mat-sys-tertiary);
  --on-logro: var(--mat-sys-on-tertiary);
  --aviso-container: #514004;
  --on-aviso-container: #fce096;
  --grupo-verduras: #a2cd8e;
  --on-grupo-verduras: #0a2503;
  --grupo-verduras-container: #2b3e23;
  --on-grupo-verduras-container: #c9edb6;
  --grupo-frutas: #fca9ca;
  --on-grupo-frutas: #3a1024;
  --grupo-frutas-container: #512f3d;
  --on-grupo-frutas-container: #ffd9e5;
  --grupo-cereales: #d6c169;
  --on-grupo-cereales: #261f00;
  --grupo-cereales-container: #423912;
  --on-grupo-cereales-container: #f6e298;
  --grupo-leguminosas: #ffad95;
  --on-grupo-leguminosas: #3c1206;
  --grupo-leguminosas-container: #542f24;
  --on-grupo-leguminosas-container: #ffdbd1;
  --grupo-animal: #8fcad9;
  --on-grupo-animal: #00242a;
  --grupo-animal-container: #173e47;
  --on-grupo-animal-container: #b0ecfc;
  --grupo-leche: #bebde8;
  --on-grupo-leche: #1b1c3e;
  --grupo-leche-container: #363753;
  --on-grupo-leche-container: #e1dfff;
  --grupo-grasas: #f6b462;
  --on-grupo-grasas: #301b00;
  --grupo-grasas-container: #4d3413;
  --on-grupo-grasas-container: #ffddb8;
  --grupo-azucares: #d9b4e4;
  --on-grupo-azucares: #2f143a;
  --grupo-azucares-container: #46324d;
  --on-grupo-azucares-container: #f8d8ff;
  --mat-sys-level2: 0 8px 24px -4px rgba(33, 29, 21, 0.18);
  --mat-sys-level3: 0 -8px 24px -4px rgba(33, 29, 21, 0.18);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --mat-sys-corner-none: 0px;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-small: 8px;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-large: 20px;
  --mat-sys-corner-extra-large: 24px;
  --mat-sys-corner-full: 9999px;
  --corner-ficha: 10px;
  --corner-compartimento: 14px;
  --size-regla: 1px;
  --size-foco: 3px;
  --size-foco-offset: 2px;
  --size-touch-min: 48px;
  --size-touch-main: 56px;
  --size-touch-desk: 40px;
  --size-rail: 88px;
  --size-artboard-w: 390px;
  --size-artboard-h: 844px;
  --size-panel-w: 1440px;
  --size-panel-h: 900px;
  --size-safe-top: 47px;
  --size-safe-bottom: 34px;
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --blur-small: 2px;
  --blur-medium: 3px;
  --distance-micro: 4px;
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-morph-dur: 180ms;
  --text-morph-resize-dur: 240ms;
  --text-morph-blur: 2px;
  --text-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toggle-dur: 250ms;
  --toggle-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-text: "Cifras", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Gabarito", "Cifras", "Atkinson Hyperlegible Next", system-ui, sans-serif;
}
.numeral-lg { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; }
.numeral-md { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.numeral-sm { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
.headline-small { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.title-large { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
.title-medium { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 700; }
.body-large { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-medium { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.label-large { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 700; }
.label-medium { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 700; }
.label-small { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 700; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/a/AtkinsonHyperlegibleNext-latin-var.04327e57a2.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("/a/Gabarito-latin-var.5b35317b55.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Cifras"; src: url("/a/Gabarito-latin-var.5b35317b55.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }

/* Sistema compartido, dirección B2 «Equivalentes».
   Los valores viven en tokens.json (color, forma, espacio, movimiento); aquí solo hay composición.
   Clases pa- para la app y pn- para el panel. Sin colores hex: todo sale de var(--token).
   Escala de letra: 12, 14, 16, 20, 28 y 44 (solo la hora de la siguiente comida). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--mat-sys-surface); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface);
  font-family: var(--font-text); font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); }
:focus-visible { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); border-radius: var(--mat-sys-corner-extra-small); }
/* Títulos y contenedores que reciben el foco por script (al navegar o tras deshacer) marcan dónde sigue la lectura; no son controles y no llevan anillo. */
:is(h1, h2, h3, .pa-cuerpo, .pn-cuerpo, .t-page)[tabindex="-1"]:focus-visible { outline: none; }
input, textarea { caret-color: var(--mat-sys-primary); accent-color: var(--mat-sys-primary); }
[hidden] { display: none !important; }
.pa-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pa-i { display: block; flex: none; fill: currentColor; }
.pa-var { color: var(--mat-sys-on-surface-variant); }
.pa-balance { text-wrap: balance; }

/* ---------- Muestra de componente ---------- */
.pa-fondo { min-height: 100vh; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); }
.pa-oscuro { min-height: 100vh; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); }
.pa-muestra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.pa-muestra--col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; max-width: 390px; }
.pa-muestra--ancha { max-width: none; }
.pa-muestra__t { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
.pa-estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3) var(--space-2); align-items: end; padding: 0 var(--space-4) var(--space-4); }
.pa-estados > * { min-width: 0; }
.pa-bloque { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.pa-bloque + .pa-bloque { padding-top: 0; }
.pa-caja { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.pa-fila-flex { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Tableros ---------- */
.pa-board {
  position: relative; display: flex; flex-direction: column; flex: none; overflow: hidden; overflow: clip;
  width: var(--size-artboard-w); max-width: 100%; height: var(--size-artboard-h);
  background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); font-family: var(--font-text);
}
.pa-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 28px 0 32px; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }
.pa-status__ico { display: flex; align-items: center; gap: var(--space-1); }
.pa-home { position: absolute; left: 50%; bottom: 8px; z-index: 5; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--mat-sys-on-surface); pointer-events: none; }
.pa-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4); scrollbar-width: thin; scrollbar-color: var(--mat-sys-outline-variant) transparent;
  /* se desvanece contra la barra de navegación, sin cortar letras a la mitad */
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent);
}

/* ---------- Cabecera de la app ---------- */
.pa-cab { flex: none; height: 52px; padding: 0 var(--space-2) 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; }
.pa-marca { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }
.pa-marca__n { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }
.pa-logo { display: block; flex: none; width: 36px; height: 36px; color: var(--mat-sys-primary); }
.pa-logo--ancho { width: 104px; height: 32px; }
.pa-iconbtn { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size-touch-min); height: var(--size-touch-min); padding: 0; border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: inherit; transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-micro) var(--ease-smooth-out); }
.pa-iconbtn--borde { border: var(--size-regla) solid var(--mat-sys-outline); }
.pa-iconbtn:active { transform: scale(0.94); background: color-mix(in srgb, currentColor 14%, transparent); }
@media (hover: hover) { .pa-iconbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); } }
.pa-iconbtn[disabled] { opacity: 0.38; pointer-events: none; }
.pa-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-avatar--s { width: 28px; height: 28px; font-size: 12px; line-height: 16px; }

/* ---------- Botones ---------- */
.pa-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: 0 var(--space-6);
  border: var(--size-regla) solid transparent; border-radius: var(--mat-sys-corner-medium); background: none; color: inherit;
  font-family: var(--font-text); font-weight: 700; font-size: 16px; line-height: 24px; white-space: nowrap; text-align: center;
  transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-micro) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out);
}
.pa-btn:active { transform: translateY(1px) scale(0.985); }
.pa-btn--filled { background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pa-btn--tonal { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pa-btn--outlined { background: transparent; border-color: var(--mat-sys-outline); color: var(--mat-sys-on-surface); }
.pa-btn--text { background: transparent; color: var(--mat-sys-primary); padding: 0 var(--space-3); }
.pa-btn--lg { min-height: var(--size-touch-main); }
.pa-btn--block { display: flex; width: 100%; }
.pa-btn--chico { padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
@media (min-width: 1024px) { .pa-btn--desk { min-height: var(--size-touch-desk); padding: 0 var(--space-4); font-size: 14px; line-height: 20px; } }
@media (hover: hover) {
  .pa-btn--filled:hover { background: color-mix(in srgb, var(--mat-sys-primary), var(--mat-sys-on-surface) 12%); }
  .pa-btn--tonal:hover { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-secondary-container) 8%); }
  .pa-btn--outlined:hover, .pa-btn--text:hover { background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); }
}
.pa-btn--filled:active { background: color-mix(in srgb, var(--mat-sys-primary), var(--mat-sys-on-surface) 20%); }
.pa-btn--tonal:active { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-secondary-container) 16%); }
.pa-btn--outlined:active, .pa-btn--text:active { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
.pa-btn[disabled], .pa-btn[aria-disabled="true"] { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); color: color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent); border-color: transparent; pointer-events: none; transform: none; }

/* ---------- Colores de grupo: viven solo en etiquetas, fichas, puntos, porciones y la tabla del panel ---------- */
:where(.pa-grupo, .pa-ficha, .pa-punto, .pa-porcion) { --g: var(--grupo-verduras); --on-g: var(--on-grupo-verduras); --gc: var(--grupo-verduras-container); --on-gc: var(--on-grupo-verduras-container); }
[data-g="verduras"] { --g: var(--grupo-verduras); --on-g: var(--on-grupo-verduras); --gc: var(--grupo-verduras-container); --on-gc: var(--on-grupo-verduras-container); }
[data-g="frutas"] { --g: var(--grupo-frutas); --on-g: var(--on-grupo-frutas); --gc: var(--grupo-frutas-container); --on-gc: var(--on-grupo-frutas-container); }
[data-g="cereales"] { --g: var(--grupo-cereales); --on-g: var(--on-grupo-cereales); --gc: var(--grupo-cereales-container); --on-gc: var(--on-grupo-cereales-container); }
[data-g="leguminosas"] { --g: var(--grupo-leguminosas); --on-g: var(--on-grupo-leguminosas); --gc: var(--grupo-leguminosas-container); --on-gc: var(--on-grupo-leguminosas-container); }
[data-g="animal"] { --g: var(--grupo-animal); --on-g: var(--on-grupo-animal); --gc: var(--grupo-animal-container); --on-gc: var(--on-grupo-animal-container); }
[data-g="leche"] { --g: var(--grupo-leche); --on-g: var(--on-grupo-leche); --gc: var(--grupo-leche-container); --on-gc: var(--on-grupo-leche-container); }
[data-g="grasas"] { --g: var(--grupo-grasas); --on-g: var(--on-grupo-grasas); --gc: var(--grupo-grasas-container); --on-gc: var(--on-grupo-grasas-container); }
[data-g="azucares"] { --g: var(--grupo-azucares); --on-g: var(--on-grupo-azucares); --gc: var(--grupo-azucares-container); --on-gc: var(--on-grupo-azucares-container); }

/* Etiqueta de grupo (paciente): el grupo en palabras. Se llena de abajo hacia arriba al comer, en cascada con --i.
   El relleno es lo único que se anima (background-size). El texto se pinta con background-clip: text con dos capas del mismo tamaño y posición que el relleno:
   --on-g donde el relleno ya llegó y --on-gc donde no, así cada letra contrasta con lo que tiene justo detrás en todos los cuadros. */
.pa-grupo {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: var(--size-regla) solid var(--g); border-radius: var(--corner-ficha);
  font-family: var(--font-text); font-weight: 700; font-size: 14px; line-height: 16px; text-align: left; white-space: nowrap;
  background-color: var(--gc); background-repeat: no-repeat; background-position: left bottom;
  background-image: linear-gradient(var(--on-g), var(--on-g)), linear-gradient(var(--on-gc), var(--on-gc)), linear-gradient(var(--g), var(--g));
  background-size: 100% 0%, 100% 100%, 100% 0%;
  -webkit-background-clip: text, text, border-box; background-clip: text, text, border-box; color: transparent;
  transition: background-size var(--duration-fast) var(--ease-smooth-out) calc(var(--i, 0) * var(--duration-stagger));
}
.pa-grupo[data-lleno="true"] { background-size: 100% 100%, 100% 100%, 100% 100%; }
.pa-grupo--s { min-height: 28px; padding: 2px 8px; }
.pa-grupo.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); }
.pa-grupo.is-presionada { transform: scale(0.96); }
.pa-grupo.is-deshabilitada { opacity: 0.4; border-style: dashed; }
.pa-punto { width: 10px; height: 10px; border-radius: var(--mat-sys-corner-full); background: var(--g); flex: none; }
.pa-puntos { display: flex; align-items: center; gap: 5px; min-height: 14px; }
.pa-porcion { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px; border: var(--size-regla) solid var(--g); border-radius: var(--corner-ficha); background: var(--gc); color: var(--on-gc); font-weight: 700; font-size: 14px; line-height: 16px; white-space: nowrap; }

/* Ficha del panel: sigla y conteo. Solo en piezas del panel. */
.pa-ficha {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border: var(--size-regla) solid var(--g); border-radius: var(--corner-ficha);
  font-family: var(--font-display);
  background-color: var(--gc); background-repeat: no-repeat; background-position: left bottom;
  background-image: linear-gradient(var(--on-g), var(--on-g)), linear-gradient(var(--on-gc), var(--on-gc)), linear-gradient(var(--g), var(--g));
  background-size: 100% 0%, 100% 100%, 100% 0%;
  -webkit-background-clip: text, text, border-box; background-clip: text, text, border-box; color: transparent;
  transition: background-size var(--duration-fast) var(--ease-smooth-out) calc(var(--i, 0) * var(--duration-stagger));
}
.pa-ficha[data-lleno="true"] { background-size: 100% 100%, 100% 100%, 100% 100%; }
.pa-ficha__g { font-family: var(--font-text); font-weight: 700; font-size: 12px; line-height: 16px; }
.pa-ficha__n { font-weight: 700; font-size: 20px; line-height: 22px; }
.pa-ficha--m { width: auto; height: 28px; min-width: 32px; padding: 0 6px; flex-direction: row; gap: 3px; border-radius: var(--mat-sys-corner-small); }
.pa-ficha--m .pa-ficha__n { font-size: 14px; line-height: 16px; }
.pa-ficha.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); }
.pa-ficha.is-presionada { transform: scale(0.94); }
.pa-ficha.is-deshabilitada { opacity: 0.4; border-style: dashed; }
/* Respaldo: al imprimir (sin fondos por omisión) y con Alto contraste el texto no puede quedar transparente. Sin degradados ni recorte a texto: color normal
   (--on-gc en reposo, --on-g llena) sobre su fondo sólido (--gc, --g), que en impresión se pide exacto para que el texto claro de la llena no caiga sobre papel blanco.
   Con colores forzados el sistema impone sus colores; aquí solo se asegura que el texto se pinte. */
@media print, (forced-colors: active) {
  .pa-grupo, .pa-ficha { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; background-color: var(--gc); color: var(--on-gc); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pa-grupo[data-lleno="true"], .pa-ficha[data-lleno="true"] { background-color: var(--g); color: var(--on-g); }
}

/* ---------- Charola con compartimentos ---------- */
.pa-charola { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--mat-sys-corner-large); background: var(--mat-sys-surface-container-high); }
.pa-charola--col { flex-direction: row; }
.pa-comp { flex: none; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); min-height: 64px; border-radius: var(--corner-compartimento); background: var(--mat-sys-surface-container-lowest); }
.pa-comp__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.pa-comp__n { font-weight: 700; font-size: 16px; line-height: 24px; }
.pa-comp__p { font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pa-comp__l { font-size: 16px; line-height: 24px; }
.pa-comp__l .pa-comp__p { font-size: 16px; line-height: 24px; white-space: nowrap; }
/* tres compartimentos: columnas con la etiqueta como banda superior */
.pa-charola--col .pa-comp { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--space-2) var(--space-1); min-height: 0; }
.pa-charola--col .pa-grupo { justify-content: center; min-height: 40px; margin-bottom: var(--space-2); }
.pa-charola--col .pa-comp__n { text-wrap: balance; padding: 0 var(--space-1); }
.pa-charola--col .pa-comp__p { padding: 0 var(--space-1) var(--space-1); }
/* comida grande: lista de filas, etiqueta a la izquierda */
.pa-charola--lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 0; }
.pa-charola--lista .pa-comp { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--space-3); min-height: 44px; padding: 6px var(--space-2); }
.pa-charola--lista .pa-comp__l, .pa-charola--lista .pa-comp__l .pa-comp__p { font-size: 14px; line-height: 20px; }

/* ---------- Chips de estado: solo informan, no son botones ---------- */
.pa-chip { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; height: 28px; padding: 0 var(--space-2); border-radius: var(--mat-sys-corner-small); background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface); font-weight: 700; font-size: 12px; line-height: 16px; white-space: nowrap; }
.pa-chip--hecho { background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); }
.pa-chip--sigue { background: transparent; color: var(--mat-sys-primary); border: var(--size-regla) solid var(--mat-sys-primary); }
.pa-chip--omitido { background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface); }
.pa-chip--curso { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pa-chip--aviso { background: var(--aviso-container); color: var(--on-aviso-container); }
.pa-chip--logro { background: var(--logro); color: var(--on-logro); }
.pa-chip--nuevo { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pa-chip--error { background: var(--mat-sys-error-container); color: var(--mat-sys-on-error-container); }

/* ---------- Navegación: barra inferior (paciente y panel en celular) y riel de escritorio ---------- */
.pa-nav { position: relative; z-index: 3; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-2) var(--space-2) 26px; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); background: var(--mat-sys-surface); }
.pa-nav--suelta { padding-bottom: var(--space-2); }
.pa-nav__it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-1) 0; border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: var(--mat-sys-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; }
.pa-nav__pill { display: grid; place-items: center; width: 56px; height: 28px; border-radius: var(--corner-ficha); transition: background-color var(--duration-fast) var(--ease-smooth-out); }
.pa-nav__it[aria-current="page"] { color: var(--mat-sys-on-surface); font-weight: 700; }
.pa-nav__it[aria-current="page"] .pa-nav__pill { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pa-nav__it:active .pa-nav__pill, .pa-nav__it.is-presionado .pa-nav__pill { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-surface) 12%); }
@media (hover: hover) { .pa-nav__it:hover .pa-nav__pill { background: color-mix(in srgb, var(--mat-sys-secondary-container) 60%, transparent); } }
.pa-nav__it[disabled] { opacity: 0.4; pointer-events: none; }
/* icono de destino: contorno en reposo, relleno en el activo */
.pa-nav__pill .ic-on, .pa-nav__pill .ic-off { display: grid; place-items: center; }
.pa-nav__pill .ic-on { display: none; }
[aria-current="page"] > .pa-nav__pill .ic-off { display: none; }
[aria-current="page"] > .pa-nav__pill .ic-on { display: grid; }

/* ---------- Tiempo de comida (acordeón del paciente) ---------- */
.pa-tiempos { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-tiempo { border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-tiempo__cab { width: 100%; display: grid; grid-template-columns: 1fr 24px; align-items: start; column-gap: var(--space-2); min-height: 64px; padding: var(--space-3) 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
/* el chevron comparte renglón y centro con el nombre y el estado (26 px de línea contra 24 de icono) */
.pa-tiempo__cab .t-acc-chevron { margin-top: 1px; }
.pa-tiempo__cab:active { background: var(--mat-sys-surface-container-low); }
.pa-tiempo__nom { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pa-tiempo__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pa-tiempo__l2 { font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pa-tiempo__l2 b { color: var(--mat-sys-on-surface); font-family: var(--font-display); font-weight: 700; }
.pa-tiempo__est { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
.pa-tiempo__est > span { display: inline-flex; align-items: center; gap: 2px; }
.pa-tiempo__cab .pa-sg { color: var(--mat-sys-primary); }
.pa-tiempo[data-open="true"] .pa-tiempo__txt, .pa-tiempo[data-open="true"] .pa-puntos { display: none; }
.pa-tiempo__cuerpo { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 0 var(--space-4); }
.pa-tiempo__acc { display: flex; gap: var(--space-2); }
.pa-tiempo__acc .pa-btn { flex: 1 1 auto; padding: 0 var(--space-3); }
.pa-tiempo__estado { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-touch-min); }
.pa-sg { display: none; }
[data-sigue="true"] .pa-sg { display: inline; }
/* en el rack del día solo la comida que sigue lleva «Sigue» (la regla de .pa-rack__e span la mostraría en todas) */
.pa-rack__e .pa-sg { display: none; }
[data-sigue="true"] .pa-rack__e .pa-sg { display: inline; }

/* ---------- Acordeón (transitions.dev 21) ---------- */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(var(--blur-small)); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc:not([data-open="true"]) .t-acc-panel-inner { visibility: hidden; transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), visibility 0s linear var(--acc-collapse); }
.t-acc-chevron { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
/* Acordeón con resumen (panel en celular): título, una línea de resumen y el cuerpo */
.pn-acc { border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); scroll-margin-top: 64px; }
.pn-acc:first-of-type { border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-acc__cab { width: 100%; display: grid; grid-template-columns: 1fr 24px; align-items: center; column-gap: var(--space-2); min-height: 64px; padding: var(--space-2) 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.pn-acc__cab:active { background: var(--mat-sys-surface-container-low); }
.pn-acc__t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; }
.pn-acc__r { display: block; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-acc__cuerpo { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 0 var(--space-4); }

.pn-med { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: var(--space-4); min-height: 32px; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); font-size: 14px; line-height: 20px; }
.pn-med b { min-width: 64px; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; text-align: right; }
.pn-med span:nth-child(2) { color: var(--mat-sys-on-surface-variant); }
.pn-med + .pn-ajuste, .pn-med + .t-acc > .pn-ajuste { border-top: 0; }

/* ---------- Tabs deslizantes (transitions.dev 16). Sin la pastilla activa, la pestaña elegida lleva su propio fondo ---------- */
.t-tabs { position: relative; display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-high); }
.t-tab { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); appearance: none; min-height: var(--size-touch-min); padding: var(--space-1) var(--space-3); border: 0; border-radius: calc(var(--mat-sys-corner-medium) - 3px); background: transparent; color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab[aria-selected="true"] { color: var(--mat-sys-on-surface); font-weight: 700; }
@media (hover: hover) { .t-tab:not([aria-selected="true"]):hover { color: var(--mat-sys-on-surface); } }
.t-tabs:not(.is-listo) .t-tab[aria-selected="true"] { background: var(--mat-sys-surface-container-lowest); box-shadow: 0 0 0 var(--size-regla) var(--mat-sys-outline-variant); }
.t-tab:active, .t-tab.is-presionado { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); }
.t-tab[disabled] { opacity: 0.4; pointer-events: none; }
.t-tabs-pill { display: none; position: absolute; top: 3px; left: 0; z-index: 0; width: 0; height: calc(100% - 6px); border-radius: calc(var(--mat-sys-corner-medium) - 3px); background: var(--mat-sys-surface-container-lowest); box-shadow: 0 0 0 var(--size-regla) var(--mat-sys-outline-variant); transform: translateX(0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); pointer-events: none; }
.t-tabs.is-listo .t-tabs-pill { display: block; }

/* ---------- Página a página (transitions.dev 08) ---------- */
.t-page-slide { position: relative; flex: 1 1 auto; min-height: 0; }
.t-page-slide .t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
.t-page-slide .t-page[data-page-id="2"] { --t-page-from-x: var(--page-slide-distance); }
.t-page-slide .t-page { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled))); filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease), visibility 0s linear var(--page-fade-dur); }
.t-page-slide[data-page="1"] .t-page[data-page-id="1"], .t-page-slide[data-page="2"] .t-page[data-page-id="2"], .t-page-slide .t-page.is-activa { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); filter: blur(0); transition-delay: var(--page-stagger), var(--page-stagger), var(--page-stagger), 0s; }

/* Recorrido de la app del paciente: varias pantallas completas, una visible. La dirección de cada una sale de su data-pos (JS escribe --t-page-from-x). */
.pa-recorrido { flex: none; overflow: hidden; overflow: clip; width: var(--size-artboard-w); max-width: 100%; height: var(--size-artboard-h); background: var(--mat-sys-surface); }
.pa-recorrido > .t-page { display: block; }
.t-page-slide.is-iniciando .t-page { transition: none; }
.pa-recorrido > .t-page > .pa-board { width: 100%; }

/* ---------- Hoja inferior (panel reveal + velo) ---------- */
/* Capa que recorta: la hoja cerrada espera --panel-translate-y más abajo y no debe ensanchar el desplazamiento del tablero. */
.pa-capa { position: absolute; inset: 0; z-index: 8; overflow: hidden; overflow: clip; pointer-events: none; }
.pa-capa > * { pointer-events: auto; }
.pa-scrim { position: absolute; inset: 0; z-index: 8; background: color-mix(in srgb, var(--mat-sys-on-surface) 42%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--modal-open-dur) var(--modal-ease), visibility 0s linear var(--modal-open-dur); }
.pa-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.pa-hoja {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 82%; display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) 30px;
  border-radius: var(--mat-sys-corner-extra-large) var(--mat-sys-corner-extra-large) 0 0; background: var(--mat-sys-surface-container-lowest); box-shadow: var(--mat-sys-level3);
  transform: translateY(var(--panel-translate-y)); opacity: 0; filter: blur(var(--panel-blur)); visibility: hidden;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), visibility 0s linear var(--panel-close-dur);
}
.pa-hoja.is-open { transform: translateY(0); opacity: 1; filter: blur(0); visibility: visible; transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease); }
.pa-hoja__asa { align-self: center; flex: none; width: 36px; height: 4px; margin-bottom: var(--space-3); border-radius: 2px; background: var(--mat-sys-outline-variant); }
.pa-hoja__cab { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); }
.pa-hoja__pie { padding-top: var(--space-4); }
.pa-opciones { display: flex; flex-direction: column; overflow-y: auto; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-opcion { position: relative; display: grid; grid-template-columns: 1fr auto 28px; align-items: center; column-gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); cursor: pointer; }
.pa-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pa-opcion__n { min-width: 0; }
.pa-opcion__r { display: grid; place-items: center; width: 24px; height: 24px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-full); background: transparent; color: var(--mat-sys-on-primary); transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
.pa-opcion__r .pa-i { opacity: 0; transition: opacity var(--duration-quick) var(--ease-smooth-out); }
.pa-opcion input:checked ~ .pa-opcion__r { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pa-opcion input:checked ~ .pa-opcion__r .pa-i { opacity: 1; }
.pa-opcion input:checked ~ .pa-opcion__n { font-weight: 700; }
.pa-opcion input:checked ~ .pa-porcion { background: var(--g); color: var(--on-g); }
.pa-opcion:has(input:focus-visible) { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); border-radius: var(--mat-sys-corner-extra-small); }
/* Hoja con stepper: cambiar una cantidad entera */
.pn-stepper { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: var(--space-1); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface); }
.pn-stepper button { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: var(--mat-sys-on-surface); }
.pn-stepper button:active { background: color-mix(in srgb, currentColor 14%, transparent); }
.pn-stepper button[disabled] { opacity: 0.38; }
.pn-stepper output { display: block; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; }
.pn-celda-kcal { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-2) 0; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); font-size: 14px; line-height: 20px; }
.pn-celda-kcal b { font-family: var(--font-display); }

/* ---------- Aviso breve con acción (transitions.dev 22) ---------- */
.pa-toast {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: 104px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-inverse-surface); color: var(--mat-sys-inverse-on-surface); box-shadow: var(--mat-sys-level3); font-size: 14px; line-height: 20px;
  opacity: 0; visibility: hidden; transform: translateY(var(--toast-distance)) scale(0.97); filter: blur(var(--toast-blur));
  transition: transform var(--toast-close) var(--toast-ease), opacity var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease), visibility 0s linear var(--toast-close);
}
.pa-toast.is-open { opacity: 1; visibility: visible; transform: none; filter: blur(0); transition: transform var(--toast-open) var(--toast-ease), opacity var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }
.pa-toast.is-sin-salida { transition: none; }
.pa-toast--pagina { position: fixed; bottom: var(--space-4); }
.pa-toast--estatico { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; filter: none; box-shadow: none; transition: none; }
.pa-toast__t { flex: 1 1 auto; min-width: 0; }
.pa-toast__acc { flex: none; min-height: var(--size-touch-min); margin: -12px -12px -12px 0; padding: 0 var(--space-4); border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: var(--mat-sys-inverse-primary); font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-toast__acc:active { background: color-mix(in srgb, var(--mat-sys-inverse-primary) 20%, transparent); }
.pa-toast__acc:focus-visible, .pa-toast__acc.is-foco { outline: var(--size-foco) solid var(--mat-sys-inverse-primary); outline-offset: calc(var(--size-foco-offset) * -1); }

/* ---------- Texto que se transforma (transitions.dev 33) ---------- */
.t-morph { white-space: nowrap; }
.t-morph-swap { display: inline-grid; vertical-align: bottom; justify-items: start; transition: width var(--text-morph-resize-dur) var(--text-morph-ease); }
.t-morph-swap > span { grid-area: 1 / 1; white-space: pre; transition: opacity var(--text-morph-dur) var(--text-morph-ease), filter var(--text-morph-dur) var(--text-morph-ease); }
.t-morph-new { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-old { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-new { opacity: 1; filter: blur(0); }

/* ---------- Interruptor (transitions.dev 27) ---------- */
.pa-switch { position: relative; flex: none; width: 52px; height: var(--size-touch-min); padding: 0; border: 0; border-radius: 16px; background: transparent; }
.pa-switch::after { content: ""; position: absolute; left: 0; top: 8px; width: 52px; height: 32px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-surface-container-highest); transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
.pa-switch::before { content: ""; position: absolute; z-index: 1; left: 3px; top: 24px; width: 24px; height: 24px; margin-top: -12px; border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-outline); transform: scale(0.667); transition: transform var(--toggle-dur) var(--toggle-ease), background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-switch .pa-i { position: absolute; z-index: 2; left: 6px; top: 24px; width: 18px; height: 18px; margin-top: -9px; color: var(--mat-sys-primary); opacity: 0; transition: transform var(--toggle-dur) var(--toggle-ease), opacity var(--duration-quick) var(--ease-smooth-out); }
.pa-switch[aria-checked="true"]::after { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pa-switch[aria-checked="true"]::before { transform: translateX(19px) scale(1); background: var(--mat-sys-on-primary); }
.pa-switch[aria-checked="true"] .pa-i { opacity: 1; transform: translateX(18px); }
.pa-switch:active::before { transform: scale(0.8); }
.pa-switch[aria-checked="true"]:active::before { transform: translateX(19px) scale(1.1); }
.pa-switch[disabled] { opacity: 0.38; pointer-events: none; }
.pa-switch-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--size-touch-min); }
.pa-switch-fila + .pa-switch-fila { border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }

/* ---------- Campos ---------- */
.pa-campo { display: flex; flex-direction: column; gap: 6px; }
.pa-campo label, .pa-campo__l { font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-campo input, .pa-campo textarea { width: 100%; min-height: var(--size-touch-min); padding: 0 var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); background: var(--mat-sys-surface-container-lowest); color: var(--mat-sys-on-surface); font-size: 16px; line-height: 24px; transition: border-color var(--duration-quick) var(--ease-smooth-out); }
.pa-campo textarea { min-height: 96px; padding: var(--space-3); resize: vertical; }
.pa-campo input::placeholder, .pa-campo textarea::placeholder { color: var(--mat-sys-on-surface-variant); opacity: 1; }
.pa-campo input:focus-visible, .pa-campo textarea:focus-visible, .pa-campo input.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); border-color: var(--mat-sys-primary); }
.pa-campo input:disabled { border-style: dashed; background: var(--mat-sys-surface-container); color: color-mix(in srgb, var(--mat-sys-on-surface) 45%, transparent); }
.pa-campo__a { display: flex; align-items: flex-start; gap: var(--space-1); font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-campo--error input { border-color: var(--mat-sys-error); }
.pa-campo--error .pa-campo__a { color: var(--mat-sys-on-surface); }
.pa-campo--error .pa-campo__a .pa-i { color: var(--mat-sys-error); }
/* Buscar (panel): campo con lupa */
.pn-buscar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: 0 var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); background: var(--mat-sys-surface-container-lowest); color: var(--mat-sys-on-surface-variant); }
.pn-buscar input { flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--mat-sys-on-surface); font-size: 14px; line-height: 20px; }
.pn-buscar input::placeholder { color: var(--mat-sys-on-surface-variant); opacity: 1; }
.pn-buscar:focus-within { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); }
.pn-buscar input:focus-visible { outline: none; }

/* ---------- Menú desplegable: un valor de una lista corta. Campo con chevron; la lista abierta flota ---------- */
.pa-select { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pa-select__l { font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-select__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--size-touch-min); padding: 0 var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); background: var(--mat-sys-surface-container-lowest); color: var(--mat-sys-on-surface); font-size: 16px; line-height: 24px; text-align: left; transition: border-color var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-select__btn .pa-i { color: var(--mat-sys-on-surface-variant); transform: scaleY(1); transition: transform var(--acc-chevron) var(--acc-ease); }
.pa-select__btn[aria-expanded="true"] { border-color: var(--mat-sys-primary); }
.pa-select__btn[aria-expanded="true"] .pa-i { transform: scaleY(-1); }
.pa-select__btn:focus-visible, .pa-select__btn.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); border-color: var(--mat-sys-primary); }
.pa-select__btn:disabled { border-style: dashed; background: var(--mat-sys-surface-container); color: color-mix(in srgb, var(--mat-sys-on-surface) 45%, transparent); }
.pa-select__btn:disabled .pa-i { opacity: 0.45; }
.pa-select__lista { margin-top: var(--space-1); padding: var(--space-1); border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-lowest); box-shadow: var(--mat-sys-level2); }
.pa-select__lista:focus-visible { outline: none; }
.pa-select[data-select] .pa-select__lista { position: absolute; z-index: 6; top: 100%; left: 0; right: 0; }
.pa-select__op { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--size-touch-min); padding: 0 var(--space-3); border-radius: var(--mat-sys-corner-small); font-size: 16px; line-height: 24px; transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-select__op .pa-i { color: var(--mat-sys-primary); opacity: 0; }
.pa-select__op[aria-selected="true"] { font-weight: 700; }
.pa-select__op[aria-selected="true"] .pa-i { opacity: 1; }
.pa-select__op.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: calc(var(--size-foco-offset) * -1); }
@media (hover: hover) { .pa-select__op:hover { background: var(--mat-sys-surface-container-low); } }
.pa-select__a { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
@media (min-width: 1024px) { .pa-select--desk .pa-select__btn, .pa-select--desk .pa-select__op { min-height: var(--size-touch-desk); font-size: 14px; line-height: 20px; } }
.pa-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pa-ajustes { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Alerta: qué pasó y qué sigue ---------- */
.pa-alerta { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--corner-compartimento); }
.pa-alerta__t { font-weight: 700; font-size: 16px; line-height: 24px; }
.pa-alerta__b { grid-column: 2; font-size: 14px; line-height: 20px; }
.pa-alerta__acc { grid-column: 2; display: flex; gap: var(--space-2); margin: var(--space-1) 0 calc(var(--space-2) * -1) calc(var(--space-3) * -1); }
.pa-alerta__acc .pa-btn { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pa-alerta--info { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pa-alerta--logro { background: var(--logro); color: var(--on-logro); }
.pa-alerta--aviso { background: var(--aviso-container); color: var(--on-aviso-container); }
.pa-alerta--error { background: var(--mat-sys-error-container); color: var(--mat-sys-on-error-container); }
/* Sin conexión: franja neutra. Estar sin señal es normal y los registros están a salvo. */
.pa-tira, .pa-red { flex: none; display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-2) var(--space-4); background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface); font-size: 14px; line-height: 20px; }
.pa-tira--suelta { border-radius: var(--mat-sys-corner-small); }

/* ---------- Entrenamiento (oscuro solo aquí) ---------- */
.pa-bar { flex: none; display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; height: 56px; padding: 0 var(--space-2); }
.pa-bar .pa-btn { min-height: var(--size-touch-min); padding: 0 var(--space-2); font-size: 14px; line-height: 20px; }
.pa-bar__t { text-align: center; font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-video { position: relative; flex: none; display: grid; place-items: center; width: 100%; height: 148px; padding: 0; border: 0; border-radius: 0; background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface); }
.pa-video--caja { border-radius: var(--mat-sys-corner-medium); }
.pa-video__play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pa-video__l { position: absolute; left: var(--space-4); bottom: var(--space-3); font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-video__d { position: absolute; right: var(--space-4); bottom: var(--space-3); font-size: 14px; line-height: 20px; }
/* Stepper numérico */
.pa-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; min-height: 64px; padding: var(--space-1); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface); }
.pa-stepper__btn { display: grid; place-items: center; width: 48px; height: 54px; padding: 0; border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: var(--mat-sys-on-surface); transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-stepper__btn:active { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (hover: hover) { .pa-stepper__btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); } }
.pa-stepper__btn[disabled] { opacity: 0.38; pointer-events: none; }
.pa-stepper__val { text-align: center; line-height: 1; min-width: 0; }
.pa-stepper__val output { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; }
.pa-stepper__unit { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
/* Fila de serie: hecha, activa y pendiente */
.pa-series { display: flex; flex-direction: column; gap: var(--space-2); }
.pa-serie { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; column-gap: var(--space-3); width: 100%; min-height: 56px; padding: 0 var(--space-3); border: 0; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container); color: inherit; text-align: left; }
.pa-serie__marca { display: grid; place-items: center; width: 28px; height: 28px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); }
.pa-serie--hecha .pa-serie__marca { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pa-serie__n { font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-serie__d { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; white-space: nowrap; }
.pa-serie--pendiente { background: transparent; border: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-serie--activa { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3); border: var(--size-regla) solid var(--mat-sys-primary); border-radius: var(--corner-compartimento); background: var(--mat-sys-surface-container-high); }
.pa-serie__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.pa-serie__pasos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* a 360 px dos steppers lado a lado dejan 51 px para la cifra entre dos botones de 48: la cifra baja de 28 a 24 */
@media (max-width: 380px) { .pa-serie__pasos:not(.pa-serie__pasos--pila) .pa-stepper__val output { font-size: 24px; line-height: 28px; } }
.pa-serie__ok { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: var(--size-touch-main); border: 0; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-micro) var(--ease-smooth-out); }
.pa-serie__ok:active { background: color-mix(in srgb, var(--mat-sys-primary), var(--mat-sys-on-surface) 20%); transform: translateY(1px); }
/* Temporizador de descanso */
.pa-descanso { flex: none; padding: var(--space-3) var(--space-4) var(--space-4); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); background: var(--mat-sys-surface-container); }
.pa-descanso--board { padding-bottom: 30px; }
.pa-descanso__pista { height: 4px; margin-bottom: var(--space-3); border-radius: 2px; background: var(--mat-sys-surface-container-highest); overflow: hidden; }
.pa-descanso__barra { width: 100%; height: 100%; background: var(--mat-sys-primary); }
.pa-descanso__fila { display: flex; align-items: center; gap: var(--space-2); }
.pa-descanso__t { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.pa-descanso__l { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-descanso__t [data-t] { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; }
.pa-descanso__ajuste { min-width: var(--size-touch-min); min-height: var(--size-touch-min); padding: 0 var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-medium); background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-descanso__ajuste:active { background: color-mix(in srgb, currentColor 14%, transparent); }
/* Tarjeta de ejercicio: una fila de la lista del día. La activa lleva el mismo marco que la serie activa. */
.pa-lista-ej { display: flex; flex-direction: column; }
.pa-ej { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; column-gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-2); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-lista-ej .pa-ej:first-child { border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-ej:active { background: var(--mat-sys-surface-container-low); }
.pa-ej__orden, .pa-paso__n { display: grid; place-items: center; width: 36px; height: 36px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }
.pa-ej__nombre { display: block; font-weight: 700; font-size: 16px; line-height: 24px; }
.pa-ej__obj { display: block; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pa-ej__avance { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.pa-ej__num { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; color: var(--mat-sys-on-surface-variant); }
.pa-ej__pasos { display: inline-flex; gap: 3px; }
.pa-ej__pasos i { width: 18px; height: 10px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: 3px; }
.pa-ej__pasos i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pa-ej--hecho .pa-ej__orden { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pa-ej--hecho .pa-ej__num { color: var(--mat-sys-on-surface); }
.pa-ej--curso { border: var(--size-regla) solid var(--mat-sys-primary); border-radius: var(--corner-compartimento); background: var(--mat-sys-surface-container-high); }
.pa-ej--curso .pa-ej__orden { border-color: var(--mat-sys-primary); color: var(--mat-sys-primary); }
.pa-ej--curso .pa-ej__num { color: var(--mat-sys-on-surface); }
.pa-ej--curso + .pa-ej { border-top: 0; }
/* Escala 1–5 y RPE 1–10: una respuesta con un toque, sin semáforo */
.pa-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.pa-escala__op { min-height: var(--size-touch-min); padding: 0; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--corner-ficha); background: transparent; color: var(--mat-sys-on-surface); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-in-out); }
.pa-escala__op:active { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
@media (hover: hover) { .pa-escala__op:hover { background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); } }
.pa-escala__op[aria-checked="true"] { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary); font-weight: 700; }
.pa-escala__leyenda { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
/* Gráfica de peso: una sola serie, sin leyenda; el título dice la pregunta */
.pa-grafica { position: relative; padding-top: var(--space-3); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-grafica svg { width: 100%; height: auto; overflow: visible; }
.pa-g-red { stroke: var(--mat-sys-outline-variant); stroke-width: var(--size-regla); }
.pa-g-eje { fill: var(--mat-sys-on-surface-variant); font-family: var(--font-text); font-size: 12px; font-variant-numeric: tabular-nums; }
.pa-g-etq { fill: var(--mat-sys-on-surface); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.pa-g-etq--fuerte { font-weight: 800; font-size: 16px; }
.pa-g-linea { fill: none; stroke: var(--mat-sys-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pa-g-punto { fill: var(--mat-sys-surface); stroke: var(--mat-sys-primary); stroke-width: 2.5; }
.pa-g-punto--ultimo { fill: var(--mat-sys-primary); }
.pa-g-vacio { fill: none; stroke: var(--mat-sys-outline); stroke-width: var(--size-regla); stroke-dasharray: 3 4; }
.pa-g-hit { fill: transparent; cursor: pointer; }
.pa-g-hit:focus-visible { outline: none; stroke: var(--mat-sys-primary); stroke-width: 2; }
.pa-g-tip { position: absolute; z-index: 2; padding: 6px 10px; border-radius: var(--mat-sys-corner-small); background: var(--mat-sys-inverse-surface); color: var(--mat-sys-inverse-on-surface); font-weight: 700; font-size: 14px; line-height: 20px; white-space: nowrap; transform: translate(-50%, -100%); pointer-events: none; }
.pa-g-tip[hidden] { display: none; }
.pa-titulo { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-1); }
.pa-seccion-t { font-weight: 700; font-size: 16px; line-height: 24px; }

/* ---------- Pantallas del paciente: Hoy, rack del día, filas y libro de medidas ---------- */
.pa-t12 { font-size: 12px; line-height: 16px; }
.pa-b { font-weight: 700; }
.pa-cab + .pa-cuerpo { padding-top: var(--space-2); }
.pa-video + .pa-cuerpo { padding-top: var(--space-3); padding-bottom: var(--space-2); }
.pa-saludo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-3); }
.pa-sig { display: flex; flex-direction: column; gap: var(--space-1); }
.pa-sig__mut { display: flex; flex-direction: column; gap: var(--space-2); transition: height var(--resize-dur) var(--resize-ease), opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out); }
.pa-sig__mut.is-animando { overflow: hidden; }
.pa-sig__mut.is-saliendo { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(var(--distance-micro)); }
.pa-sig__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.pa-sig__hora { text-align: right; }
.pa-sig__acc { display: flex; gap: var(--space-2); }
.pa-sig__acc .pa-btn { padding: 0 var(--space-3); }
.pa-sig__acc .pa-btn--filled { flex: 3 1 0; }
.pa-sig__acc .pa-btn--outlined { flex: 2 1 0; }
.pa-sig__listo, .pa-vacio { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) var(--space-4); border-radius: var(--mat-sys-corner-large); background: var(--mat-sys-surface-container-high); }
/* Rack del día: cinco horas en una regla, cada una abre su comida */
.pa-rack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-rack__c { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 68px; padding: var(--space-1) 2px; border-left: var(--size-regla) solid var(--mat-sys-outline-variant); text-align: center; font-size: 14px; line-height: 20px; transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pa-rack__c:first-child { border-left: 0; }
.pa-rack__h { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; }
.pa-rack__e { display: inline-flex; align-items: center; gap: 2px; min-height: 16px; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-rack__e span { display: inline-flex; align-items: center; gap: 2px; }
.pa-rack__c[aria-current="time"] { background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); }
.pa-rack__c[aria-current="time"] .pa-rack__e { color: var(--mat-sys-on-primary-container); font-weight: 700; }
.pa-rack__c:active { background: var(--mat-sys-surface-container-high); }
@media (hover: hover) { .pa-rack__c:hover { background: var(--mat-sys-surface-container); } .pa-rack__c[aria-current="time"]:hover { background: var(--mat-sys-primary-container); } }
/* Filas de apoyo: consulta, gimnasio, video */
.pa-filas { display: flex; flex-direction: column; }
.pa-fila { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-1) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-fila:first-child, .pa-fila--regla { border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-fila__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--corner-ficha); background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface); }
.pa-fila__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pa-fila__t > b { font-weight: 700; }
.pa-fila__est { flex: none; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
a.pa-fila { transition: background-color var(--duration-quick) var(--ease-smooth-out); }
a.pa-fila:active { background: var(--mat-sys-surface-container-low); }
/* Libro de medidas y récords: dato a la izquierda, cifra a la derecha, una regla de 1 px entre filas */
.pa-libro { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-libro__f { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-3); min-height: 60px; padding: var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-libro__t { display: flex; flex-direction: column; min-width: 0; }
.pa-libro__v { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; text-align: right; white-space: nowrap; }
.pa-libro__v small { margin-left: 4px; font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--mat-sys-on-surface-variant); }
.pa-libro--s .pa-libro__f { min-height: 56px; padding: 6px 0; }
.pa-libro--s .pa-libro__v { font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: 0; }
.pa-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 28px; }
.pa-seccion-cab > :first-child { flex: 1 1 auto; min-width: 0; }
.pa-hoja__grupo { align-self: flex-start; margin-bottom: var(--space-1); }
.pa-hoja__campo { padding-bottom: var(--space-1); }
.pa-fondo-hoja { padding-top: var(--space-2); }
.pa-opcion__n small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--mat-sys-on-surface-variant); }
.pa-tiempo__kcal { font-family: var(--font-display); font-weight: 600; }

/* ---------- Pantallas del paciente: formularios y mensajes ---------- */
.pa-pie { flex: none; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) 30px; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); background: var(--mat-sys-surface); }
.pa-campo__caja { position: relative; }
.pa-campo__caja input { padding-right: 52px; }
.pa-campo__caja .pa-iconbtn { position: absolute; top: 0; right: 0; }
.pa-campo input[readonly] { background: var(--mat-sys-surface-container); }
.pa-campo__f { display: flex; flex-direction: column; gap: var(--space-4); }
.pa-checks { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-check { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: var(--space-3); align-items: start; min-height: var(--size-touch-min); padding: var(--space-3) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); font-size: 14px; line-height: 20px; cursor: pointer; }
.pa-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pa-check__c { display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-small); color: var(--mat-sys-on-primary); transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
.pa-check__c .pa-i { opacity: 0; transition: opacity var(--duration-quick) var(--ease-smooth-out); }
.pa-check input:checked ~ .pa-check__c { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pa-check input:checked ~ .pa-check__c .pa-i { opacity: 1; }
.pa-check:has(input:focus-visible) { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); border-radius: var(--mat-sys-corner-extra-small); }
.pa-check a { position: relative; z-index: 1; color: var(--mat-sys-primary); text-decoration: underline; text-underline-offset: 3px; }
.pa-pasos { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-paso { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 56px; padding: var(--space-3) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-paso--corto { grid-template-columns: 36px minmax(0, 1fr); padding: var(--space-2) 0; min-height: 52px; }
.pa-paso__ico { display: grid; place-items: center; color: var(--mat-sys-on-surface-variant); }
.pa-mensaje { justify-content: center; gap: var(--space-4); padding-bottom: var(--space-12); }
.pa-mensaje__t { display: flex; flex-direction: column; gap: var(--space-2); }
.pa-aviso-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--corner-compartimento); background: var(--aviso-container); color: var(--on-aviso-container); }
.pa-aviso-ico .pa-i { width: 32px; height: 32px; }

/* ---------- Pantallas del paciente: entrenamiento ---------- */
.pa-dato__l { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-dato__u { margin-left: 4px; font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--mat-sys-on-surface-variant); }
.pa-resumen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pa-resumen__modo { display: flex; align-items: center; gap: var(--space-3); }
progress.pa-avance { display: block; flex: none; width: 100%; height: 4px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 2px; overflow: hidden; background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-primary); }
progress.pa-avance::-webkit-progress-bar { background: var(--mat-sys-surface-container-highest); }
progress.pa-avance::-webkit-progress-value { background: var(--mat-sys-primary); border-radius: 2px; }
progress.pa-avance::-moz-progress-bar { background: var(--mat-sys-primary); border-radius: 2px; }
.pa-ejtit { display: flex; flex-direction: column; gap: var(--space-1); }
.pa-ejtit__obj { display: flex; align-items: baseline; gap: var(--space-3); }
.pa-ejtit__prev { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pa-stepper--xl { min-height: 88px; grid-template-columns: 56px minmax(0, 1fr) 56px; }
.pa-stepper--xl .pa-stepper__btn { width: 56px; height: 78px; }
.pa-stepper--xl .pa-stepper__val output { font-size: 44px; line-height: 48px; letter-spacing: -0.02em; }
.pa-serie__pasos--pila { grid-template-columns: 1fr; }
.pa-pie__sigue { margin-bottom: var(--space-1); }

/* ---------- Pantallas del paciente: progreso, gimnasio y check-in ---------- */
.pa-datos { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-datos > * { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-2) 0; }
.pa-datos > * + * { padding-left: var(--space-4); border-left: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-datos .numeral-md small { margin-left: 4px; font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--mat-sys-on-surface-variant); }
.pa-matriz { display: grid; grid-template-columns: 20px repeat(5, 14px); gap: 3px 4px; align-items: center; margin-top: 2px; font-size: 12px; line-height: 14px; color: var(--mat-sys-on-surface-variant); }
.pa-matriz i { width: 14px; height: 14px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: 3px; }
.pa-matriz i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pa-semanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.pa-semanas i { display: block; height: 6px; border-radius: 3px; background-color: var(--mat-sys-surface-container-highest); background-image: linear-gradient(var(--mat-sys-primary), var(--mat-sys-primary)); background-repeat: no-repeat; background-size: 0% 100%; }
.pa-semanas i.on { background-size: 100% 100%; }
.pa-semanas i.parte { background-size: 20% 100%; }
.pa-dias { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-dia { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-3); min-height: 52px; padding: var(--space-1) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); font-size: 16px; line-height: 24px; }
.pa-dia b { font-family: var(--font-display); font-weight: 700; }
.pa-checks-fila { display: flex; gap: var(--space-1); }
.pa-checks-fila i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pa-regular { font-weight: 500; }
.pa-grafica__nota { margin-top: var(--space-1); }
.pa-sem__t { margin-bottom: var(--space-1); }
.pa-g-eje--fuerte { font-weight: 700; }
.pa-fotos__t { margin-bottom: var(--space-1); }
.pa-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.pa-panel--denso { gap: var(--space-2); }
.pa-panel--denso > .pa-grafica { padding-top: var(--space-2); }
.pa-bar__fin { justify-self: end; padding-right: var(--space-3); }
.pa-peso { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pa-peso .pa-stepper { flex: 0 0 200px; }
.pa-escalas { display: flex; flex-direction: column; gap: var(--space-2); }
.pa-escalas__f { display: flex; flex-direction: column; gap: var(--space-1); }
.pa-escalas__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pa-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.pa-foto { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--size-touch-min); padding: 0 var(--space-2); border: var(--size-regla) dashed var(--mat-sys-outline); border-radius: var(--corner-ficha); background: transparent; font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-foto:active { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
.pa-opcional { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }

/* ---------- Filtros con tabs y fila de paciente (panel) ---------- */
.pn-filtros-cel { margin-top: var(--space-2); }
.pn-filtros-cel .t-tab { flex: 1 1 auto; padding: 0 var(--space-3); }
.pn-filas { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-fila { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: var(--space-3); min-height: 64px; padding: var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.pn-fila:active { background: var(--mat-sys-surface-container-low); }
@media (hover: hover) { .pn-fila:hover { background: var(--mat-sys-surface-container-low); } }
.pn-fila__n { display: block; font-weight: 700; font-size: 16px; line-height: 24px; }
.pn-fila__m { display: block; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-fila__m b { color: var(--mat-sys-on-surface); font-weight: 700; }
.pn-fila--carga { pointer-events: none; }
.pn-fila--carga .pa-avatar, .pn-fila--carga i { background: var(--mat-sys-surface-container-high); color: transparent; }
.pn-fila--carga i { display: block; height: 12px; margin: 6px 0; border-radius: var(--mat-sys-corner-extra-small); }
.pn-vacio { padding: var(--space-6) 0; color: var(--mat-sys-on-surface-variant); }
.pn-vacio b { display: block; color: var(--mat-sys-on-surface); }

/* ---------- Panel del nutriólogo: tablero, navegación y cuerpo ---------- */
/* Un solo marcado sirve a 1440, 1280 y 390. El tablero es un contenedor («pn») y su ancho decide la disposición:
   celular (menos de 720), intermedio (720 a 1023) y escritorio (1024 o más). Controles de 48 px; 40 px en escritorio. */
.pn-board, .pn-vista, .pn-recorrido { container: pn / inline-size; }
.pn-vista { width: 100%; }
.pn-board { width: 100%; max-width: none; height: 100vh; height: 100dvh; }
.pn-marco { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pn-main { order: 1; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* La barra de estado y la barra de inicio son del marco del teléfono en las maquetas: solo se pintan en ancho de celular */
@container pn (min-width: 600px) { .pn-board > .pa-status, .pn-board > .pa-home { display: none; } }

/* Cuerpo: es lo que se desplaza. data-desplaza lo anota donde la pantalla se desplaza de verdad; con «celular», solo por debajo de 1024 */
.pn-cuerpo { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-1) var(--space-4) var(--space-6); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mat-sys-outline-variant) transparent; }
.pn-cuerpo[data-desplaza]:not([data-desplaza="celular"]) { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); }
@container pn (max-width: 1023.98px) { .pn-cuerpo[data-desplaza] { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); } }
.pn-sec-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); min-height: 32px; padding-bottom: var(--space-1); }
.pn-solo-desk { display: none; }
.pn-solo-cel { display: inline; }
.pn-desde-720 { display: none; }

/* Navegación: barra inferior en celular y riel en escritorio, un solo elemento */
.pn-riel { order: 2; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-2); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); background: var(--mat-sys-surface); }
@container pn (max-width: 599.98px) { .pn-riel { padding-bottom: 26px; } }
.pn-riel__logo { display: none; color: var(--mat-sys-primary); }
.pn-riel__it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-1) 0; border: 0; border-radius: var(--mat-sys-corner-medium); background: transparent; color: var(--mat-sys-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; }
.pn-riel__it[aria-current="page"] { color: var(--mat-sys-on-surface); font-weight: 700; }
.pn-riel__it[aria-current="page"] .pa-nav__pill { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.pn-riel__it:active .pa-nav__pill, .pn-riel__it.is-presionado .pa-nav__pill { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-surface) 12%); }
@media (hover: hover) { .pn-riel__it:hover .pa-nav__pill { background: color-mix(in srgb, var(--mat-sys-secondary-container) 60%, transparent); } }
.pn-riel__it[disabled] { opacity: 0.4; pointer-events: none; }
.pn-riel .pa-avatar--s { width: 28px; height: 28px; }

/* Cabecera de expediente: atrás, avatar, nombre y acciones */
.pn-exp { display: grid; grid-template-columns: var(--size-touch-min) 40px minmax(0, 1fr); grid-template-areas: "atras av tit" "sub sub sub" "acc acc acc"; align-items: center; column-gap: var(--space-2); row-gap: var(--space-2); }
.pn-exp__atras { grid-area: atras; margin-left: calc(var(--space-2) * -1); }
.pn-exp__av { grid-area: av; }
.pn-exp__tit { grid-area: tit; min-width: 0; text-wrap: balance; }
.pn-exp__sub { grid-area: sub; color: var(--mat-sys-on-surface-variant); }
.pn-exp__acc { grid-area: acc; display: flex; gap: var(--space-2); }
.pn-exp__acc > .pa-btn { flex: 1 1 0; padding: 0 var(--space-3); }
.pn-main > .pn-exp { padding: var(--space-2) var(--space-4); }
.pn-main > .pn-tabs-wrap { padding: 0 var(--space-4); }

/* Pestañas del expediente */
.pn-tabs-wrap { background: var(--mat-sys-surface); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-cuerpo > .pn-tabs-wrap { position: sticky; top: 0; z-index: 4; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
.pn-tabs { position: relative; display: flex; gap: var(--space-4); }
.pn-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-touch-min); min-width: var(--size-touch-min); padding: 0 2px; border: 0; background: transparent; color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; }
.pn-tab[aria-selected="true"], .pn-tab[aria-current="page"] { color: var(--mat-sys-on-surface); font-weight: 700; }
.pn-tab[aria-current="page"]::after, .pn-tabs:not(.is-listo) .pn-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--mat-sys-primary); }
@media (hover: hover) { .pn-tab:hover { color: var(--mat-sys-on-surface); } }
.pn-tab:active, .pn-tab.is-presionado { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); }
.pn-tab[disabled] { opacity: 0.4; pointer-events: none; }
.pn-tabs--cel { width: 100%; }
.pn-sticky { position: sticky; top: 0; z-index: 4; margin: 0 calc(var(--space-4) * -1); padding: var(--space-1) var(--space-4) 0; background: var(--mat-sys-surface); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }

/* ---- 01 Pacientes ---- */
.pn-top__t { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-1); }
.pn-barra { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin: 0 calc(var(--space-4) * -1); padding: var(--space-1) var(--space-4) var(--space-2); background: var(--mat-sys-surface); }
.pn-barra .pn-filtros { grid-column: 1 / -1; margin-top: 0; }
.pn-nuevo { padding: 0; width: var(--size-touch-min); }
.pn-acciones { display: flex; gap: var(--space-2); }
.pn-acciones > .pa-btn { flex: 1 1 0; padding: 0 var(--space-3); }
.pn-extra { display: flex; flex-direction: column; gap: var(--space-6); }
.pn-tablero { border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-hora { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-hora__h { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; }
.pn-hora__n { display: block; font-weight: 700; font-size: 16px; line-height: 24px; }
.pn-hora__s { display: block; font-size: 14px; line-height: 20px; }
.pn-hora__e { font-size: 12px; line-height: 16px; font-weight: 700; }
.pn-hora--pasada { color: var(--mat-sys-on-surface-variant); }
.pn-hora--pasada .pn-hora__n { font-weight: 500; }
.pn-hora--sig { padding-left: var(--space-3); border-radius: var(--corner-ficha); border-bottom-color: transparent; background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); }
/* Avisos: se quedan marcados hasta que el nutriólogo los abre */
.pn-aviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); padding: var(--space-3) 0 var(--space-1); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-aviso__c { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.pn-aviso__marca { grid-column: 2; grid-row: 1; }
.pn-aviso__acc { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-left: calc(var(--space-3) * -1); }
.pn-aviso__n { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
.pn-aviso[data-abierto="false"] .pn-aviso__n { font-weight: 700; }
.pn-aviso__r { display: block; font-size: 14px; line-height: 20px; }
.pn-aviso__m { display: block; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-aviso[data-abierto="true"] .pn-aviso__marca { display: none; }
/* Lista de pacientes: filas que abren el expediente. Columnas solo en escritorio */
.pn-filas__cab { display: none; }
.pn-fila__d { display: none; }
.pn-fila__d--var { color: var(--mat-sys-on-surface-variant); }

/* ---- 02 Expediente ---- */
.pn-alerta--fila .pa-alerta__acc { margin-bottom: calc(var(--space-2) * -1); }
.pn-cambios { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--size-regla) solid var(--mat-sys-on-surface); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-cambios__t { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-2) 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; }
.pn-cambios__t span { font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-cambios__dl { display: contents; }
.pn-cambios__c { margin: 0; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; justify-content: center; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-cambios__c:nth-child(odd) { padding-left: 0; }
.pn-cambios__c:nth-child(even) { border-left: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-cambios__c dt { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-cambios__c dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--mat-sys-on-surface); white-space: nowrap; }
.pn-cambios__c dd small { margin-left: 2px; font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-cambios__c dd .pa-i { display: inline-block; vertical-align: -2px; color: var(--mat-sys-on-surface); }
.pn-expgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pn-cuatro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-3); border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-bloque { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pn-bloque--regla { padding-top: var(--space-3); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pn-nota { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-nota--tinta { color: var(--mat-sys-on-surface); }
.pn-grafica { width: 100%; height: auto; overflow: visible; }
.pn-nivel { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; column-gap: var(--space-3); min-height: 28px; font-size: 14px; line-height: 20px; }
.pn-nivel__p { display: inline-flex; gap: 3px; }
.pn-nivel__p i { width: 18px; height: 10px; border-radius: 3px; border: var(--size-regla) solid var(--mat-sys-outline); }
.pn-nivel__p i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pn-nivel__v { font-family: var(--font-display); font-weight: 700; text-align: right; }
.pn-sem { display: grid; grid-template-columns: 40px repeat(5, 32px); gap: 6px; align-items: center; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-sem i { width: 32px; height: 32px; display: grid; place-items: center; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-small); font-style: normal; color: var(--mat-sys-on-surface-variant); }
.pn-sem i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pn-sem i.no { background: var(--mat-sys-surface-container-highest); border-color: var(--mat-sys-outline); color: var(--mat-sys-on-surface); }
.pn-sem i.sin { border-style: dashed; border-color: var(--mat-sys-outline-variant); }
.pn-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-leyenda span { display: inline-flex; align-items: center; gap: 4px; }
.pn-leyenda i { display: inline-block; width: 14px; height: 14px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: 4px; }
.pn-leyenda i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pn-leyenda i.no { background: var(--mat-sys-surface-container-highest); }
.pn-leyenda i.sin { border-style: dashed; }
.pn-matriz { display: grid; grid-template-columns: 24px repeat(5, 18px); gap: 3px; align-items: center; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-matriz i { width: 18px; height: 18px; border: var(--size-regla) solid var(--mat-sys-outline); border-radius: 5px; }
.pn-matriz i.on { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); }
.pn-constancia { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pn-constancia p { text-align: right; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-constancia b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; color: var(--mat-sys-on-surface); }
.pn-linea { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--size-touch-min); font-size: 14px; line-height: 20px; }
.pn-linea--regla { border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-hint { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-hint--tinta { color: var(--mat-sys-on-surface); }
.pn-boton-izq { align-self: flex-start; margin-left: calc(var(--space-3) * -1); }
.pn-atencion-menu { margin-left: 0; }

/* Tabla de distribución: grupos por tiempos de comida. Es la hoja que el nutriólogo llena hoy a mano */
.pn-dist-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--mat-sys-outline-variant) transparent; }
.pn-dist { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.pn-dist caption { text-align: left; }
.pn-dist thead th { padding: 0 0 var(--space-2); border-bottom: var(--size-regla) solid var(--mat-sys-on-surface); text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
.pn-dist thead th:first-child { text-align: left; }
.pn-dist tbody th, .pn-dist tfoot th { padding: 0; text-align: left; font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; }
.pn-dist tbody th { border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-dist td { padding: 0; height: 30px; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); text-align: center; font-size: 14px; line-height: 20px; }
.pn-dist__g { display: flex; align-items: center; gap: var(--space-2); height: 30px; }
.pn-dist__c { display: inline-grid; place-items: center; min-width: 30px; height: 24px; border: var(--size-regla) solid var(--g); border-radius: var(--mat-sys-corner-small); background: var(--gc); color: var(--on-gc); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 16px; }
.pn-dist__cero { color: var(--mat-sys-on-surface-variant); }
.pn-dist__tot { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.pn-dist tfoot td, .pn-dist tfoot th { height: 30px; border-top: var(--size-regla) solid var(--mat-sys-on-surface); border-bottom: 0; font-weight: 700; }
.pn-dist tfoot tr + tr td, .pn-dist tfoot tr + tr th { border-top: 0; }
.pn-dist tfoot td { font-family: var(--font-display); font-size: 16px; }
.pn-dist .pn-dist__sub th, .pn-dist .pn-dist__sub td { color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 14px; line-height: 20px; }
.pn-dist .pn-dist__sub td { font-family: var(--font-text); }
.pn-dist .pn-dist__sub td.pn-dist__macros { padding-left: var(--space-2); text-align: left; font-size: 12px; line-height: 16px; }
.pn-dist--edit { min-width: 560px; }
.pn-dist--edit thead th:first-child, .pn-dist--edit tbody th, .pn-dist--edit tfoot th { position: sticky; left: 0; z-index: 1; width: 124px; min-width: 124px; background: var(--mat-sys-surface); box-shadow: 1px 0 0 var(--mat-sys-outline-variant); }
.pn-dist--edit tbody th { font-size: 12px; line-height: 16px; }
.pn-dist--edit td { width: 72px; min-width: 72px; height: 48px; }
.pn-dist--edit .pn-dist__g { height: 48px; gap: 6px; white-space: normal; }
.pn-dist--edit .pn-dist__c { min-width: 36px; height: 30px; font-size: 16px; }
.pn-dist--edit tfoot td { font-size: 14px; }
.pn-t-corto { display: inline; }
.pn-t-largo { display: none; }
.pn-celda-btn { display: grid; place-items: center; width: 100%; min-width: 56px; height: 48px; padding: 0; border: 0; border-radius: var(--mat-sys-corner-small); background: transparent; color: var(--mat-sys-on-surface); }
.pn-celda-btn:active, .pn-celda-btn.is-presionado { background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent); }
@media (hover: hover) { .pn-celda-btn:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); } }
.pn-fila.is-presionado { background: var(--mat-sys-surface-container-low); }
.pn-stepper button.is-presionado { background: color-mix(in srgb, currentColor 14%, transparent); }
.pn-celda-btn[disabled] { opacity: 0.38; pointer-events: none; }
.pn-celda-btn .pn-dist__c { transition: transform var(--duration-quick) var(--ease-smooth-out); }
.pn-celda-btn.is-guardada .pn-dist__c { transform: scale(1.12); }

/* Ajustes por paciente: interruptores y recordatorios de seguimiento */
.pn-ajustes { display: flex; flex-direction: column; }
.pn-ajuste { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-2) 0; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-ajuste__t { display: flex; flex-direction: column; min-width: 0; }
.pn-ajuste__n { font-weight: 700; font-size: 14px; line-height: 20px; }
.pn-ajuste__d { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pn-recordatorios { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0 var(--space-1); border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-recordatorios .pa-switch-fila { gap: var(--space-4); }
.pn-recordatorios .pa-switch-fila + .pa-switch-fila { border-top: 0; }

/* ---- 03 Alimentación ---- */
.pn-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pn-meta { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; }
.pn-meta span { font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--mat-sys-on-surface-variant); }
.pn-macros { display: flex; flex-direction: column; margin-top: var(--space-2); }
.pn-macro { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 32px; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); font-size: 14px; line-height: 20px; }
.pn-macro__b { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--mat-sys-corner-extra-small); background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-primary); overflow: hidden; }
.pn-macro__b::-webkit-progress-bar { background: var(--mat-sys-surface-container-highest); }
.pn-macro__b::-webkit-progress-value { background: var(--mat-sys-primary); border-radius: var(--mat-sys-corner-extra-small); }
.pn-macro__b::-moz-progress-bar { background: var(--mat-sys-primary); border-radius: var(--mat-sys-corner-extra-small); }
.pn-macro b { font-family: var(--font-display); font-weight: 700; }
.pn-menu { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-menu li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-menu li > span:first-child { font-weight: 500; }
.pn-menu__p { font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }

/* ---- 04 Consulta ---- */
.pn-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pn-notas { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-fecha { display: flex; align-items: center; gap: var(--space-2); }
.pn-fecha input { flex: 1 1 auto; min-width: 0; }

/* ---- 05 Biblioteca ---- */
.pn-filtros--scroll { overflow-x: auto; scrollbar-width: none; }
.pn-filtros--scroll .t-tab { flex: 0 0 auto; }
.pn-filtros--scroll .t-tab:focus-visible { outline-offset: -3px; }
.pn-reg { display: grid; align-items: center; column-gap: var(--space-3); min-height: 64px; padding: var(--space-2) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pn-regs { display: flex; flex-direction: column; border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-reg--vid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); min-height: 64px; }
.pn-reg--vid > span:first-child { min-width: 0; }
.pn-reg--vid .pn-reg__m > span + span::before { content: " · "; }
.pn-yt { padding: 0 var(--space-3); white-space: nowrap; }
.pn-yt .pa-i { margin-right: var(--space-1); }
.pn-yt--falta { border-style: dashed; }
.pn-reg__n { font-weight: 700; font-size: 16px; line-height: 24px; }
.pn-reg__m { display: block; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-reg__m b { color: var(--mat-sys-on-surface); }
.pn-vid { display: grid; place-items: center; width: 88px; height: 56px; padding: 0; border: 0; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface); }
.pn-vid:active { background: var(--mat-sys-surface-container-highest); }
@media (hover: hover) { .pn-vid:hover { background: var(--mat-sys-surface-container-highest); } }
.pn-vid__p { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mat-sys-corner-full); background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.pn-vid--falta { border: var(--size-regla) dashed var(--mat-sys-outline); background: transparent; color: var(--mat-sys-primary); }
.pn-cuenta { margin-top: var(--space-2); }

.pn-bib-cab { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-barra--bib { grid-template-columns: minmax(0, 1fr); }

/* ---- 06 Rutina ---- */
.pn-dias { padding: 6px; margin: -6px; overflow-x: auto; scrollbar-width: thin; }
.pn-dias ul { display: flex; gap: var(--space-2); }
.pn-dias li { flex: none; }
.pn-dia { flex: none; display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: var(--space-1) var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--corner-ficha); font-size: 14px; line-height: 20px; white-space: nowrap; }
.pn-dia { appearance: none; background: transparent; color: var(--mat-sys-on-surface); text-align: left; }
.pn-dia__n { font-weight: 700; }
.pn-dia[aria-current="true"] { border-color: transparent; background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
@media (hover: hover) { .pn-dia:not([aria-current="true"]):hover { background: var(--mat-sys-surface-container-low); } }
.pn-dia:active { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-surface) 12%); }
.pn-reg--ej { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n t u" "n t v"; row-gap: 0; min-height: 72px; }
.pn-reg--ej > .pn-reg__num { grid-area: n; align-self: center; font-family: var(--font-display); font-weight: 700; color: var(--mat-sys-on-surface-variant); }
.pn-reg--ej > .pn-reg__t { grid-area: t; display: flex; flex-direction: column; min-width: 0; }
.pn-reg--ej > .pn-reg__u { grid-area: u; justify-self: end; display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; white-space: nowrap; }
.pn-reg--ej > .pn-reg__v { grid-area: v; justify-self: end; }
.pn-reg--ej > .pn-reg__d { display: none; }
.pn-reg__aviso { display: inline-grid; place-items: center; color: var(--mat-sys-on-surface); }
.pn-cuerpo-pie { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); }

/* Intermedio: de 720 a 1023 */
@container pn (min-width: 720px) {
  .pn-desde-720 { display: inline; }
  .pn-nuevo { width: auto; padding: 0 var(--space-4); }
  .pn-tabs { gap: var(--space-6); }
  .pn-extra { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
  .pn-cambios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pn-cambios__c { border-left: var(--size-regla) solid var(--mat-sys-outline-variant); padding-left: var(--space-3); }
  .pn-cambios__c:nth-child(odd) { padding-left: var(--space-3); }
  .pn-cambios__c:first-child { border-left: 0; padding-left: 0; }
  .pn-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pn-t-largo { display: inline; }
  .pn-t-corto { display: none; }
  .pn-dist--edit tbody th { font-size: 14px; line-height: 20px; }
  .pn-dist--edit thead th:first-child, .pn-dist--edit tbody th, .pn-dist--edit tfoot th { width: 196px; min-width: 196px; }
  .pn-dist--edit { min-width: 640px; }
  .pn-menu li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  .pn-exp { grid-template-columns: var(--size-touch-min) 40px minmax(0, 1fr) auto; grid-template-areas: "atras av tit acc" "atras av sub acc"; }
  .pn-exp__acc > .pa-btn { flex: none; }
  .pn-acciones > .pa-btn { flex: none; }
  .pn-bib-cab { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Escritorio: 1024 en adelante */
@container pn (min-width: 1024px) {
  .pn-marco { flex-direction: row; }
  .pn-riel { order: 0; display: flex; flex-direction: column; align-items: center; width: var(--size-rail); gap: var(--space-2); padding: var(--space-6) 0 var(--space-4); border-top: 0; border-right: var(--size-regla) solid var(--mat-sys-outline-variant); }
  .pn-riel__logo { display: block; margin-bottom: var(--space-4); }
  .pn-riel__it { width: 72px; min-height: 64px; padding: 6px 0; }
  .pn-riel__it .pa-nav__pill { width: 48px; height: 32px; }
  .pn-riel__pie { margin-top: auto; min-height: 0; padding: 0; }
  .pn-riel__pie .pa-nav__pill { width: 56px; height: 56px; background: transparent; }
  .pn-riel__pie .pa-avatar--s { width: 40px; height: 40px; font-size: 14px; line-height: 20px; }
  .pn-riel__pie .pn-riel__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pn-cuerpo { gap: var(--space-6); padding: var(--space-6) var(--space-8) var(--space-4); }
  .pn-main > .pn-exp { padding: var(--space-4) var(--space-8) var(--space-2); }
  .pn-exp { grid-template-columns: var(--size-touch-desk) 40px minmax(0, 1fr) auto; }
  .pn-exp__atras { margin-left: 0; }
  .pn-main > .pn-tabs-wrap { padding: 0 var(--space-8); }
  .pn-solo-desk { display: inline; }
  .pn-solo-cel { display: none; }
  .pn-cuerpo > .pn-tabs-wrap { position: static; margin: 0; padding: 0; }
  /* controles de 40 px */
  .pa-btn { min-height: var(--size-touch-desk); padding: 0 var(--space-4); font-size: 14px; line-height: 20px; }
  .pa-btn--text { padding: 0 var(--space-3); }
  .pa-iconbtn { width: var(--size-touch-desk); height: var(--size-touch-desk); }
  .t-tab { min-height: var(--size-touch-desk); }
  .pn-tab { min-height: var(--size-touch-desk); min-width: var(--size-touch-desk); }
  .pa-select__btn, .pa-select__op { min-height: var(--size-touch-desk); font-size: 14px; line-height: 20px; }
  .pa-campo input { min-height: var(--size-touch-desk); font-size: 14px; line-height: 20px; }
  .pa-campo textarea { font-size: 14px; line-height: 20px; }
  .pn-buscar { min-height: var(--size-touch-desk); }
  .pn-buscar input { min-height: 38px; }
  .pa-switch { height: var(--size-touch-desk); }
  .pa-switch::after { top: 4px; }
  .pa-switch::before { top: 20px; }
  .pa-switch .pa-i { top: 20px; }
  .pa-switch-fila { min-height: var(--size-touch-desk); }
  .pn-celda-btn { height: 40px; }
  .pn-dist--edit td, .pn-dist--edit .pn-dist__g { height: 40px; }
  /* Pacientes */
  .pn-cuerpo--pac { display: grid; grid-template-columns: minmax(300px, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-6); align-content: start; }
  .pn-cuerpo--pac > .pn-extra, .pn-cuerpo--pac > section, .pn-cuerpo--pac > .pn-filas-bloque { grid-column: 1 / -1; }
  .pn-barra { position: static; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; background: none; }
  .pn-barra .pn-buscar { flex: 0 1 240px; }
  .pn-barra .pn-filtros { flex: none; grid-column: auto; }
  .pn-barra .t-tab { flex: 0 0 auto; }
  .pn-barra--bib { justify-content: flex-start; }
  .pn-nuevo { padding: 0 var(--space-4); }
  .pn-hora { min-height: 60px; }
  .pn-hora--sig { padding-block: var(--space-1); }
  .pn-aviso { grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; padding: 6px 0; min-height: 68px; }
  .pn-aviso__marca { grid-column: 1; }
  .pn-aviso__c { grid-column: 2; }
  .pn-aviso__acc { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  .pn-aviso[data-abierto="true"] .pn-aviso__marca { display: block; visibility: hidden; }
  .pn-filas__cab, .pn-fila { grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 88px; column-gap: var(--space-4); }
  .pn-filas__cab { display: grid; padding-bottom: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
  .pn-filas__cab span:first-child { grid-column: 1 / 3; }
  .pn-fila { min-height: 56px; }
  .pn-fila .pa-avatar { width: 28px; height: 28px; font-size: 12px; line-height: 16px; }
  .pn-fila__d { display: block; font-size: 14px; line-height: 20px; }
  .pn-fila__m { display: none; }
  .pn-fila .pa-chip { justify-self: start; }
  /* Expediente */
  .pn-cambios { grid-template-columns: 220px repeat(4, minmax(0, 1fr)); }
  .pn-cambios__t { grid-column: auto; padding: var(--space-2) var(--space-4) var(--space-2) 0; }
  .pn-cambios__c { padding: var(--space-2) var(--space-4); border-top: 0; }
  .pn-cambios__c:nth-child(odd) { padding-left: var(--space-4); }
  .pn-cambios__c:first-child { border-left: var(--size-regla) solid var(--mat-sys-outline-variant); padding-left: var(--space-4); }
  .pn-expgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-6); }
  .pn-expgrid > * + * { padding-left: var(--space-6); border-left: var(--size-regla) solid var(--mat-sys-outline-variant); }
  .pn-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); }
  .pn-cuatro > * + * { padding-left: var(--space-6); border-left: var(--size-regla) solid var(--mat-sys-outline-variant); }
  .pn-alerta--fila { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
  .pn-alerta--fila .pa-alerta__t, .pn-alerta--fila .pa-alerta__b { grid-column: 2; }
  .pn-alerta--fila .pa-alerta__acc { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .pn-dist td { height: 30px; }
  .pn-dist--edit tbody th { font-size: 14px; line-height: 20px; }
  /* Pantallas en dos columnas */
  .pn-cols--plan { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pn-cols--consulta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pn-cols--rutina { grid-template-columns: 220px minmax(0, 1fr); }
  .pn-medidas { gap: var(--space-4); }
  .pn-dias { overflow: visible; padding: 0; margin: 0; }
  .pn-dias ul { flex-direction: column; gap: var(--space-1); }
  .pn-dia { flex-direction: row; align-items: baseline; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-color: transparent; justify-content: flex-start; align-items: center; }
  /* Biblioteca y rutina: columnas */
  .pn-reg--vid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 124px; column-gap: var(--space-4); min-height: 56px; }
  .pn-reg--vid > span:first-child, .pn-reg--vid .pn-reg__m { display: contents; }
  .pn-reg--vid .pn-reg__m > span { font-size: 14px; line-height: 20px; }
  .pn-reg--vid .pn-reg__m > span:first-child { color: var(--mat-sys-on-surface); }
  .pn-reg--vid .pn-reg__m > span + span::before { content: none; }
  .pn-reg--vid > .pn-yt { justify-self: start; }
  .pn-reg--ej { grid-template-columns: 28px minmax(0, 2.8fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 124px minmax(0, 1.1fr); grid-template-areas: none; column-gap: var(--space-4); min-height: 56px; }
  .pn-reg--ej > .pn-reg__num, .pn-reg--ej > .pn-reg__t, .pn-reg--ej > .pn-reg__u, .pn-reg--ej > .pn-reg__v { grid-area: auto; }
  .pn-reg--ej > .pn-reg__num { align-self: center; padding-top: 0; }
  .pn-reg--ej > .pn-reg__u, .pn-reg--ej > .pn-reg__v { justify-self: start; }
  .pn-reg--ej .pn-reg__m { display: none; }
  .pn-reg--ej > .pn-reg__d { display: block; font-size: 14px; line-height: 20px; }
  .pn-reg--ej > .pn-reg__u { order: 6; font-weight: 500; font-family: var(--font-text); font-size: 14px; }
  .pn-reg--ej > .pn-reg__v { order: 5; }
  .pn-reg--cab { display: grid; grid-template-columns: 28px minmax(0, 2.8fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 124px minmax(0, 1.1fr); column-gap: var(--space-4); padding-bottom: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
  .pn-reg--cab-vid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 124px; }
}
.pn-reg--cab { display: none; min-height: 0; border-bottom: 0; }
@container pn (min-width: 1024px) { .pn-reg--cab { display: grid; } }

@container pn (min-width: 1024px) and (max-width: 1279.98px) { .pn-barra { flex-wrap: wrap; max-width: 560px; } }

/* Hoja: en escritorio flota abajo a la derecha en vez de cubrir el ancho */
.pn-capa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pn-capa > * { pointer-events: auto; }
@container pn (min-width: 1024px) {
  .pn-capa .pa-hoja { left: auto; right: var(--space-8); bottom: var(--space-8); width: 400px; max-height: 70%; padding-bottom: var(--space-4); border-radius: var(--mat-sys-corner-extra-large); }
  .pn-capa .pa-hoja__asa { display: none; }
}

/* Piezas del panel: muestras con estados forzados */
.pn-piezas { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8); background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); }
.pn-piezas__sec { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--size-regla) solid var(--mat-sys-on-surface); }
.pn-piezas__fila { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.pn-piezas__fila--rec > * { flex: 1 1 320px; }
.pn-piezas__caja { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; }
.pn-piezas__dos { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-8); align-items: start; }
.pn-demo { border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--mat-sys-corner-medium); overflow: hidden; background: var(--mat-sys-surface); }
.pn-demo--cel { width: 390px; max-width: 100%; }
.pn-demo .pn-marco { height: 300px; flex: none; }
.pn-demo--cel .pn-marco { height: 180px; }
.pn-demo__vacio { flex: 1 1 auto; background: var(--mat-sys-surface-container-low); }
.pn-piezas .pn-hoja-demo { position: relative; height: 420px; overflow: hidden; border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-low); }
.pn-piezas .pn-hoja-demo .pa-hoja { max-height: none; }
.pn-piezas .pn-hoja-demo .pa-scrim { z-index: 8; }
.pn-pieza-it { width: 72px; }
.pn-pieza-celda { width: 72px; }
.pn-pieza-t { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--mat-sys-on-surface-variant); }
.pn-demo-cuerpo { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.pn-demo-ancho { max-width: 560px; }

/* ---------- Lámina, temas y hoja de pantallas ---------- */
.pa-lamina { width: 1280px; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); font-family: var(--font-text); }
.pa-lamina__cab { padding: var(--space-8) var(--space-12) var(--space-2); }
.pa-lamina__t { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; }
.pa-lamina__par { display: grid; grid-template-columns: 1fr 1fr; }
.pa-lamina__panel { min-width: 0; padding: var(--space-8) var(--space-12) var(--space-12); background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); }
.pa-lamina__sec { margin-top: var(--space-8); }
.pa-lamina__sec:first-child { margin-top: 0; }
.pa-lamina__h { margin-bottom: var(--space-3); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pa-lamina__tema { margin-bottom: var(--space-6); font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; }
.pa-lamina__ancho { max-width: 358px; }
.pa-lamina__nota { margin-bottom: var(--space-3); font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pa-lamina .pa-muestra { padding: 0; max-width: none; }
.pa-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.pa-swatch { display: flex; flex-direction: column; justify-content: space-between; min-height: 84px; padding: 10px var(--space-3); border-radius: var(--mat-sys-corner-medium); font-weight: 700; font-size: 12px; line-height: 16px; }
.pa-swatch--borde { box-shadow: inset 0 0 0 var(--size-regla) var(--mat-sys-outline-variant); }
.pa-swatch--ancho { grid-column: span 2; min-height: 108px; }
.pa-swatch__hex { font-weight: 500; font-variant-numeric: tabular-nums; }
.pa-tipo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8) var(--space-12); padding: var(--space-2) var(--space-12) var(--space-12); }
.pa-tipo__fila { display: grid; gap: 2px; padding: 10px 0; border-top: var(--size-regla) solid var(--mat-sys-outline-variant); }
.pa-tipo__meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--mat-sys-on-surface-variant); }
.pa-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.pa-tema { padding: var(--space-3); border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--corner-compartimento); background: var(--mat-sys-surface-container-lowest); color: var(--mat-sys-on-surface); }
.pa-tema__n { font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-tema__s { font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-tema__bloques { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); margin-top: var(--space-2); }
.pa-tema__bloques div { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: var(--mat-sys-corner-small); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-todas { display: grid; grid-template-columns: repeat(4, 390px); gap: 56px var(--space-8); padding: var(--space-8); width: fit-content; background: var(--mat-sys-surface-container-high); }
.pa-todas__it { display: flex; flex-direction: column; gap: var(--space-3); }
.pa-todas__t { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--mat-sys-on-surface); }
.pa-todas .pa-board { border-radius: var(--mat-sys-corner-large); }

/* ---------- Estados forzados, solo para mostrarlos lado a lado ---------- */
.is-foco { outline: var(--size-foco) solid var(--mat-sys-primary); outline-offset: var(--size-foco-offset); }
.pa-btn.is-presionado { transform: translateY(1px) scale(0.985); }
.pa-btn--filled.is-presionado { background: color-mix(in srgb, var(--mat-sys-primary), var(--mat-sys-on-surface) 20%); }
.pa-btn--tonal.is-presionado { background: color-mix(in srgb, var(--mat-sys-secondary-container), var(--mat-sys-on-secondary-container) 16%); }
.pa-btn--outlined.is-presionado, .pa-btn--text.is-presionado { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
.pa-iconbtn.is-presionado { transform: scale(0.94); background: color-mix(in srgb, currentColor 14%, transparent); }
.pa-escala__op.is-presionado { background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
.pa-stepper__btn.is-presionado, .pa-descanso__ajuste.is-presionado { background: color-mix(in srgb, currentColor 14%, transparent); }
.pa-fichas { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--space-3); }

/* ---------- Cableado de F5 ---------- */
/* Menú desplegable (transitions.dev 05): la lista crece desde el botón; abre en --duration-fast y cierra en --duration-quick. 0.97 es la escala de apertura de ese token. */
.pa-select[data-select] .pa-select__lista { transform-origin: top center; opacity: 0; transform: scale(0.97) translateY(calc(var(--distance-micro) * -1)); transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.pa-select[data-select] .pa-select__lista.is-abierta { opacity: 1; transform: none; transition-duration: var(--duration-fast); }
/* Botón de icono con dos estados (mostrar u ocultar la contraseña) */
.pa-iconbtn .ic-on, .pa-foto .ic-on { display: none; }
.pa-iconbtn[aria-pressed="true"] .ic-off, .pa-foto[aria-pressed="true"] .ic-off { display: none; }
.pa-iconbtn[aria-pressed="true"] .ic-on, .pa-foto[aria-pressed="true"] .ic-on { display: block; }
/* Foto del check-in agregada: borde sólido y fondo de marca suave, con palomita; el estado también va en el nombre accesible */
.pa-foto[aria-pressed="true"] { border-style: solid; border-color: var(--mat-sys-primary); background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); }
/* Fotos de Mi cuerpo, ocultas hasta que el paciente las abre */
.pa-fotos-vista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) 0 var(--space-3); }
.pa-fotos-vista__f { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; aspect-ratio: 3 / 4; padding: var(--space-2); border-radius: var(--corner-ficha); background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface); font-weight: 700; font-size: 14px; line-height: 20px; }
.pa-fotos-vista__f small { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--mat-sys-on-surface-variant); }
.pa-vacio { margin-top: var(--space-3); }

/* Panel: recorrido navegable. Un solo marcado; los tableros de cada pantalla ocupan toda la página y el contenedor «pn» decide la disposición. */
.pn-recorrido { position: relative; flex: none; overflow: hidden; overflow: clip; width: 100%; max-width: none; height: 100vh; height: 100dvh; background: var(--mat-sys-surface); }
.pn-recorrido > .t-page { display: block; }
.pn-recorrido .pn-var, .pn-recorrido .pn-board { height: 100%; }
@container pn (max-width: 719.98px) { .pn-var--desk { display: none; } }
@container pn (min-width: 720px) { .pn-var--cel { display: none; } }
/* El aviso breve del panel: en celular sube sobre la barra inferior; en escritorio queda abajo a la derecha, con el ancho de un aviso. */
@container pn (min-width: 1024px) { .pn-board > .pa-toast, .pn-recorrido > .pa-toast { left: calc(50% - 210px); right: auto; bottom: var(--space-8); width: 420px; max-width: calc(100% - 2 * var(--space-8)); } }
@container pn (min-width: 600px) and (max-width: 1023.98px) { .pn-board > .pa-toast, .pn-recorrido > .pa-toast { bottom: 88px; } }
/* Contenido que cambia en su lugar (lista del menú, pacientes filtrados, ejercicios de otro día): el alto se ajusta (card resize) y el contenido entra con un cruce corto. */
.pn-muta { transition: height var(--resize-dur) var(--resize-ease), opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out); }
.pn-muta.is-animando { overflow: hidden; }
.pn-muta.is-saliendo { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(var(--distance-micro)); }
.pa-opcion__n small { display: block; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--mat-sys-on-surface-variant); }
.pn-menu:empty::after { content: "Sin alimentos en este tiempo."; padding: var(--space-3) 0; color: var(--mat-sys-on-surface-variant); }

/* ---------- Movimiento reducido: cada transición se apaga ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Sitio de prueba para el cliente. Solo los ajustes de «modo dispositivo» y la entrada: el marcado, los tokens y bundle.css
   salen de la maqueta sin tocarse. Prefijo cl- para lo propio del sitio; pa- y pn- siguen siendo de la app y del panel. */
:root { --cl-barra: 60px; --cl-cab: 64px; }

/* ---------- paciente.html y panel.html: la app a pantalla completa ---------- */
body.cl-app { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
/* La barra de estado y el indicador de inicio son del marco del teléfono en la maqueta; en un teléfono de verdad los pone el sistema. */
.pa-status, .pa-home { display: none; }
.pa-recorrido { width: 100%; max-width: none; height: 100vh; height: 100dvh; }
.pa-recorrido > .t-page > .pa-board { height: 100%; }
/* El selector de vista ocupa el lugar que dejó la barra de estado: el tablero mide el alto completo y reserva ese espacio arriba. */
html:not(.en-marco) .pa-board { padding-top: calc(var(--cl-barra) + env(safe-area-inset-top, 0px)); }
/* Sin indicador de inicio dibujado, la barra inferior solo respeta el área segura del aparato. */
.pa-nav { padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px)); }
.pa-nav--suelta { padding-bottom: var(--space-2); }
.pa-recorrido > .pa-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
@container pn (max-width: 599.98px) {
  .pn-riel { padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px)); }
  .pn-recorrido > .pa-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

.cl-barra-app {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-2);
  height: calc(var(--cl-barra) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--space-2) 0 var(--space-1);
  background: var(--mat-sys-surface); border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant);
}
html.en-marco .cl-barra-app { display: none; }
.cl-conmuta { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; padding: 3px; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-high); }
.cl-conmuta__it {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: var(--size-touch-min); padding: var(--space-1) var(--space-2);
  border-radius: calc(var(--mat-sys-corner-medium) - 3px); color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 14px; line-height: 18px; text-align: center; text-wrap: balance;
}
.cl-conmuta__it[aria-current="page"] { background: var(--mat-sys-surface-container-lowest); box-shadow: 0 0 0 var(--size-regla) var(--mat-sys-outline-variant); color: var(--mat-sys-on-surface); font-weight: 700; }
.cl-conmuta__it:active { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); }

/* ---------- Entrada y 404 ---------- */
body.cl-entrada { min-height: 100vh; min-height: 100dvh; }
.cl-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: env(safe-area-inset-top, 0px) var(--space-4) 0; border-bottom: var(--size-regla) solid var(--mat-sys-outline-variant); }
.cl-marca { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cl-marca .pa-logo { width: 32px; height: 32px; }
.cl-marca__n { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }
.cl-tabs, .cl-btn-aviso, .cl-escena, .cl-aviso__cerrar { display: none; }

.cl-pagina { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.cl-selector { padding-bottom: var(--space-6); }
.cl-intro { display: flex; flex-direction: column; gap: var(--space-2); }
.cl-acciones { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.cl-accion {
  display: flex; flex-direction: column; gap: var(--space-1); min-height: var(--size-touch-main); padding: var(--space-4);
  border: var(--size-regla) solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-medium); color: var(--mat-sys-on-surface);
  transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-micro) var(--ease-smooth-out);
}
.cl-accion .body-medium { color: var(--mat-sys-on-surface-variant); }
.cl-accion:active { transform: translateY(1px) scale(0.985); background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent); }
.cl-accion--principal { background: var(--mat-sys-primary); border-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.cl-accion--principal .body-medium { color: var(--mat-sys-on-primary); }
.cl-accion--principal:active { background: color-mix(in srgb, var(--mat-sys-primary), var(--mat-sys-on-surface) 20%); }

.cl-aviso { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); }
.cl-aviso__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cl-aviso__lista { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding-left: var(--space-4); list-style: disc outside; }
.cl-aviso__lista li { display: list-item; }
.cl-aviso__lista li::marker { color: var(--mat-sys-on-surface-variant); }
.cl-aviso__pie { margin-top: var(--space-3); color: var(--mat-sys-on-surface-variant); }
.cl-enlace { display: inline-flex; align-items: center; min-height: var(--size-touch-min); color: var(--mat-sys-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Entrada en ventana de escritorio: un marco de teléfono y el panel a ventana completa ---------- */
@media (min-width: 700px) and (min-height: 640px) {
  body.cl-entrada { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body.cl-entrada .cl-cab { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; height: var(--cl-cab); min-height: 0; padding: 0 var(--space-4); }
  body.cl-entrada .cl-btn-aviso { display: inline-flex; justify-self: end; }
  body.cl-entrada > main { flex: 1 1 auto; min-height: 0; position: relative; }
  .cl-selector { display: none; }
  .cl-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--mat-sys-corner-medium); background: var(--mat-sys-surface-container-high); }
  .cl-tab {
    min-height: var(--size-touch-min); padding: var(--space-1) var(--space-4); border: 0; border-radius: calc(var(--mat-sys-corner-medium) - 3px); background: transparent;
    color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap;
  }
  .cl-tab[aria-selected="true"] { background: var(--mat-sys-surface-container-lowest); box-shadow: 0 0 0 var(--size-regla) var(--mat-sys-outline-variant); color: var(--mat-sys-on-surface); font-weight: 700; }
  .cl-tab:active { background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent); }

  .cl-escena { display: block; position: absolute; inset: 0; }
  .cl-vista { position: absolute; inset: 0; }
  .cl-vista[data-activa="false"] { visibility: hidden; }
  .cl-vista--panel iframe { display: block; width: 100%; height: 100%; border: 0; }
  .cl-vista--paciente { display: grid; place-items: center; background: var(--mat-sys-surface-container); }
  /* El teléfono es de 390 de ancho y toma el alto de la ventana (hasta 844 de pantalla); el marco son 10 px por lado. */
  .cl-telefono { width: 410px; height: clamp(520px, calc(100dvh - var(--cl-cab) - 40px), 864px); padding: 10px; border-radius: 44px; background: var(--mat-sys-inverse-surface); }
  .cl-telefono iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 34px; background: var(--mat-sys-surface); }

  .cl-aviso {
    display: none; position: absolute; top: var(--space-3); right: var(--space-4); z-index: 30; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow: auto; margin: 0; padding: var(--space-4);
    background: var(--mat-sys-surface-container-lowest); border: var(--size-regla) solid var(--mat-sys-outline-variant); border-radius: var(--corner-compartimento); box-shadow: var(--mat-sys-level2);
  }
  .cl-aviso.is-abierto { display: block; }
  .cl-aviso__cerrar { display: inline-flex; margin-right: calc(var(--space-3) * -1); }
}