/* ============================================================
   SQUADFLOW · NEON INDIGO THEME (dark-only)
   Override drop-in de tokens --sk-* para el codebase Sportiko.
   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-info:          #6c8cff;                 /* NUEVA — estado info */
  --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 */
  --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);
}

/* ---------- 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); }
.card { 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 {
  background-color: var(--sk-indigo) !important; color: #fff !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 { 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-indigo); --bs-table-color: #fff;
  background-color: var(--sk-indigo) !important; color: #fff !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); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sk-tint-strong); color: #fff; }
.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. MATAR EL TOGGLE CLARO/OSCURO ----------
   Dason: botón de modo en topbar. Ajusta el selector si tu id difiere. */
#mode-setting-btn, [data-toggle="light-dark-mode"], .light-dark-mode { display: none !important; }
/* Si algún JS deja data-bs-theme="light", forzamos igual los tokens: */
[data-bs-theme="light"], [data-layout-mode="light"] { color-scheme: dark; }