/** Adaptación exclusiva hasta 768px; se carga mediante media en el layout. */
@media (max-width: 768px) {
    .login-page { min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
    .login-shell { flex-direction: column; max-width: 420px; gap: 18px; }
    .login-box { width: 100%; padding: 26px 22px; border-radius: 22px; }
    .login-box .hero-title { margin-bottom: 24px; }
    .login-box .hero-title h1 { font-size: 32px; }
    .login-box .input-group { display: flex; flex-direction: column; margin-bottom: 16px; }
    .login-box .input-group-prepend { margin: 0 0 6px; }
    .login-box .input-group-text { height: auto; padding: 0; border: 0; background: transparent; font-size: 14px; }
    .login-box .input-group > .form-control { width: 100%; min-width: 0; height: 48px; margin: 0; border-radius: 10px; font-size: 16px; }
    .login-box .btn-login { min-height: 50px; font-size: 16px; border-radius: 12px; }
    .login-hero { display: flex; width: 100%; flex: none; }
    .login-hero-card { padding: 20px 22px; border-radius: 18px; }
    .login-hero h2 { margin: 0 0 8px; font-size: 22px; }
    .login-hero p { font-size: 14px; }

    .app-navbar { flex-wrap: nowrap; min-height: 60px; gap: 8px; padding: 8px 12px; }
    .app-navbar .navbar-brand-app { width: 36px; height: 36px; margin: 0; }
    /** Bootstrap oculta [hidden] con prioridad; estos controles aparecen solo en móvil. */
    .mobile-brand[hidden] { display: block !important; font-size: 15px; font-weight: 800; letter-spacing: .5px; }
    .mobile-menu-toggle[hidden] { display: block !important; }
    .mobile-menu-toggle { order: -1; flex: 0 0 44px; height: 44px; border: 1px solid #ffffff70; border-radius: 10px; background: transparent; color: white; font-size: 24px; }
    .app-navbar .navbar-user { min-width: 0; gap: 4px; }
    .app-navbar .navbar-user-button { max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-navbar .navbar-user-button, .app-navbar .exit-link { min-height: 44px; display: flex; align-items: center; padding: 8px; }
    .app-navbar.navbar-inicio .navbar-user-button { display: none; }
    .app-navbar .navbar-divider { display: none; }
    .app-navbar .navbar-menu { display: block; visibility: hidden; pointer-events: none; transform: translateX(-105%); transition: transform 280ms ease, visibility 0s linear 280ms; position: fixed; inset: 0 auto 0 0; width: min(86vw, 360px); height: 100vh; height: 100dvh; padding: 18px 14px; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: 12px 0 36px #142e4340; z-index: 1100; }
    .app-navbar.mobile-menu-open .navbar-menu { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
    .mobile-menu-heading[hidden] { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 16px; color: var(--mada-title); font-size: 18px; }
    .mobile-menu-heading button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--mada-pale); color: var(--mada-title); font-size: 28px; }
    .app-navbar .mobile-menu-backdrop[hidden] { display: block !important; visibility: hidden; pointer-events: none; opacity: 0; transition: opacity 280ms ease, visibility 0s linear 280ms; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; background: #10253380; z-index: 1090; }
    .app-navbar.mobile-menu-open .mobile-menu-backdrop[hidden] { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
    body.mobile-menu-open { overflow: hidden; }
    .app-navbar .navbar-dropdown { height: auto; margin-top: 6px; }
    .app-navbar .navbar-link { width: 100%; height: auto; min-height: 48px; justify-content: space-between; padding: 14px; color: var(--mada-title); background: #f1f7f9; font-size: 16px; white-space: normal; }
    /** Íconos locales en el color NOTAVAL, exclusivos del menú e inicio móvil. */
    .app-navbar .navbar-link { justify-content: flex-start; gap: 12px; }
    .app-navbar .navbar-link .dropdown-arrow { margin-left: auto; }
    .app-navbar .navbar-link::before, .mobile-home-access button::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        background: var(--notaval-menu-icon) center / contain no-repeat;
    }
    .mobile-home-access button::before { width: 28px; height: 28px; margin-bottom: 10px; }
    .app-navbar .navbar-menu > a.navbar-link { --notaval-menu-icon: url('/assets/images/notaval-menu/home.svg'); }
    .app-navbar #tablasButton, .mobile-home-access button[data-module="tablas"] { --notaval-menu-icon: url('/assets/images/notaval-menu/tablas.svg'); }
    .app-navbar #modelosButton, .mobile-home-access button[data-module="modelos"] { --notaval-menu-icon: url('/assets/images/notaval-menu/modelos.svg'); }
    .app-navbar #eventosButton, .mobile-home-access button[data-module="eventos"] { --notaval-menu-icon: url('/assets/images/notaval-menu/eventos.svg'); }
    .app-navbar #reportesButton, .mobile-home-access button[data-module="reportes"] { --notaval-menu-icon: url('/assets/images/notaval-menu/reportes.svg'); }
    .app-navbar #ayudaButton, .mobile-home-access button[data-module="ayuda"] { --notaval-menu-icon: url('/assets/images/notaval-menu/ayuda.svg'); }
    .app-navbar .navbar-dropdown-menu { position: static; min-width: 0; width: 100%; margin: 6px 0; padding: 4px 8px; box-shadow: none; background: #f8fafb; }
    .app-navbar .navbar-dropdown-menu a, .app-navbar .navbar-dropdown-action { min-height: 44px; display: flex; align-items: center; white-space: normal; font-size: 15px; line-height: 1.4; padding: 10px; }
    /** Desliza las opciones al abrir un módulo o un submenú móvil. */
    .app-navbar .navbar-dropdown-menu.is-open { animation: notaval-submenu-open 240ms ease-out; }
    .app-navbar .dropdown-arrow, .app-navbar .navbar-submenu-arrow { transition: transform 240ms ease; }
    .app-navbar .navbar-dropdown-button[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); }
    .app-navbar .navbar-submenu-button[aria-expanded="true"] .navbar-submenu-arrow { transform: rotate(90deg); }
    @keyframes notaval-submenu-open {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .app-navbar .navbar-dropdown-menu[hidden] { display: none !important; }
    .app-navbar .navbar-submenu-menu { margin-left: 0; border-left: 2px solid var(--border-soft); }
    .app-navbar button:focus-visible, .app-navbar a:focus-visible, .mobile-home button:focus-visible { outline: 3px solid #529bb0; outline-offset: 2px; }

    .home-page { min-height: calc(100vh - 60px); background: linear-gradient(#f1f8fbe8, #f1f8fbf7), url('/assets/images/area5-fondo.jpg') center / cover; }
    .home-page .barra-titulo-wrapper, .home-page .barra-titulo-spacer { display: none; }
    .home-page .barra-titulo-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
    .home-page .barra-titulo-left, .home-page .barra-titulo-right { min-width: 0; overflow-wrap: anywhere; }
    .home-page .barra-titulo-center { grid-column: 1 / -1; grid-row: 2; text-align: left; padding: 0; }
    .home-page .barra-titulo-right { grid-column: 2; grid-row: 1; }
    .home-page .barra-titulo-right img { max-width: 90px; max-height: 40px; object-fit: contain; }
    .home-page .barra-titulo-main, .home-page .barra-titulo-empresa { font-size: 16px; }
    .home-page .barra-titulo-sub { font-size: 13px; color: var(--mada-title); }
    .mobile-home[hidden] { display: block !important; max-width: 560px; margin: auto; padding: 22px 16px 32px; }
    .mobile-home-welcome { padding: 20px; border: 1px solid var(--border-soft); border-radius: 18px; background: white; overflow-wrap: anywhere; }
    .mobile-home-welcome h1 { margin: 8px 0; font-size: 24px; color: var(--mada-title); }
    .mobile-home-welcome p { margin: 0; font-size: 14px; color: #526570; }
    .mobile-home h2 { margin: 24px 0 12px; font-size: 18px; color: var(--mada-title); }
    .mobile-home-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mobile-home-access button { min-height: 92px; padding: 16px; text-align: left; border: 1px solid var(--border-soft); border-radius: 16px; background: white; color: var(--mada-title); font-size: 17px; font-weight: 700; box-shadow: 0 4px 12px #225f780a; }
    .mobile-home-access button:hover { background: var(--mada-pale); }
}

/** Respeta la preferencia del dispositivo de reducir animaciones. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .app-navbar .navbar-menu, .app-navbar .mobile-menu-backdrop[hidden],
    .app-navbar .dropdown-arrow, .app-navbar .navbar-submenu-arrow { transition: none; }
    .app-navbar .navbar-dropdown-menu.is-open { animation: none; }
}