/* ============================================================ TEMA CLARO — Variables CSS Se aplican cuando tiene clase .theme-light ============================================================ */ html.theme-light { --bg-primary: #f4f6f9; --bg-secondary: #e9ecef; --bg-card: #ffffff; --bg-navbar: #ffffff; --bg-footer: #f8f9fa; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --accent-color: #dc3545; --alert-urgente: #dc3545; --alert-medio: #ffc107; --alert-bajo: #198754; --shadow-card: 0 2px 8px rgba(0, 0, 0, .08); --link-color: #dc3545; } html.theme-light body { background-color: var(--bg-primary); color: var(--text-primary); } html.theme-light .app-navbar { background-color: var(--bg-navbar); border-bottom: 1px solid var(--border-color); } html.theme-light .app-footer { background-color: var(--bg-footer); border-top: 1px solid var(--border-color); } html.theme-light .card, html.theme-light .card-body { background-color: var(--bg-card); }