/* ================================================================
   HeyPilas — Dark Mode Global (cubre todas las pantallas)
   Carga DESPUÉS de hp-variables.css. No reemplaza, complementa.
   ================================================================ */

/* ── Fondo general ── */
body.dark-mode-active {
    background: var(--hp-bg) !important;
    color: var(--hp-text-primary) !important;
}

/* ── Cabecera (app-header) ── */
body.dark-mode-active .appHeader,
body.dark-mode-active .app-header,
body.dark-mode-active header,
body.dark-mode-active .header,
body.dark-mode-active .navbar,
body.dark-mode-active nav:not(.leaflet-control),
body.dark-mode-active [class*="topbar"],
body.dark-mode-active [class*="header"]:not(.leaflet),
body.dark-mode-active [class*="Header"]:not(.leaflet) {
    background: var(--hp-header-bg) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .appHeader span,
body.dark-mode-active .appHeader a,
body.dark-mode-active .app-header span,
body.dark-mode-active .app-header a,
body.dark-mode-active header span,
body.dark-mode-active header a,
body.dark-mode-active .header a,
body.dark-mode-active .navbar a {
    color: var(--hp-text-primary) !important;
}

/* ── Cards y superficies ── */
body.dark-mode-active .card,
body.dark-mode-active [class*="card"],
body.dark-mode-active .post-card,
body.dark-mode-active .trip-sheet,
body.dark-mode-active .section-card,
body.dark-mode-active [class*="sheet"],
body.dark-mode-active [class*="panel"],
body.dark-mode-active [style*="background:#fff"],
body.dark-mode-active [style*="background: #fff"],
body.dark-mode-active [style*="background: white"],
body.dark-mode-active [style*="background:white"],
body.dark-mode-active div[style*="background: #ffffff"],
body.dark-mode-active div[style*="background:#ffffff"],
body.dark-mode-active .bg-white,
body.dark-mode-active .bg-light {
    background: var(--hp-card-bg) !important;
    border-color: var(--hp-border) !important;
    color: var(--hp-text-primary) !important;
}

/* ── Textos oscuros → claros ── */
body.dark-mode-active h1, body.dark-mode-active h2, body.dark-mode-active h3,
body.dark-mode-active h4, body.dark-mode-active h5, body.dark-mode-active h6,
body.dark-mode-active p, body.dark-mode-active span, body.dark-mode-active div,
body.dark-mode-active label, body.dark-mode-active li, body.dark-mode-active td,
body.dark-mode-active th, body.dark-mode-active a:not(.btn) {
    color: var(--hp-text-primary) !important;
}
/* Excepciones: map, icons, buttons */
body.dark-mode-active .leaflet-container,
body.dark-mode-active .leaflet-container *,
body.dark-mode-active .btn,
body.dark-mode-active ion-icon,
body.dark-mode-active i[class*="icon"],
body.dark-mode-active canvas {
    color: inherit;
}

/* ── Textos secundarios/grises → más claros ── */
body.dark-mode-active [style*="color:#333"],
body.dark-mode-active [style*="color: #333"],
body.dark-mode-active [style*="color:#555"],
body.dark-mode-active [style*="color: #555"],
body.dark-mode-active [style*="color:#666"],
body.dark-mode-active [style*="color: #666"],
body.dark-mode-active [style*="color:#888"],
body.dark-mode-active [style*="color: #888"],
body.dark-mode-active [style*="color:#9ca3af"],
body.dark-mode-active [style*="color: #9ca3af"],
body.dark-mode-active [style*="color:#6b7280"],
body.dark-mode-active [style*="color: #6b7280"],
body.dark-mode-active [style*="color:#374151"],
body.dark-mode-active [style*="color: #374151"],
body.dark-mode-active [style*="color:#4F5050"],
body.dark-mode-active [style*="color: #4F5050"],
body.dark-mode-active .text-muted,
body.dark-mode-active .text-secondary {
    color: var(--hp-text-secondary) !important;
}

/* ── Fondos claros → oscuros ── */
body.dark-mode-active [style*="background:#f3f4f6"],
body.dark-mode-active [style*="background: #f3f4f6"],
body.dark-mode-active [style*="background:#f9fafb"],
body.dark-mode-active [style*="background: #f9fafb"],
body.dark-mode-active [style*="background:#e5e7eb"],
body.dark-mode-active [style*="background: #e5e7eb"],
body.dark-mode-active [style*="background:#f1f5f9"],
body.dark-mode-active [style*="background: #f1f5f9"],
body.dark-mode-active .bg-gray-100,
body.dark-mode-active .bg-gray-50 {
    background: var(--hp-bg-light) !important;
}

/* ── Bordes ── */
body.dark-mode-active [style*="border-bottom"],
body.dark-mode-active hr,
body.dark-mode-active .border-bottom {
    border-color: var(--hp-border) !important;
}

/* ── Botones secundarios (grises) ── */
body.dark-mode-active .btn-rechazar,
body.dark-mode-active .btn-secondary,
body.dark-mode-active .btn-light,
body.dark-mode-active .btn-outline-secondary,
body.dark-mode-active .btn-outline-light {
    background: var(--hp-bg-light) !important;
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}

/* ── Inputs / selects ── */
body.dark-mode-active input,
body.dark-mode-active select,
body.dark-mode-active textarea {
    background: var(--hp-bg-light) !important;
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}

/* ── Footer / bottom nav ── */
body.dark-mode-active .app-footer,
body.dark-mode-active footer,
body.dark-mode-active .bottom-nav,
body.dark-mode-active [class*="bottom-nav"],
body.dark-mode-active [class*="footer"],
body.dark-mode-active nav.bottom {
    background: var(--hp-header-bg) !important;
    border-color: var(--hp-border) !important;
}

/* ── ETA / Badge / Chips ── */
body.dark-mode-active [style*="background:#e8f5e9"] {
    background: #1a3a2a !important;
    color: #5ad08a !important;
}
body.dark-mode-active [style*="background:#fef3e2"] {
    background: #2a1f0a !important;
    color: #f0a030 !important;
}
body.dark-mode-active [style*="background:#fcd7d7"] {
    background: #2a1515 !important;
    color: #f06060 !important;
}
body.dark-mode-active .card-badge {
    background: var(--hp-bg-light) !important;
    color: var(--hp-text-secondary) !important;
}

/* ── Precio (negro → blanco) ── */
body.dark-mode-active [style*="color:#111"],
body.dark-mode-active [style*="color: #111"],
body.dark-mode-active [style*="color:#141515"],
body.dark-mode-active [style*="color: #141515"],
body.dark-mode-active [style*="color:#1a2235"],
body.dark-mode-active [style*="color: #1a2235"],
body.dark-mode-active .card-price,
body.dark-mode-active .card-driver-name {
    color: var(--hp-text-primary) !important;
}

/* ── Toast / Notificaciones ── */
body.dark-mode-active .toast,
body.dark-mode-active .toastbox,
body.dark-mode-active [class*="toast"]:not(.toast-header) {
    background: var(--hp-card-bg) !important;
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}

/* ── Modales ── */
body.dark-mode-active .modal-content,
body.dark-mode-active [class*="modal"] {
    background: var(--hp-card-bg) !important;
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .modal-header,
body.dark-mode-active .modal-footer {
    border-color: var(--hp-border) !important;
}

/* ── Skeleton/Loader ── */
body.dark-mode-active .skeleton,
body.dark-mode-active [class*="skeleton"],
body.dark-mode-active #loader {
    background: var(--hp-bg) !important;
}
body.dark-mode-active #loader .spinner-border {
    border-color: var(--hp-primary);
    border-right-color: transparent;
}

/* ── Ajustes específicos de hojas ── */
body.dark-mode-active .action-btns,
body.dark-mode-active .card-btns {
    background: transparent !important;
}

/* ── Bottom Sheet (passenger-request-accepted y on-the-way) ── */
body.dark-mode-active #bottom-sheet {
    background: #0F1C2F !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5) !important;
}
body.dark-mode-active #sheet-handle .handle-bar {
    background: #3a4454 !important;
}
body.dark-mode-active #sheet-scroll span[style*="color:#111"],
body.dark-mode-active #sheet-scroll span[style*="color: #111"] {
    color: #f1f5f9 !important;
}
body.dark-mode-active #sheet-scroll span[style*="color:#555"],
body.dark-mode-active #sheet-scroll span[style*="color: #555"],
body.dark-mode-active #sheet-scroll span[style*="color:#666"],
body.dark-mode-active #sheet-scroll span[style*="color: #666"] {
    color: #94a3b8 !important;
}
body.dark-mode-active .action-btns a[style*="background:#f3f4f6"] {
    background: #1e2a3a !important;
}
body.dark-mode-active .sheet-dot {
    background: #3a4454 !important;
}
body.dark-mode-active .sheet-dot.active {
    background: #60a5fa !important;
}

/* ── Direcciones en driver tray (.ts-dir) ── */
body.dark-mode-active .ts-dir {
    color: #cbd5e1 !important;
}

/* ── Direcciones de ruta (origen/destino leyenda) ── */
body.dark-mode-active .ruta-dir {
    color: #cbd5e1 !important;
}
body.dark-mode-active .ruta-line {
    background: #3a4454 !important;
}

/* ═══════════════════════════════════════════
   BOTTOM MENU — appBottomMenu (driver + passenger)
   ═══════════════════════════════════════════ */
body.dark-mode-active .appBottomMenu {
    background: var(--hp-card-bg) !important;
    border-top-color: var(--hp-border) !important;
}
body.dark-mode-active .appBottomMenu .item ion-icon {
    color: #8899aa !important;
}
body.dark-mode-active .appBottomMenu .text-footer-drive-number {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .appBottomMenu .text-footer-drive {
    color: #667788 !important;
}

/* ═══════════════════════════════════════════
   DRIVER — Dark Mode Override (inline styles)
   ═══════════════════════════════════════════ */
body.dark-mode-active .hp-tray-card[style*="background:#fff"],
body.dark-mode-active .hp-tray-card[style*="background: #fff"] {
    background: var(--hp-card-bg) !important;
}
body.dark-mode-active .hp-tray-card div[style*="color:#1a2235"],
body.dark-mode-active .hp-tray-card div[style*="color: #1a2235"] {
    color: #e0e0e0 !important;
}
body.dark-mode-active .hp-tray-card div[style*="color:#0F1C2F"],
body.dark-mode-active .hp-tray-card div[style*="color: #0F1C2F"] {
    color: #e0e0e0 !important;
}
/* Sub-texto gris en driver tray */
body.dark-mode-active div[style*="color:#888"],
body.dark-mode-active div[style*="color: #888"] {
    color: #8899aa !important;
}
body.dark-mode-active p[style*="color:#aaa"],
body.dark-mode-active p[style*="color: #aaa"],
body.dark-mode-active div[style*="color:#aaa"] {
    color: #667788 !important;
}
body.dark-mode-active p[style*="color:#666"],
body.dark-mode-active p[style*="color: #666"] {
    color: #8899aa !important;
}
/* Trip sheet — driver tray */
body.dark-mode-active .trip-sheet[style*="background:#fff"],
body.dark-mode-active .trip-sheet {
    background: var(--hp-card-bg) !important;
}
body.dark-mode-active .trip-sheet .ts-ruta-line {
    background: #2a3a4a !important;
}
body.dark-mode-active .trip-sheet .ts-nota {
    background: #1a2a3a !important;
    color: #99aabb !important;
}
body.dark-mode-active .trip-sheet .ts-sub,
body.dark-mode-active .trip-sheet .ts-metodo {
    color: #8899aa !important;
}
body.dark-mode-active .trip-sheet .ts-nombre {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .trip-sheet .trip-sheet-handle {
    background: #3a4a5a !important;
}
body.dark-mode-active .trip-sheet .trip-sheet-close {
    color: #667788 !important;
}
/* Trip sheet status colors — keep legible */
body.dark-mode-active .trip-sheet .text-success {
    color: #4ade80 !important;
}
body.dark-mode-active .trip-sheet .text-warning {
    color: #fbbf24 !important;
}
body.dark-mode-active .trip-sheet .text-danger {
    color: #f87171 !important;
}
body.dark-mode-active .trip-sheet .text-muted {
    color: #8899aa !important;
}

/* Driver bottom section */
body.dark-mode-active .section-bottom-passenger,
body.dark-mode-active .section-bottom-passenger[style*="background:#fff"],
body.dark-mode-active div[class*="fixed-bottom"][style*="background:#fff"],
body.dark-mode-active .section.fixed-bottom {
    background: var(--hp-card-bg) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .section-bottom-passenger .text-muted,
body.dark-mode-active .section-bottom-passenger h4 {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .section-bottom-passenger .ionicon {
    fill: var(--hp-text-primary) !important;
}

/* Driver header transparent (accepted service / on-the-way) */
body.dark-mode-active .appHeader.transparent,
body.dark-mode-active .appHeader.no-border {
    background: rgba(15, 28, 47, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Driver accepted-service info section */
body.dark-mode-active div[style*="background: #f8f9fa"],
body.dark-mode-active div[style*="background:#f8f9fa"] {
    background: #1a2a3a !important;
    color: #cbd5e1 !important;
}
body.dark-mode-active div[style*="border-bottom: 1px solid #dee2e6"],
body.dark-mode-active div[style*="border-bottom:1px solid #dee2e6"] {
    border-color: #2a3a4a !important;
}

/* Buttons — driver (secondary/outline) */
body.dark-mode-active .btn-outline-secondary,
body.dark-mode-active .btn-light {
    background: #1a2a3a !important;
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .btn-outline-primary {
    border-color: var(--hp-primary-dark) !important;
    color: var(--hp-primary-dark) !important;
}
body.dark-mode-active .btn-secondary {
    background: #2a3a4a !important;
    color: #e0e0e0 !important;
    border-color: #3a4a5a !important;
}

/* Alert/info boxes */
body.dark-mode-active .alert:not(.alert-danger):not(.alert-warning):not(.alert-success) {
    background: #1a2a3a !important;
    color: #cbd5e1 !important;
    border-color: var(--hp-border) !important;
}

/* Progress bar background */
body.dark-mode-active .progress {
    background: #1a2a3a !important;
}

/* Modal confirm (driver postulación) */
body.dark-mode-active #modal-confirm-precio {
    color: var(--hp-primary-dark) !important;
}
body.dark-mode-active #modal-confirm-eta {
    color: #8899aa !important;
}

/* Secciones, cards, listas ── */
body.dark-mode-active .section {
    background: transparent !important;
}
body.dark-mode-active .section.full,
body.dark-mode-active .section.mt-2,
body.dark-mode-active .section.mt-3,
body.dark-mode-active .section.mt-4,
body.dark-mode-active div[class*="section"] {
    background: transparent !important;
}
body.dark-mode-active .section-heading {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .card {
    background: var(--hp-card-bg) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .card-body {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .card-title,
body.dark-mode-active .card-text {
    color: var(--hp-text-primary) !important;
}
body.dark-mode-active .listview {
    background: transparent !important;
}
body.dark-mode-active .listview .item {
    color: var(--hp-text-primary) !important;
    border-color: var(--hp-border) !important;
}
body.dark-mode-active .listview .item strong {
    color: var(--hp-text-primary) !important;
}

/* ── Body background override ── */
body.dark-mode-active.bg-white,
body.dark-mode-active .bg-white {
    background: var(--hp-bg) !important;
}

/* ── Override Bootstrap bg-primary en headers ── */
body.dark-mode-active .appHeader.bg-primary,
body.dark-mode-active .appHeader.bg-secondary,
body.dark-mode-active .appHeader.bg-success,
body.dark-mode-active .appHeader.bg-danger,
body.dark-mode-active .appHeader.bg-warning,
body.dark-mode-active .appHeader.bg-info,
body.dark-mode-active .appHeader.bg-dark,
body.dark-mode-active .appHeader.bg-light,
body.dark-mode-active .extraHeader.bg-primary,
body.dark-mode-active .extraHeader.bg-secondary {
    background: var(--hp-header-bg) !important;
}
body.dark-mode-active .text-white {
    color: var(--hp-text-primary) !important;
}

/* ── Sidebar / offcanvas ── */
body.dark-mode-active .offcanvas,
body.dark-mode-active #sidebarPanel,
body.dark-mode-active #sidebarPanel .offcanvas-body,
body.dark-mode-active .modal-content {
    background: #0b1622 !important;
}
body.dark-mode-active .offcanvas-body {
    color: #e0e0e0 !important;
}
body.dark-mode-active .profileBox {
    background: #0F1C2F !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.3) !important;
}
body.dark-mode-active .profileBox:before {
    background: #0F1C2F !important;
}
body.dark-mode-active .profileBox .in strong {
    color: #e0e0e0 !important;
}
body.dark-mode-active .sidebar-buttons {
    background: #0F1C2F !important;
    border-color: #1e2d3d !important;
}
body.dark-mode-active .panelbox-left .listview > li,
body.dark-mode-active .panelbox-right .listview > li {
    color: #e0e0e0 !important;
}
body.dark-mode-active .listview .item,
body.dark-mode-active .listview .item .in {
    color: #cbd5e1 !important;
}
body.dark-mode-active .listview .item:active,
body.dark-mode-active .listview .item:hover {
    background: rgba(255,255,255,.05) !important;
}
body.dark-mode-active .icon-box {
    background: #1a2a3a !important;
    color: #8195a6 !important;
}
body.dark-mode-active .close-sidebar-button {
    color: #8195a6 !important;
}
body.dark-mode-active .close-sidebar-button:hover {
    color: #e0e0e0 !important;
}

/* ── text-muted (direcciones en my-trips) ── */
body.dark-mode-active .text-muted {
    color: #8899aa !important;
}

/* ── post-card (passenger-wait-confirmation y request-accepted) ── */
body.dark-mode-active .post-card {
    background: #0F1C2F !important;
    border: 1px solid #1B283B !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
body.dark-mode-active .card-price,
body.dark-mode-active .card-driver-name {
    color: #f1f5f9 !important;
}
body.dark-mode-active .card-driver-meta,
body.dark-mode-active .card-eta {
    color: #94a3b8 !important;
}
body.dark-mode-active .card-driver-row img {
    border-color: #1B283B !important;
}
body.dark-mode-active .btn-rechazar {
    background: #1e2a3a !important;
    color: #cbd5e1 !important;
}
body.dark-mode-active .btn-aceptar-wrap {
    background: #064e3b !important;
}

/* ── PIN box (passenger-on-the-way) ── */
body.dark-mode-active #pin-box {
    background: #0F1C2F !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}
body.dark-mode-active #pin-box div:first-child {
    color: #8195a6 !important;
}

/* ── Passenger pickup bottom section ── */
body.dark-mode-active .section-bottom-passenger {
    background: #0F1C2F !important;
}

/* ── No afectar mapa ni imágenes ── */
body.dark-mode-active img:not([class*="icon"]):not(.leaflet-tile) {
    /* mantener colores originales en fotos */
}
body.dark-mode-active #map,
body.dark-mode-active .map-container {
    background: #0c1624 !important;
}
body.dark-mode-active .leaflet-popup-content-wrapper {
    background: #0F1C2F !important;
    color: #f1f5f9 !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.5) !important;
}
body.dark-mode-active .leaflet-popup-tip {
    background: #0F1C2F !important;
}