/* ========================================================================
   MÓVIL COMPACTO — cabecera y filtros iguales en todas las páginas
   ------------------------------------------------------------------------
   Pedido 2026-09-15: en celular, las páginas a las que llevan los botones
   de la portada (videos, blog, anuncios, registro, login) tenían cabeceras
   de 150–300px con botones de 41–43px y filtros de 300+px, mientras la
   portada ya había quedado en 144px. Esta hoja las estandariza a la misma
   medida que la portada:
     - logo de 26px + nombre 1.2rem, en una fila
     - botones en grilla de 2 por fila, 32px de alto; si sobra uno impar
       ocupa la fila entera (igual que "Iniciar Sesión" en la portada)
     - filtros compactos, de a dos por fila, controles de ~34px
   SOLO aplica por debajo de 769px: en desktop no cambia absolutamente nada
   (pedido expreso). Se carga DESPUÉS de las demás hojas de cada página y
   usa !important + selectores con "body" delante porque las reglas que
   pisa (responsive-enhancements.css y los <style> inline de cada página)
   también usan !important.
   Páginas que la incluyen: videos.php, blog.php, blog-post.php,
   tramperas-anuncios.html, registro.html, login.html.
   ======================================================================== */
@media (max-width: 768px) {

    /* ---------- Cabecera ---------- */
    body .header,
    body .header.header--full-width {
        padding: 0.15rem 0 !important;
        /* auto, NO 0: en tramperas-anuncios.html el body es flex-column y el
           header es un ítem flex; con min-height:0 el algoritmo flex lo
           encogía a 5px de alto y los botones quedaban flotando sobre el
           contenido. Con auto conserva el alto de su contenido. */
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }

    body .header .header__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        padding: 0 0.75rem !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body .header .header__logo {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .header .header__logo-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        text-decoration: none !important;
    }

    body .header .header__logo-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body .header .header__logo-icon svg {
        width: 100% !important;
        height: 100% !important;
    }

    body .header .header__brand,
    body .header .header__title {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* Menú hamburguesa (videos.php lo trae): no hace falta, los botones
       entran en la grilla. */
    body .header .mobile-menu-toggle {
        display: none !important;
    }

    /* Botones del nav: grilla de 2 por fila */
    body .header .header__nav,
    body .header .anuncios-header-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
    }

    body .header .header__nav > a,
    body .header .header__nav > button,
    body .header .header__nav > .btn,
    body .header .anuncios-header-bar > a,
    body .header .anuncios-header-bar > button,
    body .header .anuncios-header-bar > .btn,
    body .header #publicarBtn /* id: la página lo fija a 42px y 50% con !important */ {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.42rem 0.6rem !important;
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        flex: none !important;
    }

    /* Un botón impar al final ocupa la fila entera */
    body .header .header__nav > :last-child:nth-child(odd),
    body .header .anuncios-header-bar > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    /* Anuncios: la página reordena los botones con "order" (Publicar 1,
       Registro 2, Iniciar 3, buscador 4, carrito 5, Inicio 6) para su
       propio layout flex; en la grilla eso deja huecos. Orden del HTML:
       buscador, Publicar, Registro, Iniciar Sesión, carrito, Inicio. */
    body .header .anuncios-header-bar > *,
    body .header #publicarBtn {
        order: 0 !important;
    }

    /* Anuncios: el buscador va solo en su fila, y "Inicio" (último, par)
       también en fila entera para que no quede medio hueco. */
    body .header .anuncios-header-bar > .anuncios-search,
    body .header .anuncios-header-bar > .btn--home {
        grid-column: 1 / -1 !important;
    }

    body .header .anuncios-header-bar > .anuncios-search {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    body .header .anuncios-header-bar > .anuncios-search input {
        padding: 0.4rem 0.5rem !important;
        font-size: 16px !important; /* evita el zoom de iOS */
        min-height: 0 !important;
        line-height: 1.2 !important;
    }

    /* ---------- Filtros (videos.php) ---------- */
    body .filters-section {
        padding: 0.5rem 0.75rem !important;
        margin: 0 !important;
    }

    body .filters-section .filters-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem 0.5rem !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        align-items: end !important;
    }

    body .filters-section .filter-group {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    body .filters-section .filter-label,
    body .filters-section .filter-group label {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        margin: 0 0 0.15rem !important;
    }

    body .filters-section .filter-select,
    body .filters-section select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0.4rem 0.5rem !important;
        font-size: 16px !important; /* evita el zoom de iOS */
        line-height: 1.2 !important;
        border-radius: 8px !important;
    }

    body .filters-section .btn-filter {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
    }

    body .filters-section .filters-container > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    /* ---------- Filtro de ubicación (tramperas-anuncios.html) ----------
       Mismo bloque .location-filter que la portada (categoría, país,
       ciudad, distrito, Filtrar) y misma solución que allá: de a dos por
       fila, controles de ~34px. Igual al bloque de inicio-3-columnas.css
       pero sin el prefijo .tres-columnas-wrap (esta página no lo tiene). */
    body .location-filter {
        padding: 0.5rem 0.6rem !important;
        margin: 0.5rem auto !important;
        gap: 0.4rem !important;
        max-width: 100% !important;
    }

    body .location-filter .filter-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem 0.5rem !important;
        width: 100% !important;
        align-items: end !important;
    }

    body .location-filter .filter-group,
    body .location-filter .category-filter-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        flex: none !important;
    }

    body .location-filter .filter-group label,
    body .location-filter .filter-label {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        margin: 0 0 0.15rem !important;
    }

    body .location-filter select,
    body .location-filter .filter-select,
    body .location-filter input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0.4rem 0.5rem !important;
        font-size: 16px !important; /* evita el zoom de iOS */
        line-height: 1.2 !important;
        border-radius: 8px !important;
    }

    body .location-filter .category-filter-btn,
    body .location-filter .filter-button {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
    }

    body .location-filter .filter-container > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}