/* ==========================================================
   REPORTES AsEp
   THEME.CSS
   Sistema de temas + selector del Home
   ========================================================== */

html {
    transition:
        background-color var(--transition-slow),
        color var(--transition-slow);
}

body {
    background: var(--bg-main);
    color: var(--color-text);
    font-family: var(--font-main);

    transition:
        background-color var(--transition-slow),
        color var(--transition-slow);
}

*,
*::before,
*::after {
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* ==========================================================
   SELECTOR DE TEMA

   Las reglas visuales principales viven en hero.css para que
   el componente pertenezca al Home. Aquí quedan únicamente
   las reglas globales de transición/estado.
   ========================================================== */

.theme-switch {
    color: var(--color-text);
}

.theme-switch.light {
    color: var(--color-heading);
}

.theme-switch.dark {
    color: var(--color-white);
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

.theme-switch:focus-visible {
    outline:
        var(--focus-ring-width)
        solid
        var(--color-primary);

    outline-offset: 3px;
}


/* ==========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html,
    body,
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}


/* Hidden interactive elements never intercept pointer events. */
[hidden]{
    display:none !important;
    pointer-events:none !important;
}