/* ============================================================================
   SIT-STOCK · TEMA "TABLERO"  —  Autobuses Santa Fe / Empresa Recreo S.R.L.
   ----------------------------------------------------------------------------
   Hoja de tema de PRODUCCIÓN. Reescribe el look del sistema sobre las clases
   Bootstrap 5 + clases propias que ya usan las plantillas (card-custom,
   btn-primary-custom, table-custom, navbar-custom, sidebar, badge, form-control,
   nav-tabs, pagination, step-indicator, etc.). No requiere reescribir las vistas.

   Cargar DESPUÉS de Bootstrap y DESPUÉS del <style> de base.html, p.ej:
     <link rel="stylesheet" href="{% static 'css/tablero.css' %}">
   El modo oscuro usa el toggle existente (data-theme="dark" en <html>).
   ============================================================================ */

/* Google Fonts auto-hospedadas (Archivo + DM Sans) — sin dependencia de gstatic. */
@import url('../vendor/google-fonts/fonts.css');

/* ----------------------------------------------------------------------------
   1) TOKENS — se redefinen las variables que ya consumen las plantillas
   ---------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* superficies / texto (claro, cálido) */
  --bg-primary:   #f3f2ee;
  --bg-secondary: #eeece5;
  --bg-card:      #ffffff;
  --bg-soft:      #faf8f4;
  --text-primary:   #15181f;
  --text-secondary: #585c66;
  --border-color: #e6e2d8;
  --shadow: rgba(20, 24, 31, .08);

  /* acento estructural = teal (info). NO es el color de acción */
  --accent-blue:  #0e7c86;
  --accent-light: #16a3b0;

  /* barra superior + sidebar: grafito SIEMPRE (también en claro) */
  --navbar-bg:   #14181f;
  --navbar-text: #e8edf4;
  --sidebar-bg:  #14181f;

  /* Tablero — color de ACCIÓN: ámbar de marca */
  --tb-amber:        #e58f08;
  --tb-amber-hover:  #cb7e05;
  --tb-amber-on:     #231603;   /* texto sobre ámbar */
  --tb-amber-soft:   rgba(229, 143, 8, .14);
  --tb-rail-text:    #c2c8d4;
  --tb-rail-muted:   #767f8f;
  --tb-rail-active:  #ffc24d;
  --tb-rail-active-bg: rgba(249, 168, 37, .15);
  --tb-rail-border:  #232a34;

  /* semánticos (suaves) */
  --tb-success: #1c8a59; --tb-success-soft: rgba(28,138,89,.13);
  --tb-warning: #c1820c; --tb-warning-soft: rgba(193,130,12,.15);
  --tb-danger:  #cf3b2e; --tb-danger-soft:  rgba(207,59,46,.11);
  --tb-info:    #0e7c86; --tb-info-soft:    rgba(14,124,134,.12);

  --tb-radius: 14px;
  --tb-radius-sm: 10px;
}

[data-theme="dark"] {
  --bg-primary:   #0b0e13;
  --bg-secondary: #0c1017;
  --bg-card:      #141923;
  --bg-soft:      #1a212c;
  --text-primary:   #edf0f5;
  --text-secondary: #98a2b2;
  /* Subido desde #252e3b: quedaba casi igual que --bg-card (#141923) y las
     rayas/bordes (tablas, cards, divisores) no se distinguían en modo oscuro.
     #45526b da separación clara sin resultar duro. */
  --border-color: #45526b;
  --shadow: rgba(0, 0, 0, .4);

  --accent-blue:  #2bb6c4;
  --accent-light: #3fd0de;

  --navbar-bg:   #0c1118;
  --sidebar-bg:  #0c1118;
  --navbar-text: #edf0f5;

  --tb-amber:        #ffb02e;
  --tb-amber-hover:  #ffc24d;
  --tb-amber-on:     #241701;
  --tb-amber-soft:   rgba(255, 176, 46, .15);
  --tb-rail-text:    #9aa3b2;
  --tb-rail-muted:   #5e6877;
  --tb-rail-active:  #ffc24d;
  --tb-rail-active-bg: rgba(255, 176, 46, .16);
  --tb-rail-border:  #1c232e;

  --tb-success: #34c684; --tb-success-soft: rgba(52,198,132,.15);
  --tb-warning: #e6ad3f; --tb-warning-soft: rgba(230,173,63,.15);
  --tb-danger:  #f0655a; --tb-danger-soft:  rgba(240,101,90,.15);
  --tb-info:    #2bb6c4; --tb-info-soft:    rgba(43,182,196,.15);
}

/* ----------------------------------------------------------------------------
   2) BASE
   ---------------------------------------------------------------------------- */
body {
  background: var(--bg-primary) !important;
  background-image: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)) !important;
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand, .stat-number, .section-title,
.card-custom .card-header, .step-label, .display {
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Quitar el carrusel de fotos de fondo (ruido visual) */
.bg-carousel { display: none !important; }

/* ----------------------------------------------------------------------------
   3) NAVBAR (grafito constante)
   ---------------------------------------------------------------------------- */
.navbar-custom {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--tb-rail-border);
  box-shadow: none;
}
.navbar-custom .navbar-brand { color: #fff; font-weight: 800; }
.navbar-custom .nav-link { color: var(--tb-rail-text) !important; font-weight: 500; border-radius: 9px; }
.navbar-custom .nav-link:hover { background-color: var(--tb-rail-active-bg); color: var(--tb-rail-active) !important; transform: none; }
.navbar-custom .nav-link.active { background-color: var(--tb-rail-active-bg); color: var(--tb-rail-active) !important; }

/* ----------------------------------------------------------------------------
   3b) MEGA MENÚ (handoff "Menus Inventario", estilo Tablero — 2026-06-18)
   Barra grafito con paneles full-width; columnas = subgrupos del menú.
   ---------------------------------------------------------------------------- */
.navbar-custom.mega-nav-wrap { position: relative; padding: .35rem 0; }

.mega-brand { display: inline-flex; align-items: center; gap: 10px; }
.mega-brand .mega-logo {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 18px; color: var(--tb-amber-on); flex-shrink: 0;
  background: linear-gradient(135deg, var(--tb-amber), #ffce6e);
}
.mega-brand b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; color: #fff; font-size: 1.12rem; }

.mega-nav { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.mega-item { position: static; }  /* el panel se ancla a la barra, no al ítem */
.mega-item > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: .42rem .8rem; border-radius: 9px;
  color: var(--tb-rail-text); font-weight: 600; font-size: .9rem;
  border-bottom: 2.5px solid transparent;
}
.mega-item > summary::-webkit-details-marker { display: none; }
.mega-item > summary:hover { color: var(--tb-rail-active); background: var(--tb-rail-active-bg); }
.mega-item > summary .chev { font-size: .66rem; transition: transform .18s ease; }
.mega-item[open] > summary { color: var(--tb-rail-active); border-bottom-color: var(--tb-amber); }
.mega-item[open] > summary .chev { transform: rotate(180deg); }

/* Panel anclado a la barra completa (no al ítem): así no tapa la fila de menús
   que se parte al angostar la ventana. El left lo calcula el JS del navbar. */
.mega-panel {
  position: absolute; left: 0; top: 100%;
  width: max-content; max-width: min(92vw, 1080px);
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--tb-radius-sm); box-shadow: 0 16px 40px var(--shadow);
  padding: 10px 12px; z-index: 1080;
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 20px;
  animation: megaIn .14s ease;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.mega-col { min-width: 150px; }
.mega-col > h6 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); font-weight: 700; margin: 4px 0 4px 9px;
}
.mega-link {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 9px; border-radius: 7px; text-decoration: none;
  color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1.4;
}
.mega-link:hover { background: var(--bg-soft); color: var(--tb-amber); }
.mega-link i { color: var(--text-secondary); font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.mega-link:hover i { color: var(--tb-amber); }
.mega-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-hr { border: none; border-top: 1px solid var(--border-color); margin: 5px 9px; }

/* Mobile (navbar colapsada): panel estático y apilado, sobre el grafito */
@media (max-width: 991.98px) {
  .mega-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .mega-item > summary { border-bottom: none; width: 100%; }
  .mega-item[open] > summary { background: var(--tb-rail-active-bg); }
  .mega-panel {
    position: static; box-shadow: none; border: none; background: transparent;
    padding: 4px 0 10px 14px; grid-template-columns: 1fr; gap: 2px 0; animation: none;
  }
  .mega-col > h6 { color: var(--tb-rail-muted); margin-top: 8px; }
  .mega-link { color: var(--tb-rail-text); }
  .mega-link:hover { background: var(--tb-rail-active-bg); color: var(--tb-rail-active); }
  .mega-link:hover i { color: var(--tb-rail-active); }
}

/* ----------------------------------------------------------------------------
   4) SIDEBAR (grafito constante)
   ---------------------------------------------------------------------------- */
.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--tb-rail-border);
}
.sidebar .nav-link { color: var(--tb-rail-text) !important; border-radius: 0 999px 999px 0; font-weight: 500; }
.sidebar .nav-link i { color: inherit; }
.sidebar .nav-link:hover { background-color: var(--tb-rail-active-bg) !important; color: var(--tb-rail-active) !important; padding-left: 1.75rem; }
.sidebar .nav-link.active {
  background-color: var(--tb-rail-active-bg) !important;
  color: var(--tb-rail-active) !important;
  border-left: 4px solid var(--tb-amber);
}
.sidebar .text-muted, .sidebar small { color: var(--tb-rail-muted) !important; }

/* ----------------------------------------------------------------------------
   5) CARDS
   ---------------------------------------------------------------------------- */
.card, .card-custom {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--tb-radius) !important;
  box-shadow: 0 2px 4px var(--shadow), 0 6px 20px var(--shadow) !important;
}
.card-custom:hover { transform: none !important; box-shadow: 0 4px 8px var(--shadow), 0 10px 28px var(--shadow) !important; }
/* Encabezado sutil (no barra de color saturada) */
.card-custom .card-header {
  background-color: var(--bg-soft) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--tb-radius) var(--tb-radius) 0 0 !important;
  font-weight: 600;
}
.card-custom .card-header i { color: var(--tb-amber); }
/* Glassmorphism fuera */
.glass-card { background: var(--bg-card) !important; backdrop-filter: none !important; border: 1px solid var(--border-color) !important; }
.stat-card:hover { transform: translateY(-3px) !important; }

/* ----------------------------------------------------------------------------
   6) BOTONES — primario = ámbar
   ---------------------------------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 700; font-family: 'DM Sans', sans-serif; transition: all .14s ease; }
.btn-primary, .btn-primary-custom {
  background-color: var(--tb-amber) !important;
  border-color: var(--tb-amber) !important;
  color: var(--tb-amber-on) !important;
  box-shadow: 0 2px 10px var(--tb-amber-soft);
}
.btn-primary:hover, .btn-primary-custom:hover {
  background-color: var(--tb-amber-hover) !important;
  border-color: var(--tb-amber-hover) !important;
  color: var(--tb-amber-on) !important;
  transform: none !important;
}
.btn-secondary {
  background-color: var(--bg-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.btn-info { background-color: var(--tb-info) !important; border-color: var(--tb-info) !important; color: #fff !important; }
.btn-warning { background-color: var(--tb-warning) !important; border-color: var(--tb-warning) !important; color: #fff !important; }
.btn-success { background-color: var(--tb-success) !important; border-color: var(--tb-success) !important; color: #fff !important; }
.btn-danger { background-color: var(--tb-danger) !important; border-color: var(--tb-danger) !important; color: #fff !important; }
.btn-outline-info, .btn-outline-primary, .btn-outline-danger, .btn-outline-secondary {
  background: transparent !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important;
}
.btn-outline-info:hover { border-color: var(--tb-info) !important; color: var(--tb-info) !important; background: var(--tb-info-soft) !important; }
.btn-outline-danger:hover { border-color: var(--tb-danger) !important; color: var(--tb-danger) !important; background: var(--tb-danger-soft) !important; }

/* ----------------------------------------------------------------------------
   7) TABLAS
   ---------------------------------------------------------------------------- */
.table-custom, .table { color: var(--text-primary); border-radius: var(--tb-radius-sm); }
.table-custom thead, .table thead, .table-custom thead th, .table thead th {
  background-color: var(--bg-soft) !important;
  color: var(--text-secondary) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-color) !important;
}
.table > :not(caption) > * > * { border-bottom-color: var(--border-color); }
.table-custom tbody tr:hover, .table-hover tbody tr:hover { background-color: var(--bg-soft) !important; color: var(--text-primary); }
.table tbody td, .table-custom tbody td { vertical-align: middle; }
.table tfoot .table-secondary, tfoot tr.table-secondary > * { background-color: var(--bg-soft) !important; color: var(--text-primary) !important; }

/* ----------------------------------------------------------------------------
   8) BADGES → pills suaves (legibles). Los badges con style inline propio se respetan.
   ---------------------------------------------------------------------------- */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.badge.bg-success { background-color: var(--tb-success-soft) !important; color: var(--tb-success) !important; }
.badge.bg-danger  { background-color: var(--tb-danger-soft)  !important; color: var(--tb-danger)  !important; }
.badge.bg-warning { background-color: var(--tb-warning-soft) !important; color: var(--tb-warning) !important; }
.badge.bg-info    { background-color: var(--tb-info-soft)    !important; color: var(--tb-info)    !important; }
.badge.bg-primary { background-color: var(--tb-amber-soft)   !important; color: var(--tb-amber)   !important; }
.badge.bg-secondary { background-color: var(--bg-soft) !important; color: var(--text-secondary) !important; }

/* ----------------------------------------------------------------------------
   9) FORMULARIOS
   ---------------------------------------------------------------------------- */
.form-control, .form-select, .form-group input, .form-group textarea, .form-group select {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--tb-radius-sm) !important;
}
.form-control:focus, .form-select:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--tb-amber) !important;
  box-shadow: 0 0 0 3px var(--tb-amber-soft) !important;
}
.form-control::placeholder { color: var(--text-secondary); opacity: .6; }
.form-label, .form-group label { color: var(--text-secondary); font-weight: 600; }
.form-check-input:checked { background-color: var(--tb-amber); border-color: var(--tb-amber); }

/* ----------------------------------------------------------------------------
   10) PAGINACIÓN / TABS / PROGRESO / STEPS
   ---------------------------------------------------------------------------- */
.page-link { color: var(--text-secondary); background-color: var(--bg-card); border-color: var(--border-color); }
.page-link:hover { color: var(--tb-amber); background-color: var(--tb-amber-soft); border-color: var(--border-color); }
.page-item.active .page-link { background-color: var(--tb-amber); border-color: var(--tb-amber); color: var(--tb-amber-on); }

.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs .nav-link { color: var(--text-secondary); border: none; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--text-primary); border: none; }
.nav-tabs .nav-link.active {
  color: var(--tb-amber) !important; background: transparent !important; border: none;
  box-shadow: inset 0 -2.5px 0 var(--tb-amber);
}

.progress { background-color: var(--bg-soft); border-radius: 999px; }
.progress-bar { background-color: var(--tb-amber); }
.progress-bar.bg-success { background-color: var(--tb-success) !important; }
.progress-bar.bg-warning { background-color: var(--tb-warning) !important; }
.progress-bar.bg-info { background-color: var(--tb-info) !important; }

.step-indicator .step-number { background-color: var(--bg-soft); color: var(--text-secondary); border: 1px solid var(--border-color); }
.step-indicator.active .step-number { background-color: var(--tb-amber) !important; color: var(--tb-amber-on) !important; box-shadow: 0 0 0 4px var(--tb-amber-soft); }
.step-indicator.completed .step-number { background-color: var(--tb-success-soft) !important; color: var(--tb-success) !important; }
.step-indicator.active .step-label { color: var(--tb-amber); }
.step-indicator.completed .step-label { color: var(--tb-success); }
.step-divider.completed { border-top-color: var(--tb-success) !important; }

/* ----------------------------------------------------------------------------
   11) NÚMEROS DE TABLERO (sin texto-gradiente; sólido + Archivo)
   ---------------------------------------------------------------------------- */
.stat-number, .icon-gradient {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  -webkit-background-clip: initial !important;
}
.stat-number { color: var(--text-primary) !important; font-family: 'Archivo', sans-serif; font-weight: 800; }
.icon-gradient { color: var(--tb-amber) !important; }

/* ----------------------------------------------------------------------------
   12) MISC: alertas, dropdown, footer, toggle, búsquedas
   ---------------------------------------------------------------------------- */
.alert { border-radius: var(--tb-radius-sm); border: 1px solid var(--border-color); }
.alert-info { background-color: var(--tb-info-soft); color: var(--tb-info); border-color: transparent; }
.alert-success { background-color: var(--tb-success-soft); color: var(--tb-success); border-color: transparent; }
.alert-danger { background-color: var(--tb-danger-soft); color: var(--tb-danger); border-color: transparent; }
.alert-warning { background-color: var(--tb-warning-soft); color: var(--tb-warning); border-color: transparent; }
.alert-toast.success { background: var(--tb-success) !important; }
.alert-toast.error { background: var(--tb-danger) !important; }

.dropdown-menu { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--tb-radius-sm); box-shadow: 0 12px 32px var(--shadow); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { background-color: var(--tb-amber-soft); color: var(--tb-amber); }
.dropdown-header { color: var(--text-secondary); }

.footer { background-color: var(--bg-card) !important; border-top: 1px solid var(--border-color); color: var(--text-secondary); }

.theme-toggle { background-color: var(--bg-card); border-color: var(--border-color); }
.theme-toggle-slider { background-color: var(--tb-amber) !important; }

.search-results, #proveedor-results.dropdown-menu { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.search-result-item { color: var(--text-primary); border-bottom-color: var(--border-color); }
.search-result-item:hover { background-color: var(--bg-soft) !important; }
.articulo-info { background: var(--tb-info-soft) !important; border-radius: var(--tb-radius-sm); }

.view-map-btn { background: var(--tb-amber) !important; color: var(--tb-amber-on) !important; }
.view-map-btn:hover { background: var(--tb-amber-hover) !important; transform: none !important; }

/* texto utilitario en oscuro */
[data-theme="dark"] .text-muted { color: var(--text-secondary) !important; }

/* ----------------------------------------------------------------------------
   13) UTILIDADES BOOTSTRAP DE COLOR ligadas al tema (fix global 2026-07-14)
   Muchas plantillas usan bg-light / bg-white / text-dark / table-light
   asumiendo SIEMPRE modo claro: en oscuro quedaban paneles claros fijos con
   el texto claro del tema encima (ilegible — visto en planilla de consumo y
   correcciones). Se atan a los tokens para que sigan al tema en ambos modos.
   ---------------------------------------------------------------------------- */
.bg-light { background-color: var(--bg-soft) !important; }
.bg-white { background-color: var(--bg-card) !important; }
.text-dark, .text-black { color: var(--text-primary) !important; }
.border-light { border-color: var(--border-color) !important; }
.table-light, .table-light > th, .table-light > td,
.table thead.table-light th {
  background-color: var(--bg-soft) !important;
  color: var(--text-secondary) !important;
}

/* ----------------------------------------------------------------------------
   14) MODO OSCURO NATIVO DE BOOTSTRAP + text-dark sobre fondos FIJOS
   (fix global 2026-08-18)

   Desde este cambio `base.html` setea TAMBIÉN `data-bs-theme` en <html>, con
   lo que Bootstrap 5.3 pinta con su paleta oscura los componentes que usan
   sus propias variables --bs-* (modales, tablas y su hover, dropdowns,
   list-group, accordion, btn-close…). Antes solo existía `data-theme`, así
   que esos componentes quedaban en modo CLARO sobre una página oscura:
   modal blanca con texto casi blanco, y filas de tabla con texto gris oscuro
   sobre fondo oscuro (reportado en Anular Pedidos y en Pedidos nuevos).

   Acá solo queda (a) alinear las superficies de Bootstrap a NUESTROS tokens
   para que no convivan dos grises distintos, y (b) el arreglo de `text-dark`.
   ---------------------------------------------------------------------------- */

/* (a) Superficies: que modales/dropdowns/list-group usen la paleta del sistema.
   Sin !important en el fondo del encabezado para que una modal con su propio
   `bg-*` (ej. modal-header bg-danger) siga ganando — las utilidades de fondo
   de Bootstrap traen !important. */
.modal-content,
.dropdown-menu,
.list-group-item {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.modal-header,
.modal-footer {
  border-color: var(--border-color);
}

/* (b) `text-dark` sobre fondos de color FIJO (no siguen el tema).
   La regla de la sección 13 lo ata a --text-primary, que en oscuro es casi
   blanco: sobre `bg-warning`/`bg-info` SÓLIDOS (amarillo y celeste claros de
   Bootstrap) quedaba ilegible. En esas combinaciones el texto tiene que
   seguir siendo OSCURO. Relevado sobre templates/: bg-warning (39 usos) y
   bg-info (14) son los fondos claros; el resto (secondary/success/danger/
   primary) son oscuros y no necesitan excepción.

   ⚠️ Se EXCLUYEN los `.badge`: la sección 8 los convierte en pills SUAVES
   (fondo translúcido al 15 % + texto del color vivo). Ahí el fondo real es
   OSCURO en modo oscuro, así que forzar el texto a casi negro los volvía
   ilegibles (negro sobre oscuro). Los badges conservan su propio color. */
.bg-warning.text-dark:not(.badge),
.bg-info.text-dark:not(.badge),
.bg-warning > .text-dark:not(.badge),
.bg-info > .text-dark:not(.badge) {
  color: #15181f !important;
}