/* =========================================================
   Parque Vehicular GT — Command Center theme
   assets/style.css  (Dash lo carga automáticamente)
   ========================================================= */

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* fondos / superficies */
  --bg-base:       #090c10;
  --bg-surface-1:  #0e1318;
  --bg-surface-2:  #141a22;
  --bg-surface-3:  #1c2530;
  --bg-surface-4:  #243040;

  /* bordes */
  --border-subtle:  #1e2d3d;
  --border-default: #253446;
  --border-accent:  #0ea5e9;

  /* acentos */
  --cyan-500:    #0ea5e9;
  --cyan-300:    #7dd3fc;
  --cyan-900:    #042330;
  --amber-400:   #fbbf24;
  --violet-500:  #8b5cf6;
  --emerald-500: #10b981;

  /* semánticos */
  --ok:   #10b981;
  --warn: #f59e0b;
  --crit: #ef4444;
  --info: #0ea5e9;

  /* texto */
  --text-primary:   #e2e8f0;
  --text-secondary: #7a8fa8;
  --text-muted:     #3d5166;

  /* tipografía */
  --font-ui:   "Inter","IBM Plex Sans",system-ui,sans-serif;
  --font-mono: "JetBrains Mono","IBM Plex Mono",monospace;
  --text-sm:   12px;
  --text-base: 14px;
  --text-lg:   20px;
  --text-2xl:  40px;

  /* espaciado / radios / sombras */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px var(--border-default);
  --glow-cyan:   0 0 0 2px var(--cyan-500), 0 0 16px rgba(14,165,233,.25);
  --t-normal:    180ms;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background:  var(--bg-base);
  color:       var(--text-primary);
  font-family: var(--font-ui);
  font-size:   var(--text-base);
  margin: 0;
}

/* ── Cabecera / título ──────────────────────────────────── */
.dash-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.banner-caveat {
  background: var(--bg-surface-2);
  border-left: 3px solid var(--amber-400);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: 4px var(--sp-3);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-3);
}

/* ── Labels de filtros ──────────────────────────────────── */
.fbox label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* RadioItems / Checklist */
.fbox .form-check-label,
.fbox label + div label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ── KPI tiles ──────────────────────────────────────────── */
.kpi {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-card);
  padding:       16px 18px;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  justify-content: center;
  min-height:    88px;
  transition:    background var(--t-normal), border-color var(--t-normal);
  cursor: default;
}
.kpi:hover {
  background:    var(--bg-surface-3);
  border-color:  var(--border-accent);
  box-shadow:    var(--glow-cyan);
}

.kpi-num {
  font-family:    var(--font-mono);
  font-size:      var(--text-2xl);
  font-weight:    700;
  color:          var(--cyan-500);
  line-height:    1.05;
  letter-spacing: -.02em;
}

.kpi-lbl {
  font-family:    var(--font-ui);
  font-size:      var(--text-sm);
  color:          var(--text-secondary);
  margin-top:     5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height:    1.3;
}

.kpi-ctx {
  font-size:   11px;
  color:       var(--text-muted);
  margin-top:  3px;
  font-family: var(--font-mono);
}

/* ── Paneles / charts ───────────────────────────────────── */
.panel {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-card);
  overflow:      hidden;
}

/* ── Separadores de sección ─────────────────────────────── */
.section-header {
  font-size:      11px;
  font-weight:    600;
  color:          var(--text-secondary);   /* claro: #7a8fa8 — antes --text-muted (#3d5166) era ilegible */
  text-transform: uppercase;
  letter-spacing: .1em;
  padding:        var(--sp-4) 0 var(--sp-2);
  padding-top:    20px;                    /* margen superior amplio para que no se recorte */
  border-bottom:  1px solid var(--border-subtle);
  margin-bottom:  var(--sp-3);
  overflow:       visible;                 /* nunca cortar el texto */
}

/* ── Tabla detalle ──────────────────────────────────────── */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background:  var(--bg-surface-3) !important;
  color:       var(--cyan-300) !important;
  font-size:   var(--text-sm) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-color: var(--border-default) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  background:  var(--bg-surface-2) !important;
  color:       var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size:   var(--text-sm) !important;
  border-color: var(--border-subtle) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background: var(--bg-surface-3) !important;
}
.dash-table-container .previous-page, .dash-table-container .next-page,
.dash-table-container .last-page, .dash-table-container .first-page {
  color: var(--cyan-500) !important;
  background: var(--bg-surface-3) !important;
}

/* ── Dropdowns React-Select ─────────────────────────────── */
.Select-control {
  background-color: var(--bg-surface-3) !important;
  border-color:     var(--border-subtle) !important;
  color:            var(--text-primary) !important;
  border-radius:    var(--r-md) !important;
}
.Select-control:hover {
  border-color: var(--border-accent) !important;
}
/* Estado enfocado/abierto: SIEMPRE fondo oscuro (nunca blanco).
   Combinador descendente + subcadena de clase = a prueba de anidamiento. */
[class*="is-focused"] .Select-control,
[class*="is-open"] .Select-control,
.Select-control[class*="is-focused"],
.Select-control[class*="is-open"],
.Select.is-focused .Select-control,
.Select.is-open .Select-control,
.Select.is-pseudo-focused .Select-control {
  background-color: var(--bg-surface-3) !important;   /* nunca fondo blanco */
  border-color: var(--cyan-500) !important;
  box-shadow:   0 0 0 2px var(--cyan-900) !important;
  outline:      none !important;
}
/* Wrapper interno y valor: nunca fondo claro, texto legible */
.Select-multi-value-wrapper,
.Select-control .Select-value { background: transparent !important; }
/* Al enfocar un select CON valor, react-select muestra el valor como
   placeholder: forzarlo a texto brillante para que se lea. */
.Select.is-focused .Select-placeholder,
.Select.is-pseudo-focused .Select-placeholder,
[class*="is-focused"] .Select-placeholder {
  color: var(--text-primary) !important;
}
.Select-menu-outer {
  background-color: var(--bg-surface-3) !important;
  border-color:     var(--border-default) !important;
  box-shadow:       0 4px 16px rgba(0,0,0,.6) !important;
  border-radius:    var(--r-md) !important;
  z-index: 999 !important;
}
.Select-option {
  background-color: var(--bg-surface-3) !important;
  color:            var(--text-primary) !important;
  font-size:        var(--text-sm) !important;
}
.Select-option.is-focused {
  background-color: var(--bg-surface-4) !important;
}
.Select-option.is-selected {
  background-color: var(--cyan-900) !important;
  color:            var(--cyan-300) !important;
}
.Select-placeholder {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}
/* Texto del valor YA seleccionado: brillante y legible (antes casi invisible) */
.Select-value-label,
.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
}
/* Caja de búsqueda al teclear: fondo oscuro + texto claro (evita fondo blanco) */
.Select-input { background: transparent !important; }
.Select-input > input {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.Select-arrow-zone .Select-arrow {
  border-top-color: var(--text-muted) !important;
}
.Select--multi .Select-value {
  background-color: var(--cyan-900) !important;
  border-color:     #0369a1 !important;
  color:            var(--cyan-300) !important;
  border-radius:    4px !important;
  font-size:        11px !important;
}
.Select--multi .Select-value-icon {
  border-right-color: #0369a1 !important;
  color: var(--cyan-300) !important;
}
.Select--multi .Select-value-icon:hover {
  background-color: var(--cyan-500) !important;
  color: #fff !important;
}
.VirtualizedSelectOption {
  background-color: var(--bg-surface-3) !important;
  color:            var(--text-primary) !important;
}
.VirtualizedSelectFocusedOption {
  background-color: var(--bg-surface-4) !important;
}

/* ── Dropdown nuevo de Dash 4.x (clases dash-dropdown-*) ─────────────────────
   El Dropdown de Dash 4 dejó de usar react-select, por eso las reglas .Select-*
   de arriba ya no aplican. Estas reglas estilizan el control nuevo y, sobre todo,
   alinean el checkbox de cada opción multi-select en línea con su texto. */
.dash-dropdown,
.dash-dropdown-trigger {
  background-color: var(--bg-surface-2) !important;
  border-color:     var(--border-default) !important;
  color:            var(--text-primary) !important;
}
.dash-dropdown-placeholder {
  color: var(--text-secondary) !important;
}
/* Icono "x" de limpiar selección: el SVG (react-icons) hereda currentColor, que
   sin regla queda casi negro sobre el fondo oscuro. Lo igualamos al gris del
   caret/placeholder y lo aclaramos a cian al pasar el cursor. */
.dash-dropdown-clear {
  color:  var(--text-secondary) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.dash-dropdown-clear svg,
.dash-dropdown-clear path {
  fill:   currentColor !important;
  stroke: currentColor !important;
}
.dash-dropdown-clear:hover { color: var(--cyan-400) !important; }
.dash-dropdown-content {
  background-color: var(--bg-surface-3) !important;
  border:           1px solid var(--border-default) !important;
  border-radius:    var(--r-md) !important;
  box-shadow:       0 4px 16px rgba(0,0,0,.6) !important;
  z-index: 999 !important;
}
.dash-dropdown-options {
  background-color: var(--bg-surface-3) !important;
}
/* Cada opción: checkbox + texto en una sola línea, centrados verticalmente. */
.dash-dropdown-option {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  color:       var(--text-primary) !important;
  font-size:   var(--text-sm) !important;
  padding:     6px 10px !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option.is-focused {
  background-color: var(--bg-surface-4) !important;
}
.dash-dropdown-option input[type="checkbox"],
.dash-dropdown-option input[type="radio"] {
  margin: 0 !important;
  flex:   0 0 auto !important;
}
/* Chips de valores ya seleccionados (multi). */
.dash-dropdown-value-item {
  background-color: var(--cyan-900) !important;
  border:           1px solid #0369a1 !important;
  color:            var(--cyan-300) !important;
  border-radius:    4px !important;
  font-size:        11px !important;
}
.dash-dropdown-value-count {
  color: var(--cyan-300) !important;
}
/* Buscador del dropdown (Dash 4.x) — UNA sola caja limpia.
   Estructura REAL del componente (verificada en async-dropdown.js):
     div.dash-dropdown-search-container   ← LA CAJA (borde + fondo + foco)
       ├─ icon.dash-dropdown-search-icon
       ├─ input.dash-dropdown-search      ← EL INPUT en sí
       └─ button.dash-dropdown-clear
   Dash trae tokens --Dash-* (tema claro) que pintaban la caja casi negra, el
   texto oscuro y un DOBLE aro (border + outline). Forzamos el tema oscuro del
   dashboard apuntando a los selectores correctos. */
.dash-dropdown-search-container {
  background:    var(--bg-surface-2) !important;
  border:        1px solid var(--border-default) !important;
  border-radius: var(--r-md) !important;
}
.dash-dropdown-search-container:focus-within {
  border-color: var(--cyan-500) !important;
  outline:      none !important;            /* mata el segundo aro por defecto */
  box-shadow:   var(--glow-cyan) !important;
}
.dash-dropdown-search-container:focus-within .dash-dropdown-search-icon {
  color: var(--cyan-400) !important;
}
/* El <input> en sí: transparente, sin borde/outline, texto claro. */
.dash-dropdown-search {
  background:  transparent !important;
  border:      none !important;
  outline:     none !important;
  box-shadow:  none !important;
  color:       var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--cyan-400) !important;
}
.dash-dropdown-search::placeholder {
  color:   var(--text-secondary) !important;
  opacity: 1 !important;
}
/* Texto SELECCIONADO legible: claro sobre resaltado cian oscuro. */
.dash-dropdown-search::selection {
  background: var(--cyan-900) !important;
  color:      var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
.dash-dropdown-search::-moz-selection {
  background: var(--cyan-900) !important;
  color:      var(--text-primary) !important;
}
/* Autofill: evita el fondo blanco que inyecta el navegador. */
.dash-dropdown-search:-webkit-autofill,
.dash-dropdown-search:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface-2) inset !important;
  caret-color: var(--cyan-400) !important;
}
/* Botones "Select All" / "Deselect All": legibles sobre fondo oscuro. */
.dash-dropdown-actions {
  background-color: var(--bg-surface-3) !important;
}
.dash-dropdown-action-button {
  background:   transparent !important;
  color:        var(--cyan-300) !important;
  font-size:    var(--text-sm) !important;
  font-weight:  600 !important;
}
.dash-dropdown-action-button:hover {
  color:           var(--cyan-500) !important;
  text-decoration: underline !important;
}

/* Radio buttons y checkboxes */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--cyan-500);
}

/* ── RadioItems verticales en tarjeta (Nivel / Métrica) ─────────────────────
   Cada filtro va en su propia tarjeta, con su etiqueta arriba y las opciones
   apiladas en vertical (sin inline=True). */
.radio-card {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding:       12px 14px;
}
/* Cada opción es un <label> que dcc 4.2.0 renderiza como flex-column (punto
   arriba del texto). Lo forzamos a fila: punto a la izquierda, texto centrado
   verticalmente a su lado. Las opciones quedan apiladas (sin inline=True). */
.radio-card .dash-options-list-option {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center;
  gap:            8px;
  margin-bottom:  6px;
}
.radio-card .dash-options-list-option:last-child { margin-bottom: 0; }
/* el wrapper del input no debe meter margen propio que rompa la alineación */
.radio-card .dash-options-list-option-wrapper { display: flex; margin: 0; }
.radio-card .dash-options-list-option-text    { line-height: 1.1; }

/* ── Insight cards ──────────────────────────────────────── */
.insight-card {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-card);
  overflow:      visible;   /* no recortar títulos Plotly ni texto del header */
}
.insight-title {
  font-size:      var(--text-base);
  font-weight:    600;
  color:          var(--text-primary);   /* #e2e8f0 — claro sobre fondo oscuro */
  padding:        var(--sp-3) var(--sp-4) 0;
  line-height:    1.35;
}
.insight-sub {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);   /* #7a8fa8 — más legible que --text-muted */
  padding:    2px var(--sp-4) var(--sp-2);
}

/* ── Pie de página ──────────────────────────────────────── */
.footer-note {
  font-size:   11px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  border-top:  1px solid var(--border-subtle);
  margin-top:  var(--sp-6);
  padding-top: var(--sp-3);
  line-height: 1.7;
}

/* ── Tooltip de ayuda en labels de filtros ──────────────── */
/* El <label> es el ancla; la tarjeta absoluta se posiciona bajo él.
   Anula text-transform/letter-spacing heredados del label (uppercase). */
.fbox label { position: relative; }
/* Ancla genérico para usar la misma ayuda ⓘ fuera de los filtros (subtítulos…) */
.info-wrap { position: relative; display: inline-block; }

.info-ico {
  margin-left: 5px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: help;
  text-transform: none;
  vertical-align: baseline;
  transition: color .15s;
}
.fbox label:hover .info-ico,
.info-ico:focus { color: var(--cyan-500); outline: none; }

.tip-card {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 270px;
  max-width: 78vw;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  padding: 10px 12px;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
/* Mostrar al pasar el cursor por el nombre o el ícono, o con foco de teclado */
.fbox label:hover .tip-card,
.info-wrap:hover .tip-card,
.info-ico:focus + .tip-card,
.tip-card:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.tip-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-300);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.tip-body {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  text-transform: none;
}
.tip-body b { color: var(--cyan-300); font-weight: 600; }
.tip-src {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
  font-style: italic;
  color: var(--text-secondary);
  text-transform: none;
}
/* La última columna (Origen) ancla la tarjeta a la derecha para no salirse */
.fbox.fbox-end .tip-card { left: auto; right: 0; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-accent); }