/* * ============================================================= * TRACCAR DASHBOARD — SISTEMA DE TEMAS DINAMICO v3 * * MODO OSCURO (Material Design 3 — superficies negras) * Lienzo bg: #000000 | Cards surface: #121212 * Elevation 1: #121212 | Elevation 2: #1E1E1E * Sidebar: #0D0D0D | Inputs: #1C1C1E * Texto Title: #00D2FF (cian neon) * Texto Main: #E8EAED (blanco suave MD) * Acento: #4FC3F7 (azul celeste MD) * * MODO CLARO (paleta estricta y exclusiva — sin excepciones) * #1083D6 Principal -> botones, activos, focus * #212B36 Titulo -> h1-h6, sidebar bg * #637381 Contenido -> texto cuerpo, navbar inactivo * #919EAB Claro -> muted, placeholders * #F4F6F8 Fondo -> general canvas * #FFFFFF Superficies-> cards, sidebar, panels * #E4E7EB Bordes -> inputs, cards border, separadores * #F9FAFB Inputs -> fondo default * * Implementacion: solo se alterna data-theme en . * Ninguna linea de logica JS/Python fue modificada. * ============================================================= */ /* ============================================================ 1. MODO OSCURO — Material Design 3 — Superficies Negras Fondos negros reales, texto electrico neon, acentos celeste MD3 ============================================================ */ :root, [data-theme="dark"] { /* -- Accesibilidad / Tamaño de texto --------------------- */ --font-scale: 1; /* -- Lienzo / Fondos del sitio --- Negro puro MD --------- */ --th-bg: #000000; --th-bg-gradient: linear-gradient(160deg, #000000 0%, #0A0A0A 60%, #000000 100%); /* -- Contenedores (tarjetas, paneles) — Elevacion MD ----- */ --th-card: #121212; /* Surface / Elevation 1 MD */ --th-card-hover: #1E1E1E; /* Elevation 2 MD */ --th-card-deep: #0A0A0A; /* Superficie base */ /* -- Inputs y campos --- Elevation variant MD ------------ */ --th-input: #1C1C1E; /* Surface variant */ --th-input-focus: #242424; /* Elevation 3 MD */ /* -- Sidebar y navegacion --- Negro elevado -------------- */ --th-sidebar: rgba(13, 13, 13, 0.97); --th-sidebar-solid: #0D0D0D; --th-sidebar-border: rgba(79, 195, 247, 0.15); --th-mobile-header: rgba(0, 0, 0, 0.97); --th-overlay: rgba(0, 0, 0, 0.75); /* -- TEXTOS --- Neon electrico + blanco suave MD ---------- */ --th-text-title: #00D2FF; /* Cyan neon — titulos h1-h4 */ --th-text-main: #E8EAED; /* Blanco suave MD — cuerpo */ --th-text-muted: #9AA0A6; /* Gris MD — secundario */ --th-text-data: #BDC1C6; /* Datos y valores MD */ --th-text-inverted: #000000; /* Texto SOBRE botones color */ /* -- Acento y botones --- Azul celeste MD3 --------------- */ --th-accent: #4FC3F7; /* Blue 200 MD — legible en negro */ --th-accent-hover: #81D4FA; /* Blue 100 MD hover */ --th-accent-glow: rgba(79, 195, 247, 0.18); --th-accent-shadow: rgba(79, 195, 247, 0.35); /* -- Bordes --- Lineas sutiles MD divider ---------------- */ --th-border: rgba(255, 255, 255, 0.08); --th-border-input: rgba(255, 255, 255, 0.12); --th-border-focus: rgba(0, 210, 255, 0.60); --th-border-card: rgba(255, 255, 255, 0.06); /* -- Glass / backdrop --- Negro traslucido --------------- */ --th-glass: rgba(18, 18, 18, 0.85); --th-glass-solid: #121212; /* -- Navegacion interna --- Sidebar negro MD ------------- */ --th-nav-link: #E8EAED; --th-nav-link-hover: #00D2FF; --th-nav-active-bg: #4FC3F7; --th-nav-active-txt: #000000; --th-nav-section: #9AA0A6; --th-submenu-bg: rgba(0, 0, 0, 0.55); --th-submenu-border: rgba(79, 195, 247, 0.15); /* -- Toggle de tema ------------------------------------ */ --th-toggle-bg: #1E1E1E; --th-toggle-border: rgba(79, 195, 247, 0.40); --th-toggle-icon: #00D2FF; --th-toggle-knob: #4FC3F7; --th-toggle-track: #000000; /* -- Misc ---------------------------------------------- */ --th-scrollbar: rgba(79, 195, 247, 0.35); --th-code-bg: rgba(30, 30, 30, 0.90); --th-code-txt: #00D2FF; --th-shadow-card: 0 2px 8px rgba(0,0,0,0.80), 0 8px 32px rgba(0,0,0,0.60); --th-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.90), 0 12px 40px rgba(79,195,247,0.08); --th-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.90); /* -- Alertas (sobre superficie negra de tarjeta) ------- */ --th-alert-danger-bg: rgba(239, 83, 80, 0.12); --th-alert-danger-brd: rgba(239, 83, 80, 0.32); --th-alert-danger-txt: #FF5252; --th-alert-success-bg: rgba(0, 200, 83, 0.10); --th-alert-success-brd: rgba(0, 200, 83, 0.28); --th-alert-success-txt: #00E676; --th-alert-warning-bg: rgba(255, 196, 0, 0.10); --th-alert-warning-brd: rgba(255, 196, 0, 0.28); --th-alert-warning-txt: #FFD740; --th-alert-info-bg: rgba(79, 195, 247, 0.10); --th-alert-info-brd: rgba(79, 195, 247, 0.28); --th-alert-info-txt: #4FC3F7; } /* ============================================================ 2. MODO CLARO — Paleta estricta y exclusiva ────────────────────────────────────────────────────────── MAPA DE COMPONENTES (asignación oficial): ┌──────────────────────────────────────────────────────┐ │ Fondo general (Canvas) → #F4F6F8 │ │ Cards, Sidebar, Paneles, Modales → #FFFFFF │ │ Títulos y Encabezados (h1-h6) → #212B36 │ │ Texto de contenido y cuerpo → #637381 │ │ Texto secundario / placeholders → #919EAB │ │ Bordes, separadores, input border → #E4E7EB │ │ Fondos de inputs / selección → #F9FAFB │ │ Énfasis Principal (activos, focus) → #1083D6 │ │ Éxito (On/Online) → #00C853 │ │ Advertencia (Off/Offline/Alertas) → #FF9100 │ └──────────────────────────────────────────────────────┘ ============================================================ */ [data-theme="light"] { /* ── Lienzo del sitio (#FFFFFF — Fondo) ───────────────── */ --th-bg: #FFFFFF; --th-bg-gradient: linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 100%); /* ── Tarjetas / contenedores (#FFFFFF — Fondo) ────────── */ --th-card: #FFFFFF; --th-card-hover: #FFFFFF; --th-card-deep: #CAF0F8; /* Un toque de azul hielo para headers */ /* ── Inputs (#FFFFFF bg, #90E0EF border) ─────────────── */ --th-input: #FFFFFF; --th-input-focus: #FFFFFF; /* ── Sidebar (#FFFFFF — superficie) ─────── */ --th-sidebar: #FFFFFF; --th-sidebar-solid: #FFFFFF; --th-sidebar-border: #90E0EF; --th-mobile-header: #FFFFFF; --th-overlay: rgba(3, 4, 94, 0.40); /* ── Textos ──────────────────────────────────────────── */ --th-text-title: #03045E; /* Título — h1–h6, nombres */ --th-text-main: #03045E; /* Contenido — texto cuerpo */ --th-text-muted: #0077B6; /* Claro — secundario */ --th-text-data: #03045E; /* Contenido — datos/coords */ --th-text-inverted: #FFFFFF; /* Fondo — sobre botones de color (blanco) */ /* ── Acento / Principal (#0077B6) ────────────────────── */ --th-accent: #0077B6; --th-accent-hover: #00B4D8; --th-accent-glow: rgba(0, 119, 182, 0.08); --th-accent-shadow: rgba(3, 4, 94, 0.24); /* ── Bordes — todos desde #90E0EF ────────────────────── */ --th-border: #90E0EF; /* separadores generales */ --th-border-input: #90E0EF; /* input default */ --th-border-focus: #0077B6; /* input focus = Principal */ --th-border-card: #90E0EF; /* ── Glass (#FFFFFF traslúcido) ──────────────────────── */ --th-glass: rgba(255, 255, 255, 0.94); --th-glass-solid: #FFFFFF; /* ── Navegación (sidebar clara #FFFFFF) ──────────────── */ --th-nav-link: #03045E; /* Contenido — texto default nav */ --th-nav-link-hover: #0077B6; /* Título — hover nav */ --th-nav-active-bg: #0077B6; /* Principal — fondo activo */ --th-nav-active-txt: #FFFFFF; /* Texto activo blanco */ --th-nav-section: #03045E; /* Claro — sección header */ --th-submenu-bg: #FFFFFF; --th-submenu-border: #90E0EF; /* ── Toggle de tema (dentro de sidebar clara) ─────────── */ --th-toggle-bg: #90E0EF; --th-toggle-border: #90E0EF; --th-toggle-icon: #0077B6; --th-toggle-knob: #FFFFFF; --th-toggle-track: #0077B6; /* ── Misc ────────────────────────────────────────────── */ --th-scrollbar: #90E0EF; --th-code-bg: rgba(144, 224, 239, 0.20); --th-code-txt: #03045E; /* Sombras — #03045E muy diluido */ --th-shadow-card: 0 2px 8px rgba(3, 4, 94, 0.05), 0 8px 24px rgba(3, 4, 94, 0.04); --th-shadow-card-hover: 0 4px 16px rgba(3, 4, 94, 0.08), 0 12px 36px rgba(0, 119, 182, 0.06); --th-shadow-modal: 0 24px 64px rgba(3, 4, 94, 0.12); /* ── Alertas ─────────────────────────────────────────── */ /* Danger */ --th-alert-danger-bg: #FFEBEE; --th-alert-danger-brd: #FFCDD2; --th-alert-danger-txt: #C62828; /* Success */ --th-alert-success-bg: #E8F5E9; --th-alert-success-brd: #A5D6A7; --th-alert-success-txt: #2E7D32; /* Warning */ --th-alert-warning-bg: #FFF3E0; --th-alert-warning-brd: #FFE0B2; --th-alert-warning-txt: #E65100; /* Info */ --th-alert-info-bg: #E1F5FE; --th-alert-info-brd: #B3E5FC; --th-alert-info-txt: #0288D1; } /* ============================================================ 3. APLICACIÓN DE VARIABLES AL DISEÑO GLOBAL Solo propiedades visuales — lógica intacta. ============================================================ */ /* ── Html & Escala de fuente para accesibilidad ────────────── */ html { font-size: calc(16px * var(--font-scale, 1)); transition: font-size 0.25s ease; } /* Redefinición de tamaños absolutos a relativos (rem) para escalado dinámico en todo el sistema */ body, p, label, input, select, textarea, .form-control, .form-select, .btn, .dropdown-item, .list-group-item, .modal-content { font-size: 1rem !important; } h1, .h1 { font-size: 2.25rem !important; } h2, .h2 { font-size: 1.875rem !important; } h3, .h3 { font-size: 1.5rem !important; } h4, .h4 { font-size: 1.25rem !important; } h5, .h5 { font-size: 1.125rem !important; } h6, .h6 { font-size: 1rem !important; } small, .small, .text-muted, .remember-label, .theme-toggle-btn, .theme-toggle-label { font-size: 0.85rem !important; } .table, .table td, .table th { font-size: 0.95rem !important; } .nav-link, .nav-sublink, .nav-link-parent { font-size: 1rem !important; } .nav-section-header { font-size: 0.75rem !important; } .badge { font-size: 0.85rem !important; } /* Bloquear escala en el widget de accesibilidad para prevenir desbordamientos en la barra lateral */ .font-size-btn-group { font-size: 12px !important; justify-content: space-between !important; } .font-size-icon { font-size: 14px !important; } .font-size-btn { font-size: 11px !important; } /* ── Body & Lienzo principal ────────────────────────────────── */ body { background: var(--th-bg-gradient) !important; color: var(--th-text-main) !important; transition: background 0.40s ease, color 0.30s ease; } /* ── Sidebar ────────────────────────────────────────────────── */ .sidebar { background: var(--th-sidebar) !important; border-right: 1px solid var(--th-sidebar-border) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; } .sidebar-header { border-bottom-color: var(--th-sidebar-border) !important; } .sidebar-logo { color: var(--th-text-title) !important; } /* Separador inferior de sidebar */ .sidebar > nav > div[style*="border-top"] { border-top-color: var(--th-border) !important; } /* ── Nav Links ──────────────────────────────────────────────── */ .nav-link { color: var(--th-nav-link) !important; } .nav-link:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } .nav-link.active { background: var(--th-nav-active-bg) !important; color: var(--th-nav-active-txt) !important; box-shadow: 0 4px 18px var(--th-accent-shadow) !important; } .nav-link-parent { color: var(--th-nav-link) !important; background: transparent !important; } .nav-link-parent:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } .nav-item-group.open > .nav-link-parent { background: var(--th-accent-glow) !important; color: var(--th-text-title) !important; } .nav-section-header { color: var(--th-nav-section) !important; opacity: 0.80; } /* ── Submenus ────────────────────────────────────────────────── */ .nav-submenu { background: var(--th-submenu-bg) !important; border-left-color: var(--th-submenu-border) !important; } .nav-sublink { color: var(--th-nav-link) !important; } .nav-sublink:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } .nav-sublink.active { background: rgba(79, 195, 247, 0.18) !important; color: var(--th-text-title) !important; } .nav-sublink i { color: var(--th-text-muted) !important; } .nav-sublink:hover i, .nav-sublink.active i { color: var(--th-text-title) !important; } .submenu-caret { color: var(--th-text-muted) !important; } .nav-item-group.open .submenu-caret { color: var(--th-text-title) !important; } /* ── Mobile Header ───────────────────────────────────────────── */ .mobile-header { background: var(--th-mobile-header) !important; border-bottom-color: var(--th-sidebar-border) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .toggle-sidebar { color: var(--th-text-title) !important; } /* ── Overlay ─────────────────────────────────────────────────── */ .overlay { background: var(--th-overlay) !important; } /* ── Glass Cards ─────────────────────────────────────────────── */ .glass-card { background: var(--th-glass) !important; border: 1px solid var(--th-border-card) !important; box-shadow: var(--th-shadow-card) !important; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .glass-card:hover { box-shadow: var(--th-shadow-card-hover) !important; border-color: var(--th-accent-glow) !important; } /* ── Code blocks ─────────────────────────────────────────────── */ code { color: var(--th-code-txt) !important; background-color: var(--th-code-bg) !important; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn-primary { background: linear-gradient(135deg, var(--th-accent) 0%, var(--th-accent-hover) 100%) !important; border: none !important; color: var(--th-text-inverted) !important; box-shadow: 0 4px 16px var(--th-accent-shadow) !important; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--th-accent-shadow) !important; filter: brightness(1.1); } .btn-primary:active { transform: translateY(0); filter: brightness(0.95); } .btn-secondary { background: var(--th-card-hover) !important; border: 1px solid var(--th-border) !important; color: var(--th-text-main) !important; } .btn-secondary:hover { background: var(--th-card) !important; border-color: var(--th-accent) !important; color: var(--th-text-title) !important; } .btn-outline-primary { color: var(--th-accent) !important; border-color: var(--th-accent) !important; background-color: transparent !important; } .btn-outline-primary:hover { background-color: var(--th-accent) !important; color: var(--th-text-inverted) !important; box-shadow: 0 4px 14px var(--th-accent-shadow) !important; } .btn-outline-info { color: #00D2FF !important; border-color: #00D2FF !important; background-color: transparent !important; } .btn-outline-info:hover { background-color: rgba(0, 210, 255, 0.15) !important; color: #00D2FF !important; } .btn-outline-warning { color: var(--th-alert-warning-txt) !important; border-color: var(--th-alert-warning-txt) !important; background-color: transparent !important; } .btn-outline-warning:hover { background-color: var(--th-alert-warning-bg) !important; color: var(--th-alert-warning-txt) !important; } .btn-outline-success { color: var(--th-alert-success-txt) !important; border-color: var(--th-alert-success-txt) !important; background-color: transparent !important; } .btn-outline-success:hover { background-color: var(--th-alert-success-bg) !important; } .btn-outline-danger { color: var(--th-alert-danger-txt) !important; border-color: var(--th-alert-danger-txt) !important; background-color: transparent !important; } .btn-outline-danger:hover { background-color: var(--th-alert-danger-bg) !important; } /* ── Inputs & Forms ──────────────────────────────────────────── */ input, select, textarea, .form-control, .form-select { background: var(--th-input) !important; border-color: var(--th-border-input) !important; color: var(--th-text-main) !important; } input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--th-text-muted) !important; opacity: 0.75; } input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus { background: var(--th-input-focus) !important; border-color: var(--th-border-focus) !important; box-shadow: 0 0 0 3px var(--th-accent-glow) !important; color: var(--th-text-title) !important; outline: none !important; } select option { background: var(--th-card) !important; color: var(--th-text-main) !important; } /* ── Bootstrap Cards ─────────────────────────────────────────── */ .card { background: var(--th-card) !important; border-color: var(--th-border-card) !important; color: var(--th-text-main) !important; box-shadow: var(--th-shadow-card) !important; } .card-header { background: var(--th-card-deep) !important; border-bottom-color: var(--th-border) !important; color: var(--th-text-title) !important; } .card-footer { background: var(--th-card-deep) !important; border-top-color: var(--th-border) !important; color: var(--th-text-muted) !important; } .card-title { color: var(--th-text-title) !important; } .card-text { color: var(--th-text-main) !important; } /* ── Tables ──────────────────────────────────────────────────── */ .table { color: var(--th-text-main) !important; --bs-table-bg: transparent; --bs-table-striped-bg: transparent; } .table thead th { background: var(--th-card-deep) !important; color: var(--th-text-title) !important; border-color: var(--th-border) !important; font-weight: 600; } .table tbody tr { background: var(--th-card) !important; } .table tbody tr:hover { background: rgba(79, 195, 247, 0.08) !important; } .table td, .table th { border-color: var(--th-border) !important; color: var(--th-text-data) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(79, 195, 247, 0.04) !important; --bs-table-accent-bg: transparent; color: var(--th-text-main) !important; } /* ── Modals ──────────────────────────────────────────────────── */ .modal-content { background: var(--th-card) !important; border-color: var(--th-border-card) !important; color: var(--th-text-main) !important; box-shadow: var(--th-shadow-modal) !important; } .modal-header { background: var(--th-card-deep) !important; border-bottom-color: var(--th-border) !important; color: var(--th-text-title) !important; } .modal-header .btn-close { filter: invert(0.7) sepia(1) saturate(3) hue-rotate(200deg); } .modal-footer { background: var(--th-card-deep) !important; border-top-color: var(--th-border) !important; } .modal-backdrop.show { background-color: var(--th-overlay) !important; } /* ── Dropdowns ───────────────────────────────────────────────── */ .dropdown-menu { background: var(--th-card) !important; border-color: var(--th-border-card) !important; box-shadow: var(--th-shadow-card) !important; } .dropdown-item { color: var(--th-text-main) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--th-accent-glow) !important; color: var(--th-text-title) !important; } .dropdown-divider { border-top-color: var(--th-border) !important; } /* ── Alerts ──────────────────────────────────────────────────── */ /* NOTA: Se renderizan sobre fondos de tarjeta oscura en ambos modos */ .alert-danger, .alert-error { background: var(--th-alert-danger-bg) !important; border-color: var(--th-alert-danger-brd) !important; color: var(--th-alert-danger-txt) !important; } .alert-success { background: var(--th-alert-success-bg) !important; border-color: var(--th-alert-success-brd) !important; color: var(--th-alert-success-txt) !important; } .alert-warning { background: var(--th-alert-warning-bg) !important; border-color: var(--th-alert-warning-brd) !important; color: var(--th-alert-warning-txt) !important; } .alert-info { background: var(--th-alert-info-bg) !important; border-color: var(--th-alert-info-brd) !important; color: var(--th-alert-info-txt) !important; } /* ── Badges ──────────────────────────────────────────────────── */ .badge.bg-primary { background: var(--th-accent) !important; color: var(--th-text-inverted) !important; } .badge.bg-secondary { background: var(--th-card-hover) !important; color: var(--th-text-main) !important; } .badge.bg-success { background: var(--th-alert-success-bg) !important; color: var(--th-alert-success-txt) !important; border: 1px solid var(--th-alert-success-brd); } .badge.bg-danger { background: var(--th-alert-danger-bg) !important; color: var(--th-alert-danger-txt) !important; border: 1px solid var(--th-alert-danger-brd); } .badge.bg-warning { background: var(--th-alert-warning-bg) !important; color: var(--th-alert-warning-txt) !important; border: 1px solid var(--th-alert-warning-brd); } .badge.bg-info { background: rgba(0,210,255,0.12) !important; color: #00D2FF !important; border: 1px solid rgba(0,210,255,0.30); } /* ── Pagination ──────────────────────────────────────────────── */ .page-item .page-link { background: var(--th-input) !important; border-color: var(--th-border) !important; color: var(--th-text-muted) !important; } .page-item.active .page-link { background: var(--th-accent) !important; border-color: var(--th-accent) !important; color: var(--th-text-inverted) !important; } .page-item.disabled .page-link { background: var(--th-card) !important; color: var(--th-text-muted) !important; opacity: 0.45; } /* ── Scrollbar (webkit) ──────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--th-scrollbar); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--th-accent); } /* ── Mobile Filter Toggle ────────────────────────────────────── */ /* Siempre oscuro (botón es un contenedor-tarjeta) */ .mobile-filter-toggle { background: rgba(79, 195, 247, 0.12) !important; border-color: rgba(79, 195, 247, 0.32) !important; color: var(--th-text-title) !important; } .mobile-filter-toggle:hover { background: rgba(79, 195, 247, 0.22) !important; } /* ── Tipografía global ───────────────────────────────────────── */ /* REGLA: cero textos claros (blancos/grises) en ningún modo */ h1, h2, h3, h4, h5, h6 { color: var(--th-text-title) !important; } p { color: var(--th-text-main); } small, .small { color: var(--th-text-muted) !important; } strong, b { color: var(--th-text-title); } label { color: var(--th-text-main); } .text-muted { color: var(--th-text-muted) !important; } .text-custom-light { color: var(--th-text-main) !important; } .text-white { color: var(--th-text-title) !important; } /* Reemplaza texto blanco */ .text-light { color: var(--th-text-main) !important; } /* Reemplaza texto light */ /* ── Íconos de FontAwesome ───────────────────────────────────── */ /* Los iconos heredan color del padre; los específicos de info se fuerzan */ .text-primary { color: var(--th-accent) !important; } .text-info { color: #00D2FF !important; } .text-success { color: var(--th-alert-success-txt) !important; } .text-warning { color: var(--th-alert-warning-txt) !important; } .text-danger { color: var(--th-alert-danger-txt) !important; } /* ── Listgroups ──────────────────────────────────────────────── */ .list-group-item { background: var(--th-card) !important; border-color: var(--th-border) !important; color: var(--th-text-main) !important; } .list-group-item:hover { background: var(--th-card-hover) !important; color: var(--th-text-title) !important; } .list-group-item.active { background: var(--th-accent) !important; color: var(--th-text-inverted) !important; } /* ── Progress Bars ───────────────────────────────────────────── */ .progress { background: var(--th-input) !important; border-radius: 99px; } .progress-bar { background: linear-gradient(90deg, var(--th-accent) 0%, #00D2FF 100%) !important; } /* ── Tooltips ────────────────────────────────────────────────── */ .tooltip .tooltip-inner { background: var(--th-card-deep) !important; color: var(--th-text-title) !important; border: 1px solid var(--th-border) !important; } /* ── Theme Toggle Widget ─────────────────────────────────────── */ .theme-toggle-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px 8px 12px; padding: 10px 14px; background: var(--th-toggle-bg); border: 1px solid var(--th-toggle-border); border-radius: 12px; cursor: pointer; color: var(--th-nav-link); font-size: 0.85rem; font-weight: 500; font-family: 'Inter', sans-serif; letter-spacing: 0.03em; user-select: none; } .theme-toggle-btn:hover { background: rgba(79, 195, 247, 0.14); border-color: var(--th-accent); color: var(--th-nav-link-hover); } /* Pill track */ .theme-toggle-track { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--th-toggle-track); border: 1px solid var(--th-toggle-border); flex-shrink: 0; margin-left: auto; } .theme-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--th-toggle-knob); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.40); } /* Modo oscuro → knob a la derecha */ [data-theme="dark"] .theme-toggle-track::after, :root:not([data-theme="light"]) .theme-toggle-track::after { transform: translateX(16px); } /* Modo claro → knob a la izquierda */ [data-theme="light"] .theme-toggle-track::after { transform: translateX(0px); } .theme-toggle-icon { font-size: 1rem; color: var(--th-toggle-icon); width: 20px; text-align: center; } /* Toggle colapsado */ .sidebar.collapsed .theme-toggle-label, .sidebar.collapsed .theme-toggle-track { display: none; } .sidebar.collapsed .theme-toggle-btn { justify-content: center; width: 46px; margin: 0 auto 8px auto; padding: 10px; } /* ══════════════════════════════════════════════════════════ MODO CLARO — Reglas de aplicación por componente Solo colores de la paleta de 5. Sin excepciones. ══════════════════════════════════════════════════════════ */ /* ── Sidebar: var(--th-sidebar) + borde var(--th-sidebar-border) ──────────────────────── */ [data-theme="light"] .sidebar { background: var(--th-sidebar) !important; border-right: 1px solid var(--th-sidebar-border) !important; box-shadow: 2px 0 12px rgba(3, 4, 94, 0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .sidebar-header { border-bottom: 1px solid var(--th-sidebar-border) !important; background: var(--th-sidebar) !important; } [data-theme="light"] .sidebar-logo { color: var(--th-text-title) !important; } /* ── Mobile Header: var(--th-mobile-header) ─────────────────────────────────── */ [data-theme="light"] .mobile-header { background: var(--th-mobile-header) !important; border-bottom: 1px solid var(--th-sidebar-border) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } [data-theme="light"] .toggle-sidebar { color: var(--th-text-title) !important; } /* ── Nav links sobre sidebar clara ──────────────────────────── */ [data-theme="light"] .nav-link { color: var(--th-nav-link) !important; } [data-theme="light"] .nav-link:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } [data-theme="light"] .nav-link.active { background: var(--th-nav-active-bg) !important; color: var(--th-nav-active-txt) !important; box-shadow: 0 4px 12px var(--th-accent-shadow) !important; } [data-theme="light"] .nav-link-parent { color: var(--th-nav-link) !important; } [data-theme="light"] .nav-link-parent:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } [data-theme="light"] .nav-item-group.open > .nav-link-parent { background: var(--th-accent-glow) !important; color: var(--th-accent) !important; } [data-theme="light"] .nav-section-header { color: var(--th-nav-section) !important; } /* ── Submenú ────────────────────────────────────────────────── */ [data-theme="light"] .nav-submenu { background: var(--th-submenu-bg) !important; border-left: 2px solid var(--th-submenu-border) !important; } [data-theme="light"] .nav-sublink { color: var(--th-nav-link) !important; } [data-theme="light"] .nav-sublink:hover { background: var(--th-accent-glow) !important; color: var(--th-nav-link-hover) !important; } [data-theme="light"] .nav-sublink.active { background: var(--th-accent-glow) !important; color: var(--th-accent) !important; } [data-theme="light"] .nav-sublink i { color: var(--th-text-muted) !important; } [data-theme="light"] .nav-sublink:hover i, [data-theme="light"] .nav-sublink.active i { color: var(--th-accent) !important; } [data-theme="light"] .submenu-caret { color: var(--th-text-muted) !important; } [data-theme="light"] .nav-item-group.open .submenu-caret { color: var(--th-accent) !important; } /* ── Inputs: var(--th-input) bg, var(--th-border-input) border, focus → var(--th-border-focus) ────── */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .form-control, [data-theme="light"] .form-select { background: var(--th-input) !important; border-color: var(--th-border-input) !important; color: var(--th-text-title) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder, [data-theme="light"] .form-control::placeholder { color: var(--th-text-muted) !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus, [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background: var(--th-input-focus) !important; border-color: var(--th-border-focus) !important; box-shadow: 0 0 0 3px var(--th-accent-glow) !important; color: var(--th-text-title) !important; } [data-theme="light"] select option { background: var(--th-card) !important; color: var(--th-text-main) !important; } /* ── Botón primario: var(--th-accent) ─────────────────────── */ [data-theme="light"] .btn-primary { background: var(--th-accent) !important; border-color: var(--th-accent) !important; color: var(--th-text-inverted) !important; box-shadow: 0 4px 12px var(--th-accent-shadow) !important; } [data-theme="light"] .btn-primary:hover { background: var(--th-accent-hover) !important; border-color: var(--th-accent-hover) !important; } /* Botón secundario: bg rgba + text */ [data-theme="light"] .btn-secondary { background: var(--th-card-hover) !important; border-color: var(--th-border) !important; color: var(--th-text-title) !important; } [data-theme="light"] .btn-secondary:hover { background: var(--th-card-hover) !important; color: var(--th-text-title) !important; } [data-theme="light"] .btn-outline-primary { color: var(--th-accent) !important; border-color: var(--th-accent) !important; background: transparent !important; } [data-theme="light"] .btn-outline-primary:hover { background: var(--th-accent) !important; color: var(--th-text-inverted) !important; } /* ── Cards: var(--th-card) + borde var(--th-border-card) ────────────────────────── */ [data-theme="light"] .card { background: var(--th-card) !important; border-color: var(--th-border-card) !important; } [data-theme="light"] .card-header { background: var(--th-card-deep) !important; border-bottom-color: var(--th-border) !important; color: var(--th-text-title) !important; } [data-theme="light"] .card-footer { background: var(--th-card-deep) !important; border-top-color: var(--th-border) !important; color: var(--th-text-muted) !important; } /* ── Tablas ──────────────────────────────────────────────────── */ [data-theme="light"] .table thead th { background: var(--th-card-deep) !important; color: var(--th-text-title) !important; border-color: var(--th-border) !important; } [data-theme="light"] .table tbody tr { background: var(--th-card) !important; } [data-theme="light"] .table td, [data-theme="light"] .table th { color: var(--th-text-main) !important; border-color: var(--th-border) !important; } [data-theme="light"] .table tbody tr:hover { background: var(--th-card-hover) !important; } /* ── Popups / Modales: var(--th-card) + borde var(--th-border-card) ──────────────── */ [data-theme="light"] .modal-content { background: var(--th-card) !important; border-color: var(--th-border-card) !important; } [data-theme="light"] .modal-header { background: var(--th-card-deep) !important; border-bottom-color: var(--th-border) !important; color: var(--th-text-title) !important; } [data-theme="light"] .modal-footer { background: var(--th-card-deep) !important; border-top-color: var(--th-border) !important; } [data-theme="light"] .modal-header .btn-close { filter: none; } /* ── Dropdowns ──────────────────────────────────────────────── */ [data-theme="light"] .dropdown-menu { background: var(--th-card) !important; border-color: var(--th-border-card) !important; box-shadow: 0 8px 24px var(--th-accent-shadow) !important; } [data-theme="light"] .dropdown-item { color: var(--th-text-main) !important; } [data-theme="light"] .dropdown-item:hover, [data-theme="light"] .dropdown-item:focus { background: var(--th-accent-glow) !important; color: var(--th-text-title) !important; } [data-theme="light"] .dropdown-divider { border-top-color: var(--th-border) !important; } /* ── Toggle: sobre sidebar clara ────────────────────────────── */ [data-theme="light"] .theme-toggle-btn { background: var(--th-toggle-bg); border-color: var(--th-toggle-border); color: var(--th-nav-link); } [data-theme="light"] .theme-toggle-btn:hover { background: var(--th-accent-glow); border-color: var(--th-accent); color: var(--th-nav-link-hover); } [data-theme="light"] .theme-toggle-track { background: var(--th-toggle-track); border-color: var(--th-toggle-border); } /* ── Tipografía global en modo claro ────────────────────────── */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--th-text-title) !important; } [data-theme="light"] p { color: var(--th-text-main); } [data-theme="light"] .text-muted, [data-theme="light"] small, [data-theme="light"] .small { color: var(--th-text-muted) !important; } [data-theme="light"] .text-white, [data-theme="light"] .text-light { color: var(--th-text-title) !important; } [data-theme="light"] .text-primary { color: var(--th-accent) !important; } [data-theme="light"] strong, [data-theme="light"] b { color: var(--th-text-title); } [data-theme="light"] label { color: var(--th-text-main); } [data-theme="light"] .main-content { background: transparent; } /* ── Transiciones suaves globales ────────────────────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.30s; transition-timing-function: ease; } /* Elementos con animaciones propias: duración mínima */ .bg-glow-orb, input, select, textarea, button, .sidebar, .mobile-header, .overlay, [class*="animate"], [class*="transition"] { transition-duration: 0.25s; } /* ══════════════════════════════════════════════════════════ ESTILOS DE FORMAS Y BORDES (MATERIAL DESIGN 3) ══════════════════════════════════════════════════════════ */ .card, .glass-card, .dash-card, .finance-card, .mobile-card { border-radius: 16px !important; } .card-header, .table thead th:first-child { border-top-left-radius: 16px !important; } .card-header, .table thead th:last-child { border-top-right-radius: 16px !important; } .card-footer { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } .btn, .theme-toggle-btn, .action-btn, .whatsapp-btn, .btn-sheet-option, .btn-sheet-cancel, .btn-quick-filter { border-radius: 20px !important; /* Estilo pill de Material Design */ } input, select, textarea, .form-control, .form-select { border-radius: 12px !important; } .modal-content, .mobile-sheet-content { border-radius: 24px !important; } .badge { border-radius: 8px !important; padding: 6px 10px !important; font-weight: 600 !important; } .badge-status, .status-paid, .status-pending, .status-banned, .status-overdue-urgent, .status-arrears { border-radius: 20px !important; /* Pill status badges */ }