/*
 * Capa móvil transversal. No contiene reglas de escritorio: evita que una
 * corrección de app vuelva a alterar la composición de PC.
 *
 * Todo el archivo va dentro de @layer vsg-universal (igual que
 * design-system.css, global.css, mobile.css, etc.) -- antes NO estaba en
 * ninguna capa, y CSS resuelve SIEMPRE una regla sin capa por encima de
 * cualquier regla en capa, sin importar especificidad ni orden de carga.
 * Eso hacía que estas reglas genéricas (pensadas como base común) le
 * ganaran incluso a overrides más específicos de una sección concreta
 * (progression.css, rules.css, etc.), aunque esas hojas se cargaran
 * después. Con las dos en la misma capa, gana la regla más específica
 * como es de esperar.
 */
@layer vsg-universal {
@media (max-width: 820px) {
    :root {
        --vsg-mobile-gutter: clamp(10px, 3.6vw, 16px);
        --vsg-mobile-stack-gap: clamp(9px, 2.8vw, 14px);
        --vsg-mobile-control-height: 44px;
        --vsg-mobile-radius: 14px;
        --vsg-mobile-radius-sm: 10px;
    }

    html.vsg-mobile,
    html.vsg-mobile body {
        max-width: 100%;
        overflow-x: clip;
    }

    html.vsg-mobile body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    :where(#mainContent, main, .section-wrapper, .section-container, .account-section-wrapper,
        .universal-top-container, .universal-top-header, .universal-top-content,
        .card, .panel, .modal-content, .modal-body) {
        min-width: 0;
        box-sizing: border-box;
    }

    html.vsg-mobile :where(.section-wrapper, .section-container, .account-section-wrapper) {
        width: min(100% - (var(--vsg-mobile-gutter) * 2), 760px);
        margin-inline: auto;
    }

    /* Las cabeceras (.universal-top-container: mg-top-container, etc. --
       Roster, Reglas, Guías, Calculadora, Asistencia, Progreso, Calendario
       y Noticias ya migraron a componentes independientes propios) NO llevan el
       tope de 760px de arriba -- antes lo compartían con el ancho de
       lectura de .section-wrapper y quedaban más angostas que el banner de
       "Esta semana" en la misma pantalla (.nw-hero-grid, que usa
       --vsg-banner-max-width) sin ningún motivo de legibilidad que lo
       justifique en una barra de cabecera. Mismo tope que ese banner, para
       que midan igual. */
    html.vsg-mobile .universal-top-container {
        width: 100%;
        max-width: min(100%, var(--vsg-banner-max-width, 1400px));
        margin-inline: auto;
        min-width: 0;
        /* Los selectores y menús de cabecera deben poder abrirse sobre el
           contenedor; ocultarlos para disimular un overflow corta opciones. */
        overflow: visible;
    }

    /* Todas las secciones comparten una retícula mínima: evita que el
       contenido de escritorio conserve gutters, márgenes negativos o anchos
       implícitos al entrar en una app/webview. */
    html.vsg-mobile :where(#mainContent, .main-content, .content-container) {
        min-width: 0;
        padding-inline: var(--vsg-mobile-gutter);
    }

    html.vsg-mobile :where(.section-wrapper, .section-container, .content-wrapper) > :where(.card, .panel, .section-card) {
        min-width: 0;
        max-width: 100%;
        border-radius: var(--vsg-mobile-radius);
    }

    html.vsg-mobile :where(.universal-top-header, .universal-top-content) {
        gap: clamp(8px, 2.5vw, 14px);
    }

    html.vsg-mobile :where(.universal-top-title, .universal-top-copy, .section-title, .card-title) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    html.vsg-mobile :where(.universal-top-actions, .section-actions, .card-actions, .form-actions) {
        width: auto;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--vsg-mobile-stack-gap);
    }

    /* Las acciones siguen el contenido y nunca se convierten en una barra
       de ancho completo salvo que su módulo lo pida explícitamente. */
    html.vsg-mobile :where(.universal-top-actions, .section-actions, .card-actions, .form-actions, .toolbar-actions) > :where(button, .btn, .btn-primary, .btn-outline) {
        flex: 0 1 auto;
        min-height: var(--vsg-mobile-control-height);
        max-width: 100%;
    }

    html.vsg-mobile :where(button, .btn, .button, input, select, textarea) {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 16px evita el zoom automático de Safari al editar formularios. */
    html.vsg-mobile :where(input, select, textarea) {
        font-size: max(16px, 1rem);
    }

    html.vsg-mobile :where(.form-control, input, select, textarea) {
        min-height: var(--vsg-mobile-control-height);
        border-radius: var(--vsg-mobile-radius-sm);
    }

    html.vsg-mobile :where(textarea) {
        min-height: 108px;
        line-height: 1.45;
    }

    /* Filtros y toolbars se leen como una secuencia de controles táctiles;
       no como columnas comprimidas de escritorio. */
    html.vsg-mobile :where(.filter-bar, .filters-row, .section-tools, .toolbar, .toolbar-actions) {
        min-width: 0;
        gap: 8px;
    }

    html.vsg-mobile :where(.filter-bar, .filters-row, .section-tools) > :where(.form-control, select, input, .filter-control) {
        flex: 1 1 min(220px, 100%);
        min-width: min(220px, 100%);
    }

    /* Carriles de pestañas: deslizables y alcanzables, nunca una rejilla de
       botones encogidos ni una fila que desborde el viewport. */
    html.vsg-mobile :where(.universal-tabs, .tabs, [role="tablist"]) {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(125, 211, 252, .46) transparent;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    html.vsg-mobile :where(.universal-tabs, .tabs, [role="tablist"])::-webkit-scrollbar { height: 4px; }
    html.vsg-mobile :where(.universal-tabs, .tabs, [role="tablist"])::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(125, 211, 252, .46); }

    html.vsg-mobile :where(.universal-tab-btn, [role="tab"]) {
        flex: 0 0 auto;
        min-height: var(--vsg-mobile-control-height);
    }

    /* Ítem 19: el piso de 44px ya cubría botones de toolbar, tabs y form
       controls (arriba), pero no los botones de acción DENTRO de tablas
       (data-table, roster, tarjetas de raid) -- ahí cada sección definía su
       propio tamaño compacto pensado para mouse (.mg-btn-sm, .rc-btn, etc.)
       y en el dedo quedaban por debajo del mínimo táctil recomendado. */
    html.vsg-mobile :where(.data-table, .table-responsive) :where(button, .btn, .btn-primary, .btn-outline, .mg-btn-sm, .rc-btn) {
        min-height: 40px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    html.vsg-mobile :where(.table-responsive, .data-table-wrap, .overflow-scroll) {
        max-width: 100%;
        border-radius: var(--vsg-mobile-radius-sm);
        overscroll-behavior-x: contain;
        scrollbar-gutter: stable;
        scrollbar-color: rgba(125, 211, 252, .48) rgba(2, 8, 23, .38);
        -webkit-overflow-scrolling: touch;
    }

    html.vsg-mobile :where(.data-table) {
        font-size: clamp(.68rem, 2.8vw, .78rem);
    }

    html.vsg-mobile :where(.data-table th, .data-table td) {
        min-width: 0;
        padding: 9px 8px;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    /* Los modales no dependen de un margen vertical fijo: se ajustan a la
       ventana visible del navegador y respetan notch/barra de gestos. */
    html.vsg-mobile :where(.modal-content, .modal .modal-content) {
        width: min(calc(100vw - (var(--vsg-mobile-gutter) * 2)), 680px);
        max-width: min(calc(100vw - (var(--vsg-mobile-gutter) * 2)), 680px);
        max-height: calc(100dvh - 20px);
        margin: max(10px, env(safe-area-inset-top)) auto;
        border-radius: var(--vsg-mobile-radius);
    }

    html.vsg-mobile :where(.modal-header, .modal-body, .modal-footer) {
        min-width: 0;
        padding-inline: var(--vsg-mobile-gutter);
    }

    /* WebView/PWA: el contenido no queda debajo de una isla, notch o barra
       de gestos. Se conserva el padding visual normal cuando no hay área
       segura reportada por el dispositivo. */
    html.vsg-mobile .mobile-header {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }

    html.vsg-mobile .content-wrapper {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    /* Menú de selección con logo: oculto por defecto (components.css),
       visible solo en móvil/app. Estilo visual completo vive en
       components.css -- acá solo el interruptor de visibilidad, que es lo
       único que depende del viewport. */
    html.vsg-mobile .vsg-menu { display: block !important; }

    /* Los controles que el menú de arriba reemplaza (roster, guías, reglas)
       se ocultaban con reglas que vivían en la hoja de cada sección (capa
       vsg-sections) -- la MISMA capa que design-system.css/vsg-universal le
       gana siempre por diseño (@layer vsg-sections, vsg-universal; en
       index.html). Con eso perdiendo, el botón/pestaña original y el menú
       nuevo terminaban visibles los dos a la vez, superpuestos. Declarados
       acá, en vsg-universal, con selectores lo bastante específicos para no
       depender de ningún empate de especificidad. */
    html.vsg-mobile .rules-wrapper .rules-categories-tabs { display: none !important; }
}

/* Compactación solo para teléfonos estrechos; tabletas y PC no reciben
   ninguna de estas medidas. */
@media (max-width: 480px) {
    html.vsg-mobile :where(.universal-top-container, .card, .panel, .section-card) {
        border-radius: 12px;
    }

    html.vsg-mobile :where(.universal-top-title, .section-title, .card-title) {
        font-size: clamp(1.02rem, 5.2vw, 1.28rem);
        line-height: 1.12;
    }

    html.vsg-mobile :where(.data-table th, .data-table td) {
        padding: 8px 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.vsg-mobile *,
    html.vsg-mobile *::before,
    html.vsg-mobile *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 820px) {
    html.vsg-mobile :where(.mobile-header, .vsg-mobile-bottom-nav, .sidebar, .vsg-menu-list, .tw-banner-wrap, .prog-boss-panel, .btn-outline, .universal-tabs, .account-tabs, .vsg-glass-card) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html.vsg-mobile :where(#sidebar-snow-container, .snow-particle) {
        display: none !important;
    }

    html.vsg-mobile :where(.gp-banner-effect-glow-pulse, .gp-avatar-wrap.gp-avatar-glow) {
        animation: none !important;
    }

    html.vsg-mobile .gp-banner-effect-particles::after {
        animation: none !important;
    }

    html.vsg-mobile .gp-banner-effect-parallax {
        background-attachment: scroll !important;
    }
}
}

    /* --------------------------------------------------------------------------
       BARRA DE NAVEGACIÓN INFERIOR MÓVIL (Idea 25, Reparación 2, Reparación 15)
       -------------------------------------------------------------------------- */
    .vsg-mobile-bottom-nav {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: linear-gradient(180deg, rgba(8, 14, 30, 0.92) 0%, rgba(4, 7, 18, 0.98) 100%);
        
        
        border-top: 1px solid rgba(125, 168, 218, 0.2);
        z-index: var(--z-bottom-nav, 600);
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
    }

    @media (max-width: 820px) {
        .vsg-mobile-bottom-nav {
            display: flex !important;
        }

        /* Añadir espacio al pie del contenido para no ser tapado por la bottom nav */
        #mainContent,
        .content-wrapper {
            padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        }

        /* Evitar auto-zoom de iOS en inputs (Reparación 17) */
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        input[type="search"],
        select,
        textarea {
            font-size: 16px !important;
        }

        /* Altura mínima de área táctil en móvil — reducida a 20px para
           permitir controles compactos en tarjetas y tablas */
        .vsg-bottom-nav-item,
        button,
        .btn,
        .nav-btn {
            min-height: 20px;
        }
    }

    /* Antes eran 4 destinos + "Más" con emojis (📰👥⚔️📜) -- ni la
       iconografía coincidía con el resto del sitio (el sidebar usa las
       imágenes reales de /img/iconpa/), ni entraban suficientes vínculos.
       Ahora son 6 destinos reales + "Más", con las MISMAS imágenes que ya
       usa .nav-btn::before en el sidebar (un solo lenguaje visual), en un
       tamaño más chico para que las 7 quepan cómodas sin apretarse. */
    .vsg-bottom-nav-item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: #94a3b8;
        font-family: var(--vsg-font-family, inherit);
        font-size: 0.6rem;
        font-weight: 500;
        padding: 5px 1px;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .vsg-bottom-nav-item:active {
        transform: scale(0.92);
    }

    .vsg-bottom-nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    img.vsg-bottom-nav-icon {
        width: 20px;
        height: 20px;
        object-fit: contain;
        line-height: 1;
        transition: transform 0.2s ease, filter 0.2s ease;
    }
    .vsg-bottom-nav-icon-svg {
        width: 20px;
        height: 20px;
    }

    .vsg-bottom-nav-item.is-active {
        color: var(--primary-color, #38bdf8);
        font-weight: 600;
    }

    .vsg-bottom-nav-item.is-active .vsg-bottom-nav-icon {
        transform: translateY(-2px);
        filter: drop-shadow(0 0 6px var(--primary-color, #38bdf8));
    }