/*
 * app-foundation.css
 * Correcciones transversales de estructura, accesibilidad y movimiento.
 * Se carga despues de style.css para estabilizar la base sin mezclarla con
 * los estilos particulares de cada seccion.
 */

:root {
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 240ms;
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* El enlace solo aparece al navegar con teclado. */
.app-skip-link {
    position: fixed;
    top: max(8px, env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 1450;
    padding: 10px 14px;
    color: #ffffff;
    background: #173ea6;
    border: 2px solid #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(14, 31, 72, 0.3);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(calc(-100% - 24px));
    transition: transform var(--motion-fast) var(--motion-ease-standard);
}

.app-skip-link:focus {
    transform: translateY(0);
    outline: 3px solid rgba(49, 86, 255, 0.3);
    outline-offset: 2px;
}

/* La marca conserva el centro optico en todos los anchos del topbar. */
body.app-page .header-container > .logo {
    align-self: stretch;
    display: flex;
    align-items: center;
    min-height: inherit;
}

body.app-page .logo h1,
body.app-page .logo a {
    display: flex;
    align-items: center;
    min-height: 100%;
    line-height: 1;
}

body.app-page .logo h1 {
    margin: 0;
}

/* Un fondo aislado no puede recibir clics ni seleccion durante un overlay. */
[inert] {
    pointer-events: none;
    user-select: none;
}

body.app-modal-open,
body.mobile-sidebar-open {
    overflow: hidden;
}

.app-modal-dialog:focus {
    outline: none;
}

.app-modal-dialog:focus-visible {
    outline: 3px solid var(--app-focus-ring, rgba(49, 86, 255, 0.24));
    outline-offset: 3px;
}

.app-modal-close,
.mobile-sidebar-close {
    touch-action: manipulation;
}

/* Campos equivalentes deben conservar la misma altura en autenticacion. */
.login-form input[type="email"] {
    height: 44px;
}

body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
}

body.login-page .login-container {
    margin: auto;
}

@media (max-width: 520px) {
    body.login-page {
        align-items: flex-start;
    }

    body.login-page .login-container {
        width: 100%;
        max-width: 400px;
    }

    body.login-page .login-box {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* El movimiento reducido es una preferencia global, no una excepcion local. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}