/* ============================================================
   Design Tokens — InfoSec Demo Lab
   Override de DaisyUI + tokens del design system (OKLCh)

   ESTRATEGIA DE PRECEDENCIA
   - DaisyUI define --b1, --p, etc. en  [data-theme="..."]     -> (0,1,0)
   - Aquí los overrideamos en          :root[data-theme="..."] -> (0,2,0)
     Mayor especificidad => gana SIEMPRE, sin depender del orden
     de carga ni del <style> que Tailwind CDN inyecta al final
     del <head> (que se regenera en caliente via MutationObserver).
   - !important se mantiene como cinturón de seguridad.
   ============================================================ */

/* ============================================================
   Design system tokens — disponibles para uso directo
   ============================================================ */
:root {
  --ds-bg:      oklch(98.4% 0.003 248);
  --ds-surface: oklch(100% 0 0);
  --ds-fg:      oklch(20.8% 0.040 266);
  --ds-muted:   oklch(44.6% 0.037 257);
  --ds-border:  oklch(90% 0.010 260);

  --ds-accent:        oklch(54.6% 0.215 263);
  --ds-accent-hover:  oklch(48% 0.200 263);
  --ds-accent-soft:   oklch(54.6% 0.215 263 / 0.12);
  --ds-secondary:     oklch(54.1% 0.247 293);
  --ds-secondary-soft: oklch(54.1% 0.247 293 / 0.12);

  --ds-success:  oklch(62% 0.18 145);
  --ds-warning:  oklch(72% 0.16 80);
  --ds-error:    oklch(52% 0.20 25);
  --ds-info:     oklch(58% 0.12 240);

  --ds-shell:    oklch(18% 0.02 250);
  --ds-shell-fg: oklch(92% 0.004 240);

  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-xl: 28px;
  --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
  --ds-shadow-md: 0 4px 16px oklch(0% 0 0 / 0.07);
  --ds-shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.10);
  --ds-shadow-xl: 0 20px 48px oklch(0% 0 0 / 0.14);

  --ds-ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   DaisyUI theme overrides
   Selector :root[data-theme="..."] (0,2,0) supera al
   [data-theme="..."] (0,1,0) de DaisyUI y a las utilidades
   de Tailwind (0,1,0), sin depender del orden de cascada.
   ============================================================ */

/* --- LIGHT THEME --- */
/* DaisyUI usa oklch(var(--b2)/1) — los valores deben ir SIN wrapper oklch() */
:root[data-theme="light"] {
  --b1: 100% 0 0 !important;
  --b2: 98.4% 0.003 248 !important;
  --b3: 96.8% 0.007 248 !important;
  --bc: 20.8% 0.040 266 !important;

  --p: 54.6% 0.215 263 !important;
  --pc: 100% 0 0 !important;

  --s: 54.1% 0.247 293 !important;
  --sc: 100% 0 0 !important;

  --a: 62.3% 0.188 260 !important;
  --ac: 100% 0 0 !important;

  --n: 44.6% 0.037 257 !important;
  --nc: 98.4% 0.003 248 !important;

  --su: 69.6% 0.149 163 !important;
  --suc: 100% 0 0 !important;

  --wa: 76.9% 0.165 70 !important;
  --wac: 25% 0.08 70 !important;

  --er: 63.7% 0.208 25 !important;
  --erc: 100% 0 0 !important;

  --in: 62.3% 0.188 260 !important;
  --inc: 100% 0 0 !important;
}

/* --- DARK THEME --- */
:root[data-theme="dark"] {
  --b1: 23.3% 0.039 266 !important;
  --b2: 16.6% 0.026 269 !important;
  --b3: 25.5% 0.040 267 !important;
  --bc: 96.8% 0.007 248 !important;

  --p: 54.6% 0.215 263 !important;
  --pc: 100% 0 0 !important;

  --s: 54.1% 0.247 293 !important;
  --sc: 100% 0 0 !important;

  --a: 62.3% 0.188 260 !important;
  --ac: 100% 0 0 !important;

  --n: 71.1% 0.035 257 !important;
  --nc: 16.6% 0.026 269 !important;

  --su: 68% 0.16 145 !important;
  --suc: 16% 0.01 250 !important;

  --wa: 78% 0.14 80 !important;
  --wac: 25% 0.08 80 !important;

  --er: 60% 0.20 25 !important;
  --erc: 100% 0 0 !important;

  --in: 65% 0.12 240 !important;
  --inc: 100% 0 0 !important;
}

/* ============================================================
   Component refinements
   ============================================================ */

/* Navbar — blur + transparencia */
.navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--ds-ease), box-shadow var(--ds-ease);
}

:root[data-theme="light"] .navbar {
  background: oklch(100% 0 0 / 0.85) !important;
}

:root[data-theme="dark"] .navbar {
  background: oklch(16.6% 0.026 269 / 0.92) !important;
}

/* Sidebar */
.drawer-side aside {
  transition: background var(--ds-ease);
}

:root[data-theme="light"] .drawer-side aside {
  background: oklch(98.4% 0.003 248) !important;
}

:root[data-theme="dark"] .drawer-side aside {
  background: oklch(16.6% 0.026 269) !important;
}

/* Cards — hover */
.card {
  transition: box-shadow var(--ds-ease), transform var(--ds-ease);
}

.card:hover {
  box-shadow: var(--ds-shadow-md);
}

/* Buttons — elevación */
.btn {
  transition: all var(--ds-ease);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

/* Badges */
.badge {
  border-radius: var(--ds-radius-full) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Alerts */
.alert {
  border-radius: var(--ds-radius-md) !important;
  transition: all var(--ds-ease);
}

/* Tables — hover */
.table tbody tr:hover {
  background: oklch(54.6% 0.215 263 / 0.06);
}

:root[data-theme="dark"] .table tbody tr:hover {
  background: oklch(54.6% 0.215 263 / 0.12);
}

/* Progress */
.progress {
  border-radius: var(--ds-radius-full) !important;
  overflow: hidden;
}

/* Menu — hover */
.menu li a {
  transition: all var(--ds-ease);
  border-radius: var(--ds-radius-sm);
}

.menu li a:hover {
  background: oklch(54.6% 0.215 263 / 0.08);
}

:root[data-theme="dark"] .menu li a:hover {
  background: oklch(54.6% 0.215 263 / 0.14);
}

/* Toast animation */
.toast .alert {
  animation: slideIn 0.3s var(--ds-ease);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Focus visible */
:focus-visible {
  outline: 3px solid oklch(54.6% 0.215 263 / 0.5) !important;
  outline-offset: 2px;
}

:root[data-theme="dark"] :focus-visible {
  outline-color: oklch(62.3% 0.188 260 / 0.6) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(78% 0.01 240);
  border-radius: var(--ds-radius-full);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: oklch(35% 0.01 250);
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(65% 0.015 240);
}

/* El layout es flex: sin esto una tabla o una barra ancha ensancha toda la pagina. */
.drawer-content,
.drawer-content > main {
  min-width: 0;
}

@media (max-width: 639px) {
  main > section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  main h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}