/* ==========================================================================
   COMPONENTE: FORMULARIOS DEL PANEL SCOUTER (Frontend)
   Archivo: /css/backend-form-edicion-post.css
   Cubre: Crear/Editar Evento, Crear/Editar Entrada, Mis Publicaciones,
   introducción del panel — todo lo que usa .scout-formulario-wrapper
   ========================================================================== */

/* ==========================================================================
   1. CONTENEDOR TIPO TARJETA
   ========================================================================== */
.scout-formulario-wrapper {
    /* Sin borde/radio/sombra a propósito: en esta plantilla (página normal
       con el shortcode del panel) el blanco debe encajar recto con la
       cabecera y el pie, igual que en la vista de "ver evento". Lo que
       aporta la sensación de tarjeta aquí es el bloque gris de dentro
       (.acf-campos-personalizados), no este contenedor exterior.

       Sin max-width a propósito: el ancho lo decide la plantilla de
       Gutenberg que envuelve a esta página (su propio "contentSize"), no
       esta clase — así cada tipo de página controla su ancho por
       separado, sin arrastrar a las demás si cambia. */
    background-color: #ffffff;
    /* Relleno lateral recortado (19/08/2026, a petición expresa: "hay un
       aire desmesurado a los lados... el contenido está más estrecho que
       en la vista"). Antes 30px en los 4 lados: sumado al 0.5rem (8px)
       propio de ".acf-campos-personalizados" de dentro, el editor de
       Contenido acababa ~80px más estrecho por cada lado que el mismo
       contenido ya publicado (comprobado en vivo: 996px en el editor
       frente a 1066px en la ficha pública del evento, con el mismo ancho
       de plantilla de fondo). Se deja el vertical igual (30px, separa de
       lo de arriba/abajo, no es lo que se pidió tocar) y se recorta solo
       el lateral a --espacio-sm (8px, la escala de espaciado del tema,
       style.css) — el mismo valor que ya usa el gris de dentro, para no
       quedar del todo a ras de borde. */
    padding: 30px var(--espacio-sm);
    /* Sin margen superior (19/08/2026, a petición expresa): el menú
       (nav.menu-principal-nuevo, css/navegacion.css) ya pone su propio
       margin-bottom:20px de separación respecto a lo que venga debajo —
       este margen de 1.5rem (24px) se sumaba a ese, duplicando el hueco
       de "menú → contenido" frente al de "cabecera → menú" y dejando el
       menú visualmente descentrado entre los dos, en TODAS las páginas
       que usan este contenedor (Crear/Editar Evento, Kraal, Secretaría,
       Roles, Tienda...). El margen inferior se mantiene, para conservar
       la separación respecto al pie de página. */
    margin: 0 auto 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Cabecera de Editar Evento/Editar Noticia (19/08/2026). Dos versiones en
   el mismo día, a peticiones sucesivas:
   1ª — el título ("Editar Evento") vivía aquí, centrado con un grid de 3
   columnas junto a "← Ir al Listado".
   2ª (la actual) — el título se trasladó a la primera fila del cuadro del
   evento/noticia (".scout-linea-estado-evento .scout-titulo-mini", más
   abajo, en pequeño), así que aquí ya no queda ningún elemento que
   centrar — el hueco que dejó libre el título se ocupa con la fila de
   botones de acción (Guardar/Publicar-Borrador/Cancelar/Eliminar,
   duplicados aquí y también al final del formulario, para no obligar a
   subir/bajar en un formulario largo). Flexbox simple en vez del grid de
   3 columnas de la versión anterior — ya no hace falta centrar nada. */
.scout-cabecera-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.scout-fila-acciones-cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* Mismo motivo que ".scout-contenedor-boton-cancelar:empty" más abajo:
   el placeholder de la instancia de ARRIBA del botón Cancelar/Reactivar
   (backend-form-edicion-post.js) no debe dejar hueco visible antes de
   que JS lo rellene, ni si un Autor sin permiso para cambiar el estado
   lo deja vacío del todo. */
.scout-contenedor-boton-cancelar-top:empty {
    display: none;
}

/* Título pequeño en la primera fila del cuadro (19/08/2026, a petición
   expresa: "en la primera fila del cuadro del evento, como antes, con
   fuente pequeña, la mitad que ahora") — la mitad de los 26px de
   .sw-titulo-pagina (style.css), que es de donde salió el título antes
   de moverse aquí. Convive en la misma fila flex que los badges de
   estado (".scout-linea-estado-evento"), como un dato más de esa fila,
   no como un título de página aparte. */
.scout-titulo-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #555555;
}

/* ==========================================================================
   "CADA PARTE SU CAJA, NINGUNA CAJA QUE LO ENGLOBE TODO" (20/08/2026, a
   petición expresa: "vamos a cambiar el diseño para que sea más acorde al
   diseño de los eventos en modo VER... cada parte tiene su caja y ya").
   Mismo criterio que la ficha pública del evento (ver "3 CAJAS EN VEZ DE 1
   ENVOLVIENDO A 2" en css/shortcode-datos-evento.css): Editar Evento/
   Editar Noticia comparten la MISMA plantilla de página genérica que el
   resto de páginas del Panel Scouter (Secretaría, Roles, Tienda...), cuyo
   Grupo exterior ("tarjeta blanca" del Editor del Sitio) pinta su propio
   fondo/borde — antes esa única caja envolvía TODO (línea de estado +
   botones + formulario ACF, que ya tenía su propia caja gris de siempre),
   dejando una caja dentro de otra.
   ========================================================================== */

/* 1. Caja exterior neutralizada — SOLO la que de verdad envuelve a
   ".scout-cabecera-editor" (":has()", para no tocar el resto de páginas
   del Panel Scouter que comparten la misma plantilla/clases genéricas de
   Gutenberg pero deben seguir viéndose como una única tarjeta, p.ej.
   Secretaría o Roles — aquí no se ha pedido cambiar esas). Cubre tanto
   Editar Evento como Editar Noticia, que usan idéntica estructura. */
.wp-block-group.has-base-background-color:has(.scout-cabecera-editor) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 0. Contenedor exterior (".scout-formulario-wrapper") SIN fondo ni
   padding lateral propios, SOLO en Editar Evento/Editar Noticia
   (":has(.scout-cabecera-editor)", mismo marcador que el punto 1 de
   arriba, para no afectar a las demás páginas que comparten esta misma
   clase — Mis Publicaciones, Secretaría, Roles, Tienda... — que siguen
   necesitando su propio fondo blanco/padding). 20/08/2026, a petición
   expresa: "aún hay un fallo... las 3 cajas... están aún dentro de una
   caja blanca sin borde... que las 3 cajas tengan la misma anchura que la
   cabecera". El "padding" lateral de 8px de la regla base (más abajo, "1.
   CONTENEDOR TIPO TARJETA") dejaba las 3 cajas de dentro 16px más
   estrechas que la cabecera (1084px vs. 1100px, comprobado en vivo) — sin
   padding lateral aquí, cada caja de dentro ocupa el ancho completo. El
   padding vertical (30px) SÍ se mantiene, separa del menú/pie. */
.scout-formulario-wrapper:has(.scout-cabecera-editor) {
    background-color: transparent;
    padding: 30px 0;
}

/* 2. Caja nueva para "línea de estado + botones" — mismo lenguaje visual
   que las cajas de la ficha pública del evento (fondo blanco, borde
   #D1D5DB, mismo radio). El formulario ACF de debajo ya tenía su propia
   caja (".acf-campos-personalizados", más abajo en este archivo) — no
   hace falta tocarla, solo esta nueva envolviendo lo de arriba. */
.scout-caja-info-acciones {
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: var(--radio-tarjeta);
    padding: 16px;
    margin: 0 0 1.5rem;
    box-sizing: border-box;
}
/* Sin margen propio en el último elemento de dentro — si no, se suma al
   padding de la caja y deja más aire abajo que a los lados. */
.scout-caja-info-acciones .scout-cabecera-editor {
    margin-bottom: 0;
}
/* Misma caja reutilizada para los botones de ABAJO (20/08/2026, a
   petición expresa: "pon la cajita también a los botones de abajo") —
   ".scout-fila-acciones-guardar" trae su propio "margin-top:20px" (pensado
   para cuando iba suelto, separándolo de la caja de campos de encima); aquí
   dentro se anula, el padding de la caja ya separa el contenido de su borde. */
.scout-caja-info-acciones .scout-fila-acciones-guardar {
    margin-top: 0;
}
/* Caja de abajo separada de la de campos ACF de encima (20/08/2026): esta
   misma clase, arriba, ya lleva "margin: 0 0 1.5rem" (solo abajo, porque
   ahí es la PRIMERA caja de la página) — aquí, al ser la ÚLTIMA, hace
   falta también separación por ARRIBA respecto al formulario. */
.acf-campos-personalizados + .scout-caja-info-acciones {
    margin-top: 1.5rem;
}

.scout-formulario-wrapper h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--scout-global-oscuro);
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
}

/* Título + "Volver a Panel de Kraal" en la misma fila (21/08/2026, a
   petición expresa) — SOLO en los 3 formularios de CREACIÓN
   (".formulario-creacion"). Clase propia en vez de reutilizar
   ".scout-cabecera-editor" (Editar Evento/Noticia): esa clase dispara
   varios ":has(.scout-cabecera-editor)" en este mismo archivo que
   neutralizan el fondo/padding de la caja exterior — efecto pensado solo
   para Editar, que aquí habría quitado sin querer el blanco/padding que
   sí necesitan estas 3 páginas. */
.scout-cabecera-crear {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.scout-cabecera-crear .panel-admin-titulo {
    margin: 0 !important;
}
@media (max-width: 640px) {
    .scout-cabecera-crear {
        flex-direction: column;
        align-items: stretch;
    }
}

.scout-formulario-wrapper h3 {
    color: var(--scout-global-oscuro);
}

.scout-instrucciones {
    color: var(--scout-global-texto);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. CAJAS DE AVISO (.scout-alerta + variantes)
   ========================================================================== */
.scout-alerta {
    padding: 14px 18px;
    border-radius: var(--radio-aviso);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    border-left: 4px solid transparent;
}

.scout-alerta-error {
    background-color: #FEE2E2;
    color: #991B1B;
    border-left-color: #DC2626;
}

.scout-alerta-exito {
    background-color: #D1FAE5;
    color: #065F46;
    border-left-color: #10B981;
}

.scout-alerta-info {
    background-color: #E0F2FE;
    color: #0369A1;
    border-left-color: #0284C7;
}

/* ==========================================================================
   3. CAMPOS ACF (dentro de .acf-campos-personalizados)
   ========================================================================== */

.acf-campos-personalizados {
    font-size: 0.95rem;
    background-color: var(--color-metadatos);
    border-radius: var(--radio-tarjeta);
    /* Marco leve (19/08/2026, a petición expresa) — "box-shadow" en vez de
       "border" para no desplazar el contenido interior 1px (mismo truco ya
       usado en la cabecera/pie, css/navegacion.css): un "border" real
       sumaría a la caja, un box-shadow no. Mismo gris suave que esos dos
       sitios (#D1D5DB). */
    box-shadow: 0 0 0 1px #D1D5DB;
    overflow: hidden;
    padding: 0.5rem;
    margin: 1.5rem 0;
}

/* Sin caja gris en los 3 formularios de CREACIÓN (Evento/Noticia/Aviso,
   21/08/2026, a petición expresa: "hay una caja con fondo gris suave que
   es innecesaria") — a diferencia de Editar, aquí es la ÚNICA caja de la
   página (sin ".scout-caja-info-acciones" de estado/botones alrededor),
   así que ya no aporta nada agruparla aparte: los campos quedan
   directamente sobre el blanco de ".scout-formulario-wrapper". Solo
   afecta a estas 3 páginas (marcador ".formulario-creacion" puesto a
   mano en su wrapper) — Editar Evento/Noticia/Aviso conservan la caja,
   no se ha tocado ahí. */
.formulario-creacion .acf-campos-personalizados {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.acf-campos-personalizados .acf-field {
    margin-bottom: 1.4rem;
}

.acf-campos-personalizados .acf-label label {
    display: block;
    font-weight: 600;
    color: var(--scout-global-oscuro);
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* "Sección" (18-19/08/2026, a petición expresa: "la etiqueta es demasiado
   grande y la fuente también" / "Inicio de Ronda... no es la misma fuente
   que Grupo"): el selector de taxonomía (select2) trae su propio tamaño
   Y GROSOR de fábrica (16px, peso 300) para el término ya elegido (el
   "chip" con la "×") y el buscador — distinto de los 14px/peso 400 de un
   <input> de texto normal como "Título". "!important" hace falta de
   verdad aquí (comprobado en vivo, 19/08/2026): el CSS propio de select2
   tiene una cadena de selectores más específica que la de aquí abajo, y
   sin "!important" gana él y esta regla no se nota pese a estar bien
   escrita.
   ".seccion_post" (Noticia) se suma aquí el 23/08/2026 — llevaba el mismo
   fallo sin corregir, solo se había arreglado antes en Evento. */
.acf-field[data-name="seccion_evento"] .select2-selection__choice,
.acf-field[data-name="seccion_evento"] .select2-search__field,
.acf-field[data-name="seccion_post"] .select2-selection__choice,
.acf-field[data-name="seccion_post"] .select2-search__field {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Caja de "Sección" del mismo alto que la de "Título" (19/08/2026, a
   petición expresa) — select2 trae de fábrica más aire interno que un
   <input> de texto normal (29.6px de alto): el "chip" ya elegido lleva
   5px de margen superior propio, y la caja no tiene una altura mínima
   fijada, así que crece más de lo necesario. Se recorta el margen del
   chip y se fija una altura calcada a la de "Título".
   Centrado vertical con flexbox (en vez de calcular a mano el margen
   exacto de arriba/abajo, que dejó el chip pegado abajo la primera vez)
   — así se recentra solo aunque cambie el contenido, sin más ajuste
   milimétrico. */
.acf-field[data-name="seccion_evento"] .select2-selection--multiple,
.acf-field[data-name="seccion_post"] .select2-selection--multiple {
    height: 30px !important;
    min-height: 30px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}
.acf-field[data-name="seccion_evento"] .select2-selection__rendered,
.acf-field[data-name="seccion_post"] .select2-selection__rendered {
    padding-top: 0 !important;
}

/* Persiana desplegable de "Sección" (Evento y Noticia) al abrirla para
   elegir — 23/08/2026, a petición expresa: "la persiana que se abre tiene
   un tamaño de fuente desmesuradamente grande, y las filas también son
   muy largas". Sin scopear a ".acf-field[data-name=...]" a propósito: a
   diferencia del "chip"/buscador de arriba, select2 NO anida esta lista
   dentro del campo — la engancha suelta directamente en el <body>
   (comprobado en vivo), así que un selector con ".acf-field" delante
   nunca la alcanzaría. Selector genérico ".select2-results__option" sin
   más — seguro en este archivo porque solo se carga en los formularios
   de edición del backend, donde select2 no se usa para nada más que
   estos desplegables de taxonomía. */
.select2-results__option {
    font-size: 14px !important;
    padding: 6px 10px !important;
    line-height: 1.4 !important;
}

/* "Sección" más pequeña, sin estirarse al 100% como "Título" (21/08/2026,
   a petición expresa: "que sección sea más pequeño como siempre") — SOLO
   en los 3 formularios de CREACIÓN (".formulario-creacion"). Select2 fija
   el ancho con un "style" en línea calcado del <select> original
   (comprobado en vivo: "width: 100%" puesto por JS al iniciar) — hace
   falta "!important" para ganarle, igual que ya pasaba con el
   tamaño de letra de estos mismos campos, más arriba. */
.formulario-creacion .acf-field[data-name="seccion_evento"] .select2-container,
.formulario-creacion .acf-field[data-name="seccion_post"] .select2-container {
    width: auto !important;
    min-width: 220px !important;
}
.acf-field[data-name="seccion_evento"] .select2-selection__choice,
.acf-field[data-name="seccion_post"] .select2-selection__choice {
    margin-top: 0.7px !important;
}

.acf-campos-personalizados .acf-required {
    color: #dc2626;
    margin-left: 2px;
}

.acf-campos-personalizados .description {
    font-size: 0.8rem;
    color: var(--scout-global-texto);
    margin-top: 4px;
}

.acf-campos-personalizados input[type="text"],
.acf-campos-personalizados input[type="email"],
.acf-campos-personalizados input[type="number"],
.acf-campos-personalizados input[type="date"],
.acf-campos-personalizados input[type="time"],
.acf-campos-personalizados textarea,
.acf-campos-personalizados select {
    width: 100%;
    font-size: 16px; /* evita el zoom automático de iOS, mismo criterio que Inscripción */
    padding: 10px 14px;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    background-color: #ffffff;
    color: var(--scout-global-oscuro);
    font-family: inherit;
    box-sizing: border-box;
    transition: var(--transicion-suave);
}

.acf-campos-personalizados textarea {
    min-height: 120px;
    resize: vertical;
}

/* "Fecha de publicación"/"Fecha de caducidad" (Editar/Crear Noticia): caja
   del ancho justo para una fecha (22/08/2026, a petición expresa: "hazlos
   con una casilla acorde a su longitud") — sin esto heredaban el
   "width:100%" de la regla general de arriba, pensada para campos de
   texto largo, y quedaban tan anchas como el título o el contenido para
   mostrar solo "20/08/2026". Selector real comprobado en vivo (F12): el
   "date_picker" de ACF NO es un "<input type=date>" nativo como se podría
   suponer — es un "<input type=hidden>" con el valor real más un
   "<input type=text class=hasDatepicker>" visible para el selector de
   jQuery UI, que es justo el que hereda "width:100%" de la regla de
   arriba (coincide con "input[type=text]"). No se toca el resto de
   campos de fecha del sitio (Evento: fecha_de_inicio/fecha_de_fin, dentro
   de su propia rejilla en ".scout-bloque-datos-evento") — solo estos dos,
   los únicos mencionados. */
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] input.hasDatepicker,
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] input.hasDatepicker {
    width: auto;
    min-width: 150px;
}

/* Previsualización de "Imagen destacada" (19/08/2026, a petición
   expresa): un 30% más pequeña (150px de fábrica del tamaño "thumbnail"
   de WordPress → 105px) y metida en una caja con borde y esquinas
   redondeadas, igual que el resto de campos de este formulario (mismas
   variables que usan los input de texto de arriba). "!important" porque
   ACF pone el tamaño como estilo en línea propio (max-width/max-height),
   que gana a cualquier CSS externo sin él. */
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_evento"] .image-wrap,
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_post"] .image-wrap {
    max-width: 105px !important;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    overflow: hidden;
    display: inline-block;
}
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_evento"] .image-wrap img,
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_post"] .image-wrap img {
    max-width: 105px !important;
    max-height: 105px !important;
    display: block;
}

/* Ficha del Aviso ("Color/Urgencia" + "Fecha de inicio" + "Fecha de fin"):
   sin agrupador ".scout-bloque-formulario" (ese lo añade
   backend-form-edicion-post.js solo para los campos de evento/noticia,
   este grupo de ACF no pasa por ahí) — sin esto, ACF coloca estos 3
   campos con su sistema nativo de "float + width%", que deja los campos
   pegados entre sí y desalineados verticalmente en cuanto una etiqueta o
   instrucción ocupa más de una línea que la de al lado (22/08/2026,
   fallo real reportado en Crear Nuevo Aviso).

   CORREGIDO el 22/08/2026 (dos intentos anteriores no hacían NADA, ni
   ganando ni perdiendo la cascada — comprobado con F12: el selector no
   aparecía ni tachado en Styles, señal de que no encajaba con ningún
   elemento real). La suposición de partida era al revés de como ACF monta
   el DOM de verdad: ".acf-campos-personalizados" (el div que pone
   "html_before_fields") NO contiene un ".acf-fields" propio dentro — es
   AL REVÉS, ACF pone ".acf-fields" por FUERA (envolviendo TODO el
   formulario) y ".acf-campos-personalizados" queda dentro de ese, como
   padre DIRECTO de cada ".acf-field" (título, activo, color, fechas...).
   Confirmado con el HTML real de la página (F12 → Elements). Por eso
   ".acf-campos-personalizados .acf-fields:has(...)" no encontraba nada:
   pedía un ".acf-fields" DENTRO de ".acf-campos-personalizados", que no
   existe. El selector correcto agrupa por ":has()" sobre el propio
   ".acf-campos-personalizados" (usando ">" con los data-name para no
   afectar a otros formularios ni a nietos). Localizado así en vez de con
   una clase nueva en el wrapper porque "color_aviso" es exclusivo del
   grupo ACF de "aviso" — no hay riesgo de tocar otro formulario.
   Arregla Crear Y Editar Aviso a la vez (mismo grupo de campos).

   Al convertir TODO ".acf-campos-personalizados" en grid, sus otros hijos
   directos (el título nativo "_post_title" y "Activo") necesitan
   "grid-column:1/-1" para seguir ocupando su fila propia entera, en vez
   de colarse como una columna más del grid de 3. El campo oculto
   "_validate_email" (honeypot anti-spam de ACF) no hace falta tocarlo:
   trae su propio "display:none!important" en línea, así que un elemento
   grid con "display:none" no ocupa hueco ninguno.

   Alineación vertical de los 3 controles: cada campo en columna flex con
   su ".acf-input" empujado al fondo ("margin-top:auto") + el grid en
   "align-items:stretch" — así los 3 controles quedan a la misma altura
   por ABAJO sin importar que "Fecha de fin" tenga una instrucción de 3
   líneas y las otras dos solo 2. */
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem 20px !important;
    align-items: stretch !important;
}
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field {
    width: auto !important;
    margin-bottom: 0 !important;
    border-left: none !important;
}
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="color_aviso"],
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="fecha_inicio"],
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="fecha_fin"] {
    display: flex !important;
    flex-direction: column !important;
}
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="color_aviso"] > .acf-input,
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="fecha_inicio"] > .acf-input,
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="fecha_fin"] > .acf-input {
    margin-top: auto !important;
}
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="_post_title"],
.acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) > .acf-field[data-name="aviso_activo"] {
    grid-column: 1 / -1 !important;
}
@media (max-width: 640px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="color_aviso"]) {
        grid-template-columns: 1fr !important;
    }
}

.acf-campos-personalizados input:focus,
.acf-campos-personalizados textarea:focus,
.acf-campos-personalizados select:focus {
    outline: none;
    border-color: var(--scout-global-base);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scout-global-base), transparent 85%);
}

.acf-campos-personalizados input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--scout-global-base);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
}

/* --- Checkboxes (true_false): texto a la derecha, no encima.
       Clase añadida por backend-form-edicion-post.js ("scout-checkbox-inline")
       sobre el .acf-field completo — reordena su propio .acf-label (el
       título del campo, ej. "Activar inscripción") y .acf-input (la casilla)
       en una fila, casilla primero. --- */
.scout-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scout-checkbox-inline .acf-label {
    order: 2;
    margin-bottom: 0;
}

.scout-checkbox-inline .acf-label label {
    margin-bottom: 0;
}

.scout-checkbox-inline .acf-input {
    order: 1;
}



/* ==========================================================================
   4. AJUSTE EN MÓVIL: menos padding en la tarjeta para no robar espacio útil
   ========================================================================== */
@media (max-width: 640px) {
    .scout-formulario-wrapper {
        padding: 16px 0;
    }

    /* Un campo por línea en móvil: sea cual sea su columna/posición en
       escritorio, en móvil todos ocupan el ancho completo de la caja. */
    .scout-bloque-formulario {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1rem;
    }

    .acf-campos-personalizados .scout-bloque-formulario .acf-field {
        grid-column: 1 / -1 !important;
    }

    /* Formularios que NO pasan por .acf-campos-personalizados (los de
       Tienda: Crear/Editar Campaña y Artículo, que llaman a acf_form()
       sin html_before_fields/html_after_fields) se quedan con el padding
       de FÁBRICA de ACF (16px en los 4 lados, ".acf-fields > .acf-field"
       — no es CSS nuestro, viene del propio plugin) — se recorta el
       lateral aquí, dejando el vertical para separar visualmente cada
       campo. */
    .scout-formulario-wrapper .acf-fields > .acf-field {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Tooltip de ayuda (18/08/2026, a petición expresa: "en móvil sale muy
       a la izquierda y no se ve completo"). En escritorio el icono "?"
       vive pegado al borde derecho de una columna estrecha, así que
       "right:0" (ver regla base más arriba) lo mantenía dentro de esa
       columna. En móvil, "Estado del evento" pasa a ocupar TODO el ancho
       (regla de arriba, "un campo por línea"), así que el icono ya no
       está cerca del borde derecho de nada — sigue el flujo normal justo
       detrás del texto de la etiqueta, más hacia la izquierda. Con
       "right:0" el tooltip (220px) se extendía hacia la izquierda DESDE
       ahí y se salía por el borde izquierdo de la pantalla. Centrado
       sobre el propio icono en vez de anclado a su derecha, y más
       estrecho (calc(100vw - 32px), nunca más ancho que la pantalla menos
       un margen de aire), se mantiene siempre dentro de la ventana sea
       cual sea la posición del icono en la fila. */
    .scout-icono-ayuda::after {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        max-width: calc(100vw - 32px);
    }
}

/* ==========================================================================
   5. EVENTO — AGRUPACIÓN LÓGICA DE CAMPOS (crear/editar evento)
   La agrupación visual sigue la dependencia condicional real de ACF
   (ver acf-json/group_6a172ada2923a.json "Datos de Evento"):
   - primer_dia_de_inscripcion / ultimo_dia_de_inscripcion dependen de
     activar_inscripcion.
   - coste / tipo_de_pago / primer_dia_de_pago / ultimo_dia_de_pago /
     pago_universal dependen TODOS de activar_sistema_de_pago (por eso
     pago_universal vive en el bloque de pago, no en "Otros").
   - activar_camiseta / activar_comida_favorita NO dependen de nada, así
     que van en su propio bloque independiente.
   Tipo de pago/Último
   día de pago debajo de Último día de inscripción.
   ========================================================================== */

/* --- Caja por bloque: envoltura añadida por backend-form-edicion-post.js
       agrupando los campos de cada bloque (Datos del evento / Inscripción /
       Pago / Otros) con CSS Grid. Se usa Grid en vez de floats +
       porcentajes: el "gap" separa las columnas sin necesidad de restarle
       ancho a cada campo, así que no hay redondeos de píxel que puedan
       romper el encaje de una fila (lo que sí pasaba con floats). Si el JS
       no llega a ejecutarse, los campos simplemente caen en columna única
       (comportamiento por defecto de .acf-field).
       SIN aspecto de tarjeta propia (19/08/2026, a petición expresa: "hay
       unas cajas por partes que no son necesarias y recargan") — antes
       cada bloque llevaba su propio fondo/borde, anidado dentro del fondo/
       borde que YA pone ".acf-campos-personalizados" por fuera; dos
       marcos y dos fondos grises uno dentro de otro no aportaban nada y
       recargaban la vista. Se queda solo la parte funcional (el grid que
       ordena los campos en filas), sin fondo ni borde propios — los
       campos de las 4 secciones quedan sueltos dentro de la única caja
       exterior, igual que ya pasa en Editar Noticia (que nunca tuvo esta
       agrupación). --- */
.scout-bloque-formulario {
    margin: 1.5rem 0;
    display: grid;
    gap: 1.0rem 20px;
    align-items: start;
}

.scout-bloque-formulario .acf-field {
    margin-bottom: 0; /* el "gap" del grid ya separa las filas, no hace falta sumar margen */
    /* ACF pinta cada campo con su propio style="width:XX%" (20/40/60/80...,
       heredado de su configuración). Dentro de una celda de grid, ese % se
       calcularía sobre el ancho YA reducido de la celda, no sobre la caja
       completa — doblando el achique. Lo anulamos: el ancho real lo decide
       solo grid-template-columns + grid-column de más abajo. */
    width: auto !important;
}

/* Quita la línea vertical clara ("#eee") que ACF pinta de fábrica entre
   dos campos consecutivos con ancho propio (".acf-field[data-width] +
   .acf-field[data-width]") — pensada para cuando ACF coloca los campos
   pegados unos a otros por flotación/flex sin hueco entre ellos. Aquí no
   pinta nada: el "gap" del grid de arriba ya separa las columnas con
   20px de aire, así que esa línea quedaba flotando sola en mitad del
   hueco vacío, sin tocar ningún campo (detectado el 18/08/2026 al
   añadir "Estado del evento" junto a "Título" — visto por primera vez
   ahí, pero la regla de ACF afecta a CUALQUIER pareja de campos con
   ancho de todo este formulario, no solo a esos dos). */
.scout-bloque-formulario .acf-field[data-width] + .acf-field[data-width] {
    border-left: none;
}

/* --- Bloque "Datos del evento": rejilla de 5 columnas (los anchos de ACF
       son múltiplos de 20%: 20/20/60, 20/80...) --- */
.scout-bloque-datos-evento {
    grid-template-columns: repeat(5, 1fr);
}

.scout-bloque-datos-evento .acf-field[data-name="seccion_evento"],
.scout-bloque-datos-evento .acf-field[data-name="contenido_evento"] {
    grid-column: 1 / -1;
}

/* "Imagen destacada": etiqueta a la izquierda + imagen a la derecha, en
   vez de apiladas verticalmente (19/08/2026, a petición expresa: "que el
   texto quede sobre la columna de Cód. de actividad... y la foto sobre
   Lugar de la actividad" — la fila de justo debajo). En vez de acortar el
   campo a 1 sola columna de la rejilla exterior (perdería la fila entera
   para la etiqueta larga), este campo se convierte en su PROPIA rejilla
   interna de 5 columnas con el mismo "column-gap" que la exterior — así
   ".acf-label" (columna 1, igual que "Cód. de actividad") y ".acf-input"
   (columnas 2 a 5, igual que "Lugar de la actividad") quedan perfectamente
   alineados en vertical con la fila de abajo, sin necesidad de CSS
   Subgrid (soporte más reciente, evitado por seguridad). La etiqueta
   larga simplemente pasa a 2-3 renglones dentro de su columna estrecha
   (comportamiento normal de ajuste de texto, sin CSS especial). */
.scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
    align-items: start;
}
.scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] > .acf-label {
    grid-column: 1;
}
.scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] > .acf-input {
    grid-column: 2 / -1;
}

/* "Título" a ancho completo (18/08/2026): antes compartía fila con
   "Estado del evento" (span 4 + span 1), pero ese campo se movió fuera
   de esta caja, a la línea de estado junto al badge de Publicado/
   Borrador (ver ".scout-linea-estado-evento" más abajo) — sin el reparto
   4+1, Título pasa a ocupar toda la rejilla como el resto de campos a
   ancho completo (Sección, Imagen destacada, Contenido). */
.scout-bloque-datos-evento .acf-field[data-name="titulo_evento"] {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------
   "estado_evento" → interruptor (18/08/2026, a petición expresa): el
   desplegable "Normal"/"Cancelado" pasó a ser un campo ACF true_false con
   su interruptor nativo (ver acf-json/group_6a172ada2923a.json, "ui":1)
   — aquí solo se recolorea. El mecanismo real de ACF para marcar el
   estado "encendido" es la clase ".acf-switch.-on" (añadida por su
   propio JS al hacer clic, NO por ":checked" de CSS puro — se comprobó
   en vivo el 18/08/2026 que no existe ninguna regla ":checked" en las
   hojas de ACF, así que hay que enganchar a esa clase). El texto de cada
   lado ("Cancelado" a la izquierda, "Normal" a la derecha, en ese orden
   fijo del propio HTML de ACF) se queda siempre visible en el lado que
   NO tapa la píldora blanca — por eso los dos (".acf-switch-on"/"-off")
   necesitan texto blanco: cualquiera de los dos puede quedar sobre fondo
   de color según el estado.
   Recoloreado de verde/rojo a gris/negro (18/08/2026, "un poco confuso
   lo del botón verde/rojo"): con dos colores fuertes en ambos extremos,
   el interruptor entero se ve siempre "encendido" (algo de color), sin
   la señal habitual de "gris = neutro / de color = activo" que hace
   evidente un toggle de un vistazo. Además, así queda unido al mismo
   lenguaje visual que ya usa el badge "Cancelado" del listado de "Mis
   Publicaciones" (`.badge-estado-pub.cancelado`, mismo negro/gris
   #1f2937, ver shortcodes-panel-scouter.php) en vez de inventar una
   paleta distinta para el mismo estado en cada sitio. */
/* Sin prefijo de contenedor (18/08/2026, corrección): antes esto iba
   colgado de ".scout-bloque-datos-evento", pero el campo ya no vive ahí
   — se movió a ".scout-linea-estado-evento" (ver más abajo). El color es
   una propiedad del CAMPO, no de la caja donde esté metido en cada
   momento, así que aquí ya no se ata a ningún contenedor concreto — se
   ve igual (gris/negro) esté donde esté. */
.acf-field[data-name="estado_evento"] .acf-switch {
    background: var(--color-estado-inactivo-texto);
    border-color: var(--color-estado-inactivo-texto);
}
.acf-field[data-name="estado_evento"] .acf-switch:hover {
    background: #4b5563;
    border-color: #4b5563;
}
.acf-field[data-name="estado_evento"] .acf-switch.-on {
    background: var(--color-estado-cancelado-fondo);
    border-color: var(--color-estado-cancelado-fondo);
}
.acf-field[data-name="estado_evento"] .acf-switch.-on:hover {
    background: #111827;
    border-color: #111827;
}
.acf-field[data-name="estado_evento"] .acf-switch-on {
    text-shadow: none;
}
.acf-field[data-name="estado_evento"] .acf-switch-off {
    color: #ffffff;
}
.acf-field[data-name="estado_evento"] .acf-switch-slider,
.acf-field[data-name="estado_evento"] .acf-switch.-on .acf-switch-slider {
    border-color: #ffffff;
}

/* Icono de ayuda con tooltip (18/08/2026, a petición expresa: el texto de
   instrucciones de ACF como párrafo fijo descuadraba la fila compartida
   con "Título" — "Seccion" arrancaba mucho más abajo por un lado que por
   otro). Este icono (añadido por backend-form-edicion-post.js) muestra el
   mismo texto en un tooltip que solo ocupa espacio al enfocar/pasar el
   ratón, no en reposo. Clase genérica, no atada a "estado_evento", por si
   hace falta en otro campo más adelante.

   El tooltip se abre hacia ABAJO y pegado al borde DERECHO del icono
   ("top" en vez de "bottom", "right:0" en vez de centrado) a propósito:
   ".acf-campos-personalizados" (el fondo gris que envuelve todo el
   formulario) tiene "overflow:hidden" para recortar las esquinas de sus
   tarjetas — "Estado del evento" vive en la esquina superior derecha de
   esa caja, así que un tooltip que se abriera hacia arriba o centrado se
   saldría del recuadro y quedaría cortado sin avisar. Abriéndolo hacia
   abajo y hacia la izquierda desde el icono se queda siempre dentro. */
.scout-icono-ayuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--scout-global-fondo);
    color: var(--scout-global-base);
    border: 1px solid var(--scout-global-borde);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: middle;
}

.scout-icono-ayuda::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    max-width: 70vw;
    padding: 8px 10px;
    border-radius: var(--radio-boton);
    background-color: var(--scout-global-oscuro);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transicion-suave);
    z-index: 10;
}

.scout-icono-ayuda:hover::after,
.scout-icono-ayuda:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* "Fecha de fin" (18/08/2026) es el campo más a la izquierda de su fila
   (mismo puesto que "Fecha de inicio" en la fila de arriba) — el tooltip
   compartido de arriba se expande hacia la izquierda por defecto
   (pensado para "estado_evento", más centrado en su fila), así que aquí
   se sale de la pantalla por la izquierda y queda cortado. Se invierte
   solo para este campo. */
.acf-field[data-name="fecha_de_fin"] .scout-icono-ayuda::after {
    right: auto;
    left: 0;
}

/* Línea de estado (Publicado/Borrador/Pendiente + última edición +
   interruptor de Cancelado) encima de "Editar Evento" (18/08/2026, a
   petición expresa: la página de edición no decía en qué estado estaba
   el post que se estaba editando; y luego, "para ahorrar una línea",
   todo en una sola fila en vez de en dos). El badge usa los mismos
   nombres de clase y colores que el del listado "Mis Publicaciones"
   (definido inline en shortcodes-panel-scouter.php) — se repite aquí, no
   se comparte el mismo bloque de CSS, porque esta hoja es la que carga
   en esta página; los colores están calcados a mano para que se vean
   igual en los dos sitios.
   El interruptor de "estado_evento" (campo real de ACF) se traslada aquí
   por JS (backend-form-edicion-post.js) desde su posición original junto
   a "Título" — tiene que seguir siendo descendiente del mismo <form>
   para que se guarde, así que esta línea vive DENTRO de
   ".acf-campos-personalizados" (ver "html_before_fields" en
   shortcodes-panel-scouter.php), no antes del formulario. */
/* SOLO información de lectura (19/08/2026, a petición expresa: "cancelar
   evento también es informativo, pero..." — se decidió dejar aquí arriba
   nada más que los badges, sin ningún botón, para no mezclar lectura y
   acción; los botones de Publicar/Borrador y Cancelar/Reactivar se
   movieron junto a "Guardar Cambios del Evento", ver
   ".scout-fila-acciones-guardar" más abajo). Ya no hace falta repartir en
   dos grupos (izquierda/derecha) porque ya no hay nada a la derecha. */
.scout-linea-estado-evento {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.badge-estado-pub { display: inline-flex; align-items: center; line-height: 1; padding: 5px 10px; border-radius: var(--radio-badge); font-size: 0.78rem; font-weight: 700; white-space: nowrap; box-sizing: border-box; }
/* Publicado = Activo, Borrador = Inactivo (20/08/2026, rediseño completo,
   variables --color-estado-* de style.css) — Pendiente se queda fuera a
   propósito (más de los 3 estados que cubre el esquema nuevo). */
.badge-estado-pub.publicado { background: var(--color-estado-activo-fondo); color: var(--color-estado-activo-texto); }
.badge-estado-pub.pendiente { background: #fef3c7; color: #92400e; }
.badge-estado-pub.borrador  { background: var(--color-estado-inactivo-fondo); color: var(--color-estado-inactivo-texto); }
/* Mismo tamaño/color/línea de base que la etiqueta "Estado del evento", y
   el mismo padding vertical que el badge de al lado (antes no tenía
   ninguno, así que su caja era más baja que la del badge y, aun
   centrados los dos por "align-items:center", el texto se veía "más
   arriba" — con la misma altura de caja para los dos, los textos quedan
   a la misma altura de verdad, no solo con los centros geométricos
   coincidiendo). */
.texto-ultima-edicion-form { display: inline-flex; align-items: center; line-height: 1; padding: 5px 0; box-sizing: border-box; font-size: 0.78rem; font-weight: 700; color: #6b7280; }

/* Campo "estado_evento", reubicado en la línea de estado: sin la caja/
   borde propio de un campo ACF normal (aquí desentona, ya no está dentro
   de la rejilla de campos). */
.scout-linea-estado-evento .acf-field[data-name="estado_evento"] {
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
}

/* Botón "Cancelar evento"/"Reactivar evento" en vez del interruptor nativo
   (18/08/2026, a petición expresa — ver razonamiento en
   backend-form-edicion-post.js, "Botón de acción..."). El interruptor de
   ACF (".acf-label" con el texto "Estado del evento" + ".acf-switch") se
   OCULTA, no se borra — el checkbox real sigue ahí y se sigue enviando al
   guardar, el botón de abajo solo lo manipula por JS; por eso el selector
   es ".scout-estado-evento-boton .acf-label/.acf-switch", clase que añade
   el JS al mover el campo aquí, no ".scout-linea-estado-evento
   .acf-field[data-name=estado_evento] .acf-label/.acf-switch" a secas —
   así, si algún día el JS no llega a ejecutarse, el interruptor nativo
   (ya coloreado gris/negro más abajo) se queda visible como red de
   seguridad en vez de desaparecer sin dejar ninguna forma de cambiar el
   estado. */
.scout-estado-evento-boton .acf-label,
.scout-estado-evento-boton .acf-switch {
    display: none;
}
.scout-estado-evento-boton .acf-input {
    margin: 0;
}
/* Ancho reducido al del propio botón visible (19/08/2026): este campo
   ACF conserva su ancho normal de campo de formulario (~305px, el mismo
   que ocupaba antes con la etiqueta y el interruptor visibles), aunque
   ahora solo se vea dentro un botón compacto — al ser el penúltimo
   elemento de ".scout-fila-acciones-guardar" (fila flex), ese ancho
   invisible sobrante dejaba un hueco muy visible antes del siguiente
   botón ("Eliminar", añadido el 19/08/2026, primer caso en que este
   campo dejó de ser el último de la fila y el problema se hizo visible). */
.scout-estado-evento-boton {
    width: auto !important;
}
/* Los botones "Cancelar evento"/"Reactivar evento" y "Publicar"/"Pasar a
   Borrador" (18-19/08/2026) usan ahora las mismas clases de convención
   global que "Guardar Cambios del Evento" — .scout-btn-accion (forma) +
   .scout-btn-outline-rojo/-azul/-verde/-gris (color), definidas en
   css/paneles-scout-tabla.css — para que los tres botones de
   ".scout-fila-acciones-guardar" se vean como un mismo conjunto, del
   mismo tamaño exacto. Ya no hace falta CSS propio aquí.

/* Fila de acciones al final del formulario (19/08/2026, a petición
   expresa: "cancelar evento y pasar a borrador están arriba, pero
   guardar está abajo... no lo veo lógico") — "Guardar Cambios del
   Evento" (grande, botón nativo de ACF) junto a los botones de estado
   (compactos, los mismos de siempre) en una sola fila, para que todas
   las acciones del formulario vivan en el mismo sitio; arriba solo queda
   información de lectura (ver ".scout-linea-estado-evento"). */
.scout-fila-acciones-guardar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}
/* El contenedor vacío que ocupaba el sitio del botón de Cancelar/
   Reactivar (antes de que JS lo sustituya por el campo real) no debe
   ocupar espacio ni dejar un hueco visible en la fila. */
.scout-contenedor-boton-cancelar:empty {
    display: none;
}

.scout-bloque-datos-evento .acf-field[data-name="lugar_de_la_actividad"] {
    grid-column: span 4;
}

.scout-bloque-datos-evento .acf-field[data-name="lugar_de_inicio"],
.scout-bloque-datos-evento .acf-field[data-name="lugar_de_fin"] {
    grid-column: span 3;
}
/* codigo_de_la_actividad / fecha_de_inicio / hora_de_inicio / fecha_de_fin /
   hora_de_fin no necesitan regla: ocupan 1 columna (20%) por defecto */

/* --- Bloques "Inscripción" y "Pago": misma rejilla de 3 columnas (33.33%)
       para que Coste/Primer día de pago queden bajo Primer día de
       inscripción, y Tipo de pago/Último día de pago bajo Último día de
       inscripción --- */
.scout-bloque-inscripcion,
.scout-bloque-pago {
    grid-template-columns: repeat(3, 1fr);
}

/* Fechas de pago: se colocan explícitamente en las columnas 2ª y 3ª, dejando
   la 1ª vacía bajo "Activar sistema de pago". "Pago universal" se fija en
   la columna 2 (bajo "Primer día de pago") para que no quede a la deriva
   en el auto-colocado de Grid. */
.scout-bloque-pago .acf-field[data-name="primer_dia_de_pago"] {
    grid-column: 2;
}

.scout-bloque-pago .acf-field[data-name="ultimo_dia_de_pago"] {
    grid-column: 3;
}

.scout-bloque-pago .acf-field[data-name="pago_universal"] {
    grid-column: 2;
}

/* --- Bloque "Otros": Camiseta / Comida favorita, rejilla de 2 columnas --- */
.scout-bloque-otros {
    grid-template-columns: 1fr;
}

/* --- Checkboxes (true_false): centra el cuadradito verticalmente en
       cada nivel de anidado (ACF envuelve el <input> en .acf-true-false
       > <label> vacío, sin texto) --- */
/* ==========================================================================
   6. AVISO PROPIO DE CONFIRMACIÓN (18/08/2026) — sustituye a confirm()
   nativo para "Estado del evento" (ver js/backend-form-edicion-post.js).
   confirm() del navegador congela la pestaña entera hasta que se
   responde; este aviso es solo HTML/CSS normal, así que nunca bloquea
   nada aunque se quede abierto sin responder.
   ========================================================================== */
.scout-aviso-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background-color: rgba(20, 10, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.scout-aviso-caja {
    background-color: #ffffff;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-hover);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
}

.scout-aviso-mensaje {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--scout-global-oscuro);
    line-height: 1.4;
}

.scout-aviso-detalle {
    margin: 0 0 18px;
    font-size: 0.9rem;
    color: var(--scout-global-texto);
    line-height: 1.4;
}

.scout-aviso-mensaje:last-of-type {
    margin-bottom: 18px;
}

.scout-aviso-botones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* --- Checkboxes (true_false): centra el cuadradito verticalmente en
       cada nivel de anidado (ACF envuelve el <input> en .acf-true-false
       > <label> vacío, sin texto) --- */
.scout-checkbox-inline input[type="checkbox"] {
    margin-top: -10px;
}

/* ==========================================================================
   7. EDITAR EVENTO EN MÓVIL (20/08/2026, a petición expresa: "hacer los
   botones más pequeños y adecuados al móvil... mucho aire entre los campos
   y los bordes... los botones de abajo son un desastre"). Bloque nuevo,
   deliberadamente al FINAL del archivo y no dentro del "@media" de la
   sección 4 — varias de estas reglas pelean con otras que llevan
   "!important" y/o la misma especificidad (una sola clase) definidas MÁS
   ABAJO en este mismo archivo (".scout-bloque-pago"/".scout-bloque-
   datos-evento" en la sección 5, ".scout-estado-evento-boton" en esa misma
   sección) — en un empate de especificidad gana la regla que aparece
   DESPUÉS en el archivo, así que poner esto al final es lo que garantiza
   que gane, en vez de depender de acordarse de añadir "!important" en cada
   una (ya nos pasó una vez esta sesión con el formulario de inscripción,
   ver "css/shortcode-form-inscripcion.css"). Solo toca <640px — en
   escritorio no cambia nada de lo ya existente.
   ========================================================================== */
@media (max-width: 640px) {

    /* --- 7.1 Rejilla de campos: columnas reales a 1, no solo "cada campo
       ocupa toda la fila" --------------------------------------------------
       La sección 4 ya fuerza "grid-column:1/-1 !important" en cada campo,
       lo que los hace VERSE apilados — pero la rejilla de fondo seguía
       teniendo sus columnas de escritorio (3 en Inscripción/Pago, 5 en
       Datos del evento, definidas SIN media query en la sección 5, así que
       valen para cualquier ancho). Con columnas reales de sobra sin usar,
       el alto de cada fila del grid se calculaba raro y dejaba huecos
       verticales sin motivo visible entre un bloque y el siguiente (caso
       real detectado: ~70px de hueco entre "Pago universal" y "Activar
       camiseta", sin ningún campo vacío de por medio a la vista). */
    .scout-bloque-formulario {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
        /* Relleno propio a 0 (antes 1rem): estos bloques ya NO tienen
           fondo/borde de tarjeta propia (ver nota de la sección 5, "SIN
           aspecto de tarjeta propia") — ese relleno era un resto de cuando
           sí la tenían, y se sumaba sin necesidad al de
           ".acf-campos-personalizados" (0.5rem) y al margen entre bloques
           de aquí abajo, agravando el "mucho aire" reportado. */
        padding: 0;
        /* Margen entre bloques recortado (antes 1.5rem, valor de
           escritorio, arriba Y abajo de CADA bloque = 3rem/48px de hueco
           entre dos bloques consecutivos antes de sumar ningún relleno). */
        margin: 0.85rem 0;
    }

    /* "Imagen destacada" tiene su PROPIA rejilla interna de 5 columnas
       (etiqueta + imagen en la misma fila, sección 5) — el
       "grid-column:1/-1" de un campo normal no la toca, porque esa rejilla
       vive DENTRO del campo, no en su posición respecto a los demás. Sin
       este ajuste, la etiqueta larga se quedaba aplastada en una columna
       estrecha (1/5 del ancho) junto a la imagen, en vez de apilarse como
       el resto de campos. */
    .scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] {
        grid-template-columns: 1fr !important;
    }
    .scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] > .acf-label,
    .scout-bloque-datos-evento .acf-field[data-name="imagen_destacada_evento"] > .acf-input {
        grid-column: 1 !important;
    }

    /* --- 7.2 Botones de acción (cabecera + pie del formulario) -----------
       En escritorio, "flex-wrap" reparte los botones según van cabiendo en
       cada línea — en una pantalla estrecha eso deja algunos pegados a la
       izquierda y otros a la derecha sin ningún criterio visual coherente
       (el "desastre" reportado). En columna, uno por línea, se evita del
       todo. Solo dentro de estas dos filas concretas del editor — el resto
       de usos de ".scout-btn-accion" en el sitio (tarjetas de otros
       paneles) no se toca aquí. */
    .scout-cabecera-editor,
    .scout-fila-acciones-cabecera,
    .scout-fila-acciones-guardar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

    /* Ancho completo y centrados dentro de su fila, ahora que van en
       columna (20/08/2026: el tamaño compacto de móvil — 8px 14px /
       0.85rem — ya no se repite aquí, lo pone la variante de móvil de
       ".scout-btn-accion" en css/paneles-scout-tabla.css, la misma para
       cualquier botón del sitio; esta regla solo añade lo que SÍ es
       propio de esta pantalla). */
    .scout-cabecera-editor .scout-btn-accion,
    .scout-fila-acciones-guardar .scout-btn-accion {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    /* El botón "Cancelar evento"/"Reactivar evento" no es un
       ".scout-btn-accion" suelto: vive DENTRO del campo ACF real
       "estado_evento" (oculto salvo este botón, backend-form-edicion-post.js),
       como hermano de ".acf-input" — un <div> de ACF que por defecto es de
       bloque a ancho completo. Aunque su único contenido (el interruptor
       nativo) está oculto, el div en sí seguía ocupando todo el
       ancho disponible (~387px en un móvil de 412px), inflando el ancho de
       todo el campo (".scout-estado-evento-boton", con "width:auto
       !important" en la sección 5 — no basta, porque su contenido interno
       ya reserva ese hueco). Con la fila ya en columna (arriba), lo único
       que hace falta del campo es el botón — se oculta ".acf-input" del
       todo (su contenido ya estaba oculto igualmente) y se estira el botón
       al ancho completo, igual que sus hermanos. */
    .scout-estado-evento-boton {
        width: 100% !important;
    }
    .scout-estado-evento-boton .acf-input {
        display: none !important;
    }
    .scout-estado-evento-boton > .scout-btn-accion {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   AVISO DE CAMBIOS SIN GUARDAR (23/08/2026, a petición expresa: "si se
   sale de una página de edición y no se ha guardado debería salir un
   aviso... comprueba que toda la web está así")
   Centralizado aquí para que CUALQUIER acf_form() de la web lo herede
   gratis, sin repetir el CSS en cada archivo — el JS que lo activa
   (js/backend-form-edicion-post.js) busca genéricamente un
   <form id="acf-form"> (el id por defecto de acf_form()) y este banner,
   si existe en la página. Mismo diseño que ya usaba en solitario el
   listado de inscritos (antes definido solo ahí, en
   inc/shortcode-listado_inscritos_evento.php — movido aquí para que lo
   comparta también su propio script, que sigue viviendo en ese archivo
   porque no usa acf_form()). */
.aviso-cambios-sin-guardar {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: var(--radio-aviso);
    color: #991b1b;
    font-weight: 600;
    font-size: 0.88rem;
    position: sticky;
    top: 8px;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(220,38,38,0.12);
}
.aviso-cambios-sin-guardar.visible { display: flex; }
.aviso-cambios-sin-guardar .icono-aviso { font-size: 1.1em; }