/* ============================================================ Tema oscuro centralizado — activado con data-theme="dark" en . Usa !important para vencer estilos en línea claros (style="background:#fff") de páginas heredadas. ============================================================ */ /* ── Botón de cambio de tema ── */ .theme-toggle{ background:transparent; border:1px solid #e2e8f0; color:#64748b; width:32px; height:32px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; transition:transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .theme-toggle:hover{ background:#f1f5f9; color:#0f172a; } .driver-topbar .theme-toggle{ border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.85); } .driver-topbar .theme-toggle:hover{ background:rgba(255,255,255,.15); color:#fff; } /* ── Idioma ES | EN ── */ .cw-locale-toggle{ display:inline-flex; align-items:center; flex-shrink:0; } .cw-locale-form{ display:inline-flex; gap:2px; padding:2px; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; } .cw-locale-btn{ border:0; background:transparent; color:#64748b; font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:.2rem .45rem; border-radius:7px; cursor:pointer; line-height:1.2; transition:background-color .15s ease,color .15s ease; } .cw-locale-btn:hover{ color:#0f172a; background:#e2e8f0; } .cw-locale-btn.is-active{ background:#0f172a; color:#fff; } .driver-topbar .cw-locale-form{ border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.12); } .driver-topbar .cw-locale-btn{ color:rgba(255,255,255,.75); } .driver-topbar .cw-locale-btn.is-active{ background:rgba(255,255,255,.22); color:#fff; } [data-theme="dark"] .cw-locale-form{ border-color:#334155; background:#0f172a; } [data-theme="dark"] .cw-locale-btn{ color:#94a3b8; } [data-theme="dark"] .cw-locale-btn.is-active{ background:#3b82f6; color:#fff; } /* ══════════════════ DARK ══════════════════ */ :root[data-theme="dark"]{ color-scheme:dark; } [data-theme="dark"] body{ background:#0b1220 !important; color:#e2e8f0; } /* Superficies principales */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .offcanvas, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .accordion-item, [data-theme="dark"] .list-group-item{ background:#111a2e !important; border-color:#1f2b45 !important; color:#e2e8f0; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer, [data-theme="dark"] .offcanvas-header{ background:#0f1a30 !important; border-color:#1f2b45 !important; color:#e2e8f0; } /* Utilidades de fondo claro heredadas */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-body, [data-theme="dark"] .bg-body-tertiary{ background:#111a2e !important; color:#e2e8f0; } /* Topbar de admin/cliente */ [data-theme="dark"] .topbar{ background:#0f172a !important; border-bottom-color:#1f2b45 !important; } [data-theme="dark"] .topbar-title{ color:#e2e8f0 !important; } [data-theme="dark"] .content{ color:#e2e8f0; } /* Texto */ [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary{ color:#94a3b8 !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body, [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3, [data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{ color:#e2e8f0 !important; } /* Bordes */ [data-theme="dark"] .border,[data-theme="dark"] .border-top,[data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start,[data-theme="dark"] .border-end{ border-color:#1f2b45 !important; } [data-theme="dark"] hr{ border-color:#1f2b45; } /* Tablas — neutraliza las variables de Bootstrap que pintan las celdas de blanco */ [data-theme="dark"] .table{ --bs-table-bg:transparent !important; --bs-table-color:#e2e8f0 !important; --bs-table-border-color:#1f2b45 !important; --bs-table-accent-bg:transparent !important; --bs-table-striped-bg:#16223b; --bs-table-hover-bg:#16223b; color:#e2e8f0 !important; background-color:transparent !important; } [data-theme="dark"] .table>tbody, [data-theme="dark"] .table>thead, [data-theme="dark"] .table>:not(caption)>*, [data-theme="dark"] .table>:not(caption)>*>*{ background:transparent !important; background-color:transparent !important; color:#e2e8f0 !important; border-color:#1f2b45 !important; } [data-theme="dark"] .card-body{ background-color:transparent !important; } [data-theme="dark"] .table thead th, [data-theme="dark"] .table-light, [data-theme="dark"] .table-light th, [data-theme="dark"] .table-light>*>*{ background-color:#16223b !important; color:#cbd5e1 !important; border-color:#1f2b45 !important; } [data-theme="dark"] .table-hover>tbody>tr:hover>*{ background-color:#16223b !important; } [data-theme="dark"] .table-bordered>:not(caption)>*>*{ border-color:#1f2b45 !important; } /* Formularios */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text{ background:#0f1a30 !important; border-color:#26334f !important; color:#e2e8f0 !important; } [data-theme="dark"] .form-control::placeholder{ color:#64748b !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus{ border-color:#3b82f6 !important; box-shadow:0 0 0 .2rem rgba(59,130,246,.2) !important; } [data-theme="dark"] .form-check-input{ background-color:#0f1a30; border-color:#26334f; } /* Botones suaves / grises */ [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-outline-secondary{ background:#1f2b45 !important; border-color:#26334f !important; color:#e2e8f0 !important; } [data-theme="dark"] .btn-outline-secondary:hover{ background:#26334f !important; } /* bg-primary/btn-outline-primary de Bootstrap (azul #0d6efd) quedaban sin cubrir en modo oscuro: sobre el fondo navy de tablas/tarjetas (#16223b) se veían "azul sobre azul", poco legibles (reporte admin/clients.php, badge de unidades + botón "Ver como"). Mismo par bg/texto ya probado en .topbar-badge de este archivo. */ [data-theme="dark"] .badge.bg-primary{ background:#3b82f6 !important; color:#fff !important; } [data-theme="dark"] .btn-outline-primary{ background:rgba(59,130,246,.14) !important; border-color:#3b82f6 !important; color:#93c5fd !important; } [data-theme="dark"] .btn-outline-primary:hover{ background:rgba(59,130,246,.26) !important; color:#dbeafe !important; } /* Dropdown items */ [data-theme="dark"] .dropdown-item{ color:#e2e8f0; } [data-theme="dark"] .dropdown-item:hover,[data-theme="dark"] .dropdown-item:focus{ background:#1f2b45; color:#fff; } [data-theme="dark"] .dropdown-divider{ border-color:#1f2b45; } /* Nav tabs / pills — control segmentado */ [data-theme="dark"] .nav-tabs{ background:#0b1220 !important; } [data-theme="dark"] .nav-tabs .nav-link{ color:#94a3b8; } [data-theme="dark"] .nav-tabs .nav-link:hover{ color:#e2e8f0; } [data-theme="dark"] .nav-tabs .nav-link.active{ background:#1f2b45 !important; color:#93c5fd; box-shadow:none; } /* ── Manual (client/manual.php) ── */ [data-theme="dark"] .man{ --man-ink:#e2e8f0; --man-muted:#94a3b8; } [data-theme="dark"] .man-card{ background:#111a2e !important; border-color:#1f2b45 !important; } [data-theme="dark"] .man-card-head{ border-bottom-color:#1f2b45; } [data-theme="dark"] .man-card-body p, [data-theme="dark"] .man-card-body ul li, [data-theme="dark"] .man-steps li>div{ color:#cbd5e1 !important; } [data-theme="dark"] .man-table th{ background:#16223b !important; color:#cbd5e1 !important; border-bottom-color:#1f2b45 !important; } [data-theme="dark"] .man-table td{ color:#cbd5e1 !important; border-bottom-color:#1f2b45 !important; } [data-theme="dark"] .man-toc-link{ color:#94a3b8; } [data-theme="dark"] .man-toc-link:hover{ background:#16223b; color:#fff; } [data-theme="dark"] .man-steps li:not(:last-child)::before{ background:#26334f; } [data-theme="dark"] .man-note.tip { background:#0e2b1c !important; color:#86efac !important; border-color:#14532d !important; } [data-theme="dark"] .man-note.warn{ background:#2a2109 !important; color:#fcd34d !important; border-color:#78530f !important; } [data-theme="dark"] .man-note.info{ background:#0f2038 !important; color:#93c5fd !important; border-color:#1e3a8a !important; } [data-theme="dark"] .man-card .p-3.rounded-3{ background:#16223b !important; } /* Alerts genéricos claros → tinte oscuro legible */ [data-theme="dark"] .alert-warning{ background:#2a2109 !important; color:#fcd34d !important; border-color:#78530f !important; } [data-theme="dark"] .alert-info{ background:#0f2038 !important; color:#93c5fd !important; border-color:#1e3a8a !important; } [data-theme="dark"] .alert-success{ background:#0e2b1c !important; color:#86efac !important; border-color:#14532d !important; } [data-theme="dark"] .alert-danger{ background:#2b0f14 !important; color:#fca5a5 !important; border-color:#7f1d1d !important; } /* ── Retrofit: neutraliza colores oscuros puestos EN LÍNEA ── (selector por subcadena del atributo style; cubre toda la app sin tener que editar cada página con style="color:#0f172a" etc.) */ [data-theme="dark"] [style*="color:#0f172a"], [data-theme="dark"] [style*="color: #0f172a"], [data-theme="dark"] [style*="color:#0F172A"], [data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color:#111827"], [data-theme="dark"] [style*="color:#1f2937"], [data-theme="dark"] [style*="color:#334155"], [data-theme="dark"] [style*="color:#0f172b"]{ color:#e2e8f0 !important; } /* Fondos claros en línea más comunes → superficie oscura */ [data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background:#f1f5f9"], [data-theme="dark"] [style*="background-color:#f8fafc"], [data-theme="dark"] [style*="background:#fafafa"]{ background-color:#16223b !important; } /* ── Retrofit: botones ghost, badges y callouts (inline en cliente) ── Patrón repetido en fleet_staff, users, sub_clients, ERP, flotilla… */ [data-theme="dark"] .btn[style*="background:#f8fafc"], [data-theme="dark"] button.btn[style*="background:#f8fafc"], [data-theme="dark"] a.btn[style*="background:#f8fafc"]{ background-color:#1f2b45 !important; border-color:#334155 !important; color:#e2e8f0 !important; } [data-theme="dark"] .btn[style*="background:#f8fafc"]:hover, [data-theme="dark"] button.btn[style*="background:#f8fafc"]:hover, [data-theme="dark"] a.btn[style*="background:#f8fafc"]:hover{ background-color:#26334f !important; color:#fff !important; } [data-theme="dark"] .alert[style*="background:#f0f9ff"], [data-theme="dark"] [class*="alert"][style*="background:#f0f9ff"]{ background-color:#0f2038 !important; color:#93c5fd !important; border-color:#1e3a8a !important; } [data-theme="dark"] .alert[style*="background:#f8fafc"], [data-theme="dark"] .alert.border-0[style*="background:#f8fafc"]{ background-color:#16223b !important; color:#cbd5e1 !important; border-color:#1f2b45 !important; } [data-theme="dark"] .badge[style*="background:#f8fafc"], [data-theme="dark"] .badge[style*="background:#f1f5f9"], [data-theme="dark"] span.badge[style*="background:#f8fafc"], [data-theme="dark"] span.badge[style*="background:#f1f5f9"]{ background-color:#1f2b45 !important; color:#cbd5e1 !important; border-color:#334155 !important; } [data-theme="dark"] [style*="border:1px solid #e2e8f0"], [data-theme="dark"] [style*="border: 1px solid #e2e8f0"], [data-theme="dark"] [style*="border-bottom:1px solid #f1f5f9"], [data-theme="dark"] [style*="border-top:1px solid #e2e8f0"], [data-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"]{ border-color:#334155 !important; } [data-theme="dark"] [style*="color:#374151"], [data-theme="dark"] [style*="color: #374151"], [data-theme="dark"] [style*="color:#475569"], [data-theme="dark"] [style*="color: #475569"], [data-theme="dark"] [style*="color:#64748b"], [data-theme="dark"] [style*="color: #64748b"]{ color:#94a3b8 !important; } /* Badges e iconos de rol (autorizador / operador) — tinte legible en tarjetas oscuras */ [data-theme="dark"] .badge[style*="color:#15803d"], [data-theme="dark"] .badge[style*="background:#15803d"]{ color:#86efac !important; background-color:rgba(22,163,74,.22) !important; border-color:rgba(74,222,128,.35) !important; } [data-theme="dark"] .badge[style*="color:#7c3aed"], [data-theme="dark"] .badge[style*="background:#7c3aed"]{ color:#c4b5fd !important; background-color:rgba(124,58,237,.22) !important; border-color:rgba(167,139,250,.35) !important; } [data-theme="dark"] [style*="background:#15803d1a"], [data-theme="dark"] [style*="background:#15803d"]{ background-color:rgba(22,163,74,.18) !important; border-color:rgba(74,222,128,.28) !important; } [data-theme="dark"] [style*="background:#7c3aed1a"], [data-theme="dark"] [style*="background:#7c3aed"]{ background-color:rgba(124,58,237,.18) !important; border-color:rgba(167,139,250,.28) !important; } [data-theme="dark"] i[style*="color:#15803d"], [data-theme="dark"] .fas[style*="color:#15803d"]{ color:#4ade80 !important; } [data-theme="dark"] i[style*="color:#7c3aed"], [data-theme="dark"] .fas[style*="color:#7c3aed"]{ color:#a78bfa !important; } [data-theme="dark"] .bg-light-subtle{ background-color:#16223b !important; border-color:#1f2b45 !important; color:#cbd5e1 !important; } [data-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(1.4); } /* Clase reutilizable (preferir en páginas nuevas) */ .btn-ghost{ background:#f8fafc; border:1px solid #e2e8f0; color:#374151; } [data-theme="dark"] .btn-ghost{ background:#1f2b45 !important; border-color:#334155 !important; color:#e2e8f0 !important; } [data-theme="dark"] .btn-ghost:hover{ background:#26334f !important; color:#fff !important; } .cw-callout-info{ background:#f0f9ff; color:#0369a1; border:0; } [data-theme="dark"] .cw-callout-info{ background:#0f2038 !important; color:#93c5fd !important; } /* ── Componentes personalizados (style.css) ── */ [data-theme="dark"] .stat-card{ background:#111a2e !important; border-color:#1f2b45 !important; } [data-theme="dark"] .stat-card .stat-value{ color:#e2e8f0 !important; } [data-theme="dark"] .stat-card .stat-label{ color:#94a3b8 !important; } [data-theme="dark"] .stat-card:hover{ border-color:#334155 !important; } [data-theme="dark"] .table-hover tbody tr:hover{ background:#16223b !important; } [data-theme="dark"] tr.row-link:hover td{ background:#16223b !important; } [data-theme="dark"] .badge-na{ background:#1f2b45 !important; color:#cbd5e1 !important; } /* Enlaces oscuros dentro de tablas/tarjetas → legibles en dark */ [data-theme="dark"] a.text-dark, [data-theme="dark"] .text-dark a{ color:#e2e8f0 !important; } /* Zona de subida / drag&drop del checklist */ [data-theme="dark"] .dropzone, [data-theme="dark"] .upload-zone, [data-theme="dark"] .photo-drop{ background:#0f1a30 !important; border-color:#26334f !important; color:#94a3b8 !important; } /* ── Panel del conductor ── */ [data-theme="dark"] .driver-body{ background:#0b1220 !important; color:#e2e8f0; } [data-theme="dark"] .driver-content{ color:#e2e8f0; } [data-theme="dark"] .driver-body .card{ background:#111a2e !important; border-color:#1f2b45 !important; } [data-theme="dark"] .unit-card, [data-theme="dark"] .cl-section, [data-theme="dark"] .unit-select-card, [data-theme="dark"] .unit-list-item, [data-theme="dark"] .sig-container{ background:#111a2e !important; border-color:#1f2b45 !important; } [data-theme="dark"] .cl-item{ border-bottom-color:#1f2b45 !important; } [data-theme="dark"] .cl-item-label{ color:#e2e8f0 !important; } [data-theme="dark"] .guia-dest-name{ color:#e2e8f0; } [data-theme="dark"] .guia-dest-meta{ color:#cbd5e1; } [data-theme="dark"] .guia-dest-btn-call{ background:#16223b; color:#e2e8f0; border-color:#26334f; } [data-theme="dark"] .unit-list-item:hover, [data-theme="dark"] .unit-list-item.selected{ background:#16223b !important; } /* ── Topbar: botones icono ── */ [data-theme="dark"] .topbar-icon-btn{ background:#1f2b45 !important; color:#cbd5e1 !important; } [data-theme="dark"] .topbar-icon-btn:hover{ background:#26334f !important; } [data-theme="dark"] .topbar-badge{ background:rgba(59,130,246,.18) !important; color:#93c5fd !important; } /* ── Overlay de carga y estados vacíos ── */ [data-theme="dark"] .loading-card{ background:#111a2e !important; box-shadow:0 20px 45px rgba(0,0,0,.6); } [data-theme="dark"] .loading-card p{ color:#e2e8f0; } [data-theme="dark"] .empty-state .es-icon{ background:#1f2b45; color:#94a3b8; } [data-theme="dark"] .empty-state .es-title{ color:#cbd5e1; } [data-theme="dark"] .empty-state .es-hint{ color:#94a3b8; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar{ width:10px; height:10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#26334f; border-radius:6px; } [data-theme="dark"] ::-webkit-scrollbar-track{ background:#0b1220; } /* Paquetes de timbres: en oscuro recuperan el contraste de las tarjetas */ [data-theme="dark"] .cfdi-pack-store{ background:#0b1220; color:#e8eef7; border-color:#1f2a3c; } [data-theme="dark"] .cfdi-pack-store-head h2{ color:#fff; } [data-theme="dark"] .cfdi-pack-store-head p{ color:#94a3b8; } [data-theme="dark"] .cfdi-pack-card{ background:#111827; border-color:#1f2a3c; } [data-theme="dark"] .cfdi-pack-card:hover{ box-shadow:0 18px 40px rgba(0,0,0,.35); } [data-theme="dark"] .cfdi-pack-card.is-featured{ border-color:#5eead4; box-shadow:0 0 0 1px rgba(94,234,212,.35), 0 18px 40px rgba(0,0,0,.35); } [data-theme="dark"] .cfdi-pack-badge{ background:#5eead4; color:#042f2e; } [data-theme="dark"] .cfdi-pack-name, [data-theme="dark"] .cfdi-pack-price{ color:#fff; } [data-theme="dark"] .cfdi-pack-blurb, [data-theme="dark"] .cfdi-pack-price span{ color:#94a3b8; } [data-theme="dark"] .cfdi-pack-ppu{ color:#64748b; } [data-theme="dark"] .cfdi-pack-cta-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; } [data-theme="dark"] .cfdi-pack-cta-ghost:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:#fff; } [data-theme="dark"] .cfdi-pack-cta-solid{ background:#5eead4; color:#042f2e; } [data-theme="dark"] .cfdi-pack-cta-solid:hover{ background:#2dd4bf; color:#042f2e; } [data-theme="dark"] .cfdi-pack-feats li{ color:#cbd5e1; } [data-theme="dark"] .cfdi-pack-check{ background:#166534; color:#86efac; } [data-theme="dark"] .card .cfdi-pack-store{ background:transparent; border-color:transparent; }