/* * Tema oscuro global para la app. * Se activa con . * * Estrategia: overrides genéricos sobre Bootstrap 5 + clases comunes * (.card, .table, body, etc.) para no tener que reescribir el CSS de * cada módulo. Para casos puntuales donde quede mal, refinar aquí. */ :root { --app-bg: #f3f4f6; --app-surface: #ffffff; --app-surface-2: #f9fafb; --app-text: #111827; --app-text-muted: #6b7280; --app-border: #e5e7eb; --app-input-bg: #ffffff; --app-input-border: #d1d5db; --app-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --app-link: #2563eb; } html[data-theme="dark"] { --app-bg: #0f172a; --app-surface: #1e293b; --app-surface-2: #111827; --app-text: #e5e7eb; --app-text-muted: #94a3b8; --app-border: #334155; --app-input-bg: #1e293b; --app-input-border: #475569; --app-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); --app-link: #60a5fa; color-scheme: dark; } /* ===== Modo oscuro: overrides ===== */ html[data-theme="dark"] body { background-color: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme="dark"] .container, html[data-theme="dark"] .container-fluid, html[data-theme="dark"] main { color: var(--app-text); } /* Cards y superficies */ html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button, html[data-theme="dark"] .toast, html[data-theme="dark"] .offcanvas { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } /* Backgrounds claros de Bootstrap */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-body, html[data-theme="dark"] .bg-body-tertiary, html[data-theme="dark"] .bg-body-secondary { background-color: var(--app-surface) !important; color: var(--app-text) !important; } /* Texto */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black { color: var(--app-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--app-text-muted) !important; } /* Tablas */ html[data-theme="dark"] .table { --bs-table-bg: var(--app-surface); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-striped-color: var(--app-text); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--app-text); color: var(--app-text); border-color: var(--app-border); } html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table tbody td, html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: var(--app-border) !important; color: var(--app-text); } html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; } /* Formularios */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"] { background-color: var(--app-input-bg) !important; color: var(--app-text) !important; border-color: var(--app-input-border) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--app-text-muted) !important; opacity: 0.7; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] input:focus { background-color: var(--app-input-bg) !important; color: var(--app-text) !important; border-color: #6366f1 !important; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important; } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled, html[data-theme="dark"] input:disabled, html[data-theme="dark"] textarea:disabled { background-color: #0f172a !important; color: var(--app-text-muted) !important; } html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color: var(--app-text); } html[data-theme="dark"] .form-text { color: var(--app-text-muted); } html[data-theme="dark"] .form-check-input { background-color: var(--app-input-bg); border-color: var(--app-input-border); } html[data-theme="dark"] .form-check-input:checked { background-color: #6366f1; border-color: #6366f1; } /* Input groups */ html[data-theme="dark"] .input-group-text { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; border-color: var(--app-input-border) !important; } /* Botones outline */ html[data-theme="dark"] .btn-outline-secondary { color: var(--app-text); border-color: var(--app-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--app-surface-2); color: var(--app-text); border-color: var(--app-border); } html[data-theme="dark"] .btn-light { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Bordes */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--app-border) !important; } html[data-theme="dark"] hr { border-color: var(--app-border); color: var(--app-border); opacity: 0.5; } /* Nav */ html[data-theme="dark"] .nav-link { color: var(--app-text); } html[data-theme="dark"] .nav-link:hover { color: var(--app-link); } html[data-theme="dark"] .nav-tabs { border-color: var(--app-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--app-text-muted); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border) var(--app-border) var(--app-surface); } html[data-theme="dark"] .navbar.bg-light, html[data-theme="dark"] .navbar.bg-white { background-color: var(--app-surface) !important; } html[data-theme="dark"] .navbar-light .navbar-brand, html[data-theme="dark"] .navbar-light .nav-link { color: var(--app-text) !important; } /* Breadcrumb */ html[data-theme="dark"] .breadcrumb { background-color: transparent; } html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item a { color: var(--app-text); } html[data-theme="dark"] .breadcrumb-item.active { color: var(--app-text-muted); } /* Pagination */ html[data-theme="dark"] .page-link { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--app-surface-2); color: var(--app-text-muted); border-color: var(--app-border); } /* Alerts: leves ajustes para no quemar la vista */ html[data-theme="dark"] .alert { border-color: var(--app-border); } /* Badges: dejar tal cual (Bootstrap usa colores intensos que funcionan en ambos) */ /* Backgrounds inline en hijos: limitar ámbito a contenido en .card */ html[data-theme="dark"] .card [style*="background:#fff"], html[data-theme="dark"] .card [style*="background-color:#fff"], html[data-theme="dark"] .card [style*="background: #fff"], html[data-theme="dark"] .card [style*="background-color: #fff"] { background-color: var(--app-surface) !important; color: var(--app-text) !important; } /* Botón flotante de cambio de tema */ .theme-toggle-btn { background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.12); color: inherit; border-radius: 10px; padding: 0.4rem 0.65rem; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } /* Variante flotante (inyectada en todas las páginas) */ .theme-toggle-floating { position: fixed; top: 12px; right: 12px; z-index: 9999; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .theme-toggle-floating { background: rgba(30, 41, 59, 0.85); color: #fff; } @media print { .theme-toggle-floating { display: none !important; } } .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.12); transform: translateY(-1px); } html[data-theme="dark"] .theme-toggle-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; } html[data-theme="dark"] .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.16); } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: inline; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } /* Imágenes: pequeño atenuado en dark para que no deslumbren logos blancos */ html[data-theme="dark"] img.theme-dim { filter: brightness(0.92); }