/* Dark mode — overrides agresivos para pantallas/botones con white hardcodeado.
   Activado con html[data-theme="dark"]. */

html[data-theme="dark"] {
  color-scheme: dark;
  --blue: #60a5fa;
  --blue2: #93c5fd;
  --blue-m: #3b82f6;
  --blue-light: #1e3a5f;
  --blue-dim: rgba(96, 165, 250, 0.18);
  --cyan: #22d3ee;
  --green: #34d399;
  --green-dim: rgba(52, 211, 153, 0.16);
  --green-bright: #6ee7b7;
  --orange: #fbbf24;
  --orange-dim: rgba(251, 191, 36, 0.16);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.16);
  --purple: #a78bfa;
  --bg: #0b1220;
  --white: #111827;
  --surface: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --border2: #475569;
  --text: #f8fafc;
  --text2: #cbd5e1;
  --text3: #94a3b8;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --dark: #f8fafc;
  --dark2: #e2e8f0;
  --dark3: #cbd5e1;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .phone-frame {
  background: var(--bg) !important;
  color: var(--text);
}

/* Pantallas pasajero + conductor */
html[data-theme="dark"] .screen,
html[data-theme="dark"] #screen-login,
html[data-theme="dark"] #screen-register,
html[data-theme="dark"] #screen-verify,
html[data-theme="dark"] #screen-driver-register,
html[data-theme="dark"] #screen-driver-verify,
html[data-theme="dark"] #screen-search,
html[data-theme="dark"] #screen-choose,
html[data-theme="dark"] #screen-driver-found,
html[data-theme="dark"] #screen-trip,
html[data-theme="dark"] #screen-arrived,
html[data-theme="dark"] #screen-profile,
html[data-theme="dark"] #screen-history,
html[data-theme="dark"] #screen-payments,
html[data-theme="dark"] #screen-promo,
html[data-theme="dark"] #screen-ride-detail,
html[data-theme="dark"] #screen-passenger-documents,
html[data-theme="dark"] #screen-viajes,
html[data-theme="dark"] #screen-reservas,
html[data-theme="dark"] #screen-pickup,
html[data-theme="dark"] #screen-rate,
html[data-theme="dark"] #screen-earnings,
html[data-theme="dark"] #screen-dprofile,
html[data-theme="dark"] .dp-sub-screen,
html[data-theme="dark"] #screen-home,
html[data-theme="dark"] #screen-splash {
  background: var(--bg) !important;
  color: var(--text);
}

/* Cards / sheets / paneles blancos */
html[data-theme="dark"] .login-body,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .choose-sheet,
html[data-theme="dark"] .choose-body,
html[data-theme="dark"] .bottom-sheet,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .request-sheet,
html[data-theme="dark"] .cancel-sheet,
html[data-theme="dark"] .chat-sheet,
html[data-theme="dark"] .peer-profile-sheet,
html[data-theme="dark"] .ride-qr-modal,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .side-drawer,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .profile-body,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .dp-card,
html[data-theme="dark"] .dp-stat,
html[data-theme="dark"] .earn-chart-card,
html[data-theme="dark"] .sug-item,
html[data-theme="dark"] .suggestion-list,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .fare-card,
html[data-theme="dark"] .pay-option,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .viajes-item,
html[data-theme="dark"] .reserva-card,
html[data-theme="dark"] .pax-reserva-card,
html[data-theme="dark"] .trip-body,
html[data-theme="dark"] .df-body,
html[data-theme="dark"] .df-card,
html[data-theme="dark"] .bottom-bar,
html[data-theme="dark"] .search-continue-wrap,
html[data-theme="dark"] .home-bottom,
html[data-theme="dark"] .nav-bar,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .app-footer-brand,
html[data-theme="dark"] .chat-bubble.mine,
html[data-theme="dark"] .chat-bubble.theirs,
html[data-theme="dark"] .peer-comment-item,
html[data-theme="dark"] .onboarding-card,
html[data-theme="dark"] .onboarding-sheet,
html[data-theme="dark"] .app-exit-sheet,
html[data-theme="dark"] .app-logout-hero,
html[data-theme="dark"] .app-logout-btn,
html[data-theme="dark"] .app-logout-dock,
html[data-theme="dark"] .legal-watermark {
  background: var(--card) !important;
  color: var(--text);
  border-color: var(--border) !important;
}

html[data-theme="dark"] .chat-bubble.mine {
  background: var(--blue-light) !important;
  color: var(--text);
}

html[data-theme="dark"] .chat-bubble.theirs {
  background: #243044 !important;
  color: var(--text);
}

/* Botones claros / secundarios / chips */
html[data-theme="dark"] .social-btn,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .chip:not(.active),
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .history-filter button,
html[data-theme="dark"] .viajes-filter button,
html[data-theme="dark"] .cancel-reason-option,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .dp-menu-item,
html[data-theme="dark"] .eta-chip,
html[data-theme="dark"] .splash-enter-btn,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .pay-method,
html[data-theme="dark"] .star-btn,
html[data-theme="dark"] .qty-btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .back-btn,
html[data-theme="dark"] .close-btn,
html[data-theme="dark"] .map-fab,
html[data-theme="dark"] .fab,
html[data-theme="dark"] .toggle-row,
html[data-theme="dark"] .option-row,
html[data-theme="dark"] .doc-row,
html[data-theme="dark"] .wallet-card,
html[data-theme="dark"] .banner-card,
html[data-theme="dark"] .promo-card,
html[data-theme="dark"] .input-wrap,
html[data-theme="dark"] .field,
html[data-theme="dark"] .form-field {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .history-filter button.active,
html[data-theme="dark"] .viajes-filter button.active {
  background: var(--blue-dim) !important;
  color: var(--blue2) !important;
  border-color: var(--blue) !important;
}

html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .btn-accept,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .primary-btn {
  color: #fff !important;
}

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .login-input,
html[data-theme="dark"] .auth-input {
  background: #0f172a !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text3) !important;
}

/* Logos splash blancos → oscuros */
html[data-theme="dark"] .splash-logo,
html[data-theme="dark"] .login-hero-logo,
html[data-theme="dark"] .login-logo,
html[data-theme="dark"] .avatar-sm,
html[data-theme="dark"] .profile-avatar-lg,
html[data-theme="dark"] .dp-avatar-lg {
  background: var(--card) !important;
  color: var(--blue2);
  border-color: var(--border);
}

html[data-theme="dark"] .splash-loader-bar,
html[data-theme="dark"] .splash-bar,
html[data-theme="dark"] .progress-bar-inner {
  background: var(--blue2) !important;
}

/* Banners / estados pastel → oscuros */
html[data-theme="dark"] .shift-strip,
html[data-theme="dark"] .driver-conn-banner,
html[data-theme="dark"] .driver-live-bubble,
html[data-theme="dark"] .pax-reserva-driver,
html[data-theme="dark"] .sug-icon,
html[data-theme="dark"] .menu-icon,
html[data-theme="dark"] .dp-mi-icon,
html[data-theme="dark"] .doc-icon,
html[data-theme="dark"] .viajes-ico {
  filter: none;
  background: #243044 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .shift-strip.limit-reached,
html[data-theme="dark"] .driver-conn-banner.is-bad,
html[data-theme="dark"] .viajes-ico.cancelled,
html[data-theme="dark"] .reserva-btn.danger {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

html[data-theme="dark"] .pax-reserva-driver.waiting,
html[data-theme="dark"] .driver-conn-banner.is-warn {
  background: rgba(251, 191, 36, 0.16) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

html[data-theme="dark"] .legal-watermark {
  background: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
  color: var(--blue2) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* product-polish / chrome */
html[data-theme="dark"] .app-logout-hero,
html[data-theme="dark"] .app-logout-btn,
html[data-theme="dark"] .app-exit-sheet,
html[data-theme="dark"] .app-exit-card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .app-logout-hero:active {
  background: rgba(248, 113, 113, 0.12) !important;
}

/* Texto forzado oscuro en light-only rules */
html[data-theme="dark"] .menu-label,
html[data-theme="dark"] .dp-mi-label,
html[data-theme="dark"] .menu-sub,
html[data-theme="dark"] .dp-mi-sub,
html[data-theme="dark"] .login-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .profile-name-lg,
html[data-theme="dark"] .dp-name,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: var(--text) !important;
}

html[data-theme="dark"] .menu-sub,
html[data-theme="dark"] .dp-mi-sub,
html[data-theme="dark"] .profile-rating,
html[data-theme="dark"] .dp-meta,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .muted {
  color: var(--text2) !important;
}

/* Overlay / maps keep readable UI chrome */
html[data-theme="dark"] .leaflet-control,
html[data-theme="dark"] .leaflet-bar a {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .leaflet-container {
  background: #1a2332 !important;
}

/* Catch-all: botones genéricos sin clase primaria azul/verde/rojo */
html[data-theme="dark"] button:not(.btn-blue):not(.btn-accept):not(.btn-primary):not(.primary-btn):not(.btn-danger):not(.btn-green):not(.btn-online):not(.toggle-on) {
  color: var(--text);
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border2);
}

/* Onboarding / updater / download overlays */
html[data-theme="dark"] .onboarding-overlay,
html[data-theme="dark"] .app-updater-banner,
html[data-theme="dark"] .app-download-card,
html[data-theme="dark"] .city-gate,
html[data-theme="dark"] .dni-gate {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Exit sheet (app-chrome) */
html[data-theme="dark"] .subite-exit-sheet {
  background: var(--card) !important;
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .subite-exit-handle {
  background: var(--border2) !important;
}
html[data-theme="dark"] .subite-exit-title {
  color: var(--text) !important;
}
html[data-theme="dark"] .subite-exit-text {
  color: var(--text2) !important;
}
html[data-theme="dark"] .subite-exit-btn.ghost {
  background: #243044 !important;
  color: var(--text) !important;
}

/* Bottom nav */
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .driver-bottom-nav,
html[data-theme="dark"] .nav-tab,
html[data-theme="dark"] .dnav-tab {
  background: var(--card) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .nav-tab.active,
html[data-theme="dark"] .dnav-tab.active {
  color: var(--blue2) !important;
}

/* Confirm / where-to / secondary action buttons that were white */
html[data-theme="dark"] .confirm-btn:not(.btn-blue),
html[data-theme="dark"] .where-to-btn,
html[data-theme="dark"] .reservas-home-btn,
html[data-theme="dark"] .location-refresh-btn,
html[data-theme="dark"] .reservas-entry-btn,
html[data-theme="dark"] .main-action-btn:not(.online):not(.btn-blue) {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Map back / section back pills */
html[data-theme="dark"] .screen-back-btn,
html[data-theme="dark"] .map-back,
html[data-theme="dark"] .section-back,
html[data-theme="dark"] .back-btn {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}

/* Service / fare selection cards */
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .ride-type,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .choose-option,
html[data-theme="dark"] .pay-row,
html[data-theme="dark"] .promo-item,
html[data-theme="dark"] .wallet-banner,
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .quick-dest,
html[data-theme="dark"] .dest-chip {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Publicidad / banners sponsor (pasajero + conductor) */
html[data-theme="dark"] .promo-banner:not(.promo-banner--wallet),
html[data-theme="dark"] .driver-sponsor-banner {
  background: linear-gradient(135deg, #1e293b 0%, #172554 100%) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="dark"] .promo-banner-image:not(.promo-banner-image--wallet),
html[data-theme="dark"] .driver-sponsor-image {
  background-color: #0f172a !important;
  background-image: url('/icons/icon-512.svg') !important;
  background-position: center !important;
  background-size: 70% !important;
  background-repeat: no-repeat !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .driver-sponsor-image {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .promo-banner-tag,
html[data-theme="dark"] .driver-sponsor-tag {
  color: var(--blue2) !important;
}

html[data-theme="dark"] .promo-banner-title,
html[data-theme="dark"] .driver-sponsor-title {
  color: var(--text) !important;
}

html[data-theme="dark"] .promo-banner-sub,
html[data-theme="dark"] .driver-sponsor-sub {
  color: var(--text2) !important;
}

/* Slide promo billetera en rotación */
html[data-theme="dark"] .promo-banner--wallet {
  background: linear-gradient(135deg, #064e3b 0%, #0f3d32 100%) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="dark"] .promo-banner--wallet .promo-banner-tag {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .promo-banner--wallet .promo-banner-title {
  color: #a7f3d0 !important;
}

html[data-theme="dark"] .promo-banner--wallet .promo-banner-sub {
  color: #5eead4 !important;
}

html[data-theme="dark"] .promo-banner-image--wallet {
  background-color: #064e3b !important;
  background-image: none !important;
}

html[data-theme="dark"] .promo-banner--mc,
html[data-theme="dark"] .driver-sponsor-banner--mc {
  background: linear-gradient(135deg, #1c1917 0%, #292524 100%) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

html[data-theme="dark"] .promo-banner--mc .promo-banner-tag,
html[data-theme="dark"] .driver-sponsor-banner--mc .driver-sponsor-tag {
  color: #fbbf24 !important;
}

html[data-theme="dark"] .promo-banner--mc .promo-banner-title,
html[data-theme="dark"] .driver-sponsor-banner--mc .driver-sponsor-title {
  color: #fffbeb !important;
}

html[data-theme="dark"] .promo-banner--mc .promo-banner-sub,
html[data-theme="dark"] .driver-sponsor-banner--mc .driver-sponsor-sub {
  color: #fde68a !important;
}

html[data-theme="dark"] .promo-banner-image--mc,
html[data-theme="dark"] .driver-sponsor-image--mc {
  background-color: #111827 !important;
  background-image: none !important;
}

html[data-theme="dark"] .promo-selected-banner {
  background: rgba(6, 78, 59, 0.5) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(52, 211, 153, 0.32);
}