/* ===================================================================== Modo oscuro. Se carga DESPUES de style.css / admin.css / loading.css. Bootstrap 5.3 ya adapta solo tablas, tarjetas, formularios y menus cuando tiene data-bs-theme="dark". Aqui se ajusta lo que es nuestro: la paleta amazonica y las reglas con colores fijos. Los verdes se aclaran en oscuro: el #0B6B3A original no tiene contraste suficiente sobre fondo negro (falla WCAG AA como texto). ===================================================================== */ /* ---------------- Boton de cambio de tema (ambos temas) --------------- */ .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid transparent; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; transition: background-color .15s ease, transform .15s ease; } .theme-toggle:hover { background: rgba(22, 163, 74, .14); } .theme-toggle:active { transform: scale(.94); } .theme-toggle:focus-visible { outline: 2px solid var(--hoja); outline-offset: 2px; } /* Sobre fondos oscuros (navbar del panel, login) el icono va en blanco. */ .navbar.admin-nav .theme-toggle, .auth-bg .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, .35); } .navbar.admin-nav .theme-toggle:hover, .auth-bg .theme-toggle:hover { background: rgba(255, 255, 255, .18); } /* Boton flotante en las paginas sin navbar (login, crear admin). */ .theme-toggle-flotante { position: fixed; top: 1rem; right: 1rem; z-index: 1050; backdrop-filter: blur(4px); } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } } /* ===================================================================== * * PALETA OSCURA * ===================================================================== */ [data-bs-theme="dark"] { --selva: #2FA96A; /* aclarado: legible como texto sobre oscuro */ --hoja: #34D26A; --rio: #22D3EE; --sol: #FACC15; --tierra: #24312A; /* "tierra" pasa a ser una superficie apagada */ --fondo: #0E1512; --texto: #E7EAE8; --wa: #25D366; --shadow: 0 4px 18px rgba(0, 0, 0, .45); --shadow-hover: 0 14px 34px rgba(0, 0, 0, .6); /* Superficies propias, para no repetir literales por todo el archivo. */ --superficie: #151D19; --superficie-2: #1B241F; --borde: #2C3A33; --texto-suave: #9AA39D; } [data-bs-theme="dark"] body { background-color: var(--fondo); color: var(--texto); /* el patron de puntos se invierte: claro sobre oscuro */ background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0); } /* ------------------------- Sitio publico ----------------------------- */ [data-bs-theme="dark"] .navbar { background: var(--superficie) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); } [data-bs-theme="dark"] .navbar .nav-link { color: var(--texto); } [data-bs-theme="dark"] .navbar .nav-link:hover { background: rgba(52, 210, 106, .14); color: var(--hoja); } [data-bs-theme="dark"] .navbar .nav-link.nav-admin { background: var(--tierra); color: #A7F3D0; } [data-bs-theme="dark"] .navbar .nav-link.nav-admin:hover { background: var(--sol); color: #14201A; } /* El hero mantiene su degradado, pero mas profundo para no deslumbrar. */ [data-bs-theme="dark"] .hero { background: linear-gradient(135deg, #06301B 0%, #0B5A33 45%, #0E5C6B 100%); } [data-bs-theme="dark"] .filtros-card .form-label { color: var(--texto-suave); } [data-bs-theme="dark"] .filtros-card .form-control, [data-bs-theme="dark"] .filtros-card .form-select { border-color: var(--borde); } [data-bs-theme="dark"] .btn-limpiar { color: var(--texto-suave); } [data-bs-theme="dark"] .btn-limpiar:hover { color: var(--hoja); } [data-bs-theme="dark"] .card-predio .piso-badge { background: rgba(14, 21, 18, .92); color: var(--texto); } [data-bs-theme="dark"] .card-predio .zona, [data-bs-theme="dark"] .precio .por-mes { color: var(--texto-suave); } [data-bs-theme="dark"] .empty-state { background: var(--superficie); border-color: var(--borde); } [data-bs-theme="dark"] .empty-state .empty-icon { background: linear-gradient(135deg, var(--superficie-2), var(--superficie)); box-shadow: inset 0 0 0 4px rgba(52, 210, 106, .18); } [data-bs-theme="dark"] .precio-box { background: linear-gradient(135deg, var(--superficie-2), var(--superficie)); } [data-bs-theme="dark"] .publicacion { color: #C9D2CD; } [data-bs-theme="dark"] .chip { background: var(--tierra); color: #A7F3D0; } [data-bs-theme="dark"] .galeria-principal, [data-bs-theme="dark"] .card-predio .img-wrap { background: var(--superficie-2); } [data-bs-theme="dark"] .wa-fixed { background: rgba(14, 21, 18, .96); border-top-color: var(--borde); box-shadow: 0 -4px 16px rgba(0, 0, 0, .5); } /* ------------------------- Panel administrador ----------------------- */ [data-bs-theme="dark"] .navbar.admin-nav { background: linear-gradient(135deg, #041F12, #073C22 55%, #0B5A33) !important; } [data-bs-theme="dark"] .table > thead.table-light th { background: var(--tierra); color: #A7F3D0; } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(52, 210, 106, .10); } /* Predios no disponibles: apagados tambien en oscuro. */ [data-bs-theme="dark"] .table > tbody > tr.fila-inactiva > * { background-color: #121815; color: #6E766F; } [data-bs-theme="dark"] .table-hover > tbody > tr.fila-inactiva:hover > * { color: var(--texto); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: var(--borde); } [data-bs-theme="dark"] .auth-bg { background: linear-gradient(135deg, #06301B 0%, #0B5A33 45%, #0E5C6B 100%); } [data-bs-theme="dark"] .aviso-copiado { background: var(--hoja); color: #08130D; } /* --------------------- Overlay de carga y subidas -------------------- */ [data-bs-theme="dark"] .app-loading { background: rgba(0, 0, 0, .62); } [data-bs-theme="dark"] .app-loading__box { background: var(--superficie); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); } [data-bs-theme="dark"] .app-loading__text { color: var(--texto); } [data-bs-theme="dark"] .app-loading__sub, [data-bs-theme="dark"] .app-file-summary, [data-bs-theme="dark"] .app-counter { color: var(--texto-suave); } [data-bs-theme="dark"] .app-loading__bar { background: rgba(52, 210, 106, .2); } [data-bs-theme="dark"] .app-file-summary.is-error { color: #FCA5A5; } [data-bs-theme="dark"] .app-counter.is-near { color: #FCD34D; } [data-bs-theme="dark"] .app-file-thumbs img { border-color: var(--borde); } [data-bs-theme="dark"] .app-file-more { border-color: var(--borde); color: var(--texto-suave); } [data-bs-theme="dark"] .app-map-loading { background: rgba(14, 21, 18, .92); color: var(--texto-suave); } [data-bs-theme="dark"] .app-loading__spinner { border-color: rgba(52, 210, 106, .22); border-top-color: var(--hoja); } /* Los mapas de Leaflet son claros: se atenuan un poco para que no cieguen. */ [data-bs-theme="dark"] .leaflet-tile { filter: brightness(.78) saturate(.85); } [data-bs-theme="dark"] .leaflet-container { background: var(--superficie-2); }