/* ==========================================================================
   Sistema de Inventario — Design System
   Paleta inspirada en etiquetas de activos de TI (asset tags): tinta oscura
   para el panel de navegación, superficie fría y neutra para el contenido,
   un teal técnico como color de marca y acentos semánticos claros por estado.
   ========================================================================== */

:root {
  /* Tinta / marca */
  --ink-900: #10151f;
  --ink-800: #161d2b;
  --ink-700: #1e2740;
  --ink-600: #2a3654;

  --brand: #12897e;      /* teal técnico — color primario de marca */
  --brand-dark: #0c6a61;
  --brand-light: #e6f5f3;

  --accent-amber: #f5a623; /* mantenimiento / advertencia */
  --accent-indigo: #5850ec; /* asignado */
  --accent-green: #1f9d63;  /* activo */
  --accent-red: #e5484d;    /* baja / inactivo */

  --surface: #f4f6f8;
  --card: #ffffff;
  --border: #e4e7ec;
  --text-ink: #1b2130;
  --text-muted: #6b7280;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------
   Tema DaisyUI personalizado (variables HSL, formato daisyUI v2.x)
   Aplicado vía data-theme="mjc" en <html>. Retemiza automáticamente
   btn, badge, table, alert, input, drawer, menu, tooltip, card, etc.
   -------------------------------------------------------------------- */
[data-theme="mjc"] {
  --p:  174 76% 29%;   /* primary   -> teal marca */
  --pf: 174 76% 24%;
  --pc: 0 0% 100%;

  --s:  243 65% 59%;   /* secondary -> indigo (asignado) */
  --sf: 243 55% 50%;
  --sc: 0 0% 100%;

  --a:  38 92% 50%;    /* accent    -> ámbar (mantenimiento) */
  --af: 38 85% 44%;
  --ac: 26 45% 15%;

  --n:  222 33% 11%;   /* neutral   -> tinta sidebar */
  --nf: 222 33% 8%;
  --nc: 210 30% 92%;

  --b1: 0 0% 100%;     /* base-100  -> tarjetas / superficies */
  --b2: 220 20% 97%;   /* base-200  -> fondo de página */
  --b3: 220 14% 91%;   /* base-300  -> bordes */
  --bc: 222 25% 15%;   /* contenido base -> texto principal */

  --in: 199 89% 45%;
  --su: 152 55% 36%;
  --wa: 38 92% 50%;
  --er: 356 72% 54%;

  --rounded-box: 1rem;
  --rounded-btn: 0.6rem;
  --rounded-badge: 999px;
  --animation-btn: 0.15s;
  --animation-input: 0.15s;
  --btn-focus-scale: 0.98;
  --tab-radius: 0.5rem;
}

/* --------------------------------------------------------------------
   Modo oscuro — mismas variables, valores ajustados. Se activa poniendo
   data-theme="mjc-dark" en <html> (ver script de theme-toggle en base.html).
   La sidebar se mantiene con la misma tinta oscura en ambos modos: es
   parte de la identidad visual, no del esquema claro/oscuro.
   -------------------------------------------------------------------- */
[data-theme="mjc-dark"] {
  --surface: #0d1117;
  --card: #151b26;
  --border: #232b3a;
  --text-ink: #e5e9f0;
  --text-muted: #8a93a6;
  --brand-light: rgba(18, 137, 126, 0.16);
  --brand-dark: #5fd9cd;

  --p:  174 60% 45%;
  --pf: 174 55% 38%;
  --pc: 0 0% 100%;

  --s:  243 70% 68%;
  --sf: 243 60% 58%;
  --sc: 0 0% 100%;

  --a:  38 92% 58%;
  --af: 38 85% 50%;
  --ac: 26 45% 12%;

  --n:  222 30% 16%;
  --nf: 222 30% 12%;
  --nc: 210 20% 92%;

  --b1: 222 28% 11%;
  --b2: 222 30% 8%;
  --b3: 222 24% 20%;
  --bc: 210 20% 92%;

  --in: 199 80% 60%;
  --su: 152 50% 48%;
  --wa: 38 92% 58%;
  --er: 356 70% 62%;
}

html, body {
  background-color: var(--surface);
  font-family: var(--font-body);
  color: var(--text-ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.font-mono, code, .badge-mono {
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------
   Sello de marca: "asset tag" — etiqueta con borde perforado, como las
   etiquetas físicas de inventario. Se usa con mesura: solo en tarjetas
   de estadística y como acento de identificador en tablas.
   -------------------------------------------------------------------- */
.asset-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px dashed rgba(18, 137, 126, 0.45);
}

.asset-tag::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px dashed rgba(18, 137, 126, 0.45);
}

/* Tarjeta de estadística del dashboard */
.stat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 1.35rem 1.5rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-card:hover {
  box-shadow: 0 8px 24px -12px rgba(16, 21, 31, 0.18);
  transform: translateY(-1px);
}

.stat-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.stat-card__trend {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* --------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------- */
.app-sidebar {
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #cfd6e4;
}

.app-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  color: #aab3c5;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.app-sidebar .nav-link:hover {
  background: var(--ink-700);
  color: #fff;
}

.app-sidebar .nav-link.active {
  background: var(--ink-700);
  color: #fff;
  border-left-color: var(--brand);
}

.app-sidebar .nav-link svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Scrollbar sutil para la sidebar */
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 999px; }

/* --------------------------------------------------------------------
   Sidebar contraída (solo escritorio, ≥1024px). En móvil la sidebar
   sigue siendo un drawer a ancho completo sin importar este estado.
   -------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .app-sidebar.collapsed .sidebar-label {
        display: none;
    }
    .app-sidebar.collapsed .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .app-sidebar.collapsed .nav-link svg {
        margin: 0;
    }
}

/* --------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------- */
.app-topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* Chart container */
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 1.25rem 1.35rem;
}

/* Utilidad para transiciones de la sidebar móvil y del contraído/expandido */
.sidebar-transition { transition: transform 0.25s ease, width 0.25s ease; }

/* Tarjeta de contenido genérica (headers de sección, buscadores, contenedores) */
.surface-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
}

/* Contenedor de tabla */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  overflow: hidden;
}

.table-wrap thead th {
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.table-wrap tbody tr {
  border-bottom: 1px solid var(--border);
}
.table-wrap tbody tr:last-child { border-bottom: none; }

.table-wrap tbody tr:hover {
  background: var(--surface);
}

/* Ícono redondo para tipo de equipo / avatar */
.type-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Estado vacío */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

/* Transición suave global al cambiar de tema */
body, .stat-card, .chart-card, .surface-card, .table-wrap, .app-topbar {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Interruptor de tema (sol/luna) */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover {
  background: var(--surface);
  color: var(--text-ink);
}

/* ==========================================================================
   MODO OSCURO
   Se activa agregando la clase .dark al <html> (ver base.html).
   Redefine los tokens base; todos los componentes que usan var(--...)
   se adaptan automáticamente. El tema DaisyUI "mjc-dark" hace lo mismo
   para btn/badge/table/alert/input/etc.
   ========================================================================== */
html.dark {
  --surface: #0f131a;
  --card: #161b25;
  --border: #262e3d;
  --text-ink: #e7ebf2;
  --text-muted: #94a0b4;

  --brand-light: rgba(45, 212, 191, 0.14);
  --brand-dark: #5eead4;
}

[data-theme="mjc-dark"] {
  --p:  174 62% 45%;
  --pf: 174 62% 38%;
  --pc: 222 33% 8%;

  --s:  243 75% 70%;
  --sf: 243 65% 62%;
  --sc: 222 33% 8%;

  --a:  38 92% 58%;
  --af: 38 85% 50%;
  --ac: 26 45% 10%;

  --n:  222 30% 16%;
  --nf: 222 30% 12%;
  --nc: 210 25% 90%;

  --b1: 222 24% 12%;   /* base-100 -> tarjetas */
  --b2: 222 28% 9%;    /* base-200 -> fondo de página */
  --b3: 222 20% 20%;   /* base-300 -> bordes */
  --bc: 210 25% 92%;   /* texto principal */

  --in: 199 85% 60%;
  --su: 152 50% 48%;
  --wa: 38 92% 58%;
  --er: 356 78% 64%;
}

html.dark .asset-tag {
  border-color: rgba(94, 234, 212, 0.35);
}
html.dark .asset-tag::before {
  border-color: rgba(94, 234, 212, 0.35);
}