/* =============================================================================
   M3 EXPRESSIVE · tokens de Arboria (compartidos por admin, padres, niño y portada)
   =============================================================================
   Generado el 11 sep 2026 (scratchpad/m3/tokens.mjs). Color: Material Color
   Utilities, SchemeFidelity desde el menta de la marca (#7FB685). Movimiento:
   resortes de M3 Expressive convertidos a linear(). Solo variables: nada de
   aquí pinta por sí solo.
   Tema: claro por defecto. <html data-tema="auto"> sigue al sistema (admin y
   padres); data-tema="oscuro" o html[data-noche="1"] (el modo noche del niño)
   fuerzan el oscuro.
   Iconos: <span class="ms" aria-hidden="true">nombre</span>, siempre con el
   nombre escrito literal (o ms('nombre') / data-ms="nombre" en JS): el script
   no ve un nombre guardado en una variable. Los woff2 solo llevan los iconos
   usados: al añadir uno, regenerar con scratchpad/m3/iconos.mjs (lista en
   public/assets/fonts/material-symbols.txt).                                */

@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;
  src:url('/assets/fonts/roboto-flex-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400 500;font-display:block;
  src:url('/assets/fonts/material-symbols-rounded.woff2?v=9fbb4a4e') format('woff2')}
/* Subconjunto de las páginas públicas (portada, app del niño, /ninos, créditos,
   legal): esas vistas ponen .ms{font-family:'Material Symbols Publico'} y no
   descargan la fuente del panel. Una fuente sin usar no se descarga nunca. */
@font-face{font-family:'Material Symbols Publico';font-style:normal;font-weight:400 500;font-display:block;
  src:url('/assets/fonts/material-symbols-publico.woff2?v=ff0fa722') format('woff2')}

:root{
  /* ---- color (roles M3) ---- */
  --md-sys-color-primary:#35693f;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#7fb685;
  --md-sys-color-on-primary-container:#114721;
  --md-sys-color-secondary:#4f644f;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#d1e9cf;
  --md-sys-color-on-secondary-container:#546a55;
  --md-sys-color-tertiary:#8d4a5c;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#e392a6;
  --md-sys-color-on-tertiary-container:#662a3c;
  --md-sys-color-error:#ba1a1a;
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;
  --md-sys-color-on-error-container:#93000a;
  --md-sys-color-surface:#f8faf4;
  --md-sys-color-on-surface:#191c19;
  --md-sys-color-surface-variant:#dde5d9;
  --md-sys-color-on-surface-variant:#414940;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f2f4ee;
  --md-sys-color-surface-container:#edefe8;
  --md-sys-color-surface-container-high:#e7e9e3;
  --md-sys-color-surface-container-highest:#e1e3dd;
  --md-sys-color-surface-dim:#d9dbd5;
  --md-sys-color-surface-bright:#f8faf4;
  --md-sys-color-inverse-surface:#2e312d;
  --md-sys-color-inverse-on-surface:#f0f1eb;
  --md-sys-color-inverse-primary:#9cd4a1;
  --md-sys-color-outline:#717970;
  --md-sys-color-outline-variant:#c1c9be;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  /* ---- forma: escala de esquinas de M3 Expressive ---- */
  --md-sys-shape-corner-none:0;
  --md-sys-shape-corner-extra-small:4px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-large-increased:20px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;
  --md-sys-shape-corner-extra-extra-large:48px;
  --md-sys-shape-corner-full:9999px;
  /* ---- tipografía: escala M3 sobre Roboto Flex (peso tamaño/interlínea) ---- */
  --md-ref-typeface-brand:'Roboto Flex',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --md-ref-typeface-plain:'Roboto Flex',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --md-sys-typescale-display-large:400 57px/64px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium:400 45px/52px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small:400 36px/44px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large:400 32px/40px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium:400 28px/36px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small:400 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large:400 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium:500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small:500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large:400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium:400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small:400 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large:500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium:500 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small:500 11px/16px var(--md-ref-typeface-plain);
  /* Expressive: los «enfatizados» suben el peso del mismo tamaño. */
  --md-sys-typescale-emphasized-weight:650;
  /* ---- movimiento: resortes de M3 Expressive (spatial = posición/tamaño,
          con rebote; effects = color/opacidad, sin rebote) ---- */
  --md-sys-motion-spatial-fast-duration:373ms;
  --md-sys-motion-spatial-fast:linear(0,0.069,0.214,0.4,0.58,0.747,0.881,0.977,1.042,1.078,1.092,1.091,1.08,1.063,1.046,1.03,1.016,1.006,0.998,0.994,0.992,0.991,0.992,0.993,0.995,0.997,0.998,0.999,1); /* rebote 9.3 % */
  --md-sys-motion-spatial-default-duration:435ms;
  --md-sys-motion-spatial-default:linear(0,0.043,0.138,0.259,0.387,0.509,0.62,0.716,0.795,0.859,0.908,0.945,0.971,0.99,1.002,1.009,1.013,1.014,1.014,1.013,1.011,1.01,1.008,1.006,1.005,1.003,1.002,1.002,1); /* rebote 1.4 % */
  --md-sys-motion-spatial-slow-duration:599ms;
  --md-sys-motion-spatial-slow:linear(0,0.042,0.138,0.256,0.385,0.508,0.62,0.714,0.794,0.858,0.908,0.944,0.971,0.99,1.002,1.009,1.013,1.015,1.014,1.013,1.012,1.01,1.008,1.006,1.005,1.003,1.002,1.002,1); /* rebote 1.5 % */
  --md-sys-motion-effects-fast-duration:156ms;
  --md-sys-motion-effects-fast:linear(0.001,0.059,0.167,0.291,0.413,0.523,0.618,0.704,0.768,0.819,0.86,0.892,0.917,0.936,0.951,0.963,0.972,0.979,0.984,0.988,0.991,0.993,0.995,0.996,0.997,0.998,0.998,0.999,1); /* rebote -0.1 % */
  --md-sys-motion-effects-default-duration:236ms;
  --md-sys-motion-effects-default:linear(0,0.055,0.161,0.278,0.4,0.512,0.609,0.69,0.754,0.808,0.852,0.886,0.911,0.932,0.948,0.961,0.97,0.977,0.983,0.987,0.99,0.993,0.994,0.996,0.997,0.998,0.998,0.999,1); /* rebote -0.1 % */
  --md-sys-motion-effects-slow-duration:331ms;
  --md-sys-motion-effects-slow:linear(0,0.052,0.152,0.275,0.393,0.505,0.603,0.682,0.751,0.804,0.848,0.883,0.909,0.931,0.947,0.96,0.97,0.977,0.982,0.987,0.99,0.993,0.994,0.996,0.997,0.998,0.998,0.999,1); /* rebote -0.1 % */
  --md-sys-motion-easing-emphasized:cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-standard:cubic-bezier(.2,0,0,1);
  /* ---- capas de estado y elevación ---- */
  --md-sys-state-hover-opacity:.08;
  --md-sys-state-focus-opacity:.10;
  --md-sys-state-pressed-opacity:.10;
  --md-sys-state-dragged-opacity:.16;
  --md-sys-elevation-level0:none;
  --md-sys-elevation-level1:0 1px 2px rgb(0 0 0 / .3),0 1px 3px 1px rgb(0 0 0 / .15);
  --md-sys-elevation-level2:0 1px 2px rgb(0 0 0 / .3),0 2px 6px 2px rgb(0 0 0 / .15);
  --md-sys-elevation-level3:0 1px 3px rgb(0 0 0 / .3),0 4px 8px 3px rgb(0 0 0 / .15);
  --md-sys-elevation-level4:0 2px 3px rgb(0 0 0 / .3),0 6px 10px 4px rgb(0 0 0 / .15);
  --md-sys-elevation-level5:0 4px 4px rgb(0 0 0 / .3),0 8px 12px 6px rgb(0 0 0 / .15);
  /* ---- foco visible (3 px, contraste ≥ 3:1 sobre las superficies) ---- */
  --md-focus-ring-width:3px;
  --md-focus-ring-offset:2px;
  --md-focus-ring-color:var(--md-sys-color-secondary);
  /* ---- objetivo táctil mínimo de M3 ---- */
  --md-touch-target:48px;
}
@media (prefers-color-scheme:dark){
  :root[data-tema="auto"]{
    --md-sys-color-primary:#9cd4a1;
    --md-sys-color-on-primary:#003915;
    --md-sys-color-primary-container:#7fb685;
    --md-sys-color-on-primary-container:#114721;
    --md-sys-color-secondary:#b5cdb4;
    --md-sys-color-on-secondary:#213524;
    --md-sys-color-secondary-container:#374c39;
    --md-sys-color-on-secondary-container:#a4bba3;
    --md-sys-color-tertiary:#ffb1c3;
    --md-sys-color-on-tertiary:#551d2e;
    --md-sys-color-tertiary-container:#e392a6;
    --md-sys-color-on-tertiary-container:#662a3c;
    --md-sys-color-error:#ffb4ab;
    --md-sys-color-on-error:#690005;
    --md-sys-color-error-container:#93000a;
    --md-sys-color-on-error-container:#ffdad6;
    --md-sys-color-surface:#111411;
    --md-sys-color-on-surface:#e1e3dd;
    --md-sys-color-surface-variant:#414940;
    --md-sys-color-on-surface-variant:#c1c9be;
    --md-sys-color-surface-container-lowest:#0c0f0c;
    --md-sys-color-surface-container-low:#191c19;
    --md-sys-color-surface-container:#1d201d;
    --md-sys-color-surface-container-high:#282b27;
    --md-sys-color-surface-container-highest:#323632;
    --md-sys-color-surface-dim:#111411;
    --md-sys-color-surface-bright:#373a36;
    --md-sys-color-inverse-surface:#e1e3dd;
    --md-sys-color-inverse-on-surface:#2e312d;
    --md-sys-color-inverse-primary:#35693f;
    --md-sys-color-outline:#8b9389;
    --md-sys-color-outline-variant:#414940;
    --md-sys-color-shadow:#000000;
    --md-sys-color-scrim:#000000;
  }
}
:root[data-tema="oscuro"],html[data-noche="1"]{
  --md-sys-color-primary:#9cd4a1;
  --md-sys-color-on-primary:#003915;
  --md-sys-color-primary-container:#7fb685;
  --md-sys-color-on-primary-container:#114721;
  --md-sys-color-secondary:#b5cdb4;
  --md-sys-color-on-secondary:#213524;
  --md-sys-color-secondary-container:#374c39;
  --md-sys-color-on-secondary-container:#a4bba3;
  --md-sys-color-tertiary:#ffb1c3;
  --md-sys-color-on-tertiary:#551d2e;
  --md-sys-color-tertiary-container:#e392a6;
  --md-sys-color-on-tertiary-container:#662a3c;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-surface:#111411;
  --md-sys-color-on-surface:#e1e3dd;
  --md-sys-color-surface-variant:#414940;
  --md-sys-color-on-surface-variant:#c1c9be;
  --md-sys-color-surface-container-lowest:#0c0f0c;
  --md-sys-color-surface-container-low:#191c19;
  --md-sys-color-surface-container:#1d201d;
  --md-sys-color-surface-container-high:#282b27;
  --md-sys-color-surface-container-highest:#323632;
  --md-sys-color-surface-dim:#111411;
  --md-sys-color-surface-bright:#373a36;
  --md-sys-color-inverse-surface:#e1e3dd;
  --md-sys-color-inverse-on-surface:#2e312d;
  --md-sys-color-inverse-primary:#35693f;
  --md-sys-color-outline:#8b9389;
  --md-sys-color-outline-variant:#414940;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
}
/* Con «reducir movimiento», los resortes se vuelven cambios casi instantáneos. */
@media (prefers-reduced-motion:reduce){
  :root{
    --md-sys-motion-spatial-fast-duration:1ms;--md-sys-motion-spatial-default-duration:1ms;--md-sys-motion-spatial-slow-duration:1ms;
    --md-sys-motion-effects-fast-duration:1ms;--md-sys-motion-effects-default-duration:1ms;--md-sys-motion-effects-slow-duration:1ms;
  }
}

/* Icono de Material Symbols. El texto es el nombre del icono: siempre
   aria-hidden, y el nombre accesible lo da el botón o el texto que lo acompaña. */
.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;flex:none;
  -webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select:none;overflow:hidden;width:1em;height:1em}
.ms.lleno{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}