/* *********************************************************************** */ /* Desarrollado por Herlin R. Espinosa G. (herlin25@gmail.com) */ /* *********************************************************************** */ /* * Complemento CSS del modo noche. * El motor (public/js/dark-mode.js) aplica los colores base con estilos inline * `!important`. Aquí sólo van los estados que JS no puede fijar de forma * fiable: :hover, :focus y pseudo-elementos (::placeholder, ::-webkit-*). * Todo queda scopeado bajo `body.dark-mode` para no afectar el modo día. */ /* Enlaces y elementos interactivos */ body.dark-mode a:hover { color: #6fb4ff !important; } /* Filas de tabla al pasar el mouse */ body.dark-mode .table-hover tbody tr:hover, body.dark-mode table.table-hover tbody tr:hover { background-color: #252a3d !important; color: #ffffff !important; } /* Items del sidebar al pasar el mouse */ body.dark-mode .nav-sidebar .nav-link:hover { background-color: #252a3d !important; color: #4a9eff !important; } /* Items de dropdown al pasar el mouse */ body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #252a3d !important; color: #4a9eff !important; } /* Botones al pasar el mouse (aclara ligeramente) */ body.dark-mode .btn-light:hover, body.dark-mode .btn-default:hover, body.dark-mode .btn-white:hover, body.dark-mode .btn-secondary:hover { background-color: #2e3448 !important; } /* Paginación al pasar el mouse */ body.dark-mode .page-link:hover, body.dark-mode .paginate_button:hover { background-color: #252a3d !important; color: #4a9eff !important; } /* Placeholders de inputs */ body.dark-mode input::placeholder, body.dark-mode textarea::placeholder, body.dark-mode .form-control::placeholder { color: #6a7288 !important; opacity: 1; } /* Autofill de Chrome (evita el fondo blanco del navegador) */ body.dark-mode input:-webkit-autofill, body.dark-mode input:-webkit-autofill:hover, body.dark-mode input:-webkit-autofill:focus { -webkit-text-fill-color: #d0d0d0 !important; -webkit-box-shadow: 0 0 0px 1000px #252a3d inset !important; caret-color: #d0d0d0 !important; } /* Scrollbars (WebKit) */ body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: #161826; } body.dark-mode ::-webkit-scrollbar-thumb { background: #3a4060; border-radius: 5px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4a5070; } /* Anti-FOUC: fondo oscuro antes de que el JS pinte, si se recarga en noche */ html.dark-pre-load, html.dark-pre-load body { background-color: #12131a !important; } /* Botón toggle: sin subrayado ni color de link por defecto */ #darkModeToggle { cursor: pointer; font-size: 1rem; } /* Hover de tiles propios (home / reportes) en noche */ body.dark-mode .home-tile:hover, body.dark-mode .report-tile:hover, body.dark-mode .report-tile:focus { background-color: #252a3d !important; border-color: #4a5070 !important; } /* Hover de ítems del dropdown de autocomplete en noche */ body.dark-mode .autocomplete-suggestions .list-group-item:hover { background-color: #252a3d !important; color: #4a9eff !important; } /* Autocomplete de jQuery UI (ul.ui-autocomplete) — usado en los campos "Buscar cliente/remitente/destinatario/tráiler" de los modales de reporte. Lo estiliza jquery-ui.css (CDN, fondo blanco) y se anexa al fuera de content-wrapper, así que el motor JS no lo toca. Es vendor sin !important → el override CSS gana. */ body.dark-mode .ui-autocomplete.ui-menu { background-color: #1e2130 !important; border-color: #2e3448 !important; color: #d0d0d0 !important; } body.dark-mode .ui-autocomplete .ui-menu-item-wrapper { color: #d0d0d0 !important; } body.dark-mode .ui-autocomplete .ui-menu-item-wrapper.ui-state-active, body.dark-mode .ui-autocomplete .ui-state-active, body.dark-mode .ui-autocomplete .ui-menu-item-wrapper:hover { background: #252a3d !important; border-color: #4a5070 !important; color: #4a9eff !important; } /* SweetAlert2 en noche (diálogos de confirmación/error/aviso). Hay DOS temas compitiendo: AdminLTE (`.dark-mode .swal2-popup{ #343a40 }`, tema coherente) y el motor JS del sitio (que a veces sobrescribe el popup a #1e2130 inline, de forma inconsistente porque SweetAlert2 reusa/reinicia el elemento). El desajuste dejaba las piezas de máscara del check en #343a40 sobre un popup #1e2130 → muescas/disco gris alrededor del anillo. Fix: fijar el popup a #1e2130 de forma consistente (gana a AdminLTE por especificidad `body.dark-mode` + !important) e igualar las máscaras del ícono de éxito al mismo color para que se fundan. Los íconos de error/aviso/info/pregunta usan líneas/bordes de color (sin máscaras blancas) → se ven bien sobre el popup oscuro. */ body.dark-mode .swal2-popup { background-color: #1e2130 !important; color: #d0d0d0 !important; } body.dark-mode .swal2-success-circular-line-left, body.dark-mode .swal2-success-circular-line-right, body.dark-mode .swal2-success-fix { background-color: #1e2130 !important; } /* Toast propio (public/messageToast, mostrarToast() — se usa en el mapa GPS de dailytrip). Su CSS fija fondo blanco + texto gris oscuro que el motor JS no toca (clases .custom-toast* propias). Los íconos/barras de progreso usan colores de acento (verde/rojo/ámbar) → se dejan; solo se oscurece el contenedor y se aclara el texto. */ body.dark-mode .custom-toast { background: #1e2130 !important; color: #d0d0d0 !important; } body.dark-mode .custom-toast-message { color: #d0d0d0 !important; } /* Hover de ítems de leyenda de gráficas en noche */ body.dark-mode .inv-legend-item:hover, body.dark-mode .cm-legend-item:hover, body.dark-mode .bfl-legend-item:hover { background-color: #252a3d !important; } /* Banner de título (.page-hero): en noche el navy queda cercano al fondo oscuro; un borde tenue + sombra lo despegan sin cambiar el degradado. */ body.dark-mode .page-hero { border: 1px solid #2e3448 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; } /* Zona de "Adjuntar archivos" (drop-zone) en noche. Su CSS propio (senddocument.css) fija fondos claros #f8faff/#e9f2ff/#d4e6ff que el motor JS no toca (clase propia). Como no es vendor de AdminLTE, el override por CSS sí gana. Estados hover/dragover incluidos para conservar el feedback. */ body.dark-mode .drop-zone { background-color: #252a3d !important; border-color: #4a9eff !important; color: #888888 !important; } body.dark-mode .drop-zone:hover { background-color: #2c3350 !important; } body.dark-mode .drop-zone.dragover { background-color: #33406a !important; border-color: #4a9eff !important; } /* Filas de archivos adjuntos (lista bajo el drop-zone) en noche */ body.dark-mode #file-list-attachfiles .list-group-item { background-color: #1e2130 !important; border-color: #2e3448 !important; color: #d0d0d0 !important; } /* Visor de logs (.error-content: pre usado en Tareas, Errores y Copias de seguridad). Su CSS propio (main.css) fija fondo claro #f5f5f5 con texto oscuro que el motor JS no toca. Se oscurece a un panel tipo terminal, se aclara el texto y se suben de brillo los niveles info/error para que contrasten sobre el fondo oscuro. */ body.dark-mode .error-content { background-color: #12131a !important; color: #d0d0d0 !important; border: 1px solid #2e3448 !important; } body.dark-mode .error-content .log-type-info { color: #4a9eff !important; } body.dark-mode .error-content .log-type-error { color: #ff6b6b !important; } /* Subtítulo de sección (.session-subtitle: "Lista de permisos/roles", etc.). Su CSS propio (main.css) fija fondo gris claro #f1f1f1 con texto navy, que el motor JS no toca (clase propia) → en noche queda como una franja clara que resalta. Se oscurece la franja, se aclara el texto y el borde de acento se sube a azul brillante para que se vea sobre el fondo oscuro. */ body.dark-mode .session-subtitle { background-color: #252a3d !important; color: #e0e0e0 !important; border-left-color: #4a9eff !important; } /* Descargar aplicación (/appdownload): las tarjetas .app-card tienen fondo blanco fijo (CSS embebido en la vista) que el motor JS no toca. Se oscurece SOLO la tarjeta; el .qr-container/.qr-image se dejan CLAROS a propósito para que el código QR siga siendo escaneable. Los textos (h3/p) ya los aclara el motor JS, así quedan legibles sobre la tarjeta oscura. */ body.dark-mode .app-card { background: #1e2130 !important; border: 1px solid #2e3448 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; } /* Botón nativo de ("Seleccionar archivo") en noche. Es un pseudo-elemento del navegador: el motor JS (estilos inline) no lo alcanza, por eso queda blanco. Cubre los inputs de archivo de todos los formularios (billoflading, creditmemo, driverpayment, expense, payment). */ body.dark-mode input[type="file"]::file-selector-button { background-color: #2c3350 !important; color: #d0d0d0 !important; border: 1px solid #2e3448 !important; border-radius: 4px; padding: 4px 10px; margin-right: 10px; cursor: pointer; } body.dark-mode input[type="file"]::file-selector-button:hover { background-color: #33406a !important; } /* Chrome/Safari antiguos usan el prefijo -webkit- */ body.dark-mode input[type="file"]::-webkit-file-upload-button { background-color: #2c3350 !important; color: #d0d0d0 !important; border: 1px solid #2e3448 !important; border-radius: 4px; padding: 4px 10px; margin-right: 10px; cursor: pointer; }