/* ============================================================================ partesapp-ui.css — capa de tema sobre Bootstrap 5.1.3 Carga SIEMPRE después de bootstrap.min.css y después de style.css. No modifica bootstrap: solo redefine variables y sobrescribe componentes. Modo oscuro con [data-theme="dark"] en . (Bootstrap 5.1.3 no tiene data-bs-theme; eso llegó en 5.3. Si actualizáis a 5.3, renombrad el selector a [data-bs-theme="dark"] y borrad el toggle manual.) ========================================================================= */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root { --pa-blue: #0D6EFD; --pa-blue-ink: #0B5ED7; --pa-blue-soft: #F2F6FD; --pa-blue-line: #D5E2FA; --pa-ink: #10192B; --pa-ink-2: #3C4658; --pa-muted: #5A6474; --pa-label: #8A93A3; --pa-faint: #A6AEBC; --pa-bg: #F4F6F9; --pa-surface: #FFFFFF; --pa-line: #E3E8F0; --pa-line-soft: #EEF1F6; --pa-line-faint: #F3F6FA; --pa-warn: #B45309; --pa-warn-bg: #FFFBF0; --pa-warn-line: #F2E3BE; --pa-warn-ink: #6B4708; --pa-danger: #B91C1C; --pa-danger-bg: #FDF2F2; --pa-danger-line: #F5D2D2; --pa-danger-ink: #7A1A1A; --pa-r-control: 4px; --pa-r-card: 6px; --pa-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --pa-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Bootstrap hereda de aquí */ --bs-primary: #0D6EFD; --bs-body-color: var(--pa-ink); --bs-body-bg: var(--pa-bg); --bs-border-color: var(--pa-line); --bs-font-sans-serif: var(--pa-sans); --bs-body-font-family: var(--pa-sans); } [data-theme="dark"] { --pa-blue: #0D6EFD; --pa-blue-ink: #7FB2FF; --pa-blue-soft: #142744; --pa-blue-line: #21426E; --pa-ink: #F1F4F9; --pa-ink-2: #E8ECF3; --pa-muted: #94A0B4; --pa-label: #6B7688; --pa-faint: #5A6678; --pa-bg: #0A0F1A; --pa-surface: #111927; --pa-line: #1F2937; --pa-line-soft: #1A2331; --pa-line-faint: #182030; --pa-warn-bg: #241C08; --pa-warn-line: #4A3A12; --pa-warn-ink: #F0C77A; --pa-danger-bg: #2A1113; --pa-danger-line: #55211F; --pa-danger-ink: #F5A9A5; --bs-body-color: var(--pa-ink); --bs-body-bg: var(--pa-bg); --bs-border-color: var(--pa-line); color-scheme: dark; } /* ---- 2. Base ------------------------------------------------------------ */ html, body { background: var(--pa-bg); color: var(--pa-ink); } body { font-family: var(--pa-sans); font-size: 14px; line-height: 1.5; } h1, h2, h3, h4, h5 { font-family: var(--pa-sans); letter-spacing: -.02em; font-weight: 700; } h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 20px; } a { color: var(--pa-blue-ink); text-decoration: none; } a:hover { color: var(--pa-ink); text-decoration: underline; } /* Todo número, hora, matrícula, nº de documento e importe. */ .pa-num, .pa-mono, .table td.pa-num { font-family: var(--pa-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* La matrícula (manage_trucks/manage_trailers/vehicle_maintenance_alerts) también lleva .pa-num por la tipografía monoespaciada, pero al ser la primera columna (identificador de la fila, no un dato final como fecha o importe) va alineada a la izquierda -- igual que en el diseño original. El resto de columnas .pa-num sí son datos finales de fila. */ td.pa-num:not(:first-child), th.pa-num:not(:first-child) { text-align: right; } /* Etiqueta en versal pequeña — el recurso tipográfico que une app y PDF. */ .pa-label { font-family: var(--pa-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-label); font-weight: 400; display: block; } .pa-section-label, h2.pa-section-label { font-family: var(--pa-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--pa-label); margin: 0 0 9px; font-weight: 400; } /* ---- 3. Superficies: filete, no sombra ---------------------------------- */ .card, .pa-card { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--pa-r-card); box-shadow: none; } .card-header { background: transparent; border-bottom: 1px solid var(--pa-line-soft); font-weight: 600; padding: 11px 16px; } .card-body { padding: 16px; } /* Bootstrap pinta .list-group-item en blanco fijo (no usa las variables --bs-*) -- las listas dentro de .pa-card (top conductores/camiones del dashboard, etc.) se quedaban claras encima de un fondo oscuro. */ .list-group-item { background: var(--pa-surface); border-color: var(--pa-line); color: var(--pa-ink); } /* Mismo problema que .list-group-item: Bootstrap deja .modal-content en blanco fijo, pero el texto suelto (h5, p sin .text-muted) sí hereda el color de body -- en oscuro quedaba casi blanco sobre fondo blanco. Los modales de confirmación (suscripción, cerrar parte, previsualización de imagen) se quedan siempre claros a propósito, no siguen el tema. */ .modal-content { background: var(--pa-surface); color: var(--pa-ink); border: 1px solid var(--pa-line); border-radius: var(--pa-r-card); } .modal-header, .modal-footer { border-color: var(--pa-line-soft); } [data-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Mismo problema otra vez: .accordion (FAQ de suscripción) y .dropdown-menu (Cuenta, Datos maestros... en el navbar superior) también son fondos fijos en blanco de Bootstrap. Aquí el texto no queda invisible (el propio Bootstrap le pone color fijo a .accordion-button/.dropdown-item), pero el bloque entero desentona como una isla clara en una página oscura -- ver también el chevron del acordeón, con el mismo problema del icono del botón de cerrar. */ .accordion-item { background: var(--pa-surface); border-color: var(--pa-line); } .accordion-button { background: var(--pa-surface); color: var(--pa-ink); } .accordion-button:not(.collapsed) { background: var(--pa-blue-soft); color: var(--pa-blue-ink); box-shadow: inset 0 -1px 0 var(--pa-line); } .accordion-button:focus { box-shadow: inset 0 -1px 0 var(--pa-line); } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } .dropdown-menu { background: var(--pa-surface); border-color: var(--pa-line); } .dropdown-item { color: var(--pa-ink-2); } .dropdown-item:hover, .dropdown-item:focus { background: var(--pa-line-faint); color: var(--pa-ink); } .dropdown-divider { border-color: var(--pa-line-soft); } /* Select2 (camión, cliente, dirección...) abre su desplegable en un bloque propio fuera del