/* ==========================================================================
   RESPONSIVE.CSS — última capa de la cascada (cargado automáticamente por
   functions.php si existe, después de todos los demás CSS del sitio)
   ========================================================================== */

/* ==========================================================================
   1. FORMULARIOS ACF EN FRONTEND
   Afecta a: Panel Scouter (crear/editar evento y entrada) y, previsiblemente,
   al formulario de Registro de familias (pendiente de confirmar).
   Los campos ACF configurados con ancho en columnas (%) no se apilan solos
   en pantallas pequeñas — se fuerza aquí para todo el sitio.
   ========================================================================== */
@media (max-width: 640px) {
    .acf-field {
        width: 100% !important;
        float: none !important;
    }
}

/* ==========================================================================
   2. PANEL SCOUTER: filas de botones/acciones sin flex-wrap
   Sin esto, los botones no caben en fila en pantallas estrechas y se
   aprietan o se salen del contenedor.
   ========================================================================== */
.scout-fila-botones-envio,
.scout-fila-acciones-listado {
    flex-wrap: wrap;
}

/* ==========================================================================
   3. MARGEN LATERAL DEL SITIO EN MÓVIL — 12/08/2026, a petición expresa:
   "se desperdicia mucho espacio en los bordes" en móvil.

   Causa: el margen lateral global de WordPress (--wp--style--root--padding-*,
   configurado en Estilos del Editor del Sitio, no en ningún archivo) usa
   clamp(30px, 5vw, 50px) — ese "30px" es un SUELO fijo, así que incluso en
   un móvil muy estrecho nunca baja de 30px por cada lado. Sumado al padding
   propio de las tarjetas de contenido (20px más por lado en muchas
   páginas), se comen más de 100px de un total de ~375-400px de pantalla
   solo en márgenes — de ahí la sensación de espacio desperdiciado.

   No se puede editar ese clamp desde el Editor del Sitio por franja de
   ancho (el control nativo de WordPress no distingue por breakpoint), así
   que se redefine aquí la variable para pantallas estrechas únicamente —
   en el mismo selector ("body") que la define WordPress, para que esta
   redefinición (cargada después, ver cabecera del archivo) gane sin
   necesidad de !important.
   ========================================================================== */
@media (max-width: 480px) {
    body {
        --wp--style--root--padding-left: 14px;
        --wp--style--root--padding-right: 14px;
    }

    /* A petición expresa: quitar del todo el margen sobrante que quedaba
       (la propia tarjeta de contenido ya tiene su propio padding interno
       para que el texto no toque el borde, así que aquí no hace falta
       ninguno adicional). */
    .has-global-padding {
        padding-left: 0;
        padding-right: 0;
    }

    /* Mismo motivo, otro sitio: los paneles de Secretaría y Gestión de
       Roles traen su propio "padding: 25px" fijo puesto en línea en el
       PHP (inc/shortcode-panel-secretaria.php e
       inc/shortcode-panel-gestion-roles.php) — 25px a cada lado, sumados
       al resto de márgenes, se comían buena parte de un móvil estrecho
       (visto el 12/08/2026). !important obligatorio: un estilo en línea
       sin !important no se puede ganar de otra forma desde una hoja de
       estilos externa. */
    .panel-secretaria-scout,
    .panel-roles-scout {
        padding: 0 !important;
    }

    /* Una tercera capa, alrededor de las dos anteriores: la "tarjeta"
       blanca con borde y esquinas redondeadas que envuelve el contenido
       en las páginas de Admin (viene de la plantilla de zona, bloque
       Grupo con borde) — trae sus propios 20px fijos a cada lado
       (var(--wp--preset--spacing--30)), que sumados a las otras dos
       capas dejaban muy poco ancho útil en un móvil estrecho (visto el
       12/08/2026). Se identifica por su combinación de clases
       (borde + fondo base + "has-background" a la vez), no hay una clase
       propia más sencilla puesta a mano. */
    .has-border-color.has-base-background-color.has-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}