/* === ONTA6 Modo Oscuro — Estilo Corporativo DVTRACE === */ /* Activo solo cuando está presente */ body.dark-mode { background-color: #1b1b1b !important; color: #e0e0e0 !important; font-weight: 400; } /* === Navbar y encabezados === */ body.dark-mode .navbar, body.dark-mode header { background-color: #222 !important; border-bottom: 1px solid #333 !important; } body.dark-mode .navbar-brand, body.dark-mode .nav-link, body.dark-mode .navbar-text { color: #f0f0f0 !important; } body.dark-mode .nav-link:hover { color: #ff6600 !important; } /* === Botones === */ body.dark-mode .btn { border-radius: 6px; transition: background-color 0.3s, color 0.3s; } body.dark-mode .btn-primary { background-color: #ff6600 !important; border-color: #ff6600 !important; color: #fff !important; } body.dark-mode .btn-primary:hover { background-color: #ff7e26 !important; } body.dark-mode .btn-light { background-color: #2d2d2d !important; color: #e0e0e0 !important; border: 1px solid #444 !important; } body.dark-mode .btn-outline-primary { border-color: #ff6600 !important; color: #ff6600 !important; } body.dark-mode .btn-outline-primary:hover { background-color: #ff6600 !important; color: #fff !important; } /* === Tablas y Tabulator === */ body.dark-mode .tabulator { background-color: #222 !important; color: #eaeaea !important; border: 1px solid #333 !important; } body.dark-mode .tabulator-header { background-color: #2a2a2a !important; border-bottom: 1px solid #333 !important; } body.dark-mode .tabulator-col-title { color: #ccc !important; } body.dark-mode .tabulator-row { background-color: #1f1f1f !important; } body.dark-mode .tabulator-row:hover { background-color: #2c2c2c !important; } body.dark-mode .tabulator-row.tabulator-selected { background-color: rgba(255, 102, 0, 0.25) !important; } /* === Formularios === */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: #2b2b2b !important; color: #f1f1f1 !important; border-color: #444 !important; } body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: #ff6600 !important; box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25) !important; } /* === Modales === */ body.dark-mode .modal-content { background-color: #252525 !important; color: #f1f1f1 !important; border: 1px solid #333 !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { background-color: #1f1f1f !important; border-color: #333 !important; } body.dark-mode .modal-title { color: #ff6600 !important; } /* === Cards y paneles === */ body.dark-mode .card { background-color: #232323 !important; color: #f1f1f1 !important; border: 1px solid #333 !important; box-shadow: 0 0 8px rgba(0,0,0,0.4) !important; } body.dark-mode .card-header { background-color: #2a2a2a !important; border-bottom: 1px solid #333 !important; color: #ff6600 !important; } body.dark-mode .card-body { color: #e0e0e0 !important; } /* === Toasts === */ body.dark-mode .toast { background-color: #2c2c2c !important; color: #f1f1f1 !important; border: 1px solid #444 !important; } /* === Scrollbars === */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-thumb { background-color: #444; border-radius: 10px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background-color: #555; } /* === Tablas estándar (no Tabulator) === */ body.dark-mode table { background-color: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode thead { background-color: #292929 !important; color: #ff6600 !important; } /* === Links === */ body.dark-mode a { color: #807c7c !important; } body.dark-mode a:hover { color: #ffaa66 !important; } /* === Contenedores del mapa === */ body.dark-mode #map { border: 1px solid #333 !important; } /* === Sliding panels, modales de ONTA6 === */ /* === Selectores, Flatpickr, etc. === */ body.dark-mode .flatpickr-calendar { background: #2b2b2b !important; border: 1px solid #444 !important; } body.dark-mode .flatpickr-day { color: #ddd !important; } body.dark-mode .flatpickr-day.today { background: #ff6600 !important; color: white !important; } /* === Transiciones suaves === */ body, .modal-content, .card, .tabulator { transition: background-color 0.3s ease, color 0.3s ease; } /* === Personalizaciones específicas de ONTA6 === */ body.dark-mode #floating-table { background-color: #343a40 !important; color: #f8f9fa !important; /* texto claro opcional */ border: 1px solid #2d3237 !important; /* un borde sutil */ } body.dark-mode #floating-table .tabulator { background-color: #343a40 !important; color: #f1f1f1 !important; } body.dark-mode #floating-table .tabulator-header { background-color: #2e3439 !important; color: #ccc !important; } body.dark-mode .toolbar { position: sticky; top: 0; z-index: 100; background-color: #2e3439; } body.dark-mode table th { background-color: #343a40 !important; color: #f8f9fa !important; border-color: #2d3237 !important; } /* Activo para nav-link en modo oscuro */ body.dark-mode .nav-link.active { background-color: #2b2f33 !important; color: #ff6600 !important; border-radius: 6px; font-weight: 600; } /* Hover coherente */ body.dark-mode .nav-link:hover { background-color: #343a40 !important; color: #807c7c !important; } /* === MODO OSCURO PARA TOM SELECT === */ body.dark-mode .ts-control, body.dark-mode .ts-wrapper.single .ts-control, body.dark-mode .ts-wrapper.multi .ts-control { background-color: #2b2f33 !important; /* Fondo del campo */ color: #f8f9fa !important; /* Texto */ border: 1px solid #3e444a !important; /* Borde sutil */ } body.dark-mode .ts-dropdown { background-color: #2b2f33 !important; /* Fondo del dropdown */ border: 1px solid #3e444a !important; color: #eaeaea !important; } body.dark-mode .ts-dropdown .option { background-color: transparent !important; color: #eaeaea !important; } body.dark-mode .ts-dropdown .option:hover, body.dark-mode .ts-dropdown .option.active { background-color: #343a40 !important; /* Hover / selección */ color: #ff6600 !important; /* Acento DVTRACE */ } body.dark-mode .ts-dropdown .create { background-color: #262a2e !important; color: #807c7c !important; } /* Placeholder (texto tenue) */ body.dark-mode .ts-control::placeholder, body.dark-mode .ts-control input::placeholder { color: #aaa !important; } /* Flechas y etiquetas en selects múltiples */ body.dark-mode .ts-wrapper.multi .item { background-color: #343a40 !important; border: 1px solid #4a4f55 !important; color: #f8f9fa !important; } body.dark-mode .ts-wrapper.multi .item.active { background-color: #ff6600 !important; color: #fff !important; } /* Sombra del dropdown */ body.dark-mode .ts-dropdown { box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important; } /* === SLIDING PANEL MODO OSCURO === */ body.dark-mode #slidingPanel { color: #f8f9fa !important; } /* Cabecera del accordion */ body.dark-mode #slidingPanel .accordion-button { background-color: #343a40 !important; color: #f8f9fa !important; border: none !important; box-shadow: none !important; } body.dark-mode #slidingPanel .accordion-button:not(.collapsed) { background-color: #2b2f33 !important; color: #ff6600 !important; /* Acento DVTRACE */ } /* Icono del accordion (caret o flecha) */ body.dark-mode #slidingPanel .accordion-button::after { filter: invert(80%) !important; /* hace el icono claro */ } /* Contenido del accordion */ body.dark-mode #slidingPanel .accordion-body { background-color: #242729 !important; color: #eaeaea !important; border-top: 1px solid #3e444a !important; } /* Hover sobre encabezado */ body.dark-mode #slidingPanel .accordion-button:hover { background-color: #3a3f44 !important; color: #807c7c !important; } /* Títulos dentro del panel (h5, strong, etc.) */ body.dark-mode #slidingPanel h5, body.dark-mode #slidingPanel strong, body.dark-mode #slidingPanel .fw-bold { color: #807c7c !important; } /* Líneas divisorias, bordes o badges */ body.dark-mode #slidingPanel .border, body.dark-mode #slidingPanel .list-group-item { border-color: #3e444a !important; background-color: #2b2f33 !important; color: #f8f9fa !important; } /* Scrollbar oscuro */ body.dark-mode #slidingPanel::-webkit-scrollbar { width: 8px; } body.dark-mode #slidingPanel::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; } body.dark-mode #slidingPanel::-webkit-scrollbar-thumb:hover { background-color: #777; } /*****************************/ /* === TABLAS ELEGANTES EN MODO OSCURO (ajustado con texto gris claro) === */ body.dark-mode .table { color: #e0e0e0 !important; /* Gris claro para mejor legibilidad */ background-color: #2b2f33 !important; border-color: #3e444a !important; } body.dark-mode .table th { background-color: #2f3338 !important; color: #807c7c !important; /* Acento DVTRACE */ border-bottom: 1px solid #444 !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #2b2f33 !important; /* Fila base */ color: #d0d0d0 !important; /* Texto gris claro */ } body.dark-mode .table-striped > tbody > tr:nth-of-type(even) { background-color: #343a40 !important; /* Fila alterna */ color: #d0d0d0 !important; /* Texto gris claro */ } /* Hover */ body.dark-mode .table-hover > tbody > tr:hover { background-color: #3d4349 !important; color: #807c7c !important; } /* Bordes */ body.dark-mode .table td, body.dark-mode .table th { border-color: #444 !important; } /* Texto general dentro de tabla */ body.dark-mode .table td, body.dark-mode .table th, body.dark-mode .table small, body.dark-mode .table i, body.dark-mode .table .text-muted { color: #e0e0e0 !important; } /* Enlaces dentro de la tabla */ body.dark-mode .table a { color: #807c7c !important; text-decoration: none; } body.dark-mode .table a:hover { color: #ffaa66 !important; } /* Badges dentro de la tabla */ body.dark-mode .badge { background-color: #3a3f44 !important; color: #f8f9fa !important; } body.dark-mode .badge.bg-success { background-color: #198754 !important; } body.dark-mode .badge.bg-danger { background-color: #dc3545 !important; } body.dark-mode .badge.bg-warning { background-color: #ff6600 !important; color: #000 !important; } body.dark-mode .tabla-reporte{ background-color: #3a3f44 !important; color: #e0e0e0 !important; } /* === BORDES Y CONTORNOS GLOBALES EN MODO OSCURO === */ /* Bordes de todos los elementos */ body.dark-mode *, body.dark-mode *::before, body.dark-mode *::after { border-color: #3e444a !important; /* Gris grafito */ outline-color: #3e444a !important; } /* Elementos con bordes blancos (como cards, inputs, etc.) */ body.dark-mode .card, body.dark-mode .form-control, body.dark-mode .list-group-item, body.dark-mode .modal-content, body.dark-mode .dropdown-menu, body.dark-mode .accordion-item { border-color: #3e444a !important; background-color: #2b2f33 !important; color: #e0e0e0 !important; } /* Efecto de enfoque (focus) en inputs o botones */ body.dark-mode .form-control:focus, body.dark-mode .btn:focus, body.dark-mode .accordion-button:focus { border-color: #ff6600 !important; /* Acento DVTRACE */ box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.25) !important; outline: none !important; } /* Placeholder de inputs */ body.dark-mode ::placeholder { color: #aaa !important; } /* Botones */ body.dark-mode .btn { border-color: #3e444a !important; color: #f8f9fa !important; } /* Líneas horizontales (hr) */ body.dark-mode hr { border-top: 1px solid #3e444a !important; } /* Elementos con borde claro por defecto (inputs deshabilitados, etc.) */ body.dark-mode input[disabled], body.dark-mode select[disabled], body.dark-mode textarea[disabled] { border-color: #444 !important; background-color: #2f3338 !important; color: #aaa !important; } body.dark-mode .accordion{ background-color: #3a3f44 !important } /* === INFO WINDOWS EN MODO OSCURO === */ body.dark-mode .gm-style-iw, body.dark-mode .custom-infowindow { background-color: #2b2f33 !important; /* Fondo oscuro */ color: #f8f9fa !important; border-radius: 8px !important; padding: 8px 10px !important; border: 1px solid #3e444a !important; box-shadow: 0 2px 10px rgba(0,0,0,0.6) !important; } /* Título e íconos */ body.dark-mode .custom-infowindow h6, body.dark-mode .custom-infowindow i { color: #ff8533 !important; /* Acento DVTRACE */ } /* Enlaces o textos secundarios */ body.dark-mode .custom-infowindow a { color: #ff8533 !important; } body.dark-mode .custom-infowindow a:hover { color: #ffaa66 !important; } /* Fondo del globo (contorno que dibuja Maps) */ body.dark-mode .gm-style-iw-d { background-color: #2b2f33 !important; } /* Botón de cierre (X) */ body.dark-mode .gm-ui-hover-effect > span { filter: invert(80%) !important; } /* Contenedor principal del InfoWindow */ body.dark-mode .gm-style .gm-style-iw-c { background-color: #2b2f33 !important; color: #f8f9fa !important; border-radius: 8px !important; border: 1px solid #3e444a !important; } /* Texto dentro del InfoWindow */ body.dark-mode .gm-style .gm-style-iw-d { background-color: #2b2f33 !important; color: #e0e0e0 !important; } /* Íconos internos */ body.dark-mode .gm-style .gm-style-iw-t img, body.dark-mode .gm-style .gm-style-iw-t svg { filter: invert(80%) !important; } /* Botón de cierre */ body.dark-mode .gm-ui-hover-effect { filter: invert(90%) !important; }