/* ==========================================================================
   CEPC · Panel de Control
   tokens.css — Variables de diseño: color, tipografía, espacio, sombras.

   La paleta nace del azul del logo (#02379F). En modo oscuro se usa una
   versión más luminosa del mismo azul para que cumpla contraste AA.

   Regla de formas (mantenerla al agregar componentes nuevos):
     · botones e inputs .......... radio 10px
     · tarjetas y paneles ........ radio 16px
     · chips, etiquetas, avatares. radio completo (píldora / círculo)
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --marca-logo: #02379f;          /* azul exacto del logo */
  --marca-900: #011f5e;
  --marca-800: #012a7d;
  --marca-700: #02379f;
  --marca-600: #0b47bd;
  --marca-500: #2360dd;
  --marca-400: #4d7df0;
  --marca-300: #7da0f7;
  --marca-200: #aec6fb;
  --marca-100: #d9e4fe;
  --marca-50:  #eff4ff;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --t-xs:   0.7188rem;   /* 11.5px */
  --t-sm:   0.8125rem;   /* 13px   */
  --t-base: 0.9063rem;   /* 14.5px */
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  2.875rem;

  /* --- Espaciado -------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;

  /* --- Radios ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v-rapida: 140ms;
  --v-media: 240ms;
  --v-lenta: 420ms;

  /* --- Estructura ------------------------------------------------------- */
  --lateral-ancho: 254px;
  --superior-alto: 70px;
  --contenido-max: 1560px;
}

/* ==========================================================================
   MODO OSCURO (por defecto)
   ========================================================================== */

:root,
:root[data-tema='oscuro'] {
  color-scheme: dark;

  --fondo:        #070c18;
  --fondo-2:      #0a1122;
  --superficie:   #0f1930;
  --superficie-2: #14203a;
  --superficie-3: #1a2947;
  --superficie-hover: #1b2a49;

  --borde:        rgba(146, 172, 219, 0.13);
  --borde-fuerte: rgba(146, 172, 219, 0.26);
  --borde-marca:  rgba(77, 125, 240, 0.42);

  --texto:    #e9eefb;
  --texto-2:  #a3b1cd;
  --texto-3:  #6d7c9c;
  --texto-inv: #061027;

  --marca:        #5182f2;
  --marca-hover:  #6b96f6;
  --marca-tenue:  rgba(81, 130, 242, 0.15);
  --marca-tenue-2: rgba(81, 130, 242, 0.26);
  --marca-texto:  #a8c3fb;

  --sombra-sm: 0 1px 2px rgba(2, 8, 24, 0.5);
  --sombra-md: 0 6px 18px -6px rgba(2, 8, 24, 0.68);
  --sombra-lg: 0 22px 48px -18px rgba(2, 8, 24, 0.82);
  --sombra-marca: 0 10px 28px -12px rgba(35, 96, 221, 0.6);

  --malla-1: rgba(35, 96, 221, 0.18);
  --malla-2: rgba(109, 80, 214, 0.12);
  --rejilla: rgba(146, 172, 219, 0.055);

  /* Tonos de etiqueta: fondo / texto / borde / sólido */
  --tono-azul-f:  rgba(59, 118, 233, 0.16);
  --tono-azul-t:  #92b6fb;
  --tono-azul-s:  #4d84ef;

  --tono-indigo-f: rgba(110, 108, 240, 0.16);
  --tono-indigo-t: #aaa6fb;
  --tono-indigo-s: #7b78f0;

  --tono-cielo-f: rgba(43, 165, 226, 0.16);
  --tono-cielo-t: #86cdf3;
  --tono-cielo-s: #3ba9e3;

  --tono-turquesa-f: rgba(28, 172, 172, 0.16);
  --tono-turquesa-t: #74d6d2;
  --tono-turquesa-s: #29b3ad;

  --tono-verde-f: rgba(33, 168, 118, 0.16);
  --tono-verde-t: #76d6ae;
  --tono-verde-s: #2eb47f;

  --tono-lima-f: rgba(126, 172, 42, 0.16);
  --tono-lima-t: #bcd97f;
  --tono-lima-s: #8cb93b;

  --tono-ambar-f: rgba(214, 156, 32, 0.17);
  --tono-ambar-t: #efc873;
  --tono-ambar-s: #dda52f;

  --tono-naranja-f: rgba(224, 128, 48, 0.17);
  --tono-naranja-t: #f3b183;
  --tono-naranja-s: #e58a3a;

  --tono-violeta-f: rgba(150, 98, 224, 0.17);
  --tono-violeta-t: #c4a3f7;
  --tono-violeta-s: #a173ea;

  --tono-rosa-f: rgba(219, 94, 134, 0.17);
  --tono-rosa-t: #f2a2bb;
  --tono-rosa-s: #e06d92;

  --tono-gris-f: rgba(146, 172, 219, 0.11);
  --tono-gris-t: #a3b1cd;
  --tono-gris-s: #7c8cab;
}

/* ==========================================================================
   MODO CLARO
   ========================================================================== */

:root[data-tema='claro'] {
  color-scheme: light;

  --fondo:        #f2f5fb;
  --fondo-2:      #e9eff8;
  --superficie:   #ffffff;
  --superficie-2: #f7f9fd;
  --superficie-3: #eef3fb;
  --superficie-hover: #eaf0fb;

  --borde:        rgba(10, 33, 82, 0.11);
  --borde-fuerte: rgba(10, 33, 82, 0.2);
  --borde-marca:  rgba(2, 55, 159, 0.34);

  --texto:    #0b1730;
  --texto-2:  #48566f;
  --texto-3:  #737f97;
  --texto-inv: #ffffff;

  --marca:        #02379f;
  --marca-hover:  #0b47bd;
  --marca-tenue:  rgba(2, 55, 159, 0.08);
  --marca-tenue-2: rgba(2, 55, 159, 0.15);
  --marca-texto:  #023190;

  --sombra-sm: 0 1px 2px rgba(11, 28, 66, 0.07);
  --sombra-md: 0 6px 20px -8px rgba(11, 28, 66, 0.16);
  --sombra-lg: 0 24px 50px -20px rgba(11, 28, 66, 0.26);
  --sombra-marca: 0 10px 26px -12px rgba(2, 55, 159, 0.4);

  --malla-1: rgba(2, 55, 159, 0.08);
  --malla-2: rgba(110, 80, 200, 0.06);
  --rejilla: rgba(10, 33, 82, 0.045);

  --tono-azul-f:  rgba(2, 55, 159, 0.1);
  --tono-azul-t:  #013a9e;
  --tono-azul-s:  #1b5ed0;

  --tono-indigo-f: rgba(78, 74, 196, 0.1);
  --tono-indigo-t: #423cb0;
  --tono-indigo-s: #5b56cf;

  --tono-cielo-f: rgba(10, 116, 168, 0.1);
  --tono-cielo-t: #0a6b9c;
  --tono-cielo-s: #1b8fc4;

  --tono-turquesa-f: rgba(9, 124, 121, 0.1);
  --tono-turquesa-t: #0a6f6c;
  --tono-turquesa-s: #0f8f8b;

  --tono-verde-f: rgba(14, 122, 82, 0.1);
  --tono-verde-t: #0c6a47;
  --tono-verde-s: #138f60;

  --tono-lima-f: rgba(85, 117, 20, 0.1);
  --tono-lima-t: #4f6a13;
  --tono-lima-s: #6b8d1e;

  --tono-ambar-f: rgba(160, 108, 5, 0.12);
  --tono-ambar-t: #8a5c04;
  --tono-ambar-s: #bb7f0a;

  --tono-naranja-f: rgba(178, 87, 15, 0.12);
  --tono-naranja-t: #98490c;
  --tono-naranja-s: #c4671a;

  --tono-violeta-f: rgba(112, 60, 178, 0.1);
  --tono-violeta-t: #63339f;
  --tono-violeta-s: #7f4bc4;

  --tono-rosa-f: rgba(176, 45, 91, 0.1);
  --tono-rosa-t: #99274e;
  --tono-rosa-s: #c14172;

  --tono-gris-f: rgba(10, 33, 82, 0.07);
  --tono-gris-t: #4b5871;
  --tono-gris-s: #6b7792;
}

/* ==========================================================================
   Preferencias del sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}