/* =========================================================================== themes.css — Temas del dashboard (además del "actual" de AdminLTE) --------------------------------------------------------------------------- Se activa por una clase en gestionada por theme.js: - (sin clase) → tema ACTUAL (AdminLTE dark-mode + azul). No se toca. - .theme-dark → OSCURO corporativo (dark-mode + acento ROJO) - .theme-light → CLARO corporativo (sin dark-mode: blanco roto + texto negro + rojo) Persistencia y conmutación: theme.js. =========================================================================== */ :root { --tt-red: #dc3545; --tt-red-dark: #b02a37; --tt-red-on: #ffffff; /* Claro corporativo */ --tt-light-bg: #f5f5f3; /* blanco roto */ --tt-light-card: #ffffff; --tt-light-text: #1a1a1a; --tt-light-muted: #6c757d; --tt-light-border: #e3e3df; } /* ========================================================================== SUPERFICIE por tema — .tt-surface sustituye a bg-dark. El color lo decide una variable CSS que cambia con la clase de tema del . Así una sola clase sirve para los 3 temas (y para el HTML inyectado dinámicamente). ========================================================================== */ body { --tt-surface: #343a40; --tt-surface-text: #e6e6e6; --tt-surface-border: #333; } /* actual (medium) */ body.theme-dark { --tt-surface: #262b34; --tt-surface-text: #e6e6e6; --tt-surface-border: #313742; } /* oscuro corporativo */ body.theme-light { --tt-surface: #ffffff; --tt-surface-text: #1a1a1a; --tt-surface-border: #e3e3df; } /* claro corporativo */ .tt-surface { background-color: var(--tt-surface) !important; color: var(--tt-surface-text) !important; } .small-box.tt-surface { border: 1px solid var(--tt-surface-border) !important; } /* ========================================================================== ACENTO ROJO — común a oscuro y claro (sustituye el azul/teal de AdminLTE) ========================================================================== */ body.theme-dark .bg-primary, body.theme-light .bg-primary, body.theme-dark .bg-info, body.theme-light .bg-info, body.theme-dark .bg-gradient-primary, body.theme-light .bg-gradient-primary, body.theme-dark .bg-gradient-info, body.theme-light .bg-gradient-info { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: var(--tt-red-on) !important; } body.theme-dark .btn-primary, body.theme-light .btn-primary, body.theme-dark .btn-info, body.theme-light .btn-info { background-color: var(--tt-red) !important; border-color: var(--tt-red-dark) !important; color: #fff !important; } body.theme-dark .btn-primary:hover, body.theme-light .btn-primary:hover, body.theme-dark .btn-info:hover, body.theme-light .btn-info:hover { background-color: var(--tt-red-dark) !important; border-color: var(--tt-red-dark) !important; } body.theme-dark .btn-outline-info, body.theme-light .btn-outline-info, body.theme-dark .btn-outline-primary, body.theme-light .btn-outline-primary { color: var(--tt-red) !important; border-color: var(--tt-red) !important; } body.theme-dark .text-primary, body.theme-light .text-primary, body.theme-dark .text-info, body.theme-light .text-info { color: var(--tt-red) !important; } /* Cabeceras y bordes de cards de color */ body.theme-dark .card-primary:not(.card-outline)>.card-header, body.theme-light .card-primary:not(.card-outline)>.card-header, body.theme-dark .card-info:not(.card-outline)>.card-header, body.theme-light .card-info:not(.card-outline)>.card-header { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: #fff !important; } body.theme-dark .card-primary.card-outline, body.theme-light .card-primary.card-outline, body.theme-dark .card-info.card-outline, body.theme-light .card-info.card-outline { border-top-color: var(--tt-red) !important; } /* Sidebar: elemento activo y pills en rojo */ body.theme-dark .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, body.theme-light .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, body.theme-dark .nav-pills .nav-link.active, body.theme-light .nav-pills .nav-link.active { background-color: var(--tt-red) !important; color: #fff !important; box-shadow: none !important; } /* Acentos que en dashboard.css estaban hardcodeados en teal/azul */ body.theme-dark .spinner, body.theme-light .spinner { border-top-color: var(--tt-red) !important; } body.theme-dark .fc-day-today .fc-daygrid-day-top, body.theme-light .fc-day-today .fc-daygrid-day-top { border-top-color: var(--tt-red) !important; } body.theme-dark .daterangepicker td.active, body.theme-dark .daterangepicker td.active:hover, body.theme-light .daterangepicker td.active, body.theme-light .daterangepicker td.active:hover { background-color: var(--tt-red) !important; } body.theme-dark .violation-icon, body.theme-light .violation-icon { color: var(--tt-red) !important; } /* ========================================================================== TEMA OSCURO CORPORATIVO — carbón azulado (la paleta de la maqueta, no negro puro) Fondo #1b1f26, cards #262b34 (un punto más claras, para dar profundidad), navbar/sidebar #171a20. ========================================================================== */ body.theme-dark .content-wrapper, body.theme-dark .main-footer, body.theme-dark .content { background-color: #1b1f26 !important; } body.theme-dark .card, body.theme-dark .info-box, body.theme-dark .small-box, body.theme-dark .bg-dark, body.theme-dark .small-box.bg-dark { background-color: #262b34 !important; color: #e6e6e6 !important; border-color: #313742 !important; } body.theme-dark .card-header, body.theme-dark .card-footer { border-color: #313742 !important; } body.theme-dark .main-header.navbar { background-color: #171a20 !important; border-bottom: 1px solid #23272f !important; } body.theme-dark .main-sidebar, body.theme-dark .sidebar-dark-primary { background-color: #171a20 !important; } body.theme-dark .brand-link { border-bottom: 1px solid #23272f !important; } /* Contornos de tablas/hr para que no “brillen” en gris sobre el carbón */ body.theme-dark .table td, body.theme-dark .table th, body.theme-dark hr { border-color: #313742 !important; } /* ========================================================================== TEMA CLARO CORPORATIVO — blanco roto + texto negro (primer pase: contenido principal. Calendario/datepicker se afinan en Fase 3.) ========================================================================== */ body.theme-light .content-wrapper, body.theme-light .main-footer { background-color: var(--tt-light-bg) !important; color: var(--tt-light-text) !important; } body.theme-light .card { background-color: var(--tt-light-card) !important; color: var(--tt-light-text) !important; border: 1px solid var(--tt-light-border) !important; } body.theme-light .card-header { border-bottom-color: var(--tt-light-border) !important; } body.theme-light .content-wrapper .text-muted, body.theme-light .small-box .icon, body.theme-light .text-secondary { color: var(--tt-light-muted) !important; } /* Navbar clara: fondo blanco, texto/iconos negros (los botones btn-* mantienen su color). */ body.theme-light .main-header.navbar { background-color: #ffffff !important; border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-light .main-header .nav-link, body.theme-light .main-header .navbar-nav .nav-link { color: #1a1a1a !important; } /* Sidebar (menú) claro: fondo blanco, texto negro, separador a la derecha. */ body.theme-light .main-sidebar, body.theme-light .sidebar-dark-primary { background-color: #ffffff !important; border-right: 1px solid var(--tt-light-border) !important; } body.theme-light .brand-link { border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-light .brand-link, body.theme-light .brand-text, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-link, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-link p, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-icon, body.theme-light .user-panel .info a { color: #1a1a1a !important; } body.theme-light .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link:hover { background-color: #f0f0ee !important; color: #1a1a1a !important; } body.theme-light .user-panel { border-bottom-color: var(--tt-light-border) !important; } /* El item activo del menú sigue en ROJO (regla de acento común, más arriba), con texto blanco. */ /* Datepicker (daterangepicker) CLARO. En dashboard.css está hardcodeado oscuro sin scope, así que aquí lo forzamos claro con mayor especificidad (body.theme-light). */ body.theme-light .daterangepicker, body.theme-light .daterangepicker .calendar-table { background-color: #ffffff !important; border-color: var(--tt-light-border) !important; color: var(--tt-light-text) !important; } body.theme-light .daterangepicker td.available:hover, body.theme-light .daterangepicker th.available:hover { background-color: #f0f0ee !important; } body.theme-light .daterangepicker td.off, body.theme-light .daterangepicker td.off.in-range, body.theme-light .daterangepicker td.off.start-date, body.theme-light .daterangepicker td.off.end-date { background-color: #ffffff !important; color: #c7c7c2 !important; } body.theme-light .daterangepicker td.in-range { background-color: #fdecec !important; color: #1a1a1a !important; } body.theme-light .daterangepicker td.active, body.theme-light .daterangepicker td.active:hover { background-color: var(--tt-red) !important; color: #fff !important; } body.theme-light .daterangepicker .drp-buttons { border-top: 1px solid var(--tt-light-border) !important; } body.theme-light .daterangepicker:after { border-bottom-color: #ffffff !important; } body.theme-light .daterangepicker:before { border-bottom-color: var(--tt-light-border) !important; } /* Calendario (FullCalendar) en tema CLARO. Al no haber dark-mode, FC usa su tema claro por defecto; solo neutralizamos las reglas oscuras SIN scope de dashboard.css (day-top gris + texto blanco) y damos acento rojo a botones y al día de hoy. */ body.theme-light { --fc-page-bg-color: #ffffff; --fc-border-color: var(--tt-light-border); --fc-neutral-bg-color: #f5f5f3; --fc-today-bg-color: rgba(220, 53, 69, 0.06); --fc-button-bg-color: var(--tt-red); --fc-button-border-color: var(--tt-red-dark); --fc-button-hover-bg-color: var(--tt-red-dark); --fc-button-active-bg-color: var(--tt-red-dark); } body.theme-light .fc-daygrid-day-top { background-color: transparent !important; } body.theme-light .fc-daygrid-day-top a, body.theme-light .fc-col-header-cell-cushion { color: #1a1a1a !important; } body.theme-light .fc-daygrid-day-number { color: #666 !important; } body.theme-light .fc-h-event, body.theme-light .fc-h-event .fc-event-main { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: #fff !important; } body.theme-light .fc-daygrid-block-event { background-color: #f0f0ee !important; border: 1px solid var(--tt-light-border) !important; color: #1a1a1a !important; } /* Calendario grande (calendar.html): la card hace de marco/cabecera gris (con el toolbar), y la REJILLA (cuerpo) va en BLANCO. */ body.theme-light #calendar .fc-scrollgrid, body.theme-light #calendar .fc-view-harness, body.theme-light #calendar .fc-daygrid-body, body.theme-light #calendar .fc-scrollgrid-sync-table { background-color: #ffffff !important; } /* ========================================================================== Paneles ".card-dark" (Análisis de sesiones / cruce de fronteras). Están construidos con estilos INLINE oscuros hardcodeados; un !important en el CSS gana al inline normal, así que los tematizamos sin tocar el HTML/JS. ========================================================================== */ /* Bordes internos de .card-dark (divisores, border-right/top/bottom, filas) según la variable de superficie de cada tema. Se pudo quitar el !important inline que antes los bloqueaba. Cubre también el tema actual (#333). */ .card-dark tr, .card-dark [class*="border"], .card-dark div[style*="border"] { border-color: var(--tt-surface-border) !important; } /* --- Oscuro corporativo: alineamos al carbón --- */ body.theme-dark .card-dark { background-color: #1b1f26 !important; border-color: #313742 !important; } body.theme-dark .card-dark .card-body { background-color: #1b1f26 !important; } body.theme-dark .card-dark thead { background-color: #171a20 !important; } body.theme-dark .card-dark tr, body.theme-dark .card-dark [class*="border"], body.theme-dark .card-dark div[style*="border"] { border-color: #313742 !important; } /* --- Claro corporativo --- */ body.theme-light .card-dark { background-color: #f5f5f3 !important; border-color: var(--tt-light-border) !important; color: var(--tt-light-text) !important; } /* Panel (frame/cabecera) en gris; card-body interno en BLANCO; recuadros KPI en gris para que resalten sobre el body blanco. */ body.theme-light .card-dark .card-body { background-color: #ffffff !important; } body.theme-light .card-dark thead { background-color: #f5f5f3 !important; } body.theme-light .card-dark .small-box.tt-surface { background-color: #f0f0ee !important; } body.theme-light .card-dark .table-dark, body.theme-light .card-dark .table-dark > tbody > tr, body.theme-light .card-dark .table-dark td, body.theme-light .card-dark .table-dark th { background-color: transparent !important; color: var(--tt-light-text) !important; } body.theme-light .card-dark .text-muted { color: var(--tt-light-muted) !important; } body.theme-light .card-dark tr, body.theme-light .card-dark [class*="border"], body.theme-light .card-dark div[style*="border"] { border-color: var(--tt-light-border) !important; } body.theme-light .card-dark td[style*="color"] { color: var(--tt-light-text) !important; } body.theme-light .badge-dark { background-color: #e9e9e6 !important; color: #1a1a1a !important; } /* ========================================================================== Timeline / bitácora (la generan las plantillas inline de activity.js) + scrolls. ========================================================================== */ body.theme-dark .timeline-item { background-color: #262b34 !important; } body.theme-light .timeline-item { background-color: #f7f7f5 !important; } body.theme-light .timeline-header[style*="#fff"] { color: #1a1a1a !important; border-bottom-color: var(--tt-light-border) !important; } /* Textos gris incrustados en los items (activity.js): horas #888/#666 y etiquetas/duraciones #aaa/#bbb. Sobre el item claro (#f7f7f5) quedaban lavados; los oscurecemos a un gris legible manteniendo la jerarquía. */ body.theme-light #timeline-content [style*="#888"], body.theme-light #timeline-content [style*="#666"] { color: #555 !important; } body.theme-light #timeline-content [style*="#aaa"], body.theme-light #timeline-content [style*="#bbb"] { color: #6c757d !important; } /* Scrolls: en dashboard.css el track va oscuro (webkit) y hay scrollbar-color inline oscuro en varios divs. En claro los aclaramos. */ body.theme-light [style*="scrollbar-color"] { scrollbar-color: #c7c7c2 #f0f0ee !important; } body.theme-light #timeline-container { scrollbar-color: #c7c7c2 #f0f0ee !important; } body.theme-light #timeline-container::-webkit-scrollbar-track { background: #f0f0ee !important; } body.theme-light #timeline-container::-webkit-scrollbar-thumb { background-color: #c7c7c2 !important; border-color: #f0f0ee !important; } /* ========================================================================== Cabeceras de panel: que sigan la superficie del tema en vez de un fondo oscuro propio. Las de color (card-primary/info y el rojo "recomendado") NO se tocan (mayor especificidad / inline rojo intencional). ========================================================================== */ body.theme-dark .card-dark > .card-header, body.theme-light .card-dark > .card-header { background-color: transparent !important; } /* border-0 (en el HTML) quita el borde inferior → lo restauramos para que la cabecera se separe del cuerpo, como en una .card normal. */ body.theme-light .card-dark > .card-header { color: var(--tt-light-text) !important; border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-dark .card-dark > .card-header { border-bottom: 1px solid #313742 !important; } /* Cabeceras con gris oscuro inline (#343a40, p.ej. planes de precios) → claras. */ body.theme-light .card-header[style*="#343a40"] { background-color: #f0f0ee !important; color: var(--tt-light-text) !important; border-bottom-color: var(--tt-light-border) !important; } /* Clase bg-gray-dark de AdminLTE (p.ej. etiqueta "Bitácora" de la timeline). */ body.theme-dark .bg-gray-dark { background-color: #262b34 !important; } body.theme-light .bg-gray-dark { background-color: #e9e9e6 !important; color: #333 !important; } /* =========================================================================== Bitácora de Ruta interactiva (Timeline) — activity.html La card usa .h-100 (iguala la card vecina). La card-body (#timeline-container) hereda flex:1 1 auto de Bootstrap; la limitamos con max-height:100% para que llene la altura de la card sin desbordarla, con el scroll dentro, y el timeline ocupa el 100% de esa altura. Antes tenía max-height:850px fijo → dejaba hueco gris al fondo. Fuente única de esta regla (antes vivía en dashboard.css). =========================================================================== */ #timeline-container { max-height: 100%; } #timeline-container > #timeline-content { min-height: 100%; }