/* ==========================================================================
   Misifú · tokens de diseño · v1.0 (12/11/2026)
   Una solución de Rebellious Words · desarrollado con Sarao Comunicación
   --------------------------------------------------------------------------
   Uso: <link rel="stylesheet" href="tokens.css"> y, en el HTML,
   data-theme="claro" | "oscuro" en <html> para forzar un modo. Sin atributo,
   se respeta la preferencia del sistema (prefers-color-scheme).
   Las fuentes se autoalojan: copiar la carpeta tipografias/ junto a este
   fichero (o ajustar las rutas de @font-face).
   ========================================================================== */

/* ---------- Tipografías (OFL, autoalojadas) ---------- */
@font-face { font-family: "Lexend"; src: url("../fuentes/Lexend-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fuentes/Lexend-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fuentes/Lexend-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fuentes/Lexend-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Cifras: los números se dibujan con Lexend (cero sin barra) dentro del texto en Atkinson Hyperlegible.
   Decisión de JLM (13/11/2026): no le gusta el cero barrado de Atkinson. */
@font-face { font-family: "Misifu Cifras"; src: url("../fuentes/Lexend-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Misifu Cifras"; src: url("../fuentes/Lexend-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }

:root {
  /* ---------- Marca (primarios) ---------- */
  --mf-tinta: #111613;          /* negro Rebellious con un punto de verde */
  --mf-lima: #89EA71;           /* lima Rebellious Words, exacto */
  --mf-crema: #FBF8F1;          /* papel */

  /* ---------- Secundarios ---------- */
  --mf-hoja: #185A31;           /* verde de acción sobre claro (AAA 8,25:1 en blanco) */
  --mf-hoja-hover: #0F4424;
  --mf-lima-claro: #E4F9DE;
  --mf-miel: #F4B840;           /* calidez; siempre con texto tinta */
  --mf-miel-oscuro: #7A4300;    /* texto cálido (AAA 7,98:1 en blanco) */
  --mf-arena: #F1EBDD;

  /* ---------- Neutros (gris cálido-verdoso) ---------- */
  --mf-n-900: #111613;
  --mf-n-800: #262C28;
  --mf-n-700: #3D4540;
  --mf-n-600: #4F5651;
  --mf-n-500: #646C66;          /* mínimo para texto secundario (AA 5,1:1 en crema) */
  --mf-n-400: #9AA19B;          /* solo bordes y elementos no textuales */
  --mf-n-300: #C9CEC9;
  --mf-n-200: #E3E6E1;
  --mf-n-100: #F2F3EF;
  --mf-blanco: #FFFFFF;

  /* ---------- Estados de colonia: interfaz (texto/icono + fondo) ---------- */
  --mf-activa: #0C5428;        --mf-activa-fondo: #E3F4E6;
  --mf-riesgo: #6E4000;        --mf-riesgo-fondo: #FFF0D1;
  --mf-incidencia: #8F1C16;    --mf-incidencia-fondo: #FDE6E3;
  --mf-esterilizada: #17457F;  --mf-esterilizada-fondo: #E2ECFA;
  --mf-pendiente: #5A3290;     --mf-pendiente-fondo: #EFE8F8;
  --mf-inactiva: #454C47;      --mf-inactiva-fondo: #ECEEEA;

  /* ---------- Estados de colonia: mapa (Okabe-Ito adaptada, apta para daltonismo) ----------
     Cada estado lleva además un signo propio dentro del pin: nunca solo color. */
  --mf-mapa-activa: #009E73;        --mf-mapa-activa-signo: #FFFFFF;
  --mf-mapa-riesgo: #F0E442;        --mf-mapa-riesgo-signo: #111613;
  --mf-mapa-incidencia: #D55E00;    --mf-mapa-incidencia-signo: #FFFFFF;
  --mf-mapa-esterilizada: #0072B2;  --mf-mapa-esterilizada-signo: #FFFFFF;
  --mf-mapa-pendiente: #CC79A7;     --mf-mapa-pendiente-signo: #111613;
  --mf-mapa-inactiva: #C4C7C4;      --mf-mapa-inactiva-signo: #111613;
  --mf-mapa-contorno: #111613;

  /* ---------- Roles semánticos (modo claro) ---------- */
  --mf-fondo: var(--mf-crema);
  --mf-superficie: var(--mf-blanco);
  --mf-superficie-2: var(--mf-arena);
  --mf-texto: var(--mf-tinta);
  --mf-texto-suave: var(--mf-n-600);
  --mf-borde: var(--mf-n-300);
  --mf-borde-fuerte: var(--mf-n-500);
  --mf-enlace: var(--mf-hoja);
  --mf-accion: var(--mf-hoja);
  --mf-accion-texto: var(--mf-blanco);
  --mf-accion-hover: var(--mf-hoja-hover);
  --mf-acento: var(--mf-lima);
  --mf-acento-texto: var(--mf-tinta);
  --mf-foco: var(--mf-tinta);          /* anillo de foco: tinta + halo lima */
  --mf-foco-halo: var(--mf-lima);
  --mf-subrayado: var(--mf-lima);      /* la barra lima de Rebellious */

  /* ---------- Tipografía ---------- */
  --mf-fuente-titular: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mf-fuente-texto: "Misifu Cifras", "Atkinson Hyperlegible", "Lexend", system-ui, sans-serif;
  --mf-fuente-datos: "Misifu Cifras", "Atkinson Hyperlegible", system-ui, sans-serif; /* cifras tabulares en tablas */

  /* Escala 1,25 sobre 18 px (lectura fácil: el texto corrido nunca baja de 18 px) */
  --mf-t-xs: 0.875rem;   /* 14 px · solo etiquetas cortas, nunca párrafos */
  --mf-t-s: 1rem;        /* 16 px · interfaz densa del panel */
  --mf-t-m: 1.125rem;    /* 18 px · texto base */
  --mf-t-l: 1.375rem;    /* 22 px */
  --mf-t-xl: 1.75rem;    /* 28 px · h3 */
  --mf-t-2xl: 2.25rem;   /* 36 px · h2 */
  --mf-t-3xl: 3rem;      /* 48 px · h1 */
  --mf-t-4xl: 4rem;      /* 64 px · portada */

  --mf-peso-texto: 400;
  --mf-peso-negrita: 700;
  --mf-peso-titular: 600;
  --mf-interlinea-texto: 1.6;
  --mf-interlinea-titular: 1.15;
  --mf-tracking-titular: -0.01em;
  --mf-medida: 66ch;     /* ancho máximo de línea */

  /* ---------- Espacio (base 4) ---------- */
  --mf-e-1: 4px;  --mf-e-2: 8px;  --mf-e-3: 12px; --mf-e-4: 16px;
  --mf-e-5: 24px; --mf-e-6: 32px; --mf-e-7: 48px; --mf-e-8: 64px; --mf-e-9: 96px;

  /* ---------- Radios ---------- */
  --mf-r-s: 6px;      /* chips, campos */
  --mf-r-m: 12px;     /* botones, tarjetas */
  --mf-r-l: 20px;     /* paneles, modales */
  --mf-r-pill: 999px;

  /* ---------- Sombras (suaves, tono tinta) ---------- */
  --mf-sombra-1: 0 1px 2px rgba(17, 22, 19, .08), 0 1px 1px rgba(17, 22, 19, .04);
  --mf-sombra-2: 0 4px 12px rgba(17, 22, 19, .08), 0 2px 4px rgba(17, 22, 19, .05);
  --mf-sombra-3: 0 16px 40px rgba(17, 22, 19, .12), 0 4px 10px rgba(17, 22, 19, .06);
  --mf-sombra-pin: 0 2px 0 rgba(17, 22, 19, .25);

  /* ---------- Controles ---------- */
  --mf-control-alto: 48px;   /* objetivo táctil mínimo, cómodo en la calle */
  --mf-borde-ancho: 2px;
  --mf-pictograma-trazo: 2px; /* en rejilla de 24 */

  color-scheme: light;
}

/* ---------- Modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --mf-fondo: #0E1210;
    --mf-superficie: #171C19;
    --mf-superficie-2: #1F2622;
    --mf-texto: #F3F1EA;
    --mf-texto-suave: #B9BFB9;
    --mf-borde: #39413C;
    --mf-borde-fuerte: #6B746E;
    --mf-enlace: #89EA71;
    --mf-accion: #89EA71;
    --mf-accion-texto: #111613;
    --mf-accion-hover: #A6F092;
    --mf-foco: #F3F1EA;
    --mf-foco-halo: #89EA71;

    --mf-activa: #7BD88F;        --mf-activa-fondo: #163322;
    --mf-riesgo: #F4B840;        --mf-riesgo-fondo: #3A2A0C;
    --mf-incidencia: #FF9A90;    --mf-incidencia-fondo: #3D1714;
    --mf-esterilizada: #8AB8F5;  --mf-esterilizada-fondo: #13243D;
    --mf-pendiente: #C9A8F2;     --mf-pendiente-fondo: #2A1D3D;
    --mf-inactiva: #BCC3BD;      --mf-inactiva-fondo: #262C28;

    --mf-mapa-contorno: #F3F1EA;
    --mf-sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --mf-sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
    --mf-sombra-3: 0 16px 40px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="oscuro"] {
  --mf-fondo: #0E1210;
  --mf-superficie: #171C19;
  --mf-superficie-2: #1F2622;
  --mf-texto: #F3F1EA;
  --mf-texto-suave: #B9BFB9;
  --mf-borde: #39413C;
  --mf-borde-fuerte: #6B746E;
  --mf-enlace: #89EA71;
  --mf-accion: #89EA71;
  --mf-accion-texto: #111613;
  --mf-accion-hover: #A6F092;
  --mf-foco: #F3F1EA;
  --mf-foco-halo: #89EA71;

  --mf-activa: #7BD88F;        --mf-activa-fondo: #163322;
  --mf-riesgo: #F4B840;        --mf-riesgo-fondo: #3A2A0C;
  --mf-incidencia: #FF9A90;    --mf-incidencia-fondo: #3D1714;
  --mf-esterilizada: #8AB8F5;  --mf-esterilizada-fondo: #13243D;
  --mf-pendiente: #C9A8F2;     --mf-pendiente-fondo: #2A1D3D;
  --mf-inactiva: #BCC3BD;      --mf-inactiva-fondo: #262C28;

  --mf-mapa-contorno: #F3F1EA;
  --mf-sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --mf-sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
  --mf-sombra-3: 0 16px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- Base mínima opcional (lectura fácil) ---------- */
.mf-base {
  background: var(--mf-fondo);
  color: var(--mf-texto);
  font-family: var(--mf-fuente-texto);
  font-size: var(--mf-t-m);
  line-height: var(--mf-interlinea-texto);
}
.mf-base h1, .mf-base h2, .mf-base h3 {
  font-family: var(--mf-fuente-titular);
  font-weight: var(--mf-peso-titular);
  line-height: var(--mf-interlinea-titular);
  letter-spacing: var(--mf-tracking-titular);
}
.mf-base p, .mf-base li { max-width: var(--mf-medida); }
.mf-base em, .mf-base i { font-style: normal; font-weight: var(--mf-peso-negrita); } /* sin cursivas */
.mf-base a { color: var(--mf-enlace); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.mf-base :focus-visible { outline: 3px solid var(--mf-foco); outline-offset: 2px; box-shadow: 0 0 0 7px var(--mf-foco-halo); }
@media (prefers-reduced-motion: reduce) { .mf-base * { animation: none !important; transition: none !important; } }

/* ---------- Panel de gestión (añadido 13/11/2026): bordes finos, superficies y campos ---------- */
:root {
  --mf-p-borde: #E3E6E1;             /* separadores y contornos de tarjetas */
  --mf-p-borde-fuerte: #C9CEC9;
  --mf-p-campo-borde: #868D87;       /* contorno de campos: 3,4:1 sobre blanco (WCAG 1.4.11) */
  --mf-p-hover: #F6F7F3;             /* fila o elemento bajo el puntero */
  --mf-p-cabecera: #F8F8F4;          /* cabecera de tablas */
  --mf-p-sutil: #F2F3EF;             /* fondos de iconos, pistas, segmentos */
  --mf-p-sombra: 0 1px 2px rgba(17, 22, 19, .05), 0 1px 1px rgba(17, 22, 19, .03);
  --mf-p-sombra-hover: 0 6px 18px rgba(17, 22, 19, .08), 0 2px 4px rgba(17, 22, 19, .04);
  --mf-p-halo: 0 0 0 4px rgba(137, 234, 113, .45);
  --mf-p-radio: 14px;                /* tarjetas */
  --mf-p-radio-control: 10px;        /* botones y campos */
  --mf-p-control: 44px;              /* alto de botones y campos en el panel */
  --mf-p-lateral: 264px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --mf-p-borde: #29302C; --mf-p-borde-fuerte: #39413C; --mf-p-campo-borde: #6B746E;
    --mf-p-hover: #1C2320; --mf-p-cabecera: #1A201D; --mf-p-sutil: #222924;
    --mf-p-sombra: 0 1px 2px rgba(0, 0, 0, .35); --mf-p-sombra-hover: 0 6px 18px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="oscuro"] {
  --mf-p-borde: #29302C; --mf-p-borde-fuerte: #39413C; --mf-p-campo-borde: #6B746E;
  --mf-p-hover: #1C2320; --mf-p-cabecera: #1A201D; --mf-p-sutil: #222924;
  --mf-p-sombra: 0 1px 2px rgba(0, 0, 0, .35); --mf-p-sombra-hover: 0 6px 18px rgba(0, 0, 0, .45);
}