/* ============================================================ TEMA OSCURO — Variables CSS Se aplican cuando tiene clase .theme-dark ============================================================ */ html.theme-dark { --bg-primary: #121517; --bg-secondary: #1a1f24; --bg-card: #1c2127; --bg-navbar: #161a1e; --bg-footer: #0e1114; --text-primary: #e9ecef; --text-secondary: #adb5bd; --border-color: #2c3338; --accent-color: #ff4d5e; --alert-urgente: #ff5a6a; --alert-medio: #ffce3a; --alert-bajo: #37d07c; --shadow-card: 0 2px 10px rgba(0, 0, 0, .45); --link-color: #ff7a85; } html.theme-dark body { background-color: var(--bg-primary); color: var(--text-primary); } /* Ajustes de componentes Bootstrap para modo oscuro */ html.theme-dark .app-navbar { background-color: var(--bg-navbar); border-bottom: 1px solid var(--border-color); } html.theme-dark .app-footer { background-color: var(--bg-footer); border-top: 1px solid var(--border-color); } html.theme-dark .card, html.theme-dark .modal-content, html.theme-dark .dropdown-menu, html.theme-dark .list-group-item { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } html.theme-dark .form-control, html.theme-dark .form-select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { background-color: var(--bg-secondary); color: var(--text-primary); } html.theme-dark .table { --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--border-color); color: var(--text-primary); } html.theme-dark .table > :not(caption) > * > * { color: var(--text-primary); background-color: transparent; } html.theme-dark .text-muted { color: var(--text-secondary) !important; } html.theme-dark .navbar-brand, html.theme-dark .nav-link { color: var(--text-primary); } html.theme-dark .btn-light { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }