/* z_override.css — carga DESPUÉS de todos los demás assets (orden alfabético z_*)
   Targets: dropdown.css, datepickers.css, sliders.css del bundle de Dash.
   Causa raíz confirmada en DevTools: cascade conflict, no inline styles.
   Selectores con doble clase para ganar en especificidad + !important. */

/* ── 1. Dash CSS variables — anula los tokens del design system de Dash ──
   --Dash-Text-Strong default = rgba(0,12,51,0.65): oscuro para tema claro de Dash.
   En nuestro tema oscuro todos los --Dash-Text-* deben ser claros.              */
:root {
  /* Backgrounds */
  --Dash-Fill-Inverse-Strong:    var(--bg-elevated);
  --Dash-Fill-Inverse-Subtle:    var(--bg-muted);
  --Dash-Fill-Disabled:          var(--border);
  --Dash-Fill-Interactive-Strong: var(--purple);
  --Dash-Fill-Interactive-Weak:  var(--purple-dim);
  --Dash-Background-Content:     var(--bg);
  --Dash-Stroke-Strong:          var(--border);

  /* Text — el culpable confirmado: rgba(0,12,51,0.65) es --Dash-Text-Strong */
  --Dash-Text-Strong:    hsl(210, 40%, 96%);
  --Dash-Text-Default:   hsl(210, 40%, 96%);
  --Dash-Text-Subtle:    hsl(215, 20%, 70%);
  --Dash-Text-Weak:      hsl(215, 20%, 55%);
  --Dash-Text-Disabled:  hsl(215, 20%, 40%);

  /* Shadows */
  --Dash-Shading-Strong: rgba(0, 0, 0, 0.6);
  --Dash-Shading-Weak:   rgba(0, 0, 0, 0.3);
}

/* ── 2. Dropdown — control cerrado (valor seleccionado visible) ── */
.dash-dropdown .Select-control {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.dash-dropdown .Select-control:hover {
  border-color: var(--purple) !important;
}

.dash-dropdown .Select.is-open .Select-control,
.dash-dropdown .Select.is-focused .Select-control {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 2px rgba(106, 50, 159, 0.25) !important;
  background: var(--bg-elevated) !important;
}

.dash-dropdown .Select-value,
.dash-dropdown .Select-multi-value-wrapper {
  background: transparent !important;
  color: var(--text) !important;
}

.dash-dropdown .Select-value-label {
  color: var(--text) !important;
  background: transparent !important;
}

.dash-dropdown .Select-placeholder {
  color: var(--text-subtle) !important;
  background: transparent !important;
}

.dash-dropdown .Select-input,
.dash-dropdown .Select-input > input {
  background: transparent !important;
  color: var(--text) !important;
}

/* ── 3. Dropdown — menú desplegable (opciones) ── */
.dash-dropdown .Select-menu-outer {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
}

.dash-dropdown .Select-menu {
  background: var(--bg-elevated) !important;
}

.dash-dropdown .Select-option {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.dash-dropdown .Select-option.is-focused,
.dash-dropdown .Select-option:hover {
  background: var(--bg-muted) !important;
  color: var(--purple-light) !important;
}

.dash-dropdown .Select-option.is-selected {
  background: rgba(106, 50, 159, 0.25) !important;
  color: hsl(210, 40%, 96%) !important;
}

/* Virtualized options (react-virtualized-select) */
.dash-dropdown .VirtualizedSelectOption {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.dash-dropdown .VirtualizedSelectFocusedOption {
  background: var(--bg-muted) !important;
  color: var(--purple-light) !important;
}

.dash-dropdown .VirtualizedSelectSelectedOption {
  background: rgba(106, 50, 159, 0.25) !important;
  color: hsl(210, 40%, 96%) !important;
}

/* ── 4. DatePicker — input en todos los estados ── */
.DateInput_input,
.DateInput_input__focused,
.DateInput_input__small,
.dash-datepicker-input {
  background: transparent !important;
  color: hsl(210, 40%, 96%) !important;
  border-bottom-color: transparent !important;
}

.DateInput_input__focused {
  border-bottom: 2px solid var(--purple) !important;
}

.DateInput {
  background: transparent !important;
}

/* ── 5. Slider tooltip — SVG fill confirmado blanco en sliders.css:138 ── */
.dash-slider-tooltip {
  fill: var(--bg-elevated) !important;
}

.dash-slider-tooltip text {
  fill: hsl(210, 40%, 96%) !important;
}

/* Tooltip bubble (rc-slider clásico) ya está en style.css pero lo reforzamos */
.rc-slider-tooltip-inner {
  background: var(--bg-elevated) !important;
  color: hsl(210, 40%, 96%) !important;
  border: 1px solid var(--border) !important;
}

/* ── Glosario ─────────────────────────────────────────────────────────────── */
.glossary-root {
  max-width: 1100px;
}

.glossary-intro {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 24px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .glossary-grid { grid-template-columns: 1fr; }
}

.glossary-section {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.glossary-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple-light);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.glossary-entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.glossary-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.glossary-term {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.glossary-def {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 4px 0;
}

.glossary-formula {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--orange);
  background: var(--bg-secondary);
  border-left: 2px solid var(--orange);
  padding: 5px 10px;
  border-radius: 0 4px 4px 0;
  margin: 6px 0 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}