/* ============================================================
   PICHANGUEO · NEON INDIGO THEME (dark-only)
   Override drop-in de tokens --sk-* para el codebase Pichangueo.
   Cargar DESPUÉS de: bootstrap.min.css, app.min.css,
   sportiko-theme.css, sportiko-launchpad.css, publico.css.
   No requiere tocar sportiko-theme.css: solo redefine variables
   y neutraliza los restos de tema claro.
   ============================================================ */

/* ---------- 1. TOKENS REMAPEADOS (--sk-* existentes) ---------- */
:root{
  --sk-indigo:        #1a1f4b;                 /* era #26215C — sidebar, thead, sk-match */
  --sk-primary:       #9d4edd;                 /* era #534AB7 */
  --sk-primary-600:   #8a3fd0;                 /* era #443BA3 */
  --sk-accent:        #b857ff;                 /* era #7F77DD */
  --sk-accent-soft:   #d29bff;                 /* era #AFA9EC */
  --sk-accent-100:    #ecd8ff;                 /* era #CECBF6 */
  --sk-tint:          #0a0e27;                 /* era #EEEDF6 — fondo de página */
  --sk-tint-strong:   #1a1f4b;                 /* era #E6E4F4 — hovers/soft */
  --sk-surface:       #131740;                 /* era #FFFFFF — cards, topbar, modales */
  --sk-text:          #ffffff;                 /* era #26215C */
  --sk-text-muted:    #9a9fc7;                 /* era #6B6786 */
  --sk-border:        rgba(184,87,255,0.20);   /* era rgba(38,33,92,.10) */
  --sk-border-strong: rgba(184,87,255,0.45);   /* era rgba(38,33,92,.16) */
  --sk-ok:            #2dd4a7;                 /* era #1D9E75 */
  --sk-ok-bg:         rgba(45,212,167,0.12);   /* era #E1F5EE */
  --sk-ok-text:       #2dd4a7;                 /* era #0F6E56 — texto claro sobre bg oscuro */
  --sk-pending:       #ffb054;                 /* era #EF9F27 */
  --sk-pending-bg:    rgba(255,176,84,0.12);   /* era #FAEEDA */
  --sk-pending-text:  #ffb054;                 /* era #854F0B */
  --sk-danger:        #ff5d7a;                 /* era #E24B4A */
  --sk-danger-bg:     rgba(255,93,122,0.12);   /* era #FCEBEB */
  --sk-danger-text:   #ff5d7a;                 /* era #A32D2D */
  --sk-radius:        10px;                    /* sin cambio */
  --sk-radius-lg:     14px;                    /* sin cambio */

  /* ---------- 1b. VARIABLES NUEVAS (Neon Indigo) ---------- */
  --sk-bg-2:          #0e1230;                 /* NUEVA — franjas alternas */
  --sk-surface-2:     #1a1f4b;                 /* NUEVA — superficies elevadas */
  --sk-surface-3:     #232a5e;                 /* NUEVA — chips, pills neutras */
  --sk-grad-from:     #1a1f4b;                 /* NUEVA — hero gradient inicio */
  --sk-grad-to:       #2d1b69;                 /* NUEVA — hero gradient fin */
  --sk-neon:          #b857ff;                 /* NUEVA — alias acento neón */
  --sk-text-2:        #e0e0e0;                 /* NUEVA — texto secundario (era --sf-text-2 del DS) */
  --sk-info:          #6c8cff;                 /* NUEVA — estado info */
  /* Mas claro que --sk-info: se usa como TEXTO sobre --sk-info-bg, y con el
     tono de relleno ese par daba 4.3:1 en oscuro (el chip "Interno"). */
  --sk-info-text:     #9db1ff;                 /* NUEVA */
  --sk-info-bg:       rgba(108,140,255,0.12);  /* NUEVA */
  --sk-glow-sm:       0 0 12px rgba(184,87,255,0.28);                                    /* NUEVA */
  --sk-glow:          0 0 0 1px rgba(184,87,255,0.35),0 0 24px rgba(184,87,255,0.30);    /* NUEVA */
  --sk-glow-strong:   0 0 0 1px rgba(184,87,255,0.60),0 0 36px rgba(184,87,255,0.45);    /* NUEVA */
  --sk-shadow-card:   0 8px 24px rgba(0,0,0,0.35);                                       /* NUEVA */
  --sk-shadow-float:  0 12px 40px rgba(0,0,0,0.5);                                       /* NUEVA */
  /* Fondo suave de acento (chips y paneles "seleccionados"). Faltaba: las vistas
     lo resolvían con un celeste claro hardcodeado, que en oscuro desentonaba. */
  --sk-accent-bg:     rgba(184,87,255,0.12);   /* NUEVA */

  /* Cabecera de tabla. Va en tokens porque en claro NO puede seguir siendo la
     banda índigo con texto blanco: Bootstrap 5.3 pinta la celda con un
     box-shadow interno que usa --bs-table-bg y le gana al background-color, así
     que quedaba texto blanco sobre la banda clara de Bootstrap. */
  --sk-thead-bg:      var(--sk-indigo);        /* NUEVA */
  --sk-thead-text:    #ffffff;                 /* NUEVA */

  /* Tinta sobre un relleno semantico. En OSCURO esos colores son claros
     (menta, rosa, ambar), asi que encima va tinta oscura; en claro es al
     revés. Un blanco fijo daba 1.9:1 en los badges. */
  --sk-on-color:      #0a0e27;                 /* NUEVA */
  /* Velo de las pastillas que van dentro de un chip ya tintado. En oscuro
     oscurece; en claro tiene que ACLARAR, o el texto oscuro de la familia
     queda sobre un gris medio (3.2:1 medido en el contador de convocatoria). */
  --sk-scrim-chip:    rgba(0,0,0,.22);         /* NUEVA */
  /* Gemelos -rgb: .text-* y .bg-* de Bootstrap piden los componentes por
     separado y CSS no puede partir un hex. */
  --sk-primary-rgb:   157, 78, 221;            /* NUEVA */
  --sk-muted-rgb:     154, 159, 199;           /* NUEVA */
  --sk-ok-rgb:        45, 212, 167;            /* NUEVA */
  --sk-info-rgb:      108, 140, 255;           /* NUEVA */
  --sk-pending-rgb:   255, 176, 84;            /* NUEVA */
  --sk-danger-rgb:    255, 93, 122;            /* NUEVA */
  /* Un paso mas oscuro, para el hover de los botones llenos. */
  --sk-ok-600:        #22b98f;                 /* NUEVA */
  --sk-info-600:      #5b7ae8;                 /* NUEVA */
  --sk-pending-600:   #e89a3f;                 /* NUEVA */
  --sk-danger-600:    #e84a67;                 /* NUEVA */
  --sk-muted-600:     #868bb5;                 /* NUEVA */
  --sk-ease:          cubic-bezier(0.4,0,0.2,1);/* NUEVA */
  --sk-dur-fast:      0.15s;                   /* NUEVA */
  --sk-dur:           0.3s;                    /* NUEVA */
}

/* Bootstrap remap adicional (dark) */
:root{
  --bs-primary-rgb: 157,78,221;
  --bs-body-bg: var(--sk-tint);
  --bs-body-color: var(--sk-text);
  --bs-secondary-color: var(--sk-text-muted);
  --bs-tertiary-bg: var(--sk-surface-2);
  --bs-emphasis-color: #ffffff;
  --bs-info: var(--sk-info);
}

/* ---------- 1c. MODO CLARO (blanco predominante, morados de contraste) ----------
   Redefine los MISMOS tokens del bloque de arriba. La sección 2 de este archivo
   pinta con !important pero SIEMPRE a través de tokens, así que cambiarlos acá
   arrastra toda la interfaz sin tocar una regla más.

   Tres decisiones que no son obvias:

   1. El morado neón (#b857ff) está calibrado para fondo oscuro: sobre blanco da
      ~3:1 y no sirve para texto. En claro los tokens que terminan en texto o
      borde usan #7b2fd0 (el mismo morado que ya usan los correos, que siempre
      fueron claros) y el neón queda para rellenos.
   2. --sk-indigo y el degradado siguen siendo oscuros a propósito: son las
      bandas de marca (thead, sidebar, hero) que llevan texto blanco encima. Ahí
      el morado ES el contraste que se buscaba.
   3. Los glows neón no existen sobre blanco: se cambian por sombras suaves.

   El fondo no es blanco puro sino un blanco con sesgo lila (#f7f6fc) y las
   tarjetas sí blancas: si ambos fueran #fff no se distinguiría una card del
   fondo y habría que meter bordes en todos lados. */
html[data-bs-theme="light"]{
  --sk-indigo:        #2d1b69;                 /* banda de marca: sigue oscura */
  --sk-primary:       #7b2fd0;                 /* botones: 6:1 con texto blanco */
  --sk-primary-600:   #6a21bd;
  --sk-accent:        #7b2fd0;                 /* acento en TEXTO: legible sobre blanco */
  /* En claro los roles se invierten: "soft" no es mas CLARO que el acento sino
     mas OSCURO, porque se usa como texto y como relleno sobre fondo blanco.
     Con #9d4edd daba 4.3:1, justo por debajo de AA. */
  --sk-accent-soft:   #6a21bd;
  --sk-accent-100:    #f0e6ff;
  --sk-tint:          #f7f6fc;                 /* fondo de página */
  --sk-tint-strong:   #efecf9;                 /* hovers y zonas suaves */
  --sk-surface:       #ffffff;                 /* cards, topbar, modales */
  --sk-text:          #26215c;
  --sk-text-muted:    #6b6786;
  --sk-border:        rgba(38,33,92,0.12);
  --sk-border-strong: rgba(123,47,208,0.35);
  --sk-ok:            #13805e;             /* era #1D9E75: 3.4:1 con texto blanco */
  --sk-ok-bg:         #e1f5ee;
  --sk-ok-text:       #0f6e56;
  --sk-pending:       #ef9f27;
  --sk-pending-bg:    #faeeda;
  --sk-pending-text:  #854f0b;
  --sk-danger:        #c62f2e;             /* era #E24B4A: 3.8:1 con texto blanco */
  --sk-danger-bg:     #fcebeb;
  --sk-danger-text:   #a32d2d;

  --sk-bg-2:          #fbfaff;                 /* campos de formulario: casi blanco */
  --sk-surface-2:     #f4f2fd;
  --sk-surface-3:     #eae7f8;
  --sk-grad-from:     #2d1b69;                 /* hero: sigue morado, lleva texto blanco */
  --sk-grad-to:       #5b2ea6;
  /* Se uso tambien como TEXTO (a, pestañas, botones de contorno) y con #9d4edd
     daba 4.3:1 sobre blanco. En claro queda igual que --sk-accent: un morado
     que sirve de relleno Y de texto. */
  --sk-neon:          #7b2fd0;
  --sk-text-2:        #4a4f74;
  --sk-info:          #3b5bdb;
  /* Como texto sobre su propio tinte, el azul de relleno se quedaba en 4.5:1
     justo. Mismo criterio que --sk-ok-text y --sk-danger-text. */
  --sk-info-text:     #2f48b0;
  --sk-info-bg:       rgba(59,91,219,0.10);

  --sk-glow-sm:       0 1px 3px rgba(38,33,92,0.10);
  --sk-glow:          0 0 0 1px rgba(123,47,208,0.22), 0 4px 14px rgba(123,47,208,0.15);
  --sk-glow-strong:   0 0 0 1px rgba(123,47,208,0.40), 0 8px 24px rgba(123,47,208,0.22);
  --sk-shadow-card:   0 4px 14px rgba(38,33,92,0.10);
  --sk-shadow-float:  0 12px 32px rgba(38,33,92,0.16);

  --sk-accent-bg:     #f0e6ff;

  /* En claro la cabecera es una banda lila suave con texto índigo. */
  --sk-thead-bg:      #f0edfa;
  --sk-thead-text:    #26215c;

  /* Ver el bloque oscuro: aca la tinta sobre relleno es blanca. */
  --sk-on-color:      #ffffff;
  --sk-scrim-chip:    rgba(255,255,255,.65);
  --sk-primary-rgb:   123, 47, 208;
  --sk-muted-rgb:     107, 103, 134;
  --sk-ok-rgb:        19, 128, 94;
  --sk-info-rgb:      59, 91, 219;
  --sk-pending-rgb:   239, 159, 39;
  --sk-danger-rgb:    198, 47, 46;
  --sk-ok-600:        #0f6b4f;
  --sk-info-600:      #2f48b0;
  --sk-pending-600:   #d48a15;
  --sk-danger-600:    #a82523;
  --sk-muted-600:     #585472;

  /* Bootstrap: lo demás ya cuelga de los tokens de arriba. */
  --bs-emphasis-color: #26215c;
}

/* ---------- 2. DARK-ONLY: aplica los estilos "oscuros" SIEMPRE ----------
   sportiko-theme.css §13-17 solo aplica bajo [data-layout-mode="dark"] etc.
   Aquí replicamos esas reglas sin condición, para que el modo claro deje
   de existir aunque el atributo no esté puesto. */
body, .page-content, .main-content { background-color: var(--sk-tint) !important; color: var(--sk-text); }
/* El :not() es necesario: con el !important a secas esta regla le ganaba a un
   "card bg-success" del markup, y en claro los tres KPI del dashboard del
   centro quedaban texto blanco sobre tarjeta blanca (1:1, medido). Una clase
   bg-* en el markup es una decision explicita y manda. */
.card:not([class*="bg-"]) { background: var(--sk-surface) !important; color: var(--sk-text); }
#page-topbar, .navbar-header { background: var(--sk-surface) !important; }
.table, table.dataTable {
  --bs-table-bg: var(--sk-surface); --bs-table-color: var(--sk-text);
  background-color: var(--sk-surface) !important; color: var(--sk-text) !important;
}
.table > thead th, table.dataTable thead th {
  --bs-table-bg: var(--sk-thead-bg); --bs-table-color: var(--sk-thead-text);
  background-color: var(--sk-thead-bg) !important; color: var(--sk-thead-text) !important; border-color: var(--sk-border) !important;
}
.table > tbody td, table.dataTable tbody td {
  background-color: var(--sk-surface) !important; color: var(--sk-text) !important; border-color: var(--sk-border) !important;
}
.table tbody tr:hover td, table.dataTable tbody tr:hover td { background-color: var(--sk-tint-strong) !important; }
.bg-white, .card-header:not([class*="bg-"]) { background-color: var(--sk-surface) !important; color: var(--sk-text) !important; }
.bg-light, .bg-light-subtle { background-color: var(--sk-tint-strong) !important; color: var(--sk-text) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--sk-border) !important; }
.table-light, .table-light th, .table-light td {
  --bs-table-bg: var(--sk-thead-bg); --bs-table-color: var(--sk-thead-text);
  background-color: var(--sk-thead-bg) !important; color: var(--sk-thead-text) !important; border-color: var(--sk-border) !important;
}
.text-dark, .text-body { color: var(--sk-text) !important; }
.text-muted, .text-secondary { color: var(--sk-text-muted) !important; }
.modal-content, .dropdown-menu {
  background-color: var(--sk-surface) !important; color: var(--sk-text) !important; border-color: var(--sk-border) !important;
}
.modal-header, .modal-footer { border-color: var(--sk-border) !important; }
.dropdown-item { color: var(--sk-text); }
/* var(--sk-text) y no #fff: en oscuro vale lo mismo, y en claro el hover queda
   sobre un lila suave donde el blanco era invisible. */
.dropdown-item:hover, .dropdown-item:focus { background: var(--sk-tint-strong); color: var(--sk-text); }
.form-control, .form-select {
  background-color: var(--sk-bg-2) !important; color: var(--sk-text) !important; border-color: var(--sk-border) !important;
}
.form-control::placeholder { color: var(--sk-text-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--sk-neon) !important; box-shadow: var(--sk-glow-sm) !important; background-color: var(--sk-bg-2) !important;
}
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239a9fc7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked { background-color: var(--sk-primary); border-color: var(--sk-primary); }
.footer { background: var(--sk-bg-2) !important; color: var(--sk-text-muted) !important; }
.breadcrumb-item, .breadcrumb-item.active, .page-title-box h4 { color: var(--sk-text) !important; }
a { color: var(--sk-neon); } a:hover { color: var(--sk-accent-soft); }

/* ---------- 3. UN SOLO INTERRUPTOR DE TEMA ----------
   Dason traia su propio boton de modo en el topbar, que solo tocaba el
   atributo del <html> y no se guardaba. El nuestro (#btn-modo-visual, en el
   menu del usuario) persiste la preferencia en sys_usuario.modo_visual, asi
   que el de Dason se esconde para no tener dos que se contradigan. */
#mode-setting-btn, [data-toggle="light-dark-mode"], .light-dark-mode { display: none !important; }
/* Antes esto forzaba color-scheme:dark INCLUSO en claro, porque el modo claro
   no existia. Ahora existe: cada modo declara el suyo, o los controles nativos
   -scrollbars, selectores de fecha, autocompletado- salen oscuros sobre una
   pagina blanca. */
[data-bs-theme="dark"],  [data-layout-mode="dark"]  { color-scheme: dark; }
[data-bs-theme="light"], [data-layout-mode="light"] { color-scheme: light; }

/* ---------- 4. SUPERFICIES CON EL DEGRADADO DE MARCA ----------
   --sk-grad-from/--sk-grad-to quedan OSCUROS tambien en modo claro, a
   proposito: son el fondo de los heroes y de las tarjetas destacadas. Por eso
   su texto NO puede salir de --sk-text, que en claro es indigo oscuro y
   quedaria oscuro sobre oscuro (se comprobo en el marcador del control
   remoto, donde el resultado desaparecia). Se fija claro en los dos modos.
   Las reglas internas que declaran color propio siguen mandando. */
.sf-hero, .sk-match, .lp-card-hero, .md-hero, .pc-scorecard { color: #fff; }
/* Estos dos si salian de un token que se da vuelta, sobre un fondo que no. */
.md-hero-sub { color: rgba(255,255,255,.80); }
.sk-match__vs { color: #d29bff; }

/* ---------- 5. COLORES SEMANTICOS DE BOOTSTRAP ----------
   Dason trae su propia paleta semantica -#34c38f verde, #ffcc5a ambar,
   #ef6767 rojo, #74788d gris, #1c84ee azul, #16daf1 cian- y entra a la app
   por las clases .text-*, .bg-*, .badge y .btn-*. Sobre fondo oscuro pasaba
   inadvertida; en claro no. Auditado sobre las 38 pantallas de los 8
   perfiles: 62 de 128 hallazgos de contraste venian de estos seis colores,
   el peor "Invitar a votar" con 1.5:1 y los badges de ingreso con 1.9:1.

   sportiko-theme.css §2 ya apuntaba CUATRO de ellos a los tokens, pero le
   faltaban los gemelos -rgb, que son justamente los que usan .text-* y
   .bg-*; por eso los badges seguian saliendo verde Dason. Aca se completa.

   Dos mecanismos distintos, y hay que tocar los dos:
     .text-* / .bg-*  ->  rgba(var(--bs-<color>-rgb), <opacidad>)
     .btn-*           ->  cada variante trae sus --bs-btn-* con el hex
                          ESCRITO, asi que remapear --bs-<color> no la mueve. */
:root {
  --bs-primary:      var(--sk-primary);      --bs-primary-rgb:   var(--sk-primary-rgb);
  --bs-secondary:    var(--sk-text-muted);   --bs-secondary-rgb: var(--sk-muted-rgb);
  --bs-success:      var(--sk-ok);           --bs-success-rgb:   var(--sk-ok-rgb);
  --bs-info:         var(--sk-info);         --bs-info-rgb:      var(--sk-info-rgb);
  --bs-warning:      var(--sk-pending);      --bs-warning-rgb:   var(--sk-pending-rgb);
  --bs-danger:       var(--sk-danger);       --bs-danger-rgb:    var(--sk-danger-rgb);
}

/* Tinta sobre un relleno semantico. Bootstrap y Dason asumen blanco siempre,
   y eso solo funciona si el relleno es oscuro: en modo OSCURO estos colores
   son claros (menta, rosa, ambar) y el blanco encima da 1.9:1. --sk-on-color
   vale casi-negro en oscuro y blanco en claro. */
.bg-success, .bg-danger, .bg-info, .bg-secondary,
.badge.bg-success, .badge.bg-danger, .badge.bg-info, .badge.bg-secondary { color: var(--sk-on-color) !important; }
/* El ambar es la excepcion: no admite texto blanco en NINGUN modo (2.1:1 con
   el ambar claro), asi que siempre lleva tinta oscura. */
.bg-warning, .badge.bg-warning { color: #3a2600 !important; }
/* El morado si sostiene blanco en los dos modos (4.6:1 y 6.7:1). */
.bg-primary, .badge.bg-primary { color: #fff !important; }


/* Las utilidades .text-* pintan TEXTO, no un relleno, y el tono de relleno no
   se lee sobre una superficie clara: medido, "$54.000" con .text-warning daba
   2.2:1 sobre blanco y el verde 2.2:1. Cada familia tiene su tono de TEXTO en
   la paleta, y en modo oscuro los dos tonos coinciden, asi que alla no cambia
   nada. */
.text-success   { color: var(--sk-ok-text) !important; }
.text-danger    { color: var(--sk-danger-text) !important; }
.text-warning   { color: var(--sk-pending-text) !important; }
.text-info      { color: var(--sk-info-text) !important; }
.text-primary   { color: var(--sk-accent) !important; }
.text-secondary { color: var(--sk-text-muted) !important; }

/* Botones llenos. El relleno del primario usa el tono -600 porque el
   --sk-primary del modo oscuro con texto blanco queda al limite. */
.btn-primary {
  --bs-btn-color: #fff;               --bs-btn-bg: var(--sk-primary-600);
  --bs-btn-border-color: var(--sk-primary-600);
  --bs-btn-hover-color: #fff;         --bs-btn-hover-bg: var(--sk-primary);
  --bs-btn-hover-border-color: var(--sk-primary);
  --bs-btn-active-color: #fff;        --bs-btn-active-bg: var(--sk-primary);
  --bs-btn-active-border-color: var(--sk-primary);
  --bs-btn-disabled-color: #fff;      --bs-btn-disabled-bg: var(--sk-primary-600);
  --bs-btn-disabled-border-color: var(--sk-primary-600);
}
.btn-success {
  --bs-btn-color: var(--sk-on-color);  --bs-btn-bg: var(--sk-ok);
  --bs-btn-border-color: var(--sk-ok);
  --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-ok-600);
  --bs-btn-hover-border-color: var(--sk-ok-600);
  --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-ok-600);
  --bs-btn-active-border-color: var(--sk-ok-600);
  --bs-btn-disabled-color: var(--sk-on-color); --bs-btn-disabled-bg: var(--sk-ok);
  --bs-btn-disabled-border-color: var(--sk-ok);
}
.btn-danger {
  --bs-btn-color: var(--sk-on-color);  --bs-btn-bg: var(--sk-danger);
  --bs-btn-border-color: var(--sk-danger);
  --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-danger-600);
  --bs-btn-hover-border-color: var(--sk-danger-600);
  --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-danger-600);
  --bs-btn-active-border-color: var(--sk-danger-600);
  --bs-btn-disabled-color: var(--sk-on-color); --bs-btn-disabled-bg: var(--sk-danger);
  --bs-btn-disabled-border-color: var(--sk-danger);
}
.btn-info {
  --bs-btn-color: var(--sk-on-color);  --bs-btn-bg: var(--sk-info);
  --bs-btn-border-color: var(--sk-info);
  --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-info-600);
  --bs-btn-hover-border-color: var(--sk-info-600);
  --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-info-600);
  --bs-btn-active-border-color: var(--sk-info-600);
  --bs-btn-disabled-color: var(--sk-on-color); --bs-btn-disabled-bg: var(--sk-info);
  --bs-btn-disabled-border-color: var(--sk-info);
}
.btn-warning {
  --bs-btn-color: #3a2600;             --bs-btn-bg: var(--sk-pending);
  --bs-btn-border-color: var(--sk-pending);
  --bs-btn-hover-color: #3a2600;       --bs-btn-hover-bg: var(--sk-pending-600);
  --bs-btn-hover-border-color: var(--sk-pending-600);
  --bs-btn-active-color: #3a2600;      --bs-btn-active-bg: var(--sk-pending-600);
  --bs-btn-active-border-color: var(--sk-pending-600);
  --bs-btn-disabled-color: #3a2600;    --bs-btn-disabled-bg: var(--sk-pending);
  --bs-btn-disabled-border-color: var(--sk-pending);
}
/* El secundario es el boton NEUTRO (Cancelar, Volver) y tiene que leerse
   neutro en los dos modos. Con el gris de --sk-text-muted quedaba un boton
   gris CLARO sobre fondo oscuro, mas llamativo que el primario: la jerarquia
   al reves. Va una superficie del tema, que acompaña al modo. */
.btn-secondary {
  --bs-btn-color: var(--sk-text);       --bs-btn-bg: var(--sk-surface-3);
  --bs-btn-border-color: var(--sk-border-strong);
  --bs-btn-hover-color: var(--sk-text); --bs-btn-hover-bg: var(--sk-tint-strong);
  --bs-btn-hover-border-color: var(--sk-border-strong);
  --bs-btn-active-color: var(--sk-text); --bs-btn-active-bg: var(--sk-tint-strong);
  --bs-btn-active-border-color: var(--sk-border-strong);
  --bs-btn-disabled-color: var(--sk-text-muted); --bs-btn-disabled-bg: var(--sk-surface-3);
  --bs-btn-disabled-border-color: var(--sk-border);
}

/* Botones de contorno: el color del texto tambien viene escrito a mano en
   cada variante, asi que tampoco los mueve el remapeo de arriba. */
.btn-outline-primary   { --bs-btn-color: var(--sk-accent);     --bs-btn-border-color: var(--sk-primary);
                         --bs-btn-hover-color: #fff;           --bs-btn-hover-bg: var(--sk-primary-600);
                         --bs-btn-hover-border-color: var(--sk-primary-600);
                         --bs-btn-active-color: #fff;          --bs-btn-active-bg: var(--sk-primary-600);
                         --bs-btn-active-border-color: var(--sk-primary-600);
                         --bs-btn-disabled-color: var(--sk-accent); --bs-btn-disabled-border-color: var(--sk-primary); }
.btn-outline-success   { --bs-btn-color: var(--sk-ok-text);    --bs-btn-border-color: var(--sk-ok);
                         --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-ok);
                         --bs-btn-hover-border-color: var(--sk-ok);
                         --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-ok-600);
                         --bs-btn-active-border-color: var(--sk-ok-600);
                         --bs-btn-disabled-color: var(--sk-ok-text); --bs-btn-disabled-border-color: var(--sk-ok); }
.btn-outline-danger    { --bs-btn-color: var(--sk-danger-text); --bs-btn-border-color: var(--sk-danger);
                         --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-danger);
                         --bs-btn-hover-border-color: var(--sk-danger);
                         --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-danger-600);
                         --bs-btn-active-border-color: var(--sk-danger-600);
                         --bs-btn-disabled-color: var(--sk-danger-text); --bs-btn-disabled-border-color: var(--sk-danger); }
.btn-outline-info      { --bs-btn-color: var(--sk-info);       --bs-btn-border-color: var(--sk-info);
                         --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-info);
                         --bs-btn-hover-border-color: var(--sk-info);
                         --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-info-600);
                         --bs-btn-active-border-color: var(--sk-info-600);
                         --bs-btn-disabled-color: var(--sk-info); --bs-btn-disabled-border-color: var(--sk-info); }
/* El ambar de contorno no se lee como TEXTO sobre blanco (2.1:1): en claro se
   usa el tono de texto de su propia familia. */
.btn-outline-warning   { --bs-btn-color: var(--sk-pending-text); --bs-btn-border-color: var(--sk-pending);
                         --bs-btn-hover-color: #3a2600;        --bs-btn-hover-bg: var(--sk-pending);
                         --bs-btn-hover-border-color: var(--sk-pending);
                         --bs-btn-active-color: #3a2600;       --bs-btn-active-bg: var(--sk-pending-600);
                         --bs-btn-active-border-color: var(--sk-pending-600);
                         --bs-btn-disabled-color: var(--sk-pending-text); --bs-btn-disabled-border-color: var(--sk-pending); }
.btn-outline-secondary { --bs-btn-color: var(--sk-text-muted); --bs-btn-border-color: var(--sk-border-strong);
                         --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-text-muted);
                         --bs-btn-hover-border-color: var(--sk-text-muted);
                         --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-muted-600);
                         --bs-btn-active-border-color: var(--sk-muted-600);
                         --bs-btn-disabled-color: var(--sk-text-muted); --bs-btn-disabled-border-color: var(--sk-border-strong); }

/* Dason NO pinta los botones con las variables: para cada variante agrega una
   regla con el color escrito -".btn-success{color:#fff;background-color:#34c38f}"-
   y otra igual para :hover/:focus/:active. Por eso remapear --bs-btn-* movia la
   variable y no el boton: medido, --bs-btn-bg quedaba en #13805e y el fondo
   seguia siendo #34c38f. Hay que volver a apuntar la pintura a las variables.
   La especificidad de :is(...) es la de su argumento mas especifico -una clase-,
   igual que ".btn-success", y esta hoja carga despues, asi que gana por orden. */
:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-info, .btn-outline-warning, .btn-outline-danger) {
  color: var(--bs-btn-color); background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-info, .btn-outline-warning, .btn-outline-danger):is(:hover, :focus, :focus-visible) {
  color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-info, .btn-outline-warning, .btn-outline-danger):is(:active, .active) {
  color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-info, .btn-outline-warning, .btn-outline-danger):is(:disabled, .disabled) {
  color: var(--bs-btn-disabled-color); background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
}

/* Las utilidades .text-white* de Dason dentro de un relleno semantico: la
   tinta la decide --sk-on-color, no un blanco fijo. Sin esto, los tres KPI del
   dashboard del centro quedaban blanco sobre blanco (1:1, medido). */
:is(.bg-success, .bg-danger, .bg-info, .bg-secondary) :is(.text-white, .text-white-50) { color: var(--sk-on-color) !important; }
.bg-warning :is(.text-white, .text-white-50) { color: #3a2600 !important; }
.bg-primary :is(.text-white, .text-white-50) { color: #fff !important; }
/* El "-50" existe para marcar jerarquia; se conserva con opacidad, que no
   depende de si la tinta es clara u oscura. */
/* Sin opacidad: medido, .text-white-50 al 78% sobre el verde daba 3.6:1. La
   jerarquia ya la da el tamaño y el peso de la letra. */

/* ---------- 6. COMPONENTES DE TERCEROS ----------
   Hojas que llegan por CDN y no se pueden editar, con su propio color. */
/* DataTables fuerza "color: inherit !important" sobre TODO .paginate_button, y
   lo hace desde jquery.dataTables.min.css, que vendor-scripts.php carga al
   FINAL del documento -despues de esta hoja-. Con la misma especificidad mi
   regla perdia por orden; lo confirmo CSS.getMatchedStylesForNode, no se veia
   recorriendo las hojas a mano.
   Dos consecuencias: el color de los botones se decide en el CONTENEDOR, y
   para que el activo sea distinto hay que sumar un punto de especificidad
   agregando el "a". (Aparte: cargar jquery.dataTables.min.css ADEMAS de
   dataTables.bootstrap5.min.css es contradictorio; se deja anotado, sacarlo
   toca todas las tablas.) */
.dataTables_wrapper .dataTables_paginate { color: var(--sk-text); }
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.page-item .page-link { color: var(--sk-text) !important; }
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.page-item.active .page-link {
  background: var(--sk-primary-600) !important; background-image: none !important;
  border-color: var(--sk-primary-600) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--sk-text-muted) !important; }

/* FullCalendar: el boton de vista activo se pinta con el primario y tomaba el
   texto del tema, que en claro es indigo oscuro (2.2:1). */
/* FullCalendar tambien carga su hoja despues que esta (vendor-scripts.php al
   final del documento), asi que con la misma especificidad mi regla perdia por
   orden -el mismo caso que DataTables-. De ahi el !important. */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--sk-primary-600) !important; border-color: var(--sk-primary-600) !important;
  color: #fff !important;
}
/* Y OJO con la base: forzar blanco en TODO .fc-button-primary rompio el
   calendario del panel del jugador, donde los botones NO van rellenos -quedo
   blanco sobre lila palido, 1.1:1-. El inactivo va neutro y el activo morado. */
.fc .fc-button-primary {
  background-color: var(--sk-surface-2) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-text) !important;
}
.fc .fc-button-primary:not(:disabled):hover {
  background-color: var(--sk-tint-strong) !important; color: var(--sk-text) !important;
}

/* ApexCharts escribe sus etiquetas con su propio gris y las pone INLINE en el
   nodo (leyenda) o como fill de un <text> del SVG (ejes), asi que no alcanza
   con declarar un color: hay que forzarlo. Medido: #adb5bd daba 2.1:1 sobre
   blanco en la leyenda del dashboard del centro. */
.apexcharts-legend-text { color: var(--sk-text-muted) !important; }
.apexcharts-text tspan, .apexcharts-text,
.apexcharts-xaxis-label, .apexcharts-yaxis-label,
.apexcharts-datalabel, .apexcharts-title-text { fill: var(--sk-text-muted) !important; }
.apexcharts-tooltip { background: var(--sk-surface) !important; color: var(--sk-text) !important;
                      border-color: var(--sk-border) !important; }

/* .text-muted de Bootstrap 5.3 es el color secundario al 75% de opacidad
   (rgba(var(--bs-secondary-color-rgb), .75)), y sobre blanco eso deja 3.9:1.
   Se usa en toda la app para textos de apoyo, asi que va al tono completo. */
.text-muted { color: var(--sk-text-muted) !important; }

/* Bootstrap 5.3 da vuelta --bs-dark con el tema: bajo data-bs-theme="dark"
   pasa a ser un gris casi blanco, asi que "bg-dark text-white" queda blanco
   sobre blanco. Medido en la pildora ENTERPRISE del panel del superadmin:
   1.2:1. Es el mismo vuelco que dejaba invisible el "Finalizado" del partido
   en vivo, que se arreglo con clases propias en la etapa 2.

   Se pinta SOLO .bg-dark y NO la variable: pisar --bs-dark movio tambien el
   fondo de .btn-outline-dark -Dason lo pinta con rgba(var(--bs-dark-rgb),1)- y
   ese boton quedo con su texto gris sobre indigo, 1.1:1. Lo encontro la
   reauditoria, no el razonamiento. */
.bg-dark, .badge.bg-dark { background-color: #232a5e !important; color: #fff !important; }

/* Las utilidades .nav-link de Bootstrap no salen de --bs-link-color en esta
   base (Dason las pinta aparte), y quedaban con --sk-primary sobre el fondo de
   pagina: 4.1:1 en oscuro. --sk-accent da 5.3:1 en oscuro y 6.2:1 en claro. */
.nav-link { --bs-nav-link-color: var(--sk-accent); color: var(--sk-accent); }
.nav-link:hover, .nav-link:focus { --bs-nav-link-hover-color: var(--sk-accent-soft); color: var(--sk-accent-soft); }
.nav-link.active, .nav-pills .nav-link.active { color: var(--sk-text); }

/* Los .btn-soft-* de Dason son fondo suave + el color de la familia como
   TEXTO, y el tono de RELLENO no sirve de texto: medido, "Control" del monitor
   daba 3.4:1. Cada uno usa el par bg/text de su familia, igual que
   .sk-badge--*. El primario usa --sk-accent-soft, que es el unico morado que
   se lee sobre --sk-accent-bg en los DOS modos (6.9:1). */
.btn-soft-primary   { --bs-btn-color: var(--sk-accent-soft);  --bs-btn-bg: var(--sk-accent-bg);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sk-primary-600);
                      --bs-btn-hover-border-color: var(--sk-primary-600);
                      --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sk-primary-600);
                      --bs-btn-active-border-color: var(--sk-primary-600); }
.btn-soft-success   { --bs-btn-color: var(--sk-ok-text);      --bs-btn-bg: var(--sk-ok-bg);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-ok);
                      --bs-btn-hover-border-color: var(--sk-ok);
                      --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-ok-600);
                      --bs-btn-active-border-color: var(--sk-ok-600); }
.btn-soft-danger    { --bs-btn-color: var(--sk-danger-text);  --bs-btn-bg: var(--sk-danger-bg);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-danger);
                      --bs-btn-hover-border-color: var(--sk-danger);
                      --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-danger-600);
                      --bs-btn-active-border-color: var(--sk-danger-600); }
.btn-soft-warning   { --bs-btn-color: var(--sk-pending-text); --bs-btn-bg: var(--sk-pending-bg);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: #3a2600; --bs-btn-hover-bg: var(--sk-pending);
                      --bs-btn-hover-border-color: var(--sk-pending);
                      --bs-btn-active-color: #3a2600; --bs-btn-active-bg: var(--sk-pending-600);
                      --bs-btn-active-border-color: var(--sk-pending-600); }
.btn-soft-info      { --bs-btn-color: var(--sk-info-text);    --bs-btn-bg: var(--sk-info-bg);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: var(--sk-on-color); --bs-btn-hover-bg: var(--sk-info);
                      --bs-btn-hover-border-color: var(--sk-info);
                      --bs-btn-active-color: var(--sk-on-color); --bs-btn-active-bg: var(--sk-info-600);
                      --bs-btn-active-border-color: var(--sk-info-600); }
.btn-soft-secondary { --bs-btn-color: var(--sk-text);         --bs-btn-bg: var(--sk-surface-3);
                      --bs-btn-border-color: transparent;
                      --bs-btn-hover-color: var(--sk-text); --bs-btn-hover-bg: var(--sk-tint-strong);
                      --bs-btn-hover-border-color: var(--sk-border-strong);
                      --bs-btn-active-color: var(--sk-text); --bs-btn-active-bg: var(--sk-tint-strong);
                      --bs-btn-active-border-color: var(--sk-border-strong); }
:is(.btn-soft-primary, .btn-soft-secondary, .btn-soft-success,
    .btn-soft-info, .btn-soft-warning, .btn-soft-danger) {
  color: var(--bs-btn-color); background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
:is(.btn-soft-primary, .btn-soft-secondary, .btn-soft-success,
    .btn-soft-info, .btn-soft-warning, .btn-soft-danger):is(:hover, :focus, :focus-visible, :active, .active) {
  color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
/* La pestaña activa de un .nav-tabs-custom la pinta Dason con el primario y su
   selector tiene mas especificidad que .nav-link: en oscuro quedaba en 4.1:1
   (las pestañas "Caja" de finanzas y "Tabla de Posiciones" de la division).
   Lo confirmo CSS.getMatchedStylesForNode. */
.nav-tabs-custom .nav-item .nav-link.active { color: var(--sk-accent); }