/* ========================================================= TEMA OSCURO / CLARO — TOGGLE Se activa con (theme-toggle.js). Sin el atributo (o data-theme="light") se ve el diseño original de la aplicación. ========================================================= */ html[data-theme="dark"] { color-scheme: dark; --primary: #3f70b2; --primary-hover: #5687ca; --text: #edf3ff; --muted: #aebbd0; --border: #4a6489; --bg: #070c14; --card: #101a2b; --danger-bg: #2d1118; --danger-text: #ffabb8; --success-bg: #10271d; --success-text: #8de2ad; --note-bg: #251e11; --note-title: #ffd078; --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.5); --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.4); --dark-surface: #101a2b; --dark-surface-raised: #162238; --dark-surface-soft: #0c1524; --dark-border: #4a6489; --dark-border-strong: #6484b0; --dark-text: #edf3ff; --dark-muted: #aebbd0; } /* ---------- Fondo ---------- */ html[data-theme="dark"] body { background: var(--bg); color: var(--dark-text); } html[data-theme="dark"] body::before { background-image: linear-gradient(rgba(3, 7, 14, 0.52), rgba(3, 7, 14, 0.72)), url("/assets/img/fondo_oscuro.png"); filter: blur(1px) saturate(.8); } html[data-theme="dark"] .login-container { background: rgba(2, 6, 12, 0.24); } html[data-theme="dark"] .page-shell { background: rgba(2, 6, 12, 0.58); } /* ---------- Formularios genéricos ---------- */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--dark-surface-soft); border: 1.5px solid var(--dark-border); color: var(--dark-text); caret-color: #9ec5ff; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8291a9; } html[data-theme="dark"] input:hover, html[data-theme="dark"] select:hover, html[data-theme="dark"] textarea:hover { border-color: var(--dark-border-strong); } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible { outline: 2px solid #91bfff; outline-offset: 2px; border-color: #91bfff; box-shadow: 0 0 0 4px rgba(82, 139, 215, 0.22); } html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled, html[data-theme="dark"] button:disabled { background: #101827; border-color: #354861; color: #7f8da3; opacity: 1; } html[data-theme="dark"] select option { background: #0c1524; color: var(--dark-text); } html[data-theme="dark"] label, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] p, html[data-theme="dark"] td { color: var(--dark-text); } html[data-theme="dark"] a:not(.btn-link):not(.btn-tabla):not(.topbar a) { color: #9ec5ff; } /* Los inputs "glass" dentro de login-card/recovery-stage ya están pensados para fondos oscuros: se dejan tal cual. */ html[data-theme="dark"] .login-container .login-card input, html[data-theme="dark"] .login-container .login-card select { background: rgba(7, 15, 27, 0.58); border-color: rgba(143, 187, 245, 0.72); color: #ffffff; backdrop-filter: blur(6px) saturate(.82); -webkit-backdrop-filter: blur(6px) saturate(.82); } html[data-theme="dark"] .recovery-stage input, html[data-theme="dark"] .recovery-stage select { background: rgba(6, 13, 24, 0.82); border-color: var(--dark-border-strong); color: #ffffff; } html[data-theme="dark"] .login-container .login-card { background: rgba(6, 12, 22, 0.08); border: 1.5px solid rgba(143, 187, 245, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(16px) saturate(.78); box-shadow: 0 16px 46px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255,255,255,.09); } html[data-theme="dark"] .recovery-stage .login-card { background: rgba(7, 13, 23, 0.88); border: 1.5px solid var(--dark-border-strong); box-shadow: 0 14px 42px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.05); } html[data-theme="dark"] .login-container .custom-select-btn { background: rgba(7, 15, 27, 0.58); border-color: rgba(143, 187, 245, 0.72); color: #ffffff; backdrop-filter: blur(6px) saturate(.82); -webkit-backdrop-filter: blur(6px) saturate(.82); } html[data-theme="dark"] .login-container .custom-select-btn:hover, html[data-theme="dark"] .login-container .custom-select-btn.open { background: rgba(13, 26, 45, 0.72); border-color: #a9cdff; } html[data-theme="dark"] .login-container .custom-select-dropdown { background: rgba(5, 11, 20, 0.94); border-color: var(--dark-border); } /* ---------- Tarjetas de contenido (.card, dashboard, etc.) ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-perfil, html[data-theme="dark"] .modal-panel { background: var(--dark-surface); color: var(--dark-text); border: 1.5px solid var(--dark-border); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .categoria-btn { background: #16233d; border-color: #2a4a7f; color: #cfe0ff; } html[data-theme="dark"] .categoria-btn:hover { background: #1b2c4d; border-color: #3a5a90; } /* ---------- Modal de selección ---------- */ html[data-theme="dark"] .modal-header { border-bottom-color: #23375c; } html[data-theme="dark"] .modal-header h4 { color: #e7ecf6; } html[data-theme="dark"] .modal-eyebrow { color: #9fb0cc; } html[data-theme="dark"] .modal-cerrar { background: #1b2c4d; color: #cfe0ff; } html[data-theme="dark"] .modal-cerrar:hover { background: #23375c; color: #ffffff; } html[data-theme="dark"] .opcion { background: #16233d; border-color: #2a4a7f; } html[data-theme="dark"] .opcion:hover { background: #1b2c4d; border-color: #3a5a90; } html[data-theme="dark"] .opcion.seleccionada { background: #1c3157; box-shadow: 0 0 0 4px rgba(120, 160, 230, 0.16), 0 10px 26px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .opcion-etiqueta { color: #9fb0cc; background: #1b2c4d; border-bottom-color: #2a4a7f; } html[data-theme="dark"] .opcion-titulo { color: #e7ecf6; } html[data-theme="dark"] .opcion-desc { color: #9fb0cc; } html[data-theme="dark"] .opcion.seleccionada::after { background: #16233d; } /* ---------- Notas / avisos ---------- */ html[data-theme="dark"] .subtle-note, html[data-theme="dark"] .busqueda-usuarios, html[data-theme="dark"] .crear-usuario-box { background: #16233d; border-color: #2a4a7f; } html[data-theme="dark"] .subtle-note p, html[data-theme="dark"] .ayuda-creacion-usuario, html[data-theme="dark"] .field-help { color: #9fb0cc; } html[data-theme="dark"] .busqueda-usuarios label, html[data-theme="dark"] .crear-usuario-box h3, html[data-theme="dark"] .campo-form label { color: #e7ecf6; } html[data-theme="dark"] .btn-limpiar-busqueda { background: #23375c; color: #e7ecf6; } html[data-theme="dark"] .btn-limpiar-busqueda:hover { background: #2c4470; } html[data-theme="dark"] .warning-inline { background: #2a2210; } html[data-theme="dark"] .warning-inline p { color: #cbd5e1; } /* ---------- Tablas ---------- */ html[data-theme="dark"] .tabla-usuarios { background: #132242; } html[data-theme="dark"] .tabla-usuarios th, html[data-theme="dark"] .tabla-usuarios td { border-color: #2a4a7f; } html[data-theme="dark"] .tabla-usuarios th { background: #1b2c4d; color: #e7ecf6; } html[data-theme="dark"] .tabs-roles { background: #16233d; } html[data-theme="dark"] .tab-rol-btn { color: #9fb0cc; } html[data-theme="dark"] .tab-rol-btn:hover { background: #23375c; border-color: #3a5a90; color: #e7ecf6; } html[data-theme="dark"] .lista-hijos li { background: #1b2c4d; color: #cfe0ff; } html[data-theme="dark"] .input-mini-select { background: #16233d; border-color: #3a5a90; color: #cfe0ff; } html[data-theme="dark"] .texto-accion-bloqueada { color: #9fb0cc; } /* ---------- Custom select variante "tarjeta clara" ---------- */ html[data-theme="dark"] .card .custom-select-btn { background: #16233d; border-color: #2a4a7f; color: #e7ecf6; } html[data-theme="dark"] .card .custom-select-btn svg { stroke: #9fb0cc; } html[data-theme="dark"] .card .custom-select-dropdown { background: #16233d; border-color: #2a4a7f; } html[data-theme="dark"] .card .custom-select-option { color: #e7ecf6; } html[data-theme="dark"] .card .custom-select-option:hover { background: #1b2c4d; } html[data-theme="dark"] .card .custom-select-placeholder { color: #7f90ac; } /* ---------- Tarjeta de perfil ---------- */ html[data-theme="dark"] .perfil-header, html[data-theme="dark"] .perfil-dato { border-color: #23375c; } html[data-theme="dark"] .perfil-nombre h2, html[data-theme="dark"] .dato-valor { color: #e7ecf6; } /* ========================================================= Estilos propios de páginas concretas (bloques