/* =========================================================================
   MILLENIUM DESIGN SYSTEM — Tokens compartidos
   -------------------------------------------------------------------------
   Fuente unica de verdad de color, tipografia, radios, sombras y espaciado
   para TODAS las superficies del Hub:
     · Panel Operativo   (index.html   + dashboard.css)
     · Super Admin       (admin.html   + admin.css)
     · Supervisor Panel  (supervisor/  + supervisor/css/style.css)
     · WebPhone WebRTC   (webphone/)

   Direccion de diseno (decidida con el usuario, 2026-08-19):
     · Minimalista, bajo cansancio visual, denso en informacion pero calmado.
     · Rojo de marca (tomado del logo) SOLO como acento: item activo, boton
       primario, indicadores. Nunca como fondo de superficies grandes.
     · Tema CLARO por defecto.

   Revision 2026-09-04 — armonizacion con el sistema de diseno MillGuard, para
   que los dos productos de Computadoras Millenium se lean como hermanos:
     · Tipografia Outfit + JetBrains Mono (antes: pila del sistema).
     · Barra superior de 54px con mega-menu, en vidrio esmerilado, en lugar
       del drawer lateral en carbon. Por eso el "esquema dual" ya no aplica al
       Panel Operativo; los tokens --nav-* siguen definidos porque Super Admin
       y Supervisor Panel aun los consumen.
     · Curvas de movimiento con sobrepaso (--ease-bounce) en lo que responde
       al cursor, y resplandor del propio color en vez de sombra negra.
     · Lo que NO se copia de MillGuard: su azul de accion. El acento sigue
       siendo el carmesi del logo Millenium (decision del usuario, 2026-09-04).

   Reglas para quien edite esto:
     1. Ningun color literal fuera de este archivo. Si hace falta uno nuevo,
        se agrega aqui como token y se consume con var().
     2. Los tokens "legacy" del final existen para que las hojas de estilo
        previas sigan funcionando sin reescribirse por completo. No agregar
        mas; migrar a los semanticos cuando se toque una regla.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PALETA DE MARCA — derivada del logo Millenium (carmesi)
   ------------------------------------------------------------------------- */
:root {
  /* #be3046 es el rojo de la marca tal como ya estaba vectorizado en el logo
     del Supervisor Panel; se toma como valor canonico y de ahi se deriva la
     escala. Es un carmesi ligeramente apagado, lo que ayuda al objetivo de
     bajo cansancio visual frente a un rojo puro. */
  --brand-50:  #fdf2f4;
  --brand-100: #fbe3e7;
  --brand-200: #f5c7ce;
  --brand-300: #eb9ba9;
  --brand-400: #d9647a;
  --brand-500: #be3046;  /* color nucleo del logo */
  --brand-600: #a5253a;
  --brand-700: #871d2f;
  --brand-800: #6a1725;
  --brand-900: #4b101a;

  /* Variante clara del rojo, legible sobre fondos oscuros */
  --brand-on-dark: #f27a8c;

  /* Verde oficial de WhatsApp. Es un color de DOMINIO, no del sistema: solo
     identifica a ese canal (burbuja saliente, contador de no leidos, boton de
     enviar) igual que el logo. No usarlo para nada mas -- para "sano" o "todo
     bien" el token es --success, que si cambia con el tema. */
  --wa-green: #25d366;
}

/* -------------------------------------------------------------------------
   2. TIPOGRAFIA — Outfit + JetBrains Mono (alineada con MillGuard)
   -------------------------------------------------------------------------
   Misma declaracion que usa el panel MillGuard, para que los dos productos
   se lean con la misma letra: primero la pila nativa de Apple (donde SF Pro
   ya es lo correcto), y Outfit como refuerzo. En Windows y Linux, donde
   -apple-system y SF Pro no resuelven, quien gana es Outfit.

   Las familias se cargan desde Google Fonts en el <head> de cada pagina. Si
   la red las bloquea, la pila cae sola a Segoe UI / Roboto y todo sigue
   legible: nada depende de que la fuente exista.
   ------------------------------------------------------------------------- */
:root {
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Outfit",
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;

  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Outfit",
    "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  --font-mono:
    "JetBrains Mono", ui-monospace, "Cascadia Mono", "Cascadia Code",
    "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Escala tipografica: pasos pequenos, pensada para densidad de datos */
  --fs-2xs:  0.6875rem;  /* 11px — etiquetas de tabla, micro-badges */
  --fs-xs:   0.75rem;    /* 12px — metadatos, subtitulos */
  --fs-sm:   0.8125rem;  /* 13px — texto de apoyo, celdas densas */
  --fs-base: 0.875rem;   /* 14px — cuerpo por defecto del panel */
  --fs-md:   0.9375rem;  /* 15px — inputs, texto de lectura */
  --fs-lg:   1.0625rem;  /* 17px — titulos de tarjeta */
  --fs-xl:   1.25rem;    /* 20px — titulos de seccion */
  --fs-2xl:  1.75rem;    /* 28px — cifras KPI */
  --fs-3xl:  2.25rem;    /* 36px — cifras KPI destacadas */

  --lh-tight: 1.25;
  --lh-base:  1.55;

  /* Interletrado: negativo en titulos grandes, positivo en versalitas */
  --ls-tight: -0.015em;
  --ls-wide:   0.06em;
}

/* -------------------------------------------------------------------------
   3. GEOMETRIA, ELEVACION Y MOVIMIENTO
   ------------------------------------------------------------------------- */
:root {
  /* Radios por jerarquia, iguales a MillGuard: paneles 16, controles 10,
     elementos pequenos 6. */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Espaciado en pasos de 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  --sidebar-width: 268px;
  --header-height: 54px;   /* mismo alto que la barra de MillGuard */
  /* Alto minimo del mega-menu: cambiar de un menu de 2 items a otro de 3 no
     debe mover el diseno. Medido contra el menu mas alto que existe hoy
     (Operacion: columna CallBack con 3 items). */
  --mega-min-height: 190px;
  --content-max:  1680px;

  /* -----------------------------------------------------------------------
     MOVIMIENTO — tres curvas, cada una con su papel (convencion MillGuard).
     Usar siempre las mismas es lo que hace que dos productos distintos se
     sientan hechos por la misma mano. Regla dura: nada por encima de 300ms.
     ----------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-bounce: 220ms;   /* respuesta al cursor */
  --dur-panel: 220ms;    /* apertura del mega-menu */
  --dur-modal: 300ms;    /* entrada de ventanas modales */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* El 1.56 es el sobrepaso: la firma tactil del sistema. Solo en elementos
     pequenos que responden al dedo o al cursor -- un panel grande que rebota
     se siente inestable. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-panel:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-modal:  cubic-bezier(0.16, 1, 0.3, 1);

  --transition: all var(--dur-base) var(--ease);
  --transition-bounce: all var(--dur-bounce) var(--ease-bounce);
}

/* -------------------------------------------------------------------------
   3.1 ESCALA GRANDE — pantallas anchas
   -------------------------------------------------------------------------
   El sistema se diseno "denso en informacion" (ver cabecera del archivo),
   pensado para no perder densidad en una laptop chica. En un monitor ancho
   (>=1600px) ese mismo criterio se siente al reves: letra chica flotando en
   demasiado espacio vacio (feedback directo del usuario, 2026-09-08).

   Un solo `font-size` en `html` escala TODO lo que ya esta en `rem` --
   que es practicamente cada `--fs-*` y `--sp-*` de este archivo, y con ellos
   cada regla de dashboard.css/admin.css que los consume -- sin tener que
   tocar componente por componente. Los paneles standalone con `<style>`
   inline (Call Center, PBX Control, VPN) usan `px` sueltos y no escalan con
   esto; quedan para una pasada aparte si hace falta.
   ------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  html { font-size: 17px; }
  :root {
    --content-max: 1840px;
    --header-height: 58px;
  }
}

@media (min-width: 1920px) {
  html { font-size: 18px; }
  :root {
    --content-max: 2040px;
    --header-height: 60px;
  }
}

/* -------------------------------------------------------------------------
   4. TEMA CLARO (por defecto)
   ------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Superficies — grises neutros con un matiz calido minimo, para que el
     rojo de marca no choque y para evitar el blanco puro (deslumbra). */
  --canvas:         #f6f6f7;
  --surface:        #ffffff;
  --surface-2:      #f1f1f3;
  --surface-3:      #e9e9ec;
  --surface-hover:  #fafafb;
  --surface-inset:  #f4f4f6;

  --border:         #e3e3e7;
  --border-strong:  #d2d2d8;
  --border-subtle:  #eeeef1;

  --text:           #1a1a1f;
  --text-2:         #55555f;
  --text-3:         #8a8a94;
  --text-inverse:   #ffffff;

  --brand:          var(--brand-500);
  --brand-hover:    var(--brand-600);
  --brand-active:   var(--brand-700);
  --brand-soft:     var(--brand-50);
  --brand-contrast: #ffffff;

  /* Semanticos — versiones apagadas: legibles sin vibrar sobre blanco */
  --success:      #157f4a;
  --success-soft: #e8f5ee;
  --warning:      #a35c06;
  --warning-soft: #fdf2e3;
  --danger:       #c01c28;
  --danger-soft:  #fdecee;
  --info:         #1a5fb4;
  --info-soft:    #e9f0fb;

  /* Paleta categorica para iconos y graficos (baja saturacion) */
  --cat-1: #be3046;  /* marca   */
  --cat-2: #1a5fb4;  /* azul    */
  --cat-3: #157f4a;  /* verde   */
  --cat-4: #a35c06;  /* ambar   */
  --cat-5: #6b3fa0;  /* violeta */
  --cat-6: #0e7490;  /* cian    */

  /* Sombras: casi imperceptibles. La jerarquia la da el borde, no la sombra */
  --shadow-xs: 0 1px 2px rgba(20, 20, 26, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 20, 26, 0.06), 0 1px 2px rgba(20, 20, 26, 0.03);
  --shadow-md: 0 4px 12px rgba(20, 20, 26, 0.07), 0 1px 3px rgba(20, 20, 26, 0.04);
  --shadow-lg: 0 14px 34px rgba(20, 20, 26, 0.11), 0 4px 10px rgba(20, 20, 26, 0.05);

  --overlay: rgba(20, 20, 26, 0.42);

  /* Vidrio esmerilado — barra superior y mega-menu. La separacion la da la
     transparencia, no una linea dura: lo que esta encima se nota porque el
     fondo se difumina detras. */
  --glass:        rgba(255, 255, 255, 0.85);
  --glass-deep:   rgba(255, 255, 255, 0.92);
  --glass-hover:  rgba(0, 0, 0, 0.045);
  --glass-border: rgba(0, 0, 0, 0.09);
  --mega-shadow:  0 24px 48px rgba(20, 20, 26, 0.16);

  /* Resplandores: cada boton de accion lleva la sombra de su propio color,
     nunca una sombra negra dura. */
  --brand-glow:   rgba(190, 48, 70, 0.25);
  --success-glow: rgba(21, 127, 74, 0.22);
  --danger-glow:  rgba(192, 28, 40, 0.22);
  --warning-glow: rgba(163, 92, 6, 0.22);
  --info-glow:    rgba(26, 95, 180, 0.22);

  /* Datos tecnicos en monoespaciada: un color fijo por TIPO de dato, igual en
     toda la aplicacion, para que el ojo salte directo a lo que busca. */
  --data-phone: #a35c06;  /* numeros de telefono / extensiones */
  --data-net:   #1a5fb4;  /* IP, host, puerto */
  --data-id:    #6b3fa0;  /* codigos de central, tokens, identificadores */

  /* Barra lateral en carbon — constante en los 3 temas (esquema dual) */
  --nav-bg:          #1b1b21;
  --nav-bg-deep:     #141419;
  --nav-border:      rgba(255, 255, 255, 0.07);
  --nav-text:        #a3a3ad;
  --nav-text-strong: #ffffff;
  --nav-text-dim:    #6e6e78;
  --nav-hover-bg:    rgba(255, 255, 255, 0.055);
  --nav-active-bg:   rgba(190, 48, 70, 0.20);
  --nav-active-text: #ffffff;
  --nav-accent:      var(--brand-on-dark);

  --terminal-bg:   #16161b;
  --terminal-text: #d6d6de;
}

/* -------------------------------------------------------------------------
   5. TEMA OSCURO — carbon suave, nunca negro puro (reduce el halo del texto)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --canvas:         #121216;
  --surface:        #1a1a20;
  --surface-2:      #212128;
  --surface-3:      #292931;
  --surface-hover:  #24242c;
  --surface-inset:  #1e1e25;

  --border:         #2e2e37;
  --border-strong:  #3d3d48;
  --border-subtle:  #26262e;

  --text:           #f2f2f4;
  --text-2:         #a8a8b3;
  --text-3:         #74747f;
  --text-inverse:   #16161b;

  --brand:          var(--brand-on-dark);
  --brand-hover:    #f792a1;
  --brand-active:   #fbaab6;
  --brand-soft:     rgba(242, 122, 140, 0.14);
  --brand-contrast: #2b0810;

  --success:      #4ade80;
  --success-soft: rgba(74, 222, 128, 0.13);
  --warning:      #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.13);
  --danger:       #ff6b6b;
  --danger-soft:  rgba(255, 107, 107, 0.13);
  --info:         #60a5fa;
  --info-soft:    rgba(96, 165, 250, 0.13);

  --cat-1: #f27a8c;
  --cat-2: #60a5fa;
  --cat-3: #4ade80;
  --cat-4: #fbbf24;
  --cat-5: #a78bfa;
  --cat-6: #22d3ee;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.34);

  --overlay: rgba(0, 0, 0, 0.62);

  --glass:        rgba(26, 26, 32, 0.82);
  --glass-deep:   rgba(18, 18, 22, 0.9);
  --glass-hover:  rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.1);
  --mega-shadow:  0 24px 48px rgba(0, 0, 0, 0.55);

  --brand-glow:   rgba(242, 122, 140, 0.28);
  --success-glow: rgba(74, 222, 128, 0.25);
  --danger-glow:  rgba(255, 107, 107, 0.25);
  --warning-glow: rgba(251, 191, 36, 0.25);
  --info-glow:    rgba(96, 165, 250, 0.25);

  --data-phone: #fbbf24;
  --data-net:   #60a5fa;
  --data-id:    #a78bfa;

  --nav-bg:          #0e0e12;
  --nav-bg-deep:     #08080b;
  --nav-border:      rgba(255, 255, 255, 0.06);
  --nav-text:        #9a9aa5;
  --nav-text-strong: #ffffff;
  --nav-text-dim:    #62626c;
  --nav-hover-bg:    rgba(255, 255, 255, 0.05);
  --nav-active-bg:   rgba(242, 122, 140, 0.16);
  --nav-active-text: #ffffff;
  --nav-accent:      var(--brand-on-dark);

  --terminal-bg:   #0b0b0f;
  --terminal-text: #d6d6de;
}

/* -------------------------------------------------------------------------
   6. TEMA TOKYO — se conserva la identidad Tokyo Night, armonizada al sistema
   ------------------------------------------------------------------------- */
html[data-theme="tokyo"] {
  color-scheme: dark;

  --canvas:         #1a1b26;
  --surface:        #24283b;
  --surface-2:      #2a2e42;
  --surface-3:      #343a52;
  --surface-hover:  #2e3348;
  --surface-inset:  #1f2233;

  --border:         #353b53;
  --border-strong:  #454c69;
  --border-subtle:  #2c3145;

  --text:           #c8d3f5;
  --text-2:         #a0aad4;
  --text-3:         #737aa2;
  --text-inverse:   #1a1b26;

  --brand:          #f7768e;
  --brand-hover:    #ff8fa3;
  --brand-active:   #ffa6b6;
  --brand-soft:     rgba(247, 118, 142, 0.14);
  --brand-contrast: #1a1b26;

  --success:      #9ece6a;
  --success-soft: rgba(158, 206, 106, 0.14);
  --warning:      #e0af68;
  --warning-soft: rgba(224, 175, 104, 0.14);
  --danger:       #f7768e;
  --danger-soft:  rgba(247, 118, 142, 0.14);
  --info:         #7aa2f7;
  --info-soft:    rgba(122, 162, 247, 0.14);

  --cat-1: #f7768e;
  --cat-2: #7aa2f7;
  --cat-3: #9ece6a;
  --cat-4: #e0af68;
  --cat-5: #bb9af7;
  --cat-6: #7dcfff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.48), 0 4px 10px rgba(0, 0, 0, 0.32);

  --overlay: rgba(10, 11, 18, 0.66);

  --glass:        rgba(36, 40, 59, 0.84);
  --glass-deep:   rgba(26, 27, 38, 0.92);
  --glass-hover:  rgba(169, 177, 214, 0.08);
  --glass-border: rgba(169, 177, 214, 0.14);
  --mega-shadow:  0 24px 48px rgba(10, 11, 18, 0.6);

  --brand-glow:   rgba(247, 118, 142, 0.28);
  --success-glow: rgba(158, 206, 106, 0.25);
  --danger-glow:  rgba(247, 118, 142, 0.25);
  --warning-glow: rgba(224, 175, 104, 0.25);
  --info-glow:    rgba(122, 162, 247, 0.25);

  --data-phone: #e0af68;
  --data-net:   #7aa2f7;
  --data-id:    #bb9af7;

  --nav-bg:          #16161e;
  --nav-bg-deep:     #101017;
  --nav-border:      rgba(169, 177, 214, 0.1);
  --nav-text:        #9aa2c7;
  --nav-text-strong: #c8d3f5;
  --nav-text-dim:    #616a94;
  --nav-hover-bg:    rgba(169, 177, 214, 0.07);
  --nav-active-bg:   rgba(247, 118, 142, 0.15);
  --nav-active-text: #ffffff;
  --nav-accent:      #f7768e;

  --terminal-bg:   #16161e;
  --terminal-text: #c8d3f5;
}

/* -------------------------------------------------------------------------
   7. ANILLO DE FOCO — accesibilidad de teclado, coherente en todo el sistema
   ------------------------------------------------------------------------- */
:root {
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* -------------------------------------------------------------------------
   8. BASE COMPARTIDA
   ------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* Cifras siempre alineadas en columnas: KPIs, tablas, contadores, timers */
.metric-value, .metric-val, .msi-count, .kpi-value,
.custom-table td, .admin-table td, code, kbd, samp, pre,
.cb-card-phone, .badge-counter, .call-timer-box, .page-indicator {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Barras de scroll discretas — el scrollbar por defecto de Windows es pesado
   visualmente y compite con el contenido en paneles densos. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: content-box;
}

/* Respeta a quien pide menos movimiento en el sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   9. MARCA — logo Millenium
   ------------------------------------------------------------------------- */
.mille-mark {
  display: block;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.mille-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   10. ALIAS LEGACY
   -------------------------------------------------------------------------
   Los nombres que ya usaban dashboard.css / admin.css / supervisor. Se
   mapean a la paleta nueva para que cada regla existente adopte el sistema
   sin reescribirla una por una. NO agregar nombres nuevos aqui.
   ------------------------------------------------------------------------- */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="tokyo"] {
  --bg-primary:     var(--canvas);
  --bg-secondary:   var(--surface);
  --bg-nav:         var(--nav-bg);
  --bg-card:        var(--surface);
  --bg-card-hover:  var(--surface-hover);
  --bg-glass:       var(--surface);
  --bg-input:       var(--surface-2);
  --bg-header:      var(--surface);
  --bg-terminal:    var(--terminal-bg);

  --border-color:  var(--border);
  --border-focus:  var(--brand);
  --border-glow:   color-mix(in srgb, var(--brand) 30%, transparent);

  --text-primary:   var(--text);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);
  --text-on-nav:    var(--nav-text-strong);

  --accent-primary:   var(--brand);
  --accent-secondary: var(--cat-5);
  --accent-cyan:      var(--cat-6);
  --accent-emerald:   var(--cat-3);
  --accent-amber:     var(--cat-4);
  --accent-rose:      var(--cat-1);
  --accent-indigo:    var(--cat-2);
  --accent-gradient:  linear-gradient(135deg, var(--brand-hover) 0%, var(--brand) 100%);

  --cyan: var(--cat-6);
  --pink: var(--cat-1);

  --shadow-card:      var(--shadow-sm);
  --shadow-glow:      var(--shadow-md);
  --shadow-glow-cyan: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   11. COMPONENTE SELECTOR DE TEMA COMPARTIDO
   ------------------------------------------------------------------------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.theme-switch-btn {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  color: var(--text-3);
  transition: var(--transition);
}

.theme-switch-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.theme-switch-btn.is-active {
  background: var(--brand);
  color: var(--brand-contrast);
}

/* -------------------------------------------------------------------------
   12. ANIMACIONES E INTERACTIVIDAD (Keyframes y utilidades)
   ------------------------------------------------------------------------- */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-soft {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes icon-bounce {
  0% { transform: scale(1) rotate(0deg); }
  33% { transform: scale(1.15) rotate(8deg); }
  66% { transform: scale(1.15) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.anim-float { animation: float 3s ease-in-out infinite; }
.anim-pulse { animation: pulse-soft 2s ease-in-out infinite; }
.anim-slide-up { animation: slide-up-fade var(--dur-modal) var(--ease-modal) forwards; }
.anim-spin { animation: spin-slow 2s linear infinite; }