/* *********************************************************************** */
/* 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;
}
/* Toggle antiguo de la barra superior (el icono ☾ suelto). El selector Día/Noche vive
ahora en el menú del usuario (`.usermenu-theme*`, en main.css); esta regla se deja por
si alguna vista propia sigue incluyendo el botón. */
#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 (public/css/appdownload.css) 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, transportpayment, 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;
}
/* Chips de listas (roles y permisos de /user/{id}, permisos de /role/{id}).
`.lm-chip` es una clase propia (main.css) con fondo azul claro: el motor JS
solo repinta clases genéricas de Bootstrap/AdminLTE, así que en noche quedaría
como un chip claro. Se oscurece el fondo y se aclara el texto/borde. */
body.dark-mode .lm-chip {
background-color: #252a3d !important;
color: #d0d0d0 !important;
border-color: #2e3448 !important;
}
body.dark-mode .lm-chip-empty {
color: #9aa0ac !important;
}
/* Iconos de acción de las tablas de listado (ver / editar / eliminar / marcar).
`.lm-action-*` son clases propias (main.css) y el motor JS no las repinta.
Todos menos ELIMINAR toman el mismo color que el motor le da al texto del
encabezado de la tabla en noche, igual que en día toman su navy. Ese color es
`DARK.navyDark` (#64b0ff), NO `DARK.text`: los `