/* Ajustes móviles compartidos. Se carga al final para preservar escritorio. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
svg {
    max-width: 100%;
}

@media (max-width: 960px) {
    html,
    body {
        min-width: 0;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .navbar {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 6px;
        padding-inline: 10px;
    }

    .logo {
        width: min(138px, 100%);
        min-width: 0;
    }

    .menu-modulos__alternador {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding-inline: 8px;
    }

    .navbar__usuario {
        width: auto;
        min-width: 0;
        grid-template-columns: auto;
    }

    .navbar__usuario-acciones {
        gap: 5px;
    }

    .navbar__sync-open,
    .navbar__usuario form button {
        min-width: 40px;
        min-height: 40px;
        padding-inline: 6px;
    }

    .hero {
        min-height: auto;
        align-items: start;
        padding: 38px 18px 28px;
    }

    .hero-identidad {
        width: 100%;
    }

    .saludo-usuario {
        margin-bottom: 28px;
        font-size: 0.82rem;
    }

    .titulo-portada {
        max-width: 100%;
        margin-block: 14px 20px;
        font-size: clamp(2.9rem, 16vw, 4.35rem);
        line-height: 0.86;
        overflow-wrap: normal;
    }

    .identidad-institucional {
        padding-left: 13px;
    }

    .identidad-institucional__unidad {
        font-size: clamp(0.86rem, 4vw, 0.98rem);
    }

    .presentacion-institucional {
        width: 100%;
        margin-top: 32px;
        border-bottom-left-radius: min(24vw, 105px) min(24vw, 105px);
    }

    .hero-almacen {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 14px;
        text-align: right;
    }

    .mega-menu,
    .menu-modulos,
    dialog {
        max-width: 100vw;
    }

    .bd-tabla-contenedor,
    .ws-tabla-contenedor,
    .dg-tabla-contenedor,
    .cs-tabla {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .bd-aplicacion,
    .oa-panel,
    .oa-panel > form,
    .ws-aplicacion,
    .dg-aplicacion,
    .cs-aplicacion,
    .bd-tarjeta {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --alto-navbar: 60px;
    }

    .navbar {
        height: var(--alto-navbar);
        padding-inline: 8px;
    }

    .logo {
        width: min(126px, 100%);
    }

    .menu-modulos__alternador {
        width: 42px;
        padding: 0;
    }

    .menu-modulos__alternador > span:first-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .menu-modulos__icono,
    .menu-modulos__icono::before,
    .menu-modulos__icono::after {
        width: 22px;
    }

    .navbar__sync-open,
    .navbar__usuario form button {
        min-width: 38px;
        width: 38px;
        min-height: 38px;
        padding: 0;
        font-size: 0.59rem;
    }

    .hero {
        padding: 30px 16px 24px;
    }

    .saludo-usuario {
        margin-bottom: 22px;
    }

    .etiqueta {
        font-size: 0.68rem;
        letter-spacing: 0.13rem;
    }

    .titulo-portada {
        font-size: clamp(2.72rem, 15.5vw, 3.8rem);
        letter-spacing: -0.055em;
    }

    .presentacion-institucional {
        margin-top: 26px;
        aspect-ratio: 4 / 3;
    }

    .hero-almacen span {
        font-size: 0.6rem;
    }

    .hero-almacen strong {
        font-size: 0.74rem;
    }

    .vista-seccion {
        padding: 34px 14px 54px;
    }

    .titulo-contenido {
        font-size: clamp(1.8rem, 10vw, 2.6rem);
        overflow-wrap: anywhere;
    }
}

/* Portada de acceso: menos desplazamiento y controles cómodos en móvil. */
@media (max-width: 560px) {
    .pagina-acceso .acceso-identidad {
        padding: 20px 18px 28px;
    }

    .pagina-acceso .acceso-identidad__marca {
        width: 154px;
    }

    .pagina-acceso .acceso-identidad__contenido {
        padding: 34px 0 0;
    }

    .pagina-acceso .acceso-identidad h1 {
        margin-block: 13px 18px;
        font-size: clamp(2.75rem, 16vw, 3.9rem);
        line-height: 0.86;
    }

    .pagina-acceso .acceso-identidad__descripcion {
        padding-left: 13px;
    }

    .pagina-acceso .acceso-panel {
        min-height: 430px;
        padding: 38px 14px 44px;
    }

    .pagina-acceso .activador-acceso__boton {
        width: 108px;
    }

    .pagina-acceso .formulario-acceso {
        width: 100%;
        padding: 24px 18px;
    }

    .pagina-acceso .campo-acceso input {
        min-height: 48px;
        font-size: 16px;
    }

    .pagina-acceso .recordar-sesion {
        align-items: flex-start;
        line-height: 1.35;
    }
}

/* En horizontal se aprovecha el ancho y se evita una portada excesivamente alta. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 540px) {
    :root {
        --alto-navbar: 56px;
    }

    .navbar {
        height: var(--alto-navbar);
    }

    .hero {
        min-height: calc(100dvh - var(--alto-navbar));
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 22px;
        padding: 22px 24px;
    }

    .hero-distribucion {
        grid-column: 1;
    }

    .saludo-usuario {
        margin-bottom: 14px;
        font-size: 0.72rem;
    }

    .etiqueta {
        font-size: 0.61rem;
    }

    .titulo-portada {
        margin-block: 9px 14px;
        font-size: clamp(2.45rem, 7.6vw, 3.65rem);
    }

    .identidad-institucional__unidad {
        font-size: 0.76rem;
    }

    .identidad-institucional__ubicacion {
        font-size: 0.66rem;
    }

    .presentacion-institucional {
        grid-column: 2;
        width: 100%;
        margin: 0;
        aspect-ratio: 16 / 10;
        border-bottom-left-radius: 70px 70px;
    }

    .hero-almacen {
        position: absolute;
        right: 24px;
        bottom: 14px;
        margin: 0;
    }

    .pagina-acceso .acceso {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .pagina-acceso .acceso-identidad,
    .pagina-acceso .acceso-panel {
        min-height: 100dvh;
    }

    .pagina-acceso .acceso-identidad {
        padding: 18px 26px;
    }

    .pagina-acceso .acceso-identidad__marca {
        width: 142px;
    }

    .pagina-acceso .acceso-identidad__contenido {
        padding: 18px 0 0;
    }

    .pagina-acceso .acceso-identidad h1 {
        margin-block: 8px 14px;
        font-size: clamp(2.2rem, 7vw, 3.2rem);
    }

    .pagina-acceso .acceso-panel {
        padding: 18px;
    }

    .pagina-acceso .formulario-acceso {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        padding: 20px;
    }
}