/* ═══════════════════════════════════════════════════════════
   CAC · Sistema de pieles visuales
   ───────────────────────────────────────────────────────────
   Cada html[data-skin="<id>"] redefine las variables que
   style.css y tactical-enhance.css consumen vía var(...).

   Estado actual:
   - 11 pieles definidas como variables.
   - El selector visible al usuario está pendiente de integrarse
     en el perfil (sistema de desbloqueos por progresión).
   - Mientras tanto, el atributo data-skin se fija siempre a
     'tactical' desde header.ejs, por lo que la web se ve
     idéntica al diseño original.

   Prueba manual:
     En la consola del navegador:
       document.documentElement.setAttribute('data-skin', 'winter');
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. MK1 STYLE (tactical · OD GREEN · default) ─────────── */
html[data-skin="tactical"] {
  --bg-base:       #0a0c0b;
  --bg-surface:    #111413;
  --bg-card:       #161a18;
  --bg-elevated:   #1c211e;
  --bg-hover:      #222824;

  --border-dim:    rgba(120, 140, 128, 0.12);
  --border-base:   rgba(120, 140, 128, 0.2);
  --border-accent: rgba(120, 140, 128, 0.35);

  --text-primary:   #e2e7e3;
  --text-secondary: #a8b5aa;
  --text-dim:       #6b7d6e;
  --text-bright:    #f0f4f1;

  --accent:         #6abf7b;
  --accent-bright:  #84d693;
  --accent-dim:     #3a7a47;
  --accent-muted:   rgba(106, 191, 123, 0.12);
  --accent-glow:    rgba(106, 191, 123, 0.06);

  --danger:  #d4534a; --warning: #d4a94a; --info: #4a9ad4;
  --danger-bg:  rgba(212,83,74,0.1);
  --warning-bg: rgba(212,169,74,0.1);
  --info-bg:    rgba(74,154,212,0.1);

  --grid-hue: 106, 191, 123;
  --scanline-alpha: 0.025;
}


/* ─── 2. DESERT OPS (tan · arena · caqui) ──────────────────── */
html[data-skin="desert"] {
  --bg-base:       #0e0b07;
  --bg-surface:    #17120b;
  --bg-card:       #1d1811;
  --bg-elevated:   #241e15;
  --bg-hover:      #2b241a;

  --border-dim:    rgba(198, 165, 115, 0.12);
  --border-base:   rgba(198, 165, 115, 0.22);
  --border-accent: rgba(198, 165, 115, 0.4);

  --text-primary:   #ebe0c9;
  --text-secondary: #c1b28f;
  --text-dim:       #8a7a5a;
  --text-bright:    #f6efd9;

  --accent:         #d4a55a;
  --accent-bright:  #eebd6f;
  --accent-dim:     #8a6a2e;
  --accent-muted:   rgba(212, 165, 90, 0.14);
  --accent-glow:    rgba(212, 165, 90, 0.08);

  --danger:  #d4534a; --warning: #e6b84a; --info: #6a8fb8;
  --danger-bg:  rgba(212,83,74,0.1);
  --warning-bg: rgba(230,184,74,0.1);
  --info-bg:    rgba(106,143,184,0.1);

  --grid-hue: 212, 165, 90;
  --scanline-alpha: 0.025;
}


/* ─── 3. WOODLAND (verde bosque + marrón tierra) ───────────── */
html[data-skin="woodland"] {
  --bg-base:       #0a0d08;
  --bg-surface:    #0f1410;
  --bg-card:       #131a14;
  --bg-elevated:   #182018;
  --bg-hover:      #1e2a1e;

  --border-dim:    rgba(140, 110, 70, 0.14);
  --border-base:   rgba(140, 110, 70, 0.25);
  --border-accent: rgba(140, 110, 70, 0.4);

  --text-primary:   #d8dcc8;
  --text-secondary: #9fa788;
  --text-dim:       #6a7255;
  --text-bright:    #e8ecd8;

  --accent:         #7c9b4a;
  --accent-bright:  #9cbc5e;
  --accent-dim:     #4c6a28;
  --accent-muted:   rgba(124, 155, 74, 0.14);
  --accent-glow:    rgba(124, 155, 74, 0.08);

  --danger:  #c04a3a; --warning: #c8883a; --info: #5a8ab8;
  --danger-bg:  rgba(192,74,58,0.1);
  --warning-bg: rgba(200,136,58,0.1);
  --info-bg:    rgba(90,138,184,0.1);

  --grid-hue: 124, 155, 74;
  --scanline-alpha: 0.025;
}


/* ─── 4. URBAN GREY (gris hormigón + naranja alerta) ───────── */
html[data-skin="urban"] {
  --bg-base:       #0d0d0e;
  --bg-surface:    #141516;
  --bg-card:       #1a1b1d;
  --bg-elevated:   #202224;
  --bg-hover:      #272a2c;

  --border-dim:    rgba(200, 200, 205, 0.10);
  --border-base:   rgba(200, 200, 205, 0.18);
  --border-accent: rgba(200, 200, 205, 0.32);

  --text-primary:   #e3e5e8;
  --text-secondary: #a8acb2;
  --text-dim:       #6a6e75;
  --text-bright:    #f4f6f9;

  --accent:         #ff7a2e;
  --accent-bright:  #ff9656;
  --accent-dim:     #b8521a;
  --accent-muted:   rgba(255, 122, 46, 0.12);
  --accent-glow:    rgba(255, 122, 46, 0.08);

  --danger:  #d4534a; --warning: #d4a94a; --info: #4a9ad4;
  --danger-bg:  rgba(212,83,74,0.1);
  --warning-bg: rgba(212,169,74,0.1);
  --info-bg:    rgba(74,154,212,0.1);

  --grid-hue: 200, 200, 205;
  --scanline-alpha: 0.03;
}


/* ─── 5. MULTICAM (paleta desaturada, crema/oliva/marrón) ──── */
html[data-skin="multicam"] {
  --bg-base:       #14110c;
  --bg-surface:    #1c1812;
  --bg-card:       #231e17;
  --bg-elevated:   #2a241c;
  --bg-hover:      #332b22;

  --border-dim:    rgba(170, 150, 115, 0.12);
  --border-base:   rgba(170, 150, 115, 0.22);
  --border-accent: rgba(170, 150, 115, 0.38);

  --text-primary:   #e0d6bf;
  --text-secondary: #b0a485;
  --text-dim:       #7a6f56;
  --text-bright:    #f0e7d0;

  --accent:         #9a8a5c;
  --accent-bright:  #b8a876;
  --accent-dim:     #5e5230;
  --accent-muted:   rgba(154, 138, 92, 0.16);
  --accent-glow:    rgba(154, 138, 92, 0.08);

  --danger:  #b84a3a; --warning: #c89a3a; --info: #6a8a9a;
  --danger-bg:  rgba(184,74,58,0.1);
  --warning-bg: rgba(200,154,58,0.1);
  --info-bg:    rgba(106,138,154,0.1);

  --grid-hue: 154, 138, 92;
  --scanline-alpha: 0.025;
}


/* ─── 6. WINTER OPS (blanco/gris hielo + cian) ─────────────── */
html[data-skin="winter"] {
  --bg-base:       #0a0e12;
  --bg-surface:    #12171c;
  --bg-card:       #181e24;
  --bg-elevated:   #1f262d;
  --bg-hover:      #263039;

  --border-dim:    rgba(180, 210, 230, 0.10);
  --border-base:   rgba(180, 210, 230, 0.20);
  --border-accent: rgba(180, 210, 230, 0.35);

  --text-primary:   #dce8f0;
  --text-secondary: #a4b4c0;
  --text-dim:       #6a7a88;
  --text-bright:    #eff6fb;

  --accent:         #7dd4e0;
  --accent-bright:  #a0eaf4;
  --accent-dim:     #3a8a96;
  --accent-muted:   rgba(125, 212, 224, 0.14);
  --accent-glow:    rgba(125, 212, 224, 0.08);

  --danger:  #e45a5a; --warning: #e6b85a; --info: #7dd4e0;
  --danger-bg:  rgba(228,90,90,0.1);
  --warning-bg: rgba(230,184,90,0.1);
  --info-bg:    rgba(125,212,224,0.1);

  --grid-hue: 125, 212, 224;
  --scanline-alpha: 0.02;
}


/* ─── 7. BLUE FORCE (C4I / OTAN BLUE) ──────────────────────── */
html[data-skin="blueforce"] {
  --bg-base:       #060a12;
  --bg-surface:    #0b121c;
  --bg-card:       #101a26;
  --bg-elevated:   #16222f;
  --bg-hover:      #1c2a3a;

  --border-dim:    rgba(110, 170, 230, 0.10);
  --border-base:   rgba(110, 170, 230, 0.20);
  --border-accent: rgba(110, 170, 230, 0.38);

  --text-primary:   #dde7f2;
  --text-secondary: #98aec6;
  --text-dim:       #5a7292;
  --text-bright:    #ecf3fb;

  --accent:         #4ea3ec;
  --accent-bright:  #7ac0f5;
  --accent-dim:     #2a6aa8;
  --accent-muted:   rgba(78, 163, 236, 0.14);
  --accent-glow:    rgba(78, 163, 236, 0.08);

  --danger:  #e45a5a; --warning: #e6b85a; --info: #4ea3ec;
  --danger-bg:  rgba(228,90,90,0.1);
  --warning-bg: rgba(230,184,90,0.1);
  --info-bg:    rgba(78,163,236,0.1);

  --grid-hue: 78, 163, 236;
  --scanline-alpha: 0.025;
}


/* ─── 8. NIGHT VISION (negro profundo · verde fósforo) ─────── */
html[data-skin="nightvision"] {
  --bg-base:       #000000;
  --bg-surface:    #020604;
  --bg-card:       #050c07;
  --bg-elevated:   #08140b;
  --bg-hover:      #0c1d10;

  --border-dim:    rgba(0, 255, 65, 0.12);
  --border-base:   rgba(0, 255, 65, 0.22);
  --border-accent: rgba(0, 255, 65, 0.4);

  --text-primary:   #baffc9;
  --text-secondary: #55cc70;
  --text-dim:       #2a7a3e;
  --text-bright:    #d0ffdc;

  --accent:         #00ff41;
  --accent-bright:  #6aff8a;
  --accent-dim:     #008822;
  --accent-muted:   rgba(0, 255, 65, 0.12);
  --accent-glow:    rgba(0, 255, 65, 0.12);

  --danger:  #ff5a5a; --warning: #ffd14a; --info: #5ad4ff;
  --danger-bg:  rgba(255,90,90,0.1);
  --warning-bg: rgba(255,209,74,0.1);
  --info-bg:    rgba(90,212,255,0.1);

  --grid-hue: 0, 255, 65;
  --scanline-alpha: 0.05;
}

/* Night Vision: resplandor fósforo extra en elementos destacados */
html[data-skin="nightvision"] .stat-number,
html[data-skin="nightvision"] .num-operador,
html[data-skin="nightvision"] .badge-op,
html[data-skin="nightvision"] .role-tag {
  text-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent-glow);
}


/* ─── 9. STEALTH BLACK (monocromo blanco sobre negro · OLED) ─ */
html[data-skin="stealth"] {
  --bg-base:       #000000;
  --bg-surface:    #070707;
  --bg-card:       #0d0d0d;
  --bg-elevated:   #141414;
  --bg-hover:      #1c1c1c;

  --border-dim:    rgba(255, 255, 255, 0.08);
  --border-base:   rgba(255, 255, 255, 0.18);
  --border-accent: rgba(255, 255, 255, 0.32);

  --text-primary:   #ededed;
  --text-secondary: #a8a8a8;
  --text-dim:       #6a6a6a;
  --text-bright:    #ffffff;

  --accent:         #ffffff;
  --accent-bright:  #ffffff;
  --accent-dim:     #6a6a6a;
  --accent-muted:   rgba(255, 255, 255, 0.06);
  --accent-glow:    rgba(255, 255, 255, 0.05);

  --danger:  #ff5a5a; --warning: #e6b85a; --info: #8fb8e0;
  --danger-bg:  rgba(255,90,90,0.08);
  --warning-bg: rgba(230,184,90,0.08);
  --info-bg:    rgba(143,184,224,0.08);

  --grid-hue: 255, 255, 255;
  --scanline-alpha: 0.04;
}

/* Stealth: role-tags conservan color semántico pero desaturados */
html[data-skin="stealth"] .role-tag {
  filter: saturate(0.55);
}


/* ─── 10. PRISM (multicolor flúor · rotación cromática por tarjeta) ──── */
/* Piel decorativa de alta intensidad cromática. A diferencia del resto,
   usa varios colores flúor simultáneamente:
     · Tarjetas: rotación rosa → cian → amarillo → verde lima → morado
       (cada tarjeta toma un color según su orden de aparición).
     · Rosa      → acento general (botones, enlaces)
     · Cian      → bordes y estructuras HUD
     · Amarillo  → números, estadísticas
     · Verde lima → role-tag socio
     · Arcoíris animado → titulares principales                          */
html[data-skin="prism"] {
  --bg-base:       #050008;
  --bg-surface:    #0c0318;
  --bg-card:       #140628;
  --bg-elevated:   #1c0a38;
  --bg-hover:      #261049;

  /* Bordes en cian flúor */
  --border-dim:    rgba(0, 229, 255, 0.14);
  --border-base:   rgba(0, 229, 255, 0.30);
  --border-accent: rgba(0, 229, 255, 0.55);

  --text-primary:   #f0f4ff;
  --text-secondary: #c6b8e8;
  --text-dim:       #7a6a9f;
  --text-bright:    #ffffff;

  /* Acento principal: rosa flúor */
  --accent:         #ff3fa4;
  --accent-bright:  #ff7dc4;
  --accent-dim:     #b8207a;
  --accent-muted:   rgba(255, 63, 164, 0.16);
  --accent-glow:    rgba(255, 63, 164, 0.35);

  /* Semánticos con intensidad flúor */
  --danger:  #ff2e5a; --warning: #ffee00; --info: #00e5ff;
  --danger-bg:  rgba(255,46,90,0.14);
  --warning-bg: rgba(255,238,0,0.12);
  --info-bg:    rgba(0,229,255,0.12);

  --grid-hue: 255, 63, 164;
  --scanline-alpha: 0.02;
}

/* Prism: rotación cromática en tarjetas según orden de aparición.
   Cada tarjeta hereda 1 de 5 colores flúor (rosa → cian → amarillo →
   verde lima → morado) tanto en el borde (box-shadow externo) como en
   un tinte muy sutil del fondo. La secuencia se repite en bucle. */
html[data-skin="prism"] .card,
html[data-skin="prism"] .tac-frame {
  /* Reset del box-shadow para que los :nth-child de abajo manden */
  box-shadow: none;
  position: relative;
}

/* Tarjeta 1, 6, 11 … → ROSA FLÚOR */
html[data-skin="prism"] .card:nth-child(5n+1),
html[data-skin="prism"] .tac-frame:nth-child(5n+1) {
  box-shadow:
    0 0 0 1px rgba(255, 63, 164, 0.45),
    0 0 22px rgba(255, 63, 164, 0.10);
  background-image: linear-gradient(
    180deg, rgba(255, 63, 164, 0.06), rgba(255, 63, 164, 0.02)
  );
}

/* Tarjeta 2, 7, 12 … → CIAN FLÚOR */
html[data-skin="prism"] .card:nth-child(5n+2),
html[data-skin="prism"] .tac-frame:nth-child(5n+2) {
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.45),
    0 0 22px rgba(0, 229, 255, 0.10);
  background-image: linear-gradient(
    180deg, rgba(0, 229, 255, 0.06), rgba(0, 229, 255, 0.02)
  );
}

/* Tarjeta 3, 8, 13 … → AMARILLO FLÚOR */
html[data-skin="prism"] .card:nth-child(5n+3),
html[data-skin="prism"] .tac-frame:nth-child(5n+3) {
  box-shadow:
    0 0 0 1px rgba(255, 238, 0, 0.40),
    0 0 22px rgba(255, 238, 0, 0.08);
  background-image: linear-gradient(
    180deg, rgba(255, 238, 0, 0.05), rgba(255, 238, 0, 0.015)
  );
}

/* Tarjeta 4, 9, 14 … → VERDE LIMA FLÚOR */
html[data-skin="prism"] .card:nth-child(5n+4),
html[data-skin="prism"] .tac-frame:nth-child(5n+4) {
  box-shadow:
    0 0 0 1px rgba(124, 255, 80, 0.42),
    0 0 22px rgba(124, 255, 80, 0.10);
  background-image: linear-gradient(
    180deg, rgba(124, 255, 80, 0.06), rgba(124, 255, 80, 0.02)
  );
}

/* Tarjeta 5, 10, 15 … → MORADO FLÚOR */
html[data-skin="prism"] .card:nth-child(5n+5),
html[data-skin="prism"] .tac-frame:nth-child(5n+5) {
  box-shadow:
    0 0 0 1px rgba(178, 102, 255, 0.45),
    0 0 22px rgba(178, 102, 255, 0.10);
  background-image: linear-gradient(
    180deg, rgba(178, 102, 255, 0.06), rgba(178, 102, 255, 0.02)
  );
}

/* Prism: estadísticas y números en amarillo flúor con glow */
html[data-skin="prism"] .stat-number,
html[data-skin="prism"] .num-operador {
  color: #ffee00;
  text-shadow:
    0 0 6px rgba(255, 238, 0, 0.6),
    0 0 14px rgba(255, 238, 0, 0.3);
}

/* Prism: role-tag socio en verde lima flúor (saltándose la paleta estándar
   solo para esta piel, manteniendo el resto de role-tags semánticos) */
html[data-skin="prism"] .role-tag.role-socio {
  background: rgba(124, 255, 80, 0.16);
  color: #adff5c;
  border-color: rgba(124, 255, 80, 0.45);
  text-shadow: 0 0 6px rgba(173, 255, 92, 0.5);
}
html[data-skin="prism"] .role-tag.role-directiva {
  text-shadow: 0 0 6px rgba(255, 46, 90, 0.6);
}
html[data-skin="prism"] .role-tag.role-aspirante {
  text-shadow: 0 0 6px rgba(255, 238, 0, 0.55);
}

/* Prism: botones principales con halo rosa al hover */
html[data-skin="prism"] .btn-primary {
  box-shadow: 0 0 10px var(--accent-glow);
}
html[data-skin="prism"] .btn-primary:hover {
  box-shadow:
    0 0 14px var(--accent-glow),
    0 0 28px rgba(255, 63, 164, 0.25);
}

/* Prism: titulares con degradado arcoíris animado */
@keyframes cac-prism-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

html[data-skin="prism"] .hero-cmd-headline,
html[data-skin="prism"] .hero-cmd-tagline,
html[data-skin="prism"] .badge-op {
  background: linear-gradient(
    90deg,
    #00e5ff, #ff3fa4, #ffee00, #adff5c, #a64dff, #00e5ff
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: cac-prism-shift 10s linear infinite;
}

/* Accesibilidad: respetar preferencia de animación reducida */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="prism"] .hero-cmd-headline,
  html[data-skin="prism"] .hero-cmd-tagline,
  html[data-skin="prism"] .badge-op {
    animation: none;
    background-position: 0% 50%;
  }
}


/* ─── 11. NEON TOKYO (magenta eléctrico minimalista) ────────── */
/* Piel minimalista de alto contraste. Fondo negro puro, texto
   blanco, un único acento magenta eléctrico. Sin gradientes, sin
   multicolor, sin animaciones: toda la personalidad viene del
   contraste y el halo del neón.                                 */
html[data-skin="neontokyo"] {
  --bg-base:       #000000;
  --bg-surface:    #070709;
  --bg-card:       #0d0d12;
  --bg-elevated:   #15151c;
  --bg-hover:      #1c1c24;

  --border-dim:    rgba(255, 0, 160, 0.10);
  --border-base:   rgba(255, 0, 160, 0.22);
  --border-accent: rgba(255, 0, 160, 0.45);

  --text-primary:   #f5f5f7;
  --text-secondary: #b8b8c4;
  --text-dim:       #707080;
  --text-bright:    #ffffff;

  --accent:         #ff0ea0;
  --accent-bright:  #ff4fc0;
  --accent-dim:     #a00060;
  --accent-muted:   rgba(255, 14, 160, 0.10);
  --accent-glow:    rgba(255, 14, 160, 0.35);

  --danger:  #ff3366; --warning: #ffaa2e; --info: #4a9ad4;
  --danger-bg:  rgba(255,51,102,0.10);
  --warning-bg: rgba(255,170,46,0.08);
  --info-bg:    rgba(74,154,212,0.08);

  --grid-hue: 255, 14, 160;
  --scanline-alpha: 0.03;
}

/* Neon Tokyo: halo magenta en bordes de tarjeta, sin tinte de fondo */
html[data-skin="neontokyo"] .card,
html[data-skin="neontokyo"] .tac-frame {
  box-shadow:
    0 0 0 1px rgba(255, 14, 160, 0.28),
    0 0 16px rgba(255, 14, 160, 0.08);
}

/* Neon Tokyo: botones principales con halo magenta discreto,
   intensificado al hover. Sin animación. */
html[data-skin="neontokyo"] .btn-primary {
  box-shadow: 0 0 8px rgba(255, 14, 160, 0.25);
}
html[data-skin="neontokyo"] .btn-primary:hover {
  box-shadow:
    0 0 14px rgba(255, 14, 160, 0.45),
    0 0 32px rgba(255, 14, 160, 0.20);
}

/* Neon Tokyo: el titular del banner lleva resplandor magenta puro,
   sin degradados ni movimiento */
html[data-skin="neontokyo"] .hero-cmd-headline,
html[data-skin="neontokyo"] .num-operador,
html[data-skin="neontokyo"] .stat-number {
  color: var(--accent);
  text-shadow:
    0 0 4px rgba(255, 14, 160, 0.7),
    0 0 12px rgba(255, 14, 160, 0.35);
}


/* ═══════════════════════════════════════════════════════════
   Fondo HUD + scanlines dinámicos por piel.
   Estas reglas sustituyen a las que antes vivían en
   tactical-enhance.css (body y body::after), para que cada
   piel pinte su propio color de rejilla y scanlines.
   ═══════════════════════════════════════════════════════════ */

html[data-skin] body {
  background-image:
    linear-gradient(to right, rgba(var(--grid-hue), 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--grid-hue), 0.022) 1px, transparent 1px),
    radial-gradient(ellipse at top, rgba(var(--grid-hue), 0.04) 0%, transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-attachment: fixed;
  background-color: var(--bg-base);
}

html[data-skin] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, var(--scanline-alpha)) 3px,
    rgba(0, 0, 0, var(--scanline-alpha)) 4px
  );
  z-index: 9998;
  mix-blend-mode: multiply;
}


/* ═══════════════════════════════════════════════════════════
   NUEVAS PIELES — Sistema de desbloqueo por progresión
   Añadidas en mayo 2026. 22 skins en total (19 + 3 metálicas)
   ═══════════════════════════════════════════════════════════ */


/* ─── RETRO (terminal fósforo · verde CRT) ─────────────────── */
html[data-skin="retro"] {
  --bg-base:       #000000;
  --bg-surface:    #010801;
  --bg-card:       #020d02;
  --bg-elevated:   #041204;
  --bg-hover:      #061806;

  --border-dim:    rgba(0, 200, 0, 0.15);
  --border-base:   rgba(0, 200, 0, 0.28);
  --border-accent: rgba(0, 200, 0, 0.50);

  --text-primary:   #00cc00;
  --text-secondary: #008800;
  --text-dim:       #004400;
  --text-bright:    #00ff00;

  --accent:         #00ff00;
  --accent-bright:  #66ff66;
  --accent-dim:     #007700;
  --accent-muted:   rgba(0, 255, 0, 0.10);
  --accent-glow:    rgba(0, 255, 0, 0.15);

  /* Alerta en amarillo — contrasta sobre fondo verde fósforo */
  --danger:  #ffdd00; --warning: #ff8800; --info: #00ccff;
  --danger-bg:  rgba(255,221,0,0.10);
  --warning-bg: rgba(255,136,0,0.10);
  --info-bg:    rgba(0,204,255,0.10);

  --grid-hue: 0, 200, 0;
  --scanline-alpha: 0.06;
}
html[data-skin="retro"] .nav-links > li > a.has-alert,
html[data-skin="retro"] .nav-links > li > a.has-alert.active,
html[data-skin="retro"] .nav-links .nav-parent.has-alert,
html[data-skin="retro"] .nav-links .nav-submenu a.has-alert,
html[data-skin="retro"] .nav-icons-row a.has-alert,
html[data-skin="retro"] .nav-icons-row a.has-alert span,
html[data-skin="retro"] #menu-toggle-btn.has-alert {
  color: #ffdd00 !important;
}


/* ─── SAND (mapa topográfico · papel militar) ───────────────── */
html[data-skin="sand"] {
  --bg-base:       #f5f0e0;
  --bg-surface:    #ede5cc;
  --bg-card:       #e8dfc5;
  --bg-elevated:   #e0d5b8;
  --bg-hover:      #d8ccaa;

  --border-dim:    rgba(90, 74, 42, 0.15);
  --border-base:   rgba(90, 74, 42, 0.28);
  --border-accent: rgba(90, 74, 42, 0.50);

  --text-primary:   #1a1208;
  --text-secondary: #4a3a20;
  --text-dim:       #8a7a5a;
  --text-bright:    #000000;

  --accent:         #5a4a2a;
  --accent-bright:  #3a2a0a;
  --accent-dim:     #8a7a5a;
  --accent-muted:   rgba(90, 74, 42, 0.12);
  --accent-glow:    rgba(90, 74, 42, 0.08);

  /* Alerta en rojo oscuro — contrasta bien sobre crema */
  --danger:  #aa1a0a; --warning: #8a5a00; --info: #1a4a8a;
  --danger-bg:  rgba(170,26,10,0.08);
  --warning-bg: rgba(138,90,0,0.08);
  --info-bg:    rgba(26,74,138,0.08);

  --grid-hue: 90, 74, 42;
  --scanline-alpha: 0.01;
}
html[data-skin="sand"] body {
  background-image:
    linear-gradient(to right, rgba(90,74,42,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,74,42,0.06) 1px, transparent 1px),
    radial-gradient(ellipse at top, rgba(90,74,42,0.04) 0%, transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-color: var(--bg-base);
}


/* ─── GLITCH (interferencia digital · purple-gray) ──────────── */
html[data-skin="glitch"] {
  --bg-base:       #06060a;
  --bg-surface:    #0c0c14;
  --bg-card:       #12121e;
  --bg-elevated:   #18182a;
  --bg-hover:      #1e1e34;

  --border-dim:    rgba(160, 140, 220, 0.12);
  --border-base:   rgba(160, 140, 220, 0.22);
  --border-accent: rgba(160, 140, 220, 0.40);

  --text-primary:   #d0d0f0;
  --text-secondary: #9090c0;
  --text-dim:       #505080;
  --text-bright:    #ffffff;

  --accent:         #a0a0e0;
  --accent-bright:  #c0c0ff;
  --accent-dim:     #606090;
  --accent-muted:   rgba(160, 140, 220, 0.12);
  --accent-glow:    rgba(160, 140, 220, 0.08);

  /* Alerta en cian — contrasta sobre purple-gray */
  --danger:  #00e5ff; --warning: #ffee00; --info: #ff80ab;
  --danger-bg:  rgba(0,229,255,0.10);
  --warning-bg: rgba(255,238,0,0.10);
  --info-bg:    rgba(255,128,171,0.10);

  --grid-hue: 160, 140, 220;
  --scanline-alpha: 0.035;
}
html[data-skin="glitch"] .nav-links > li > a.has-alert,
html[data-skin="glitch"] .nav-links > li > a.has-alert.active,
html[data-skin="glitch"] .nav-links .nav-parent.has-alert,
html[data-skin="glitch"] .nav-links .nav-submenu a.has-alert,
html[data-skin="glitch"] .nav-icons-row a.has-alert,
html[data-skin="glitch"] .nav-icons-row a.has-alert span,
html[data-skin="glitch"] #menu-toggle-btn.has-alert {
  color: #00e5ff !important;
}


/* ─── BLOOD (zona de combate · rojo profundo) ───────────────── */
html[data-skin="blood"] {
  --bg-base:       #060000;
  --bg-surface:    #0e0000;
  --bg-card:       #160000;
  --bg-elevated:   #1e0000;
  --bg-hover:      #280000;

  --border-dim:    rgba(200, 0, 0, 0.15);
  --border-base:   rgba(200, 0, 0, 0.28);
  --border-accent: rgba(200, 0, 0, 0.50);

  --text-primary:   #f0d0d0;
  --text-secondary: #c08080;
  --text-dim:       #6a2020;
  --text-bright:    #ffffff;

  --accent:         #cc0000;
  --accent-bright:  #ff2020;
  --accent-dim:     #880000;
  --accent-muted:   rgba(200, 0, 0, 0.12);
  --accent-glow:    rgba(200, 0, 0, 0.15);

  /* Alerta en cian — máximo contraste sobre rojo */
  --danger:  #00e5ff; --warning: #ffee00; --info: #80ffaa;
  --danger-bg:  rgba(0,229,255,0.10);
  --warning-bg: rgba(255,238,0,0.10);
  --info-bg:    rgba(128,255,170,0.10);

  --grid-hue: 200, 0, 0;
  --scanline-alpha: 0.04;
}
html[data-skin="blood"] .nav-links > li > a.has-alert,
html[data-skin="blood"] .nav-links > li > a.has-alert.active,
html[data-skin="blood"] .nav-links .nav-parent.has-alert,
html[data-skin="blood"] .nav-links .nav-submenu a.has-alert,
html[data-skin="blood"] .nav-icons-row a.has-alert,
html[data-skin="blood"] .nav-icons-row a.has-alert span,
html[data-skin="blood"] #menu-toggle-btn.has-alert {
  color: #00e5ff !important;
}


/* ─── INFRARED (imagen térmica · rojo-naranja-amarillo) ─────── */
html[data-skin="infrared"] {
  --bg-base:       #050000;
  --bg-surface:    #0c0100;
  --bg-card:       #140200;
  --bg-elevated:   #1c0300;
  --bg-hover:      #260500;

  --border-dim:    rgba(255, 80, 0, 0.15);
  --border-base:   rgba(255, 80, 0, 0.28);
  --border-accent: rgba(255, 80, 0, 0.50);

  --text-primary:   #ffe0c0;
  --text-secondary: #ff8040;
  --text-dim:       #8a3000;
  --text-bright:    #ffffff;

  --accent:         #ff4400;
  --accent-bright:  #ff8800;
  --accent-dim:     #aa2200;
  --accent-muted:   rgba(255, 68, 0, 0.12);
  --accent-glow:    rgba(255, 68, 0, 0.15);

  /* Alerta en cian — contrasta sobre rojo-naranja */
  --danger:  #00e5ff; --warning: #ffffff; --info: #80ffaa;
  --danger-bg:  rgba(0,229,255,0.10);
  --warning-bg: rgba(255,255,255,0.10);
  --info-bg:    rgba(128,255,170,0.10);

  --grid-hue: 255, 80, 0;
  --scanline-alpha: 0.04;
}
html[data-skin="infrared"] .nav-links > li > a.has-alert,
html[data-skin="infrared"] .nav-links > li > a.has-alert.active,
html[data-skin="infrared"] .nav-links .nav-parent.has-alert,
html[data-skin="infrared"] .nav-links .nav-submenu a.has-alert,
html[data-skin="infrared"] .nav-icons-row a.has-alert,
html[data-skin="infrared"] .nav-icons-row a.has-alert span,
html[data-skin="infrared"] #menu-toggle-btn.has-alert {
  color: #00e5ff !important;
}


/* ─── PHANTOM (invisibilidad · negro extremo) ───────────────── */
html[data-skin="phantom"] {
  --bg-base:       #030305;
  --bg-surface:    #060608;
  --bg-card:       #0a0a0d;
  --bg-elevated:   #0e0e12;
  --bg-hover:      #141418;

  --border-dim:    rgba(255, 255, 255, 0.04);
  --border-base:   rgba(255, 255, 255, 0.08);
  --border-accent: rgba(255, 255, 255, 0.14);

  --text-primary:   rgba(255,255,255,0.10);
  --text-secondary: rgba(255,255,255,0.06);
  --text-dim:       rgba(255,255,255,0.03);
  --text-bright:    rgba(255,255,255,0.35);

  --accent:         rgba(255,255,255,0.12);
  --accent-bright:  rgba(255,255,255,0.30);
  --accent-dim:     rgba(255,255,255,0.05);
  --accent-muted:   rgba(255,255,255,0.04);
  --accent-glow:    rgba(255,255,255,0.03);

  /* Alerta en blanco brillante — único color que destaca en este fondo */
  --danger:  rgba(255,255,255,0.80); --warning: rgba(255,255,255,0.60); --info: rgba(255,255,255,0.50);
  --danger-bg:  rgba(255,255,255,0.05);
  --warning-bg: rgba(255,255,255,0.04);
  --info-bg:    rgba(255,255,255,0.03);

  --grid-hue: 255, 255, 255;
  --scanline-alpha: 0.015;
}
html[data-skin="phantom"] .nav-links > li > a.has-alert,
html[data-skin="phantom"] .nav-links > li > a.has-alert.active,
html[data-skin="phantom"] .nav-links .nav-parent.has-alert,
html[data-skin="phantom"] .nav-links .nav-submenu a.has-alert,
html[data-skin="phantom"] .nav-icons-row a.has-alert,
html[data-skin="phantom"] .nav-icons-row a.has-alert span,
html[data-skin="phantom"] #menu-toggle-btn.has-alert {
  color: rgba(255,255,255,0.85) !important;
}


/* ─── COMMANDER (despacho de mando · papel militar claro) ───── */
html[data-skin="commander"] {
  --bg-base:       #f0ece0;
  --bg-surface:    #e8e0cc;
  --bg-card:       #e0d8c0;
  --bg-elevated:   #d8d0b8;
  --bg-hover:      #cec8b0;

  --border-dim:    rgba(42, 58, 26, 0.15);
  --border-base:   rgba(42, 58, 26, 0.28);
  --border-accent: rgba(42, 58, 26, 0.50);

  --text-primary:   #1a2a0a;
  --text-secondary: #4a5a3a;
  --text-dim:       #8a9a7a;
  --text-bright:    #000000;

  --accent:         #2a3a1a;
  --accent-bright:  #1a2a0a;
  --accent-dim:     #6a7a5a;
  --accent-muted:   rgba(42, 58, 26, 0.10);
  --accent-glow:    rgba(42, 58, 26, 0.06);

  /* Alerta en rojo oscuro intenso — contrasta bien sobre verde oscuro/crema */
  --danger:  #aa1a0a; --warning: #8a5a00; --info: #1a3a8a;
  --danger-bg:  rgba(170,26,10,0.08);
  --warning-bg: rgba(138,90,0,0.08);
  --info-bg:    rgba(26,58,138,0.08);

  --grid-hue: 42, 58, 26;
  --scanline-alpha: 0.01;
}
html[data-skin="commander"] body {
  background-image:
    linear-gradient(to right, rgba(42,58,26,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,58,26,0.06) 1px, transparent 1px),
    radial-gradient(ellipse at top, rgba(42,58,26,0.04) 0%, transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-color: var(--bg-base);
}


/* ─── GHOST (presencia mínima · partículas flotantes) ───────── */
html[data-skin="ghost"] {
  --bg-base:       #040406;
  --bg-surface:    #070709;
  --bg-card:       #0a0a0c;
  --bg-elevated:   #0d0d10;
  --bg-hover:      #121215;

  --border-dim:    rgba(255, 255, 255, 0.03);
  --border-base:   rgba(255, 255, 255, 0.06);
  --border-accent: rgba(255, 255, 255, 0.10);

  --text-primary:   rgba(255,255,255,0.09);
  --text-secondary: rgba(255,255,255,0.05);
  --text-dim:       rgba(255,255,255,0.03);
  --text-bright:    rgba(255,255,255,0.40);

  --accent:         rgba(255,255,255,0.10);
  --accent-bright:  rgba(255,255,255,0.25);
  --accent-dim:     rgba(255,255,255,0.04);
  --accent-muted:   rgba(255,255,255,0.03);
  --accent-glow:    rgba(255,255,255,0.02);

  /* Alerta en blanco — único color que emerge del fondo casi negro */
  --danger:  rgba(255,255,255,0.75); --warning: rgba(255,255,255,0.55); --info: rgba(255,255,255,0.45);
  --danger-bg:  rgba(255,255,255,0.04);
  --warning-bg: rgba(255,255,255,0.03);
  --info-bg:    rgba(255,255,255,0.02);

  --grid-hue: 255, 255, 255;
  --scanline-alpha: 0.01;
}
html[data-skin="ghost"] .nav-links > li > a.has-alert,
html[data-skin="ghost"] .nav-links > li > a.has-alert.active,
html[data-skin="ghost"] .nav-links .nav-parent.has-alert,
html[data-skin="ghost"] .nav-links .nav-submenu a.has-alert,
html[data-skin="ghost"] .nav-icons-row a.has-alert,
html[data-skin="ghost"] .nav-icons-row a.has-alert span,
html[data-skin="ghost"] #menu-toggle-btn.has-alert {
  color: rgba(255,255,255,0.85) !important;
}


/* ─── LEGEND (cuero grabado · herrajes ámbar envejecido) ───── */
html[data-skin="legend"] {
  --bg-base:       #0c0900;
  --bg-surface:    #131000;
  --bg-card:       #1a1600;
  --bg-elevated:   #221c00;
  --bg-hover:      #2a2200;

  --border-dim:    rgba(140, 90, 10, 0.18);
  --border-base:   rgba(140, 90, 10, 0.32);
  --border-accent: rgba(160, 110, 10, 0.50);

  --text-primary:   #c09020;
  --text-secondary: #7a5010;
  --text-dim:       #4a3200;
  --text-bright:    #d4a830;

  --accent:         #b07820;
  --accent-bright:  #c89030;
  --accent-dim:     #6a4a00;
  --accent-muted:   rgba(160, 100, 10, 0.10);
  --accent-glow:    rgba(160, 100, 10, 0.06);

  /* Alerta en rojo — contrasta bien sobre ámbar apagado */
  --danger:  #e03a2a; --warning: #ff8800; --info: #4a90d4;
  --danger-bg:  rgba(224,58,42,0.10);
  --warning-bg: rgba(255,136,0,0.10);
  --info-bg:    rgba(74,144,212,0.10);

  --grid-hue: 160, 100, 10;
  --scanline-alpha: 0.02;
}

/* Legend: textura de cuero grabado en el fondo */
html[data-skin="legend"] body {
  background-color: var(--bg-base);
  background-image:
    repeating-linear-gradient(45deg,  rgba(160,100,10,0.025) 0px, rgba(160,100,10,0.025) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(160,100,10,0.018) 0px, rgba(160,100,10,0.018) 1px, transparent 1px, transparent 8px),
    linear-gradient(to right,  rgba(160,100,10,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,100,10,0.018) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

/* Legend: tarjetas con borde doble (efecto herraje grabado) */
html[data-skin="legend"] .card,
html[data-skin="legend"] .tac-frame {
  outline: 1px solid rgba(140,90,10,0.55);
  outline-offset: -3px;
}

/* Legend: reflejo de cuero lento en tarjetas */
@keyframes legend-leather-shine {
  0%,100% { background-position: -100% 0; }
  50%      { background-position:  200% 0; }
}
html[data-skin="legend"] .card,
html[data-skin="legend"] .tac-frame {
  position: relative;
}
html[data-skin="legend"] .card::before,
html[data-skin="legend"] .tac-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(180,120,30,0.12) 50%, transparent 70%);
  background-size: 50% 100%;
  animation: legend-leather-shine 8s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
html[data-skin="legend"] .stat-number,
html[data-skin="legend"] .num-operador,
html[data-skin="legend"] .badge-op {
  text-shadow: 0 0 6px rgba(180,120,30,0.5);
}


/* ─── BRONZE (primer metal · bronce envejecido) ─────────────── */
html[data-skin="bronze"] {
  --bg-base:       #0a0602;
  --bg-surface:    #140c04;
  --bg-card:       #1c1206;
  --bg-elevated:   #241808;
  --bg-hover:      #2e1e0a;

  --border-dim:    rgba(205, 127, 50, 0.15);
  --border-base:   rgba(205, 127, 50, 0.28);
  --border-accent: rgba(205, 127, 50, 0.50);

  --text-primary:   #e0a870;
  --text-secondary: #a06830;
  --text-dim:       #6a3810;
  --text-bright:    #f4c490;

  --accent:         #cd7f32;
  --accent-bright:  #e8a050;
  --accent-dim:     #8a4a10;
  --accent-muted:   rgba(205, 127, 50, 0.14);
  --accent-glow:    rgba(205, 127, 50, 0.12);

  /* Alerta en rojo vivo — contrasta bien sobre bronce */
  --danger:  #e03a2a; --warning: #ffe060; --info: #60c0ff;
  --danger-bg:  rgba(224,58,42,0.10);
  --warning-bg: rgba(255,224,96,0.10);
  --info-bg:    rgba(96,192,255,0.10);

  --grid-hue: 205, 127, 50;
  --scanline-alpha: 0.025;
}


/* ─── SILVER (segundo metal · plata fría) ───────────────────── */
html[data-skin="silver"] {
  --bg-base:       #080808;
  --bg-surface:    #101010;
  --bg-card:       #181818;
  --bg-elevated:   #202020;
  --bg-hover:      #2a2a2a;

  --border-dim:    rgba(192, 192, 192, 0.14);
  --border-base:   rgba(192, 192, 192, 0.28);
  --border-accent: rgba(192, 192, 192, 0.50);

  --text-primary:   #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-dim:       #606060;
  --text-bright:    #ffffff;

  --accent:         #c0c0c0;
  --accent-bright:  #e8e8e8;
  --accent-dim:     #707070;
  --accent-muted:   rgba(192, 192, 192, 0.12);
  --accent-glow:    rgba(192, 192, 192, 0.10);

  /* Alerta en rojo vivo — contrasta bien sobre plata */
  --danger:  #e03a2a; --warning: #ffaa00; --info: #4a90d4;
  --danger-bg:  rgba(224,58,42,0.10);
  --warning-bg: rgba(255,170,0,0.10);
  --info-bg:    rgba(74,144,212,0.10);

  --grid-hue: 192, 192, 192;
  --scanline-alpha: 0.025;
}


/* ─── GOLD (trofeo permanente · oro puro pulsante) ──────────── */
html[data-skin="gold"] {
  --bg-base:       #080600;
  --bg-surface:    #120e00;
  --bg-card:       #1c1600;
  --bg-elevated:   #261e00;
  --bg-hover:      #302600;

  --border-dim:    rgba(255, 215, 0, 0.15);
  --border-base:   rgba(255, 215, 0, 0.30);
  --border-accent: rgba(255, 215, 0, 0.55);

  --text-primary:   #ffe880;
  --text-secondary: #c8a800;
  --text-dim:       #8a6a00;
  --text-bright:    #ffffff;

  --accent:         #ffd700;
  --accent-bright:  #ffe840;
  --accent-dim:     #aa8800;
  --accent-muted:   rgba(255, 215, 0, 0.14);
  --accent-glow:    rgba(255, 215, 0, 0.20);

  /* Alerta en rojo vivo — contrasta bien sobre dorado */
  --danger:  #e03a2a; --warning: #ff6600; --info: #60c0ff;
  --danger-bg:  rgba(224,58,42,0.10);
  --warning-bg: rgba(255,102,0,0.10);
  --info-bg:    rgba(96,192,255,0.10);

  --grid-hue: 255, 215, 0;
  --scanline-alpha: 0.02;
}

/* Gold: elementos destacados con resplandor dorado pulsante */
@keyframes gold-glow-pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,215,0,0.7), 0 0 20px rgba(255,215,0,0.3); }
  50%       { text-shadow: 0 0 14px rgba(255,215,0,1.0), 0 0 35px rgba(255,215,0,0.5), 0 0 60px rgba(255,215,0,0.2); }
}
html[data-skin="gold"] .stat-number,
html[data-skin="gold"] .num-operador,
html[data-skin="gold"] .badge-op {
  animation: gold-glow-pulse 3s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════
   EFECTOS METÁLICOS (BRONZE / SILVER / GOLD)
   Glow pulsante + sweep diagonal + detalles propios
   ═══════════════════════════════════════════════════════════ */

/* ── DESERT: text-shadow accent (las partículas vienen del JS) ── */
html[data-skin="desert"] .stat-number,
html[data-skin="desert"] .num-operador {
  text-shadow: 0 0 8px rgba(212,165,90,0.4), 0 0 16px rgba(212,165,90,0.2);
}

/* ── BRONZE ─────────────────────────────────────────────────── */
@keyframes bglow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(205,127,50,0.20), inset 0 0 12px rgba(205,127,50,0.05);
  }
  50% {
    box-shadow: 0 0 22px rgba(205,127,50,0.50), inset 0 0 24px rgba(205,127,50,0.15);
  }
}
@keyframes bsweep {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}
@keyframes bdust {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}
html[data-skin="bronze"] .card,
html[data-skin="bronze"] .tac-frame {
  position: relative;
  animation: bglow 3.5s ease-in-out infinite;
}
html[data-skin="bronze"] .card::before,
html[data-skin="bronze"] .tac-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(232,160,80,0.25) 50%, transparent 70%);
  background-size: 50% 100%;
  animation: bsweep 7s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
html[data-skin="bronze"] .card::after,
html[data-skin="bronze"] .tac-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,160,80,0.7), transparent);
  animation: bdust 4s ease-in-out infinite;
  pointer-events: none;
}
html[data-skin="bronze"] .stat-number,
html[data-skin="bronze"] .num-operador,
html[data-skin="bronze"] .badge-op {
  text-shadow: 0 0 10px rgba(205,127,50,0.7), 0 0 22px rgba(205,127,50,0.3);
}

/* ── SILVER ─────────────────────────────────────────────────── */
@keyframes sglow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(192,192,192,0.18), inset 0 0 10px rgba(192,192,192,0.05);
  }
  50% {
    box-shadow: 0 0 22px rgba(232,232,232,0.55), inset 0 0 22px rgba(192,192,192,0.18);
  }
}
@keyframes ssweep {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}
@keyframes sline {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 0.8; }
  80%  { opacity: 0.8; }
  100% { transform: translateX(100%); opacity: 0; }
}
html[data-skin="silver"] .card,
html[data-skin="silver"] .tac-frame {
  position: relative;
  animation: sglow 3s ease-in-out infinite;
  overflow: hidden;
}
html[data-skin="silver"] .card::before,
html[data-skin="silver"] .tac-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(232,232,232,0.30) 50%, transparent 65%);
  background-size: 50% 100%;
  animation: ssweep 5.5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
html[data-skin="silver"] .card::after,
html[data-skin="silver"] .tac-frame::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: sline 5s linear infinite;
  pointer-events: none;
}
html[data-skin="silver"] .stat-number,
html[data-skin="silver"] .num-operador,
html[data-skin="silver"] .badge-op {
  text-shadow:
    0 0 8px rgba(255,255,255,0.6),
    0 0 18px rgba(192,192,192,0.4),
    0 0 30px rgba(192,192,192,0.2);
}

/* ── GOLD: añadir sweep + borde pulsante al text-shadow existente ── */
@keyframes gsweep {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}
@keyframes gborder {
  0%, 100% {
    border-color: rgba(255,215,0,0.30);
    box-shadow: 0 0 12px rgba(255,215,0,0.20);
  }
  50% {
    border-color: rgba(255,232,64,0.80);
    box-shadow: 0 0 28px rgba(255,215,0,0.55), inset 0 0 18px rgba(255,215,0,0.1);
  }
}
html[data-skin="gold"] .card,
html[data-skin="gold"] .tac-frame {
  position: relative;
  animation: gborder 3.5s ease-in-out infinite;
}
html[data-skin="gold"] .card::before,
html[data-skin="gold"] .tac-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,232,64,0.35) 50%, transparent 75%);
  background-size: 50% 100%;
  animation: gsweep 4.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Accesibilidad: respetar reduced-motion en metales */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="bronze"] .card,
  html[data-skin="bronze"] .tac-frame,
  html[data-skin="silver"] .card,
  html[data-skin="silver"] .tac-frame,
  html[data-skin="gold"] .card,
  html[data-skin="gold"] .tac-frame,
  html[data-skin="legend"] .card,
  html[data-skin="legend"] .tac-frame { animation: none; }
  html[data-skin="bronze"] .card::before,
  html[data-skin="bronze"] .card::after,
  html[data-skin="bronze"] .tac-frame::before,
  html[data-skin="bronze"] .tac-frame::after,
  html[data-skin="silver"] .card::before,
  html[data-skin="silver"] .card::after,
  html[data-skin="silver"] .tac-frame::before,
  html[data-skin="silver"] .tac-frame::after,
  html[data-skin="gold"] .card::before,
  html[data-skin="gold"] .tac-frame::before,
  html[data-skin="legend"] .card::before,
  html[data-skin="legend"] .tac-frame::before { animation: none; }
}


/* ─── DAYLIGHT (modo dia · alto contraste para exteriores) ──────
   Piel funcional, NO de progresion: siempre disponible para todos
   los usuarios. Pensada para uso movil bajo luz solar directa,
   donde la paleta tactica oscura pierde legibilidad por reflejo.
   No lleva scanlines, grano ni HUD: prioriza pureza visual. */
html[data-skin="daylight"] {
  --bg-base:       #f3f6f3;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-elevated:   #ebefeb;
  --bg-hover:      #dde3dd;

  --border-dim:    rgba(60, 75, 65, 0.30);
  --border-base:   rgba(60, 75, 65, 0.50);
  --border-accent: rgba(60, 75, 65, 0.70);

  --text-primary:   #0a0c0b;
  --text-secondary: #2a3530;
  --text-dim:       #4a5a52;
  --text-bright:    #000000;

  --accent:         #2d5a37;
  --accent-bright:  #1d4527;
  --accent-dim:     #4a8059;
  --accent-muted:   rgba(45, 90, 55, 0.12);
  --accent-glow:    rgba(45, 90, 55, 0.06);

  --danger:  #b03327; --warning: #9c7a1a; --info: #1f5f96;
  --danger-bg:  rgba(176, 51, 39, 0.10);
  --warning-bg: rgba(156, 122, 26, 0.10);
  --info-bg:    rgba(31, 95, 150, 0.10);

  --grid-hue: 60, 75, 65;
  --scanline-alpha: 0;
}

/* Anula efectos decorativos heredados de tactical-enhance que sobre
   fondo blanco generan suciedad visual (rejilla HUD muy sutil,
   scanlines, glow verde). */
html[data-skin="daylight"] body::before,
html[data-skin="daylight"] body::after { display: none; }

/* La barra de marca topstripe gana mas contraste sobre fondo claro */
html[data-skin="daylight"] .topstripe { opacity: 1; }