/* ════════════════════════════════════════════════════════════════════════════ MODO OSCURO — Se activa con ════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ TOKENS DARK MODE — EDITAR AQUÍ PARA CAMBIAR COLORES EN MODO OSCURO ════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Paleta principal (versiones claras para legibilidad sobre oscuro) ── */ --c-primary: #34d399; /* emerald-400 — legible sobre fondo oscuro */ --c-primary-dark: #10b981; /* emerald-500 */ --c-primary-darker: #059669; /* emerald-600 */ --c-primary-medium: #34d399; /* mismo que primary en dark */ --c-primary-accent: #6ee7b7; /* emerald-300 — hover/énfasis */ --c-primary-accent2: #a7f3d0; /* emerald-200 — muy sutil */ --c-primary-light: #064e3b; /* emerald-900 — fondos de badge/success */ --c-primary-border: #065f46; /* emerald-800 — bordes de badge */ --c-primary-rgb: 52, 211, 153; /* para rgba(var(--c-primary-rgb), alpha) */ /* ── Sidebar (igual en ambos modos — siempre oscuro) ─────────────────── */ /* --sidebar-bg, --sidebar-accent, etc. se heredan de :root sin cambios */ /* ── Colores semanticos ───────────────────────────────────────────────── */ --c-secondary: #475569; --c-secondary-dark: #253326; --c-bg: #0d1512; --c-surface: #172118; --c-text: #f1f5f9; --c-text-muted: #94a3b8; --c-border: #374151; --c-success: #34d399; --c-success-light: #064e3b; --c-danger: #f87171; --c-danger-light: #7f1d1d; --c-warning: #fbbf24; --c-warning-light: #78350f; /* ── Bootstrap overrides ──────────────────────────────────────────────── */ --bs-primary: var(--c-primary); --bs-primary-rgb: var(--c-primary-rgb); --bs-primary-bg-subtle: var(--c-primary-light); --bs-primary-border-subtle: var(--c-primary-border); --bs-primary-text-emphasis: var(--c-primary-accent); --bs-link-color: var(--c-primary); --bs-link-color-rgb: var(--c-primary-rgb); --bs-link-hover-color: var(--c-primary-accent); --bs-body-bg: var(--c-bg); --bs-body-color: var(--c-text); --bs-secondary-color: var(--c-text-muted); --bs-border-color: var(--c-border); --bs-success: var(--c-primary); --bs-success-rgb: var(--c-primary-rgb); --bs-danger: #f87171; --bs-danger-rgb: 248, 113, 113; --bs-card-bg: var(--c-surface); --bs-card-border-color: #253326; --bs-dropdown-bg: var(--c-surface); --bs-dropdown-border-color: #253326; --bs-dropdown-link-color: var(--c-text); --bs-dropdown-link-hover-bg: #253326; --bs-modal-bg: var(--c-surface); --bs-modal-border-color: #253326; } /* ── Body ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--c-bg); color: var(--c-text); } /* ── Utilidades Bootstrap que hardcodean colores ──────────────────────────── */ [data-theme="dark"] .bg-white { background-color: #172118 !important; } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-light-subtle { background-color: #131d14 !important; } [data-theme="dark"] .text-dark { color: #f1f5f9 !important; } [data-theme="dark"] .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: #374151 !important; } [data-theme="dark"] .vr { background-color: #374151; } [data-theme="dark"] .bg-success-subtle { background-color: var(--c-primary-light) !important; } [data-theme="dark"] .bg-success-subtle .text-muted { color: var(--c-primary-accent) !important; } /* ── Navbar principal ─────────────────────────────────────────────────────── */ [data-theme="dark"] .navbar { background: #0a1410 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important; } /* ── Admin navbar ─────────────────────────────────────────────────────────── */ [data-theme="dark"] .admin-navbar { background: #0a1410 !important; border-bottom: 1px solid #172118 !important; backdrop-filter: none !important; } [data-theme="dark"] .admin-navbar .navbar-brand, [data-theme="dark"] .admin-navbar .nav-link { color: #e2e8f0 !important; } [data-theme="dark"] .admin-navbar .nav-link:hover, [data-theme="dark"] .admin-navbar .nav-link:focus { color: var(--c-primary) !important; } /* ── Dropdown menus ───────────────────────────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background-color: #172118 !important; border-color: #374151 !important; } [data-theme="dark"] .dropdown-item { color: #f1f5f9 !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #374151 !important; color: #f1f5f9 !important; } [data-theme="dark"] .dropdown-item.text-danger { color: #f87171 !important; } [data-theme="dark"] .dropdown-divider { border-color: #374151; } /* ── Cards ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .card { background-color: #172118; border-color: #374151; color: var(--c-text); } [data-theme="dark"] .card-header { background-color: #131d14; border-bottom-color: #374151; } [data-theme="dark"] .card-footer { background-color: #131d14; border-top-color: #374151; } /* ── Inputs y formularios ─────────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #374151; color: #f1f5f9; border-color: #4b5563; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #374151; color: #f1f5f9; border-color: var(--c-primary); box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25); } [data-theme="dark"] .form-control::placeholder { color: #6b7280; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background-color: #253326; color: #94a3b8; } /* Validación: conservar el rojo de .is-invalid sobre el override genérico de borde */ [data-theme="dark"] .form-control.is-invalid, [data-theme="dark"] .form-select.is-invalid { border-color: #f87171; } [data-theme="dark"] .form-control.is-invalid:focus, [data-theme="dark"] .form-select.is-invalid:focus { border-color: #f87171; box-shadow: 0 0 0 0.2rem rgba(248, 113, 113, 0.25); } [data-theme="dark"] .invalid-feedback { color: #f87171; } [data-theme="dark"] .form-label { color: #cbd5e1; } [data-theme="dark"] .form-check-input { background-color: #374151; border-color: #4b5563; } [data-theme="dark"] .form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); } [data-theme="dark"] .form-check-label { color: #cbd5e1; } [data-theme="dark"] .input-group-text { background-color: #253326; border-color: #4b5563; color: #94a3b8; } /* ── Tablas ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .table { --bs-table-bg: #172118; --bs-table-striped-bg: #1e2e1f; --bs-table-hover-bg: #1e2e1f; --bs-table-border-color: #374151; --bs-table-color: #f1f5f9; color: #f1f5f9; border-color: #374151; } [data-theme="dark"] .table thead th { background-color: #131d14; border-color: #374151; color: #94a3b8; } /* ── Modal ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background-color: #172118; border-color: #374151; color: #f1f5f9; } [data-theme="dark"] .modal-header { border-bottom-color: #374151; } [data-theme="dark"] .modal-footer { border-top-color: #374151; } [data-theme="dark"] .modal-title { color: #f1f5f9; } /* ── Botones outline ────────────────────────────────────────────────────────── En site.css btn-outline-secondary usa texto navy (#253858) y btn-outline-danger usa #de350b, ambos ilegibles/apagados sobre fondo oscuro. Se ajustan las variables Bootstrap (mayor especificidad via [data-theme="dark"]). */ [data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #f1f5f9; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #334155; --bs-btn-active-color: #f1f5f9; } [data-theme="dark"] .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #b91c1c; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-hover-color: #ffffff; } /* ── Nav tabs ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] .nav-tabs { border-bottom-color: #374151; } [data-theme="dark"] .nav-tabs .nav-link { color: #94a3b8; } [data-theme="dark"] .nav-tabs .nav-link:hover:not(.disabled) { color: var(--c-primary); border-bottom-color: rgba(var(--c-primary-rgb), 0.3); background-color: rgba(var(--c-primary-rgb), 0.05); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); background-color: transparent; } /* ── List group ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .list-group-item { background-color: #172118; border-color: #374151; color: #f1f5f9; } [data-theme="dark"] .list-group-item-action:hover { background-color: #374151; color: #f1f5f9; } /* ── Alerts ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .alert-success { --bs-alert-color: var(--c-primary-accent); --bs-alert-bg: var(--c-primary-light); --bs-alert-border-color: var(--c-primary-border); } [data-theme="dark"] .alert-danger { --bs-alert-color: #fca5a5; --bs-alert-bg: #7f1d1d; --bs-alert-border-color: #991b1b; } [data-theme="dark"] .alert-warning { --bs-alert-color: #fde68a; --bs-alert-bg: #78350f; --bs-alert-border-color: #92400e; } [data-theme="dark"] .alert-info { --bs-alert-color: var(--c-primary-accent); --bs-alert-bg: var(--c-primary-light); --bs-alert-border-color: var(--c-primary-border); } /* ── Badges ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .bg-primary-subtle, [data-theme="dark"] .badge.bg-primary-subtle { background-color: var(--c-primary-light) !important; } [data-theme="dark"] .badge.bg-primary-subtle.text-primary, [data-theme="dark"] .text-primary { color: var(--c-primary) !important; } [data-theme="dark"] .border-primary { border-color: var(--c-primary) !important; } /* ── Footer ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] footer { border-top-color: #374151 !important; color: #94a3b8 !important; } /* ── Cards internas (domicilio, telefono, red) ────────────────────────────── */ [data-theme="dark"] .domicilio-card, [data-theme="dark"] .telefono-card, [data-theme="dark"] .red-card { border-color: #374151; background-color: #172118; } /* ── Hover lift (admin dashboard) ────────────────────────────────────────── */ [data-theme="dark"] .hover-lift:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, .4) !important; } /* ── Admin dashboard stat cards ───────────────────────────────────────────── */ [data-theme="dark"] .admin-stat-card { background: linear-gradient(135deg, #172118, #1e2e1f) !important; } /* ── Buscador resultados ──────────────────────────────────────────────────── */ [data-theme="dark"] #buscador-resultados .list-group-item-action:hover { background-color: var(--c-primary-light); color: var(--c-primary); } /* ── Scrollbar (webkit) ───────────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #172118; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* ════════════════════════════════════════════════════════════════════════════ BOTÓN TOGGLE ════════════════════════════════════════════════════════════════════════════ */ /* Toggle base */ .dark-mode-toggle { background: transparent; border: none; cursor: pointer; color: rgba(255, 255, 255, .85); padding: 0.3rem 0.55rem; border-radius: 0.375rem; font-size: 1.05rem; line-height: 1; transition: color 0.2s, background-color 0.2s; } /* Cuando está dentro de un dropdown (modo claro) */ .dark-mode-toggle.dropdown-item { color: #212529; font-size: 0.875rem; padding: 0.5rem 0.75rem; } .dark-mode-toggle.dropdown-item:hover, .dark-mode-toggle.dropdown-item:focus { color: #212529; background-color: #f8f9fa; } /* Cuando está dentro de un dropdown (modo oscuro) */ [data-theme="dark"] .dark-mode-toggle.dropdown-item { color: #f1f5f9 !important; } [data-theme="dark"] .dark-mode-toggle.dropdown-item:hover, [data-theme="dark"] .dark-mode-toggle.dropdown-item:focus { color: #f1f5f9 !important; background-color: #374151 !important; } .dark-mode-toggle:hover { color: #fff; background-color: rgba(255, 255, 255, .12); } /* Toggle en admin navbar (fondo blanco en modo claro) */ .dark-mode-toggle.admin-toggle { color: #253858; } .dark-mode-toggle.admin-toggle:hover { background-color: rgba(0, 0, 0, .06); } [data-theme="dark"] .dark-mode-toggle.admin-toggle { color: #e2e8f0; } [data-theme="dark"] .dark-mode-toggle.admin-toggle:hover { background-color: rgba(255, 255, 255, .1); } /* ════════════════════════════════════════════════════════════════════════════ TOPBAR & FOOTER ════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .topbar { background: var(--c-surface); border-bottom-color: #374151; } [data-theme="dark"] .topbar-page-title { color: #f1f5f9; } [data-theme="dark"] .topbar-theme-btn { background: transparent; border-color: #374151; color: #94a3b8; } [data-theme="dark"] .topbar-theme-btn:hover { background: #374151; color: #f1f5f9; border-color: #4b5563; } [data-theme="dark"] .main-footer { background: #172118; border-top-color: #374151; color: #6b7280; } /* ════════════════════════════════════════════════════════════════════════════ COMPONENTES (ViewComponents con