/* ============================================================
   Hub Core — overrides locales
   Tailwind y Flowbite cargan vía CDN en el layout.
   Aquí van solo ajustes finos y utilidades que Tailwind no cubre.
   ============================================================ */

/* ─── Tokens de tema (RGB sin envolver para alpha-value de Tailwind) ─── */
:root,
[data-theme="dark"] {
  --bg-base:        2 6 23;        /* slate-950 */
  --surface-1:     15 23 42;       /* slate-900 */
  --surface-2:     30 41 59;       /* slate-800 */
  --surface-3:     51 65 85;       /* slate-700 */
  --sidebar-bg:    26 35 50;       /* gris medio custom — entre slate-900 y slate-800 */
  --fg-primary:   241 245 249;     /* slate-100 */
  --fg-secondary: 203 213 225;     /* slate-300 */
  --fg-muted:     148 163 184;     /* slate-400 */
  --fg-subtle:    100 116 139;     /* slate-500 */
  --edge:          30 41 59;       /* slate-800 */
  --edge-strong:   51 65 85;       /* slate-700 */
  --scrollbar-track: #0b1220;
  --scrollbar-thumb: #334155;
  --scrollbar-thumb-hover: #475569;
  --autofill-text: #e2e8f0;
  --autofill-bg:   #1e293b;
}

[data-theme="light"] {
  --bg-base:       248 250 252;    /* slate-50 */
  --surface-1:     255 255 255;    /* white */
  --surface-2:     241 245 249;    /* slate-100 */
  --surface-3:     226 232 240;    /* slate-200 */
  --sidebar-bg:    226 232 240;    /* slate-200 — gris más oscuro contra body slate-50 */
  --fg-primary:     15 23 42;      /* slate-900 — texto principal (sin cambio, ya máximo) */
  --fg-secondary:   30 41 59;      /* slate-800 — bumped desde 700 para más legibilidad */
  --fg-muted:       71 85 105;     /* slate-600 — bumped desde 500 */
  --fg-subtle:     100 116 139;    /* slate-500 — bumped desde 400 (WCAG AA OK) */
  --edge:          226 232 240;    /* slate-200 */
  --edge-strong:   203 213 225;    /* slate-300 */
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --autofill-text: #0f172a;
  --autofill-bg:   #ffffff;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb   { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--autofill-text);
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
  caret-color: var(--autofill-text);
}

[x-cloak] { display: none !important; }

/* Dashboard cards — Opción A: gradiente por módulo + lift on hover + fade-in staggered. */
.dash-card {
  transition: transform 0.22s ease, box-shadow 0.3s ease, filter 0.2s ease, border-color 0.2s ease;
  animation: dash-card-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -14px var(--dash-shadow, rgba(0, 0, 0, 0.25));
  filter: brightness(1.06) saturate(1.05);
}
@keyframes dash-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-card { animation: none; }
  .dash-card:hover { transform: none; }
}

/* Override de tipografía dentro de dash-cards: las cards son más compactas
   ahora (p-4 + icon 40px), por lo que reducimos el text-2xl que los widgets
   usan por default a text-xl. Los widgets siguen funcionando standalone fuera
   del dashboard sin perder tamaño. */
.dash-card .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }

/* Mostrar/ocultar elementos según el tema actual.
   Uso: <img data-theme-show="dark"> aparece solo en dark; "light" solo en light. */
[data-theme="dark"]  [data-theme-show="light"] { display: none !important; }
[data-theme="light"] [data-theme-show="dark"]  { display: none !important; }

/* ─── Badges semánticos en light mode ────────────────────────────────────
   Las paletas Tailwind (emerald/rose/amber/sky/violet/indigo) en su shade
   300/400 se diseñaron para texto claro sobre fondo oscuro. En light mode
   quedan ilegibles. Override quirúrgico: oscurecemos los shades 300/400
   cuando data-theme="light" y subimos un poco la opacidad de los fondos
   tinted para mantener presencia. */
[data-theme="light"] .text-brand-400   { color: rgb(21 86 182) !important; } /* brand-800 — códigos de doc en light, más legibles que el azul claro */
[data-theme="light"] .text-brand-300   { color: rgb(23 74 144) !important; } /* brand-900 — usado en hover sobre brand-400 */
[data-theme="light"] .hover\:text-brand-400:hover { color: rgb(21 86 182) !important; }
[data-theme="light"] .hover\:text-brand-300:hover { color: rgb(23 74 144) !important; }
[data-theme="light"] .text-emerald-300 { color: rgb(4 120 87)  !important; } /* emerald-700 */
[data-theme="light"] .text-emerald-400 { color: rgb(5 150 105) !important; } /* emerald-600 */
[data-theme="light"] .text-rose-300    { color: rgb(159 18 57) !important; } /* rose-700 */
[data-theme="light"] .text-rose-400    { color: rgb(190 18 60) !important; } /* rose-700 */
[data-theme="light"] .text-amber-300   { color: rgb(180 83 9)  !important; } /* amber-700 */
[data-theme="light"] .text-amber-400   { color: rgb(217 119 6) !important; } /* amber-600 */
[data-theme="light"] .text-sky-300     { color: rgb(3 105 161) !important; } /* sky-700 */
[data-theme="light"] .text-sky-400     { color: rgb(2 132 199) !important; } /* sky-600 */
[data-theme="light"] .text-violet-300  { color: rgb(91 33 182) !important; } /* violet-700 */
[data-theme="light"] .text-violet-400  { color: rgb(124 58 237) !important; } /* violet-600 */
[data-theme="light"] .text-indigo-300  { color: rgb(67 56 202) !important; } /* indigo-700 */
[data-theme="light"] .text-indigo-400  { color: rgb(79 70 229) !important; } /* indigo-600 */

/* Bumps de opacidad de los fondos tinted (de /10 → /20) para que el badge
   "se vea" sobre fondo claro sin perder el efecto pastel. */
[data-theme="light"] .bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.20) !important; }
[data-theme="light"] .bg-rose-500\/10    { background-color: rgb(244 63 94  / 0.20) !important; }
[data-theme="light"] .bg-amber-500\/10   { background-color: rgb(245 158 11 / 0.20) !important; }
[data-theme="light"] .bg-sky-500\/10     { background-color: rgb(14 165 233 / 0.20) !important; }
[data-theme="light"] .bg-violet-500\/10  { background-color: rgb(139 92 246 / 0.20) !important; }
[data-theme="light"] .bg-indigo-500\/10  { background-color: rgb(99 102 241 / 0.20) !important; }
[data-theme="light"] .bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.25) !important; }
[data-theme="light"] .bg-rose-500\/15    { background-color: rgb(244 63 94  / 0.25) !important; }
[data-theme="light"] .bg-amber-500\/15   { background-color: rgb(245 158 11 / 0.25) !important; }
[data-theme="light"] .bg-emerald-500\/20 { background-color: rgb(16 185 129 / 0.30) !important; }
[data-theme="light"] .bg-rose-500\/20    { background-color: rgb(244 63 94  / 0.30) !important; }
[data-theme="light"] .bg-amber-500\/20   { background-color: rgb(245 158 11 / 0.30) !important; }
[data-theme="light"] .bg-sky-500\/20     { background-color: rgb(14 165 233 / 0.30) !important; }
[data-theme="light"] .bg-violet-500\/20  { background-color: rgb(139 92 246 / 0.30) !important; }

/* Botones: CSS plano (no @apply — Tailwind se carga vía CDN runtime que no procesa directivas de build). */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn-primary {
  background-color: #1582f5; /* brand-600 */
  color: #fff;
  font-weight: 500;
}
.btn-primary:hover { background-color: #1269e0; /* brand-700 */ }

.btn-secondary {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg-primary));
}
.btn-secondary:hover { background-color: rgb(var(--surface-3)); }

.btn-danger {
  background-color: #e11d48; /* rose-600 */
  color: #fff;
}
.btn-danger:hover { background-color: #be123c; /* rose-700 */ }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media print {
  aside, header, footer, .no-print { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; }
}

/* ─── DataTables (Tailwind plugin) override a tokens del proyecto ───────────
   dataTables.tailwindcss.css usa la variante `dark:` de Tailwind basada en
   prefers-color-scheme. Si el usuario tiene Windows en modo dark pero el
   theme del proyecto está forzado a light, los controles salen oscuros.
   Aquí mapeamos a `var(--surface-2)` etc. para respetar [data-theme].
   ============================================================================ */
div.dt-container { color: rgb(var(--fg-primary)); font-size: 0.875rem; }

div.dt-container .dt-search input,
div.dt-container .dt-length select,
div.dt-container input[type="search"],
div.dt-container select {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg-primary));
  border: 1px solid rgb(var(--edge-strong));
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  outline: none;
}
div.dt-container input:focus,
div.dt-container select:focus {
  border-color: #1582f5; /* brand-600 */
  box-shadow: 0 0 0 2px rgba(21, 130, 245, 0.25);
}

div.dt-container .dt-info,
div.dt-container .dt-length label,
div.dt-container .dt-search label {
  color: rgb(var(--fg-muted));
}

/* Tabla: header + striping basado en tokens (anula el bg-gray-* del plugin) */
div.dt-container table.dataTable thead th,
div.dt-container table.dataTable thead td {
  background-color: rgb(var(--surface-2) / 0.5);
  color: rgb(var(--fg-muted));
  border-bottom: 1px solid rgb(var(--edge-strong));
}
div.dt-container table.dataTable tbody tr {
  background-color: transparent !important;
}
div.dt-container table.dataTable.stripe tbody tr.odd,
div.dt-container table.dataTable.display tbody tr.odd {
  background-color: rgb(var(--surface-2) / 0.35) !important;
}
div.dt-container table.dataTable tbody tr:hover,
div.dt-container table.dataTable.hover tbody tr:hover,
div.dt-container table.dataTable.display tbody tr:hover {
  background-color: rgb(var(--surface-2) / 0.6) !important;
}
div.dt-container table.dataTable tbody td {
  border-top: 1px solid rgb(var(--edge));
}