/*
 * Modo oscuro de Capacitación PAA: base, interruptor y elementos que el navegador pinta por su cuenta.
 * Los colores de la página los traduce assets/tema-oscuro.js (copia de cada regla con prefijo html.paa-oscuro).
 */

/* Superficie más oscura de la paleta y esquema oscuro para controles nativos, barras de desplazamiento, etc. */
html.paa-oscuro {
    background-color: #07121d;
    color: #e6edf7;
    color-scheme: dark;
}
html.paa-oscuro body {
    background-color: #07121d;
    color: #e6edf7;
}

/* Hasta que el script termina de traducir, la página se oculta para evitar el destello blanco. */
html.paa-oscuro:not(.paa-oscuro-listo) body {
    visibility: hidden;
}

/* Modales nativos y su fondo. */
html.paa-oscuro dialog {
    background-color: #0d1a2b;
    color: #e6edf7;
    border-color: #1f3350;
}
html.paa-oscuro dialog::backdrop {
    background: rgba(2, 8, 18, 0.72);
}

/* Campos sin estilo propio. */
html.paa-oscuro input::placeholder,
html.paa-oscuro textarea::placeholder {
    color: #7f93ad;
}
html.paa-oscuro ::selection {
    background: #1d5fae;
    color: #ffffff;
}
html.paa-oscuro a {
    color: #6cb2f2;
}

/* Interruptor luna / sol. */
.paa-tema-boton {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
}
.paa-tema-boton svg {
    pointer-events: none;
}
.paa-tema-boton:not(.pc-ico) {
    width: 42px;
    height: 42px;
    border: 1px solid #dce4df;
    border-radius: 10px;
    background: #ffffff;
    color: #2b403a;
    transition: 0.2s;
}
.paa-tema-boton:not(.pc-ico):hover {
    background: #eef4f8;
}
.paa-tema-flotante {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 2000;
    box-shadow: 0 6px 18px rgba(0, 40, 75, 0.18);
}
.paa-tema-boton:focus-visible {
    outline: 3px solid #41ade7;
    outline-offset: 2px;
}
html.paa-oscuro .paa-tema-boton:not(.pc-ico) {
    background: #0d1a2b;
    border-color: #223a5a;
    color: #e6edf7;
}

/* La impresión siempre sale en claro (el script también quita la clase al imprimir). */
@media print {
    .paa-tema-boton {
        display: none !important;
    }
}

/* Franja azul con título (informe): el degradado de variables oscuras se traduciría a casi blanco. */
html.paa-oscuro .inf-portada {
    background: linear-gradient(135deg, #0a2f57 0%, #0d4a8a 60%, #1266b8 140%) !important;
    color: #ffffff;
}