/** * Sistema de temas GestorARM - Modo Claro y Modo Oscuro * Uso: data-tema="claro" | "oscuro" en */ /* ========== TRANSICIÓN SUAVE AL CAMBIAR TEMA ========== */ html, body, body * { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; } /* Asegurar transición en componentes clave */ .card, .tema-card, .navbar, .navbar-tema, .modal-content, .modal-header, .modal-footer, .modal-body, .barra-tema-standalone, .tema-jumbotron, .jumbotron, .tema-contenido, [data-tema="oscuro"] .navbar .dropdown-menu { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; } /* ========== MODO CLARO (por defecto) ========== */ :root, [data-tema="claro"] { --bg-color: #f8f9fa; --bg-body: #f8f9fa; --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.125); --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --text-color: #212529; --text-muted: #6c757d; --navbar-bg: #343a40; --navbar-text: #ffffff; --jumbotron-bg: #e9ecef; --jumbotron-text: #212529; --modal-content-bg: #ffffff; --modal-header-bg: #f8f9fa; --modal-border: rgba(0, 0, 0, 0.175); --table-bg: #343a40; --table-text: #ffffff; --table-hover: rgba(255, 255, 255, 0.075); --input-bg: #ffffff; --input-border: #ced4da; --input-text: #212529; --lobby-title: #212529; --lobby-subtitle: #6c757d; --lobby-card-bg: #ffffff; --lobby-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --lobby-card-hover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* ========== MODO OSCURO ========== */ [data-tema="oscuro"] { --bg-color: #0d1117; --bg-body: #0d1117; --card-bg: #161b22; --card-border: #30363d; --card-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); --text-color: #e6edf3; --text-muted: #8b949e; --navbar-bg: #161b22; --navbar-text: #e6edf3; --jumbotron-bg: #161b22; --jumbotron-text: #e6edf3; --modal-content-bg: #161b22; --modal-header-bg: #21262d; --modal-border: #30363d; --table-bg: #21262d; --table-text: #e6edf3; --table-hover: rgba(255, 255, 255, 0.06); --input-bg: #0d1117; --input-border: #30363d; --input-text: #e6edf3; --lobby-title: #e6edf3; --lobby-subtitle: rgba(230, 237, 243, 0.7); --lobby-card-bg: #161b22; --lobby-card-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); --lobby-card-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); } /* ========== APLICACIÓN GLOBAL ========== */ body.tema-aplicado, body { background-color: var(--bg-body) !important; color: var(--text-color); } /* Jumbotron (vistas internas) */ .tema-jumbotron, .jumbotron { background-color: var(--jumbotron-bg) !important; color: var(--jumbotron-text) !important; border-radius: 0.5rem; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } /* Cards genéricas */ .tema-card, .card { background-color: var(--card-bg) !important; color: var(--text-color); border-color: var(--card-border) !important; box-shadow: var(--card-shadow); } .tema-card .card-title, .card-title { color: var(--text-color) !important; } .tema-card .card-text, .card-text { color: var(--text-muted) !important; } /* Modales */ .modal-content { background-color: var(--modal-content-bg) !important; border-color: var(--modal-border) !important; color: var(--text-color); } .modal-header { background-color: var(--modal-header-bg) !important; border-bottom-color: var(--modal-border) !important; color: var(--text-color); } .modal-footer { border-top-color: var(--modal-border) !important; } .modal-body { color: var(--text-color); } /* Tablas DataTables con tema */ .tema-tabla .table, .table.tema-tabla, .table-dark.tema-tabla { background-color: var(--table-bg) !important; color: var(--table-text) !important; } .tema-tabla .table thead th, .table.tema-tabla thead th, .table-dark.tema-tabla thead th { background-color: var(--table-bg) !important; color: var(--table-text) !important; border-color: var(--card-border) !important; } .tema-tabla .table tbody tr:hover, .table.tema-tabla tbody tr:hover, .table-dark.tema-tabla tbody tr:hover { background-color: var(--table-hover) !important; } .tema-tabla .table tbody td, .table.tema-tabla tbody td, .table-dark.tema-tabla tbody td { border-color: var(--card-border) !important; color: var(--table-text) !important; } /* DataTables wrapper */ .dataTables_wrapper { color: var(--text-color); } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: var(--text-color); } .dataTables_wrapper select, .dataTables_wrapper input { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } /* Formularios dentro de modales/contenido */ .tema-aplicado .form-control, [data-tema="oscuro"] .form-control { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } .tema-aplicado .form-control::placeholder { color: var(--text-muted); } /* Navbar */ .navbar-tema { background-color: var(--navbar-bg) !important; } .navbar-tema .navbar-brand, .navbar-tema .nav-link { color: var(--navbar-text) !important; } /* Dropdown del usuario en modo oscuro */ [data-tema="oscuro"] .navbar .dropdown-menu { background-color: var(--card-bg); border-color: var(--card-border); } [data-tema="oscuro"] .navbar .dropdown-item { color: var(--text-color); } [data-tema="oscuro"] .navbar .dropdown-item:hover { background-color: var(--table-hover); color: var(--text-color); } /* Contenedores de página */ .tema-contenido { background-color: var(--bg-color); color: var(--text-color); } .tema-contenido h1, .tema-contenido .display-4, .tema-contenido .display-5 { color: var(--text-color) !important; } .tema-contenido hr { border-color: var(--card-border) !important; } /* ========== LOBBY (index) ========== */ /* Transición explícita y más larga (0.6s) para el lobby */ body.tema-lobby, body.tema-lobby .lobby-container, body.tema-lobby .lobby-title, body.tema-lobby .lobby-subtitle, body.tema-lobby .card-lobby, body.tema-lobby .card-lobby .card-body, body.tema-lobby .card-lobby .card-title, body.tema-lobby .card-lobby .card-text { transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease; } body.tema-lobby { min-height: 100vh; background-color: var(--bg-body) !important; } [data-tema="oscuro"] body.tema-lobby { background-color: #1a1a2e !important; background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); background-repeat: no-repeat; background-size: cover; } .tema-lobby .lobby-title { color: var(--lobby-title) !important; } .tema-lobby .lobby-subtitle { color: var(--lobby-subtitle) !important; } .tema-lobby .card-lobby { background-color: var(--lobby-card-bg) !important; box-shadow: var(--lobby-card-shadow); border: 1px solid var(--card-border); } .tema-lobby .card-lobby:hover { box-shadow: var(--lobby-card-hover-shadow); } .tema-lobby .card-lobby .card-title { color: var(--text-color) !important; } .tema-lobby .card-lobby .card-text { color: var(--text-muted) !important; } /* Botón tema en lobby */ [data-tema="claro"] .tema-lobby #btn-tema-toggle-lobby { border-color: #212529; color: #212529; background: transparent; } [data-tema="claro"] .tema-lobby #btn-tema-toggle-lobby:hover { background: rgba(0,0,0,0.05); color: #212529; } [data-tema="oscuro"] .tema-lobby #btn-tema-toggle-lobby { border-color: rgba(255,255,255,0.5); color: #e6edf3; background: transparent; } [data-tema="oscuro"] .tema-lobby #btn-tema-toggle-lobby:hover { background: rgba(255,255,255,0.1); color: #fff; } /* ========== LOGO - Contraste en modo oscuro ========== */ .logo-gestor-arm { display: inline-block; } [data-tema="oscuro"] .logo-gestor-arm { filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)); } .logo-lobby { max-width: 100%; height: auto; } [data-tema="oscuro"] .logo-lobby { filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15)); } /* ========== LOGO CON FONDO - Para logos con fondo transparente ========== */ .logo-con-fondo, .logo-con-fondo.img-thumbnail, img.logo-con-fondo, img.logo-con-fondo.img-thumbnail { background-color: #f8f9fa !important; /* Fondo claro por defecto */ padding: 0.25rem !important; } [data-tema="claro"] .logo-con-fondo, [data-tema="claro"] .logo-con-fondo.img-thumbnail, [data-tema="claro"] img.logo-con-fondo, [data-tema="claro"] img.logo-con-fondo.img-thumbnail { background-color: #f8f9fa !important; /* Fondo blanco/claro en modo claro */ } [data-tema="oscuro"] .logo-con-fondo, [data-tema="oscuro"] .logo-con-fondo.img-thumbnail, [data-tema="oscuro"] img.logo-con-fondo, [data-tema="oscuro"] img.logo-con-fondo.img-thumbnail { background-color: #161b22 !important; /* Fondo oscuro en modo oscuro */ border-color: #30363d !important; /* Borde oscuro para que combine */ }