/* ================================================================
   City Driver App — CSS Variables / Design Tokens
   Reemplaza ~1,157 líneas de dark-mode duplicado.
   Solo modifica este archivo para cambiar el tema completo.
   ================================================================ */

:root {
  /* ── Brand ── */
  --hp-primary: #1E74FD;
  --hp-primary-dark: #0a58ca;
  --hp-secondary: #592BCA;
  --hp-secondary-dark: #5027b5;

  /* ── Semantic ── */
  --hp-success: #34C759;
  --hp-success-dark: #2fb350;
  --hp-danger: #EC4433;
  --hp-danger-dark: #ea2f1c;
  --hp-warning: #FE9500;
  --hp-warning-dark: #e58600;
  --hp-warning-light: #f99400;

  /* ── Generic ── */
  --hp-white: #FFFFFF;
  --hp-black: #000000;

  /* ── Text ── */
  --hp-text-primary: #141515;
  --hp-text-secondary: #4F5050;
  --hp-text-muted: #6C7C94;
  --hp-text-light: #A1A1A2;
  --hp-text-inverse: #FFFFFF;

  /* ── Surfaces ── */
  --hp-bg: #FFFFFF;
  --hp-bg-light: #F9FAFB;
  --hp-bg-dark: #141515;
  --hp-header-bg: #FFFFFF;
  --hp-card-bg: #FFFFFF;

  /* ── Borders ── */
  --hp-border: #E1E1E1;
  --hp-border-light: #f3f4f6;
  --hp-border-dark: #1B283B;

  /* ── Shadows ── */
  --hp-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --hp-shadow: 0 1px 4px rgba(0,0,0,.08);
  --hp-shadow-lg: 0 4px 16px rgba(0,0,0,.12);
}

/* ── DARK MODE ───────────────────────────────────────────────── */
body.dark-mode-active {
  --hp-primary: #3b82f6;
  --hp-primary-dark: #60a5fa;
  --hp-secondary: #7c4dff;
  --hp-secondary-dark: #9575ff;

  --hp-success: #34C759;
  --hp-success-dark: #3ddb6b;
  --hp-danger: #EC4433;
  --hp-danger-dark: #f25c4d;
  --hp-warning: #FE9500;
  --hp-warning-dark: #ffb340;
  --hp-warning-light: #ffa726;

  --hp-text-primary: #FFFFFF;
  --hp-text-secondary: #8195a6;
  --hp-text-muted: #586d7f;
  --hp-text-light: #617085;
  --hp-text-inverse: #141515;

  --hp-bg: #0c1624;
  --hp-bg-light: #0F1C2F;
  --hp-bg-dark: #0c1624;
  --hp-header-bg: #0F1C2F;
  --hp-card-bg: #0F1C2F;

  --hp-border: #1B283B;
  --hp-border-light: #1f2937;
  --hp-border-dark: #E1E1E1;

  --hp-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --hp-shadow: 0 1px 4px rgba(0,0,0,.4);
  --hp-shadow-lg: 0 4px 16px rgba(0,0,0,.5);
}

/* ── Leaflet tooltip legible en modo oscuro ── */
body.dark-mode-active .leaflet-tooltip {
  background: #1b2836 !important;
  color: #e0e0e0 !important;
  border-color: #2a3a4a !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
}
body.dark-mode-active .leaflet-tooltip-top:before {
  border-top-color: #1b2836 !important;
}
body.dark-mode-active .leaflet-tooltip-bottom:before {
  border-bottom-color: #1b2836 !important;
}



/* ── Checkboxes/radios visibles — color primario azul ── */
/* Unchecked: borde más visible en modo oscuro */
body.dark-mode-active .form-check .form-check-label:after {
  border-color: #4a5568 !important;
}
/* Checked: usar azul primario en vez de blanco (ambos modos) */
.form-check-input:checked ~ .form-check-label:after {
  background-color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
}