/**
 * SMARTCORE — Tema Unificado v2.0
 * Fuente: Roboto Condensed (único estándar del sistema)
 * Iconos: Font Awesome 5 (fas / far / fab) — local vendor
 * Soporta: data-theme="light" | data-theme="dark"
 * Mobile-first responsive incluido
 * Generado: Abril 2026
 */

/* ── Fuente estándar del sistema ── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   TEMA CLARO (por defecto / :root)
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Superficie */
  --sc-bg:            #f1f5f9;
  --sc-surface:       #ffffff;
  --sc-surface-alt:   #f8fafc;
  --sc-hover:         #f1f5f9;

  /* Texto */
  --sc-text:          #1e293b;
  --sc-text-2:        #475569;
  --sc-text-3:        #94a3b8;
  --sc-text-inv:      #ffffff;

  /* Bordes */
  --sc-border:        #e2e8f0;
  --sc-border-2:      #cbd5e1;

  /* Sidebar — light mode */
  --sc-sidebar-bg:    #f1f5f9;
  --sc-sidebar-text:  #334155;
  --sc-sidebar-hover: #e2e8f0;
  --sc-sidebar-active:#2563eb;
  --sc-sidebar-subtext:#64748b;

  /* Nav superior */
  --sc-nav-bg:        #ffffff;
  --sc-nav-border:    #e2e8f0;
  --sc-nav-text:      #1e293b;

  /* Primario */
  --sc-primary:       #2563eb;
  --sc-primary-hover: #1d4ed8;
  --sc-primary-light: #eff6ff;
  --sc-primary-text:  #1d4ed8;

  /* Semánticos */
  --sc-success:       #16a34a;
  --sc-success-bg:    #f0fdf4;
  --sc-success-border:#bbf7d0;

  --sc-warning:       #d97706;
  --sc-warning-bg:    #fffbeb;
  --sc-warning-border:#fde68a;

  --sc-danger:        #dc2626;
  --sc-danger-bg:     #fef2f2;
  --sc-danger-border: #fecaca;

  --sc-info:          #0891b2;
  --sc-info-bg:       #ecfeff;
  --sc-info-border:   #a5f3fc;

  /* Sombras */
  --sc-shadow-sm:     0 1px 2px rgba(15,23,42,0.06);
  --sc-shadow:        0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05);
  --sc-shadow-md:     0 4px 6px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.05);
  --sc-shadow-lg:     0 10px 15px rgba(15,23,42,0.07), 0 4px 6px rgba(15,23,42,0.04);

  /* Radios */
  --sc-radius-sm:  6px;
  --sc-radius:     8px;
  --sc-radius-md:  10px;
  --sc-radius-lg:  12px;
  --sc-radius-xl:  16px;

  /* Transición tema */
  --sc-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════
   TEMA OSCURO
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --sc-bg:            #080d14;
  --sc-surface:       #0f172a;
  --sc-surface-alt:   #1a2436;
  --sc-hover:         #1e293b;

  --sc-text:          #f1f5f9;
  --sc-text-2:        #cbd5e1;
  --sc-text-3:        #64748b;
  --sc-text-inv:      #0f172a;

  --sc-border:        #334155;
  --sc-border-2:      #475569;

  --sc-sidebar-bg:    #0f172a;
  --sc-sidebar-text:  #94a3b8;
  --sc-sidebar-hover: #1e293b;
  --sc-sidebar-active:#3b82f6;

  --sc-nav-bg:        #1e293b;
  --sc-nav-border:    #334155;
  --sc-nav-text:      #f1f5f9;

  --sc-primary:       #3b82f6;
  --sc-primary-hover: #2563eb;
  --sc-primary-light: #1e3a5f;
  --sc-primary-text:  #93c5fd;

  --sc-success:       #4ade80;
  --sc-success-bg:    #052e16;
  --sc-success-border:#166534;

  --sc-warning:       #fbbf24;
  --sc-warning-bg:    #1c1400;
  --sc-warning-border:#92400e;

  --sc-danger:        #f87171;
  --sc-danger-bg:     #1f0505;
  --sc-danger-border: #991b1b;

  --sc-info:          #22d3ee;
  --sc-info-bg:       #022b38;
  --sc-info-border:   #164e63;

  --sc-shadow-sm:     0 1px 2px rgba(0,0,0,0.3);
  --sc-shadow:        0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --sc-shadow-md:     0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --sc-shadow-lg:     0 10px 15px rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════════════
   BASE GLOBAL
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 400;
  background-color: var(--sc-bg);
  color: var(--sc-text);
  transition: var(--sc-transition);
  margin: 0;
  padding: 0;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: var(--sc-text);
  line-height: 1.3;
  margin-top: 0;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 .75rem; }
a { color: var(--sc-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--sc-primary-hover); }

/* ── Texto semántico helper ── */
.text-primary   { color: var(--sc-text) !important; }
.text-secondary { color: var(--sc-text-2) !important; }
.text-muted     { color: var(--sc-text-3) !important; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ═══════════════════════════════════════════════════════════ */
.sc-nav {
  background: var(--sc-nav-bg) !important;
  border-bottom: 1px solid var(--sc-nav-border) !important;
  color: var(--sc-nav-text) !important;
  transition: var(--sc-transition);
}
.sc-nav span,
.sc-nav a { color: var(--sc-nav-text) !important; }

.sc-sidebar {
  background: var(--sc-sidebar-bg) !important;
  border-right: 1px solid var(--sc-border) !important;
  transition: var(--sc-transition);
}
.sc-sidebar .sb-label,
.sc-sidebar .sb-icon,
.sc-sidebar .sb-group-label { color: var(--sc-sidebar-text) !important; }
.sc-sidebar .sb-item:hover  { background: var(--sc-sidebar-hover) !important; }
.sc-sidebar .sb-item.active,
.sc-sidebar .sb-item[aria-current] { background: linear-gradient(to right, #000000, #1e3a8a) !important; color: #fff !important; }
.sc-sidebar .sb-item.active .sb-label,
.sc-sidebar .sb-item.active .sb-icon,
.sc-sidebar .sb-item[aria-current] .sb-label,
.sc-sidebar .sb-item[aria-current] .sb-icon { color: #fff !important; }

.sc-main {
  background: var(--sc-bg) !important;
  transition: var(--sc-transition);
}

/* ═══════════════════════════════════════════════════════════
   CARDS / PANELES
   ═══════════════════════════════════════════════════════════ */
.sc-card,
.card,
.bg-white {
  background-color: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  box-shadow: var(--sc-shadow) !important;
  color: var(--sc-text) !important;
  transition: var(--sc-transition);
}

.card-header,
.sc-card-header {
  background: var(--sc-surface-alt) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: .75rem 1rem;
  border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   KPI / STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.kpi-card,
.stat-card {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  box-shadow: var(--sc-shadow) !important;
  padding: 1rem 1.25rem !important;
  transition: var(--sc-transition);
}
.kpi-value { font-size: 1.65rem; font-weight: 700; color: var(--sc-text) !important; }
.kpi-label { font-size: 0.8rem; color: var(--sc-text-3) !important; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-icon  { width: 40px; height: 40px; border-radius: var(--sc-radius); display: flex; align-items: center; justify-content: center; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════
   TABLAS
   ═══════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--sc-surface-alt) !important;
  color: var(--sc-text-2) !important;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: .6rem 1rem;
  border-bottom: 2px solid var(--sc-border) !important;
  transition: var(--sc-transition);
}
td {
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  font-size: 0.875rem;
  transition: var(--sc-transition);
}
tr:hover td { background: var(--sc-hover) !important; }

/* Responsive table: scroll horizontal en móvil */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════ */
input, select, textarea {
  background: var(--sc-surface) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  padding: .45rem .75rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s, var(--sc-transition);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sc-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}
label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sc-text-2) !important;
  margin-bottom: .3rem;
  transition: color 0.25s;
}
.form-group { margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--sc-radius);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary   { background: var(--sc-primary);  color: #fff;  border-color: var(--sc-primary); }
.btn-primary:hover { background: var(--sc-primary-hover); border-color: var(--sc-primary-hover); }
.btn-secondary,.sc-btn-secondary { background: var(--sc-surface);  color: var(--sc-text); border-color: var(--sc-border); }
.btn-secondary:hover,.sc-btn-secondary:hover { background: var(--sc-hover); }
.sc-btn-primary { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:var(--sc-radius); font-size:.875rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .15s; }
.sc-btn-primary:hover { background: var(--sc-primary-hover); }
.sc-btn-secondary { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:var(--sc-radius); font-size:.875rem; font-weight:600; cursor:pointer; border:1px solid var(--sc-border); transition:all .15s; }
.btn-success   { background: var(--sc-success);  color: #fff; border-color: var(--sc-success); }
.btn-danger    { background: var(--sc-danger);   color: #fff; border-color: var(--sc-danger); }
.btn-warning   { background: var(--sc-warning);  color: #fff; border-color: var(--sc-warning); }
.btn-sm  { padding: .3rem .65rem; font-size: 0.8rem; }
.btn-lg  { padding: .65rem 1.25rem; font-size: 1rem; }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-primary { background: var(--sc-primary-light); color: var(--sc-primary-text); }
.badge-success { background: var(--sc-success-bg);    color: var(--sc-success);      border: 1px solid var(--sc-success-border); }
.badge-warning { background: var(--sc-warning-bg);    color: var(--sc-warning);      border: 1px solid var(--sc-warning-border); }
.badge-danger  { background: var(--sc-danger-bg);     color: var(--sc-danger);       border: 1px solid var(--sc-danger-border);  }
.badge-info    { background: var(--sc-info-bg);       color: var(--sc-info);         border: 1px solid var(--sc-info-border);    }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.sc-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--sc-border); margin-bottom: 1.25rem; flex-wrap: wrap; }
.sc-tab-btn {
  padding: .55rem 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sc-text-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sc-tab-btn:hover    { color: var(--sc-primary); }
.sc-tab-btn.active,
.sc-tab-btn[data-active="true"] { color: var(--sc-primary); border-bottom-color: var(--sc-primary); }
.sc-tab-panel { display: none; }
.sc-tab-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   ALERTAS / NOTIFICACIONES
   ═══════════════════════════════════════════════════════════ */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--sc-radius);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1rem;
}
.alert-success { background: var(--sc-success-bg); color: var(--sc-success); border: 1px solid var(--sc-success-border); }
.alert-warning { background: var(--sc-warning-bg); color: var(--sc-warning); border: 1px solid var(--sc-warning-border); }
.alert-danger  { background: var(--sc-danger-bg);  color: var(--sc-danger);  border: 1px solid var(--sc-danger-border); }
.alert-info    { background: var(--sc-info-bg);    color: var(--sc-info);    border: 1px solid var(--sc-info-border); }

/* ═══════════════════════════════════════════════════════════
   SELECTOR DE TEMA (floating button)
   ═══════════════════════════════════════════════════════════ */
#sc-theme-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--sc-text-2);
  transition: all 0.2s ease;
}
#sc-theme-toggle:hover {
  background: var(--sc-hover);
  transform: scale(1.1);
  color: var(--sc-primary);
}

/* Botón en nav superior (alternativa) */
.sc-theme-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-border);
  background: var(--sc-surface-alt);
  color: var(--sc-text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.95rem;
}
.sc-theme-btn-nav:hover {
  background: var(--sc-hover);
  color: var(--sc-primary);
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.sc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sc-modal {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--sc-text);
}

/* ═══════════════════════════════════════════════════════════
   UTILIDADES RESPONSIVE (mobile-first)
   ═══════════════════════════════════════════════════════════ */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}

/* Flex utilities */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }   .gap-6 { gap: 1.5rem; }

/* Spacing */
.p-2  { padding: .5rem; }   .p-3  { padding: .75rem; }  .p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }  .px-4 { padding-left:1rem; padding-right:1rem; }
.py-2 { padding-top:.5rem;  padding-bottom:.5rem; }
.mb-2 { margin-bottom:.5rem; } .mb-4 { margin-bottom:1rem; } .mb-6 { margin-bottom:1.5rem; }
.mt-2 { margin-top:.5rem; }    .mt-4 { margin-top:1rem; }
.w-full  { width: 100%; }
.min-w-0 { min-width: 0; }

/* ── Breakpoints ── */
/* sm: 640px  md: 768px  lg: 1024px */
@media (max-width: 639px) {
  /* Nav: ocultar labels no esenciales */
  .nav-label-sm { display: none !important; }

  /* Tabla: scroll horizontal */
  .table-responsive { overflow-x: auto; }

  /* Cards de KPI: 2 columnas */
  .grid-kpi { grid-template-columns: 1fr 1fr; }

  /* Botones de acción en nav: solo icono */
  .sc-nav .btn-label { display: none; }

  /* Modales: full width */
  .sc-modal { max-width: 100%; border-radius: var(--sc-radius-lg); }

  /* Sidebar overlay */
  .sc-sidebar-overlay.open { display: block; }

  /* Page padding */
  .sc-main { padding: .75rem !important; }
}

@media (max-width: 767px) {
  /* KPIs: 2 columnas */
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }

  /* Ocultar sidebar por defecto en móvil (sidebar maneja esto con JS) */
  body:not(.sidebar-forced) .sc-sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 8000;
    width: 260px !important;
    transition: transform 0.25s ease;
  }
  body.sidebar-open .sc-sidebar { transform: translateX(0) !important; }

  /* Tabs: scroll horizontal */
  .sc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sc-tab-btn { flex-shrink: 0; }

  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.15rem; }
}

@media (min-width: 768px) {
  .grid-kpi { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-kpi { grid-template-columns: repeat(4, 1fr); }
  .grid-responsive { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILIDAD — Clases Tailwind que usamos con variables
   ═══════════════════════════════════════════════════════════ */
.bg-white      { background-color: var(--sc-surface) !important; }
.bg-gray-50    { background-color: var(--sc-surface-alt) !important; }
.bg-gray-100   { background-color: var(--sc-hover) !important; }
.text-gray-900 { color: var(--sc-text) !important; }
.text-gray-700 { color: var(--sc-text-2) !important; }
.text-gray-500 { color: var(--sc-text-3) !important; }
.border-gray-200 { border-color: var(--sc-border) !important; }
.divide-gray-200 > * + * { border-top-color: var(--sc-border) !important; }

/* Override Tailwind bg/text para dark mode */
[data-theme="dark"] .bg-white    { background-color: var(--sc-surface) !important; }
[data-theme="dark"] .text-gray-900 { color: var(--sc-text) !important; }
[data-theme="dark"] .text-gray-800 { color: var(--sc-text) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--sc-text-2) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--sc-text-3) !important; }
[data-theme="dark"] .border-gray-200 { border-color: var(--sc-border) !important; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--sc-surface-alt) !important; }
[data-theme="dark"] ::placeholder { color: var(--sc-text-3); }

/* ═══════════════════════════════════════════════════════════
   SCROLL PERSONALIZADO
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--sc-bg); }
::-webkit-scrollbar-thumb  { background: var(--sc-border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sc-text-3); }

/* ═══════════════════════════════════════════════════════════
   LAYOUT DE PÁGINA UNIFICADO
   ═══════════════════════════════════════════════════════════ */

/* Wrapper principal de contenido */
.sc-page-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}
.sc-section {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.sc-section-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-text-3);
  margin-bottom: .75rem;
}

/* Grids responsivos estandarizados */
.sc-grid-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sc-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* Colapso responsivo automático */
@media (max-width: 1023px) {
  .sc-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sc-grid-2,
  .sc-grid-3,
  .sc-grid-4 { grid-template-columns: 1fr; }
  .sc-grid-auto { grid-template-columns: 1fr; }
  .sc-page-wrapper { padding: .75rem; }
  .sc-section { padding: 1rem; }
}
@media (max-width: 479px) {
  .sc-page-wrapper { padding: .5rem; }
}

/* Barra de acciones de página (título + botones) */
.sc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.sc-page-header h1,
.sc-page-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sc-text);
}
.sc-page-header .sc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 639px) {
  .sc-page-header { flex-direction: column; align-items: flex-start; }
  .sc-page-header .sc-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   BADGES DE ESTADO UNIFICADOS
   ═══════════════════════════════════════════════════════════ */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* Colores semánticos */
.sc-badge-success  { background: var(--sc-success-bg);  color: var(--sc-success);  border: 1px solid var(--sc-success-border); }
.sc-badge-warning  { background: var(--sc-warning-bg);  color: var(--sc-warning);  border: 1px solid var(--sc-warning-border); }
.sc-badge-danger   { background: var(--sc-danger-bg);   color: var(--sc-danger);   border: 1px solid var(--sc-danger-border); }
.sc-badge-info     { background: var(--sc-info-bg);     color: var(--sc-info);     border: 1px solid var(--sc-info-border); }
.sc-badge-primary  { background: var(--sc-primary-light); color: var(--sc-primary-text); border: 1px solid #bfdbfe; }
.sc-badge-neutral  { background: var(--sc-surface-alt); color: var(--sc-text-2);   border: 1px solid var(--sc-border); }

/* Alias por nombre de estado (usados en módulos) */
.sc-badge-pagada,
.sc-badge-aprobado,
.sc-badge-activo,
.sc-badge-completado  { @extend .sc-badge; background: var(--sc-success-bg);  color: var(--sc-success);  border: 1px solid var(--sc-success-border); }

.sc-badge-pendiente,
.sc-badge-borrador,
.sc-badge-proceso      { background: var(--sc-warning-bg);  color: var(--sc-warning);  border: 1px solid var(--sc-warning-border); }

.sc-badge-rechazado,
.sc-badge-vencida,
.sc-badge-anulado,
.sc-badge-inactivo     { background: var(--sc-danger-bg);   color: var(--sc-danger);   border: 1px solid var(--sc-danger-border); }

.sc-badge-revision,
.sc-badge-enviado,
.sc-badge-nuevo        { background: var(--sc-info-bg);     color: var(--sc-info);     border: 1px solid var(--sc-info-border); }

/* Dark mode badges — garantizar legibilidad */
[data-theme="dark"] .sc-badge-success  { background: rgba(22,163,74,.15);   color: #4ade80; border-color: rgba(22,163,74,.3); }
[data-theme="dark"] .sc-badge-warning  { background: rgba(217,119,6,.15);   color: #fbbf24; border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .sc-badge-danger   { background: rgba(220,38,38,.15);   color: #f87171; border-color: rgba(220,38,38,.3); }
[data-theme="dark"] .sc-badge-info     { background: rgba(8,145,178,.15);   color: #22d3ee; border-color: rgba(8,145,178,.3); }
[data-theme="dark"] .sc-badge-primary  { background: rgba(37,99,235,.15);   color: #60a5fa; border-color: rgba(37,99,235,.3); }
[data-theme="dark"] .sc-badge-neutral  { background: var(--sc-hover);       color: var(--sc-text-2); border-color: var(--sc-border); }
[data-theme="dark"] .sc-badge-pendiente,
[data-theme="dark"] .sc-badge-borrador,
[data-theme="dark"] .sc-badge-proceso  { background: rgba(217,119,6,.15);   color: #fbbf24; border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .sc-badge-rechazado,
[data-theme="dark"] .sc-badge-vencida,
[data-theme="dark"] .sc-badge-anulado,
[data-theme="dark"] .sc-badge-inactivo { background: rgba(220,38,38,.15);   color: #f87171; border-color: rgba(220,38,38,.3); }

/* ═══════════════════════════════════════════════════════════
   FORMULARIOS UNIFICADOS
   ═══════════════════════════════════════════════════════════ */
.sc-form-group { margin-bottom: 1rem; }
.sc-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--sc-text-2);
  margin-bottom: .35rem;
}
.sc-input,
.sc-select,
.sc-textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-surface);
  color: var(--sc-text);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
  outline: none;
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.sc-input::placeholder { color: var(--sc-text-3); }

/* ═══════════════════════════════════════════════════════════
   TABLAS UNIFICADAS
   ═══════════════════════════════════════════════════════════ */
.sc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-border); }
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  color: var(--sc-text);
}
.sc-table thead th {
  padding: .6rem 1rem;
  background: var(--sc-surface-alt);
  color: var(--sc-text-2);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--sc-border);
  text-align: left;
}
.sc-table tbody td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--sc-border);
  vertical-align: middle;
}
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-table tbody tr:hover { background: var(--sc-hover); }
.sc-table tfoot td {
  padding: .65rem 1rem;
  font-weight: 700;
  background: var(--sc-surface-alt);
  border-top: 2px solid var(--sc-border);
}
@media (max-width: 639px) {
  .sc-table thead th,
  .sc-table tbody td,
  .sc-table tfoot td { padding: .5rem .6rem; font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
  #sc-theme-toggle,
  .sc-sidebar,
  .sc-nav,
  .btn-hamburger { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .sc-main { margin: 0 !important; padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Botones con clases Tailwind hardcodeadas
   Garantiza visibilidad del texto en todos los botones
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] button,
[data-theme="dark"] a[class*="bg-"] {
    color: #ffffff !important;
}
[data-theme="dark"] .bg-gray-100 { background-color: #334155 !important; color: var(--sc-text) !important; }
[data-theme="dark"] .bg-gray-50  { background-color: #1e293b !important; }
[data-theme="dark"] .bg-white    { background-color: var(--sc-surface) !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #475569 !important; }
[data-theme="dark"] .text-gray-700 { color: var(--sc-text) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--sc-text-2) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--sc-text-3) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--sc-text-3) !important; }
[data-theme="dark"] table thead th { color: var(--sc-text-2) !important; }
[data-theme="dark"] table tbody td { color: var(--sc-text) !important; }
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-t      { border-color: var(--sc-border) !important; }

/* ── Overrides para clases Tailwind text-slate-* y bg-slate-* en dark mode ── */
[data-theme="dark"] .text-slate-900 { color: var(--sc-text)   !important; }
[data-theme="dark"] .text-slate-800 { color: var(--sc-text)   !important; }
[data-theme="dark"] .text-slate-700 { color: var(--sc-text)   !important; }
[data-theme="dark"] .text-slate-600 { color: var(--sc-text-2) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--sc-text-2) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--sc-text-3) !important; }
[data-theme="dark"] .text-slate-300 { color: var(--sc-text-3) !important; }

[data-theme="dark"] .bg-slate-800 { background-color: #0f172a  !important; color: var(--sc-text)   !important; }
[data-theme="dark"] .bg-slate-700 { background-color: #1e293b  !important; color: var(--sc-text)   !important; }
[data-theme="dark"] .bg-slate-200 { background-color: #334155  !important; color: var(--sc-text)   !important; }
[data-theme="dark"] .bg-slate-100 { background-color: #334155  !important; color: var(--sc-text)   !important; }
[data-theme="dark"] .bg-slate-50  { background-color: #1e293b  !important; color: var(--sc-text-2) !important; }
[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #475569 !important; }
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #334155 !important; }

/* Colores semánticos en dark (green, blue, red, yellow, purple, indigo, orange, teal) */
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700  { color: #4ade80 !important; }
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700    { color: #f87171 !important; }
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700   { color: #60a5fa !important; }
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700 { color: #fbbf24 !important; }
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700 { color: #c084fc !important; }
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700 { color: #818cf8 !important; }
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-700 { color: #fb923c !important; }
[data-theme="dark"] .text-teal-600,
[data-theme="dark"] .text-teal-700   { color: #2dd4bf !important; }

[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-green-50  { background-color: var(--sc-success-bg)  !important; }
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-red-50    { background-color: var(--sc-danger-bg)   !important; }
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-blue-50   { background-color: var(--sc-primary-light) !important; }
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-yellow-50 { background-color: var(--sc-warning-bg)  !important; }
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-purple-50 { background-color: #2d1f47 !important; }
[data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .bg-indigo-50 { background-color: #1e1b4b !important; }
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-orange-50 { background-color: #431407 !important; }
[data-theme="dark"] .bg-teal-100,
[data-theme="dark"] .bg-teal-50   { background-color: var(--sc-info-bg) !important; }

/* Botones con fondo de color: el texto siempre blanco, en cualquier tema */
a.text-white,
button.text-white { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Design System Components
   Cubre: cards, tables, modals, forms, badges, alerts,
          header inline styles, nav indicadores FX
   ═══════════════════════════════════════════════════════════ */

/* ── Body / página base ─────────────────────────────────── */
[data-theme="dark"] body {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .card-flat,
[data-theme="dark"] .stat-card {
  background: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .stat-icon.blue   { background: rgba(37,99,235,.15)  !important; }
[data-theme="dark"] .stat-icon.green  { background: rgba(22,163,74,.15)  !important; }
[data-theme="dark"] .stat-icon.yellow { background: rgba(202,138,4,.15)  !important; }
[data-theme="dark"] .stat-icon.red    { background: rgba(220,38,38,.15)  !important; }
[data-theme="dark"] .stat-icon.purple { background: rgba(147,51,234,.15) !important; }
[data-theme="dark"] .stat-value { color: var(--sc-text) !important; }
[data-theme="dark"] .stat-label { color: var(--sc-text-2) !important; }

/* ── Tablas ─────────────────────────────────────────────── */
[data-theme="dark"] .sc-table,
[data-theme="dark"] .table-wrapper { background: var(--sc-surface) !important; }
[data-theme="dark"] .sc-table thead { background: var(--sc-surface-alt) !important; }
[data-theme="dark"] .sc-table thead th {
  color: var(--sc-text-2) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .sc-table tbody tr { border-color: var(--sc-border) !important; }
[data-theme="dark"] .sc-table tbody tr:hover { background: var(--sc-hover) !important; }
[data-theme="dark"] .sc-table tbody td { color: var(--sc-text) !important; }

/* ── Formularios ────────────────────────────────────────── */
[data-theme="dark"] .form-control {
  background: #1a2436 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}
[data-theme="dark"] .form-label { color: #cbd5e1 !important; }
[data-theme="dark"] .search-bar { background: #1a2436 !important; border-color: #334155 !important; color: #f1f5f9 !important; }

/* ── Badges ─────────────────────────────────────────────── */
[data-theme="dark"] .badge-blue    { background: rgba(37,99,235,.15)  !important; color: #93c5fd !important; }
[data-theme="dark"] .badge-green   { background: rgba(22,163,74,.15)  !important; color: #86efac !important; }
[data-theme="dark"] .badge-yellow  { background: rgba(202,138,4,.15)  !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-red     { background: rgba(220,38,38,.15)  !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-purple  { background: rgba(147,51,234,.15) !important; color: #d8b4fe !important; }
[data-theme="dark"] .badge-slate   { background: var(--sc-hover)      !important; color: var(--sc-text-2) !important; }
[data-theme="dark"] .badge-success { background: rgba(22,163,74,.15)  !important; color: #86efac !important; }
[data-theme="dark"] .badge-warning { background: rgba(202,138,4,.15)  !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-danger  { background: rgba(220,38,38,.15)  !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-info    { background: rgba(8,145,178,.15)  !important; color: #67e8f9 !important; }

/* ── Alerts ─────────────────────────────────────────────── */
[data-theme="dark"] .alert-info    { background: rgba(8,145,178,.1)   !important; border-color: rgba(8,145,178,.3)   !important; color: #67e8f9 !important; }
[data-theme="dark"] .alert-success { background: rgba(22,163,74,.1)   !important; border-color: rgba(22,163,74,.3)   !important; color: #86efac !important; }
[data-theme="dark"] .alert-warning { background: rgba(202,138,4,.1)   !important; border-color: rgba(202,138,4,.3)   !important; color: #fcd34d !important; }
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.1)   !important; border-color: rgba(220,38,38,.3)   !important; color: #fca5a5 !important; }

/* ── Modales ────────────────────────────────────────────── */
[data-theme="dark"] .modal {
  background: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .modal-header {
  background: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .modal-header h3 { color: var(--sc-text) !important; }
[data-theme="dark"] .modal-footer {
  background: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* ── Botones secundarios ─────────────────────────────────── */
[data-theme="dark"] .btn-secondary {
  background: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--sc-hover) !important;
  border-color: var(--sc-border-2) !important;
}

/* ── Profile menu ────────────────────────────────────────── */
[data-theme="dark"] .sc-profile-menu {
  background: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .sc-profile-header { background: var(--sc-surface-alt) !important; }
[data-theme="dark"] .sc-profile-name  { color: var(--sc-text) !important; }
[data-theme="dark"] .sc-profile-item  { color: var(--sc-text-2) !important; }
[data-theme="dark"] .sc-profile-item:hover { background: var(--sc-hover) !important; }

/* ── Nav header — elementos inline ──────────────────────── */
[data-theme="dark"] .sc-nav {
  background: var(--sc-nav-bg) !important;
  border-color: var(--sc-nav-border) !important;
}
[data-theme="dark"] .sc-nav span { color: var(--sc-nav-text) !important; }
/* píldoras de acción en el nav */
[data-theme="dark"] .sc-nav a[href*="gmail"],
[data-theme="dark"] .sc-nav a[href*="mail"] {
  background: rgba(13,148,136,.15) !important;
  border-color: rgba(13,148,136,.3) !important;
  color: #2dd4bf !important;
}
[data-theme="dark"] .sc-nav a[href*="perfil"] {
  background: rgba(37,99,235,.15) !important;
  border-color: rgba(37,99,235,.3) !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .sc-nav a[href*="notificaciones"] {
  background: rgba(217,119,6,.15) !important;
  border-color: rgba(217,119,6,.3) !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .sc-nav a[href*="logout"] {
  background: rgba(220,38,38,.15) !important;
  border-color: rgba(220,38,38,.3) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .sc-nav a[href*="impersonate"] {
  background: rgba(124,58,237,.15) !important;
  border-color: rgba(124,58,237,.3) !important;
  color: #c4b5fd !important;
}
/* indicadores FX */
[data-theme="dark"] #header-fx-UF  { background: rgba(15,118,110,.18) !important; border-color: rgba(15,118,110,.35) !important; color: #5eead4 !important; }
[data-theme="dark"] #header-fx-USD { background: rgba(37,99,235,.15)  !important; border-color: rgba(37,99,235,.3)  !important; color: #93c5fd !important; }
[data-theme="dark"] #header-fx-EUR { background: rgba(124,58,237,.15) !important; border-color: rgba(124,58,237,.3) !important; color: #c4b5fd !important; }
[data-theme="dark"] #header-fx-MXN { background: rgba(180,83,9,.15)   !important; border-color: rgba(180,83,9,.3)   !important; color: #fcd34d !important; }

/* ── Org switcher ────────────────────────────────────────── */
[data-theme="dark"] #org-switcher-menu {
  background: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] #org-switcher-menu button {
  color: var(--sc-text-2) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] #org-switcher-menu button:hover { background: var(--sc-hover) !important; }

/* ── Paginación / misc ───────────────────────────────────── */
[data-theme="dark"] .pagination-pages a {
  background: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text-2) !important;
}
[data-theme="dark"] .pagination-pages a:hover,
[data-theme="dark"] .pagination-pages a.active {
  background: #2563eb !important;
  color: #fff !important;
}
[data-theme="dark"] .empty-state { color: var(--sc-text-2) !important; }
[data-theme="dark"] .breadcrumb .current { color: var(--sc-text) !important; }
[data-theme="dark"] .highlight { background: rgba(37,99,235,.2) !important; color: #93c5fd !important; }

/* ── Landing index.html: feature-cards dark mode ──────────────── */
[data-theme="dark"] #caracteristicas {
  background: var(--sc-bg) !important;
}
[data-theme="dark"] #caracteristicas h2,
[data-theme="dark"] #caracteristicas h3 {
  color: var(--sc-text) !important;
}
[data-theme="dark"] #caracteristicas p {
  color: var(--sc-text-2) !important;
}
[data-theme="dark"] .feature-card {
  background: var(--sc-surface) !important;
  background-image: none !important;
}
[data-theme="dark"] .feature-card h3 {
  color: var(--sc-text) !important;
}
[data-theme="dark"] .feature-card p {
  color: var(--sc-text-2) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Bootstrap 5 Components
   ═══════════════════════════════════════════════════════════ */

/* ── Textos Bootstrap hardcodeados ──────────────────────── */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body  { color: var(--sc-text)   !important; }
[data-theme="dark"] .text-muted { color: var(--sc-text-3) !important; }
[data-theme="dark"] .text-black { color: var(--sc-text)   !important; }
[data-theme="dark"] small,
[data-theme="dark"] .small      { color: var(--sc-text-2) !important; }

/* ── Fondos Bootstrap ───────────────────────────────────── */
[data-theme="dark"] .bg-light   { background-color: var(--sc-surface-alt) !important; color: var(--sc-text) !important; }
[data-theme="dark"] .bg-dark    { background-color: #0f172a !important; }
[data-theme="dark"] .bg-body    { background-color: var(--sc-bg) !important; }
[data-theme="dark"] .bg-secondary { background-color: var(--sc-hover) !important; color: var(--sc-text-2) !important; }

/* ── Formularios Bootstrap 5 — regla UNIVERSAL ───────────── */
/* Cubre TODOS los inputs sin importar clase, tag o atributo type */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .search-bar {
  background-color: #1a2436 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748b !important; }
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: #0f172a !important;
  color: #475569 !important;
  cursor: not-allowed;
}
[data-theme="dark"] .form-check-input {
  background-color: #1a2436 !important;
  border-color: #475569 !important;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}
[data-theme="dark"] .form-check-label,
[data-theme="dark"] .form-label { color: #cbd5e1 !important; }
[data-theme="dark"] .input-group-text {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: var(--sc-text-2) !important;
}

/* ── Tables Bootstrap ───────────────────────────────────── */
[data-theme="dark"] .table {
  color: var(--sc-text) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .table-bordered > :not(caption) > * { border-color: var(--sc-border) !important; }
[data-theme="dark"] .table thead th { background-color: var(--sc-surface-alt) !important; color: var(--sc-text-2) !important; }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th { background-color: var(--sc-surface-alt) !important; color: var(--sc-text-2) !important; }

/* ── Cards Bootstrap ────────────────────────────────────── */
[data-theme="dark"] .card {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .card-header {
  background-color: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .card-footer {
  background-color: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text-2) !important;
}
[data-theme="dark"] .card-body { color: var(--sc-text) !important; }
[data-theme="dark"] .card-title { color: var(--sc-text) !important; }
[data-theme="dark"] .card-text  { color: var(--sc-text-2) !important; }

/* ── Modales Bootstrap ──────────────────────────────────── */
[data-theme="dark"] .modal-content {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .modal-header {
  background-color: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .modal-title { color: var(--sc-text) !important; }
[data-theme="dark"] .modal-body  { color: var(--sc-text) !important; }
[data-theme="dark"] .modal-footer {
  background-color: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .btn-close {
  filter: invert(1) !important;
  opacity: .7;
}
[data-theme="dark"] .btn-close:hover { opacity: 1; }

/* ── Dropdowns Bootstrap ────────────────────────────────── */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  box-shadow: var(--sc-shadow-lg) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--sc-text-2) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .dropdown-divider { border-color: var(--sc-border) !important; }
[data-theme="dark"] .dropdown-header  { color: var(--sc-text-3) !important; }

/* ── Nav / Tabs Bootstrap ───────────────────────────────── */
[data-theme="dark"] .nav-tabs {
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--sc-text-2) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--sc-text) !important;
  border-color: var(--sc-border) !important;
  background: var(--sc-hover) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) var(--sc-border) var(--sc-surface) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .nav-pills .nav-link { color: var(--sc-text-2) !important; }
[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: #2563eb !important;
  color: #fff !important;
}
[data-theme="dark"] .tab-content { color: var(--sc-text) !important; }

/* ── List groups Bootstrap ──────────────────────────────── */
[data-theme="dark"] .list-group-item {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item.active {
  background-color: var(--sc-hover) !important;
}
[data-theme="dark"] .list-group-item.active { color: #60a5fa !important; }

/* ── Accordion Bootstrap ────────────────────────────────── */
[data-theme="dark"] .accordion-item {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .accordion-button {
  background-color: var(--sc-surface-alt) !important;
  color: var(--sc-text) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--sc-hover) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .accordion-button::after { filter: invert(1); }
[data-theme="dark"] .accordion-body { color: var(--sc-text) !important; }

/* ── Popover / Tooltip Bootstrap ────────────────────────── */
[data-theme="dark"] .popover {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .popover-body  { color: var(--sc-text) !important; }
[data-theme="dark"] .popover-header {
  background-color: var(--sc-surface-alt) !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .tooltip-inner {
  background-color: var(--sc-surface) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border);
}

/* ── Alerts Bootstrap ───────────────────────────────────── */
[data-theme="dark"] .alert-dismissible .btn-close { filter: none !important; }

/* ── Badges Bootstrap ───────────────────────────────────── */
[data-theme="dark"] .badge.bg-secondary { background-color: var(--sc-hover) !important; color: var(--sc-text-2) !important; }
[data-theme="dark"] .badge.bg-light     { background-color: var(--sc-surface-alt) !important; color: var(--sc-text) !important; }
[data-theme="dark"] .badge.bg-dark      { background-color: #475569 !important; }
[data-theme="dark"] .badge.text-dark    { color: var(--sc-text) !important; }

/* ── Botones Bootstrap outline (texto debe ser del color del borde) ── */
/* Corrige el override demasiado agresivo de `button { color:#fff }` */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--sc-text-2) !important;
  border-color: var(--sc-border-2) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .btn-outline-primary  { color: #60a5fa !important; border-color: #3b82f6 !important; }
[data-theme="dark"] .btn-outline-primary:hover  { background: rgba(59,130,246,.15) !important; }
[data-theme="dark"] .btn-outline-success  { color: #4ade80 !important; border-color: #22c55e !important; }
[data-theme="dark"] .btn-outline-success:hover  { background: rgba(34,197,94,.12) !important; }
[data-theme="dark"] .btn-outline-danger   { color: #f87171 !important; border-color: #ef4444 !important; }
[data-theme="dark"] .btn-outline-danger:hover   { background: rgba(239,68,68,.12) !important; }
[data-theme="dark"] .btn-outline-warning  { color: #fbbf24 !important; border-color: #f59e0b !important; }
[data-theme="dark"] .btn-outline-warning:hover  { background: rgba(245,158,11,.12) !important; }
[data-theme="dark"] .btn-outline-info     { color: #22d3ee !important; border-color: #06b6d4 !important; }
[data-theme="dark"] .btn-outline-light    { color: var(--sc-text-2) !important; border-color: var(--sc-border) !important; }
[data-theme="dark"] .btn-outline-dark     { color: var(--sc-text) !important; border-color: var(--sc-border-2) !important; }
/* btn-link siempre heredar color */
[data-theme="dark"] .btn-link { color: #60a5fa !important; background: transparent !important; border: none !important; }
[data-theme="dark"] .btn-link:hover { color: #93c5fd !important; }
/* btn-link de acción destructiva */
[data-theme="dark"] .btn-link.text-danger { color: #f87171 !important; }

/* ── Breadcrumbs ────────────────────────────────────────── */
[data-theme="dark"] .breadcrumb { background: transparent !important; }
[data-theme="dark"] .breadcrumb-item { color: var(--sc-text-2) !important; }
[data-theme="dark"] .breadcrumb-item a { color: #60a5fa !important; }
[data-theme="dark"] .breadcrumb-item.active { color: var(--sc-text) !important; }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--sc-text-3) !important; }

/* ── Progress bars ──────────────────────────────────────── */
[data-theme="dark"] .progress { background-color: var(--sc-hover) !important; }

/* ── Spinners ───────────────────────────────────────────── */
[data-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-grow { color: #3b82f6 !important; }

/* ── Hr / separadores ───────────────────────────────────── */
[data-theme="dark"] hr { border-color: var(--sc-border) !important; opacity: 1 !important; }

/* ── Inline styles hardcodeados comunes en módulos ──────── */
/* color oscuro hardcodeado */
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"] { color: var(--sc-text) !important; }

/* fondo blanco hardcodeado */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
  background-color: var(--sc-surface) !important;
}

/* fondo light hardcodeado */
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background-color:#f8f9fa"],
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8fafc"],
[data-theme="dark"] [style*="background-color: #f8fafc"] {
  background-color: var(--sc-surface-alt) !important;
}

/* border claro hardcodeado */
[data-theme="dark"] [style*="border-color:#e2e8f0"],
[data-theme="dark"] [style*="border-color: #e2e8f0"],
[data-theme="dark"] [style*="border-color:#dee2e6"],
[data-theme="dark"] [style*="border-color: #dee2e6"] {
  border-color: var(--sc-border) !important;
}

/* ── Tom Select (autocomplete) en dark mode ─────────────── */
[data-theme="dark"] .ts-wrapper .ts-control {
  background: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .ts-wrapper .ts-dropdown {
  background: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-theme="dark"] .ts-wrapper .ts-dropdown .option.active {
  background: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .ts-wrapper.single .ts-control { background: var(--sc-surface-alt) !important; }

/* ── Select2 (si se usa) en dark mode ───────────────────── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--sc-surface-alt) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
[data-theme="dark"] .select2-dropdown {
  background-color: var(--sc-surface) !important;
  border-color: var(--sc-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--sc-text-2) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
  background-color: var(--sc-hover) !important;
  color: var(--sc-text) !important;
}

/* ── Scrollable containers ──────────────────────────────── */
[data-theme="dark"] [class*="overflow"] { color: inherit; }

/* ── Code / pre ─────────────────────────────────────────── */
[data-theme="dark"] code {
  background: var(--sc-hover) !important;
  color: #f472b6 !important;
  padding: .1em .4em;
  border-radius: 4px;
}
[data-theme="dark"] pre {
  background: var(--sc-surface-alt) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  border-radius: var(--sc-radius);
  padding: 1rem;
}