/* ============================================================ MODO OSCURO — Florecer Juntos Se activa con data-bs-theme="dark" en el ============================================================ */ :root { --transition-speed: 0.3s; } /* Transición suave entre temas */ body, .card, .navbar, .offcanvas-sidebar, .form-control, .form-select, .btn, .alert, .badge, .modal-content, .list-group-item, .table { transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease; } /* ============================================================ TEMA OSCURO (cuando el SO lo prefiere o el toggle está activo) ============================================================ */ [data-bs-theme="dark"] { color-scheme: dark; } [data-bs-theme="dark"] body { background-color: #1a1a2e; color: #e0e0e0; } /* Navbar */ [data-bs-theme="dark"] .navbar { background-color: #16213e !important; border-bottom: 1px solid #0f3460; } /* Cards */ [data-bs-theme="dark"] .card { background-color: #16213e; border-color: #0f3460; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1a1a2e; border-color: #0f3460; color: #e0e0e0; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #1a1a2e; border-color: #198754; color: #fff; } [data-bs-theme="dark"] .form-control::placeholder { color: #6c757d; } /* Modals */ [data-bs-theme="dark"] .modal-content { background-color: #16213e; border-color: #0f3460; } /* Tables */ [data-bs-theme="dark"] .table { color: #e0e0e0; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } /* List groups */ [data-bs-theme="dark"] .list-group-item { background-color: #16213e; border-color: #0f3460; color: #e0e0e0; } /* Alerts */ [data-bs-theme="dark"] .alert-warning { background-color: #332701; border-color: #664d03; color: #ffda6a; } [data-bs-theme="dark"] .alert-info { background-color: #031633; border-color: #084298; color: #6ea8fe; } /* Footer */ [data-bs-theme="dark"] footer { color: #6c757d; border-top: 1px solid #0f3460; } /* Links */ [data-bs-theme="dark"] a { color: #6ea8fe; } [data-bs-theme="dark"] a:hover { color: #8bb9fe; } /* Text muted */ [data-bs-theme="dark"] .text-muted { color: #8b949e !important; } /* Buttons outline */ [data-bs-theme="dark"] .btn-outline-success { color: #75b798; border-color: #75b798; } [data-bs-theme="dark"] .btn-outline-success:hover { background-color: #198754; border-color: #198754; color: #fff; } /* Badge */ [data-bs-theme="dark"] .badge { border: 1px solid rgba(255, 255, 255, 0.1); } /* Input group */ [data-bs-theme="dark"] .input-group-text { background-color: #0f3460; border-color: #0f3460; color: #e0e0e0; } /* Dropdown */ [data-bs-theme="dark"] .dropdown-menu { background-color: #16213e; border-color: #0f3460; } [data-bs-theme="dark"] .dropdown-item { color: #e0e0e0; } [data-bs-theme="dark"] .dropdown-item:hover { background-color: #1a1a2e; color: #fff; } /* Pagination */ [data-bs-theme="dark"] .page-link { background-color: #16213e; border-color: #0f3460; color: #6ea8fe; } [data-bs-theme="dark"] .page-item.active .page-link { background-color: #198754; border-color: #198754; } /* Toggle button para tema */ .theme-toggle { cursor: pointer; background: none; border: none; font-size: 1.2rem; padding: 0.25rem 0.5rem; border-radius: 50%; transition: transform 0.3s; } .theme-toggle:hover { transform: rotate(20deg); } /* ============================================================ MEJORAS ADICIONALES — Componentes que faltaban ============================================================ */ /* Offcanvas / Sidebar */ [data-bs-theme="dark"] .offcanvas.offcanvas-sidebar { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important; } [data-bs-theme="dark"] .offcanvas-sidebar .nav-link { color: rgba(255, 255, 255, 0.7); } [data-bs-theme="dark"] .offcanvas-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } [data-bs-theme="dark"] .offcanvas-sidebar .nav-link.active { background: rgba(255, 255, 255, 0.2); } [data-bs-theme="dark"] .offcanvas-sidebar .logout-btn { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="dark"] .offcanvas-sidebar .logout-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } /* Toast de notificaciones */ [data-bs-theme="dark"] .toast { background-color: #16213e; border-color: #0f3460; color: #e0e0e0; } [data-bs-theme="dark"] .toast-header { background-color: #1a1a2e; color: #e0e0e0; border-bottom-color: #0f3460; } /* Progress bars */ [data-bs-theme="dark"] .progress { background-color: #0f3460; } [data-bs-theme="dark"] .progress-bar { color: #fff; } /* Accordion (FAQ) */ [data-bs-theme="dark"] .accordion-item { background-color: #16213e; border-color: #0f3460; } [data-bs-theme="dark"] .accordion-button { background-color: #1a1a2e; color: #e0e0e0; border-color: #0f3460; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: #198754; color: #fff; } [data-bs-theme="dark"] .accordion-button::after { filter: invert(0.8); } [data-bs-theme="dark"] .accordion-body { background-color: #16213e; color: #d0d0d0; } /* Jumbotron / Hero sections */ [data-bs-theme="dark"] .bg-light { background-color: #1a1a2e !important; } [data-bs-theme="dark"] .bg-white { background-color: #16213e !important; } /* Feature icons / cards de landing */ [data-bs-theme="dark"] .feature-icon { background-color: #0f3460 !important; } /* Nav tabs / pills */ [data-bs-theme="dark"] .nav-tabs .nav-link { color: #8b949e; border-color: #0f3460; } [data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: #e0e0e0; border-color: #0f3460; } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: #16213e; color: #fff; border-bottom-color: #16213e; } [data-bs-theme="dark"] .nav-pills .nav-link { color: #8b949e; } [data-bs-theme="dark"] .nav-pills .nav-link.active { background-color: #198754; color: #fff; } /* Blockquote */ [data-bs-theme="dark"] blockquote { border-left-color: #0f3460; color: #b0b0b0; } /* HR */ [data-bs-theme="dark"] hr { border-color: #0f3460; opacity: 0.3; } /* Code / pre */ [data-bs-theme="dark"] code { color: #ffa07a; background-color: rgba(255, 255, 255, 0.05); padding: 0.1em 0.3em; border-radius: 3px; } [data-bs-theme="dark"] pre { background-color: #0d1117; border-color: #0f3460; color: #c9d1d9; } /* Small text / helper */ [data-bs-theme="dark"] small, [data-bs-theme="dark"] .small { color: #8b949e; } /* Tooltips */ [data-bs-theme="dark"] .tooltip-inner { background-color: #0f3460; color: #e0e0e0; } [data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, [data-bs-theme="dark"] .bs-tooltip-top .tooltip-arrow::before { border-top-color: #0f3460; } /* Offcanvas backdrop */ [data-bs-theme="dark"] .offcanvas-backdrop.show { opacity: 0.6; } /* Spinner */ [data-bs-theme="dark"] .spinner-border { color: #198754 !important; } /* Badge variants */ [data-bs-theme="dark"] .badge.bg-info { background-color: #084298 !important; color: #6ea8fe; } [data-bs-theme="dark"] .badge.bg-warning { color: #000; } /* Card hover effect */ [data-bs-theme="dark"] .card { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] .card:hover { box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5); } /* Landing page hero */ [data-bs-theme="dark"] .landing-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important; } [data-bs-theme="dark"] .landing-section { background-color: #16213e; } [data-bs-theme="dark"] .landing-feature-card { background-color: #1a1a2e; border-color: #0f3460; } /* Map popup */ [data-bs-theme="dark"] .leaflet-popup-content-wrapper { background-color: #16213e; color: #e0e0e0; } [data-bs-theme="dark"] .leaflet-popup-tip { background-color: #16213e; } /* Rating stars */ [data-bs-theme="dark"] .rating-star { color: #ffc107; }