/* ==========================================================================
   COMPONENTE: FORMULARIOS DEL PANEL SCOUTER (Frontend)
   Archivo: /css/componentes/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/layout/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;
}
/* 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/modulos/eventos/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;
}
/* El recuadro cuadrado y con sombra que pone ACF por fuera de la caja de
   botones de abajo (".acf-form-submit") se quita para que solo se vea la
   caja redondeada, igual que la de arriba (22/10/2026, a petición expresa). */
.scout-formulario-wrapper .acf-form-submit {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.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)
   ========================================================================== */
/* Movidas el 19/10/2026 a css/componentes/alertas.css (migración CSS por
   capas, ver CLAUDE.md "Arquitectura CSS"). */

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

.acf-campos-personalizados {
    font-size: 0.95rem;
    background-color: #ffffff;
    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/layout/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í.
   22/10/2026: Crear Evento ya SÍ lleva la caja (a petición expresa: igual que Editar Evento, que ya tiene
   caja arriba y abajo), así que se excluye aquí. Noticia y Aviso siguen sin ella. */
.formulario-creacion .acf-campos-personalizados:not(:has(.acf-field[data-name="titulo_evento"])) {
    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;
}

/* (22/10/2026) Quitada la regla del 21/08/2026 que dejaba "Sección" más estrecha (220px) solo en los
   formularios de CREACIÓN: ahora crear y editar deben verse iguales, y en editar la sección ocupa todo
   su ancho. */
.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;
}

/* "Imagen destacada" (Crear/Editar Evento y Noticia, 02/10/2026, a
   petición expresa: el texto de ayuda nuevo salía igual o más grande que
   el propio título del campo) — el campo tipo "image" de ACF, a
   diferencia de un <input> normal, envuelve su "p.description" en un
   contenedor propio con su tamaño de fuente de fábrica, que gana por
   especificidad a la regla genérica de arriba. Se fuerza aquí el mismo
   tamaño que el resto de textos de ayuda del formulario. */
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_evento"] .description,
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_post"] .description {
    font-size: 0.8rem !important;
}

/* "Imagen destacada" (Editar Noticia, 30/09/2026, a petición expresa): la
   caja vacía de arrastrar/soltar y el texto "No hay ninguna imagen
   seleccionada" quedaban pegados, sin aire entre ellos. */
.acf-campos-personalizados .acf-field[data-name="imagen_destacada_post"] .acf-image-uploader {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* "Fecha de publicación"/"Fecha de caducidad" (Editar Noticia, 30/09/2026,
   a petición expresa): etiqueta y campo en la misma línea, con el texto
   de ayuda debajo a todo lo ancho, en vez de apilados los tres. ACF anida
   la etiqueta Y el texto de ayuda juntos dentro de ".acf-label" — con
   "display:contents" ese contenedor "desaparece" y sus dos hijos (el
   <label> y el <p class="description">) pasan a colocarse por su cuenta
   en la rejilla de este campo, cada uno donde se le pide.
   02/10/2026, a petición expresa: la fuente del texto de ayuda salía
   igual o más grande que el título (mismo motivo que "Imagen destacada"
   más arriba — necesita "!important" para ganarle al tamaño de fábrica
   de ACF), y la separación entre la fila etiqueta+campo y el texto de
   ayuda de debajo era demasiado justa — se aumenta el "margin-top". */
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"],
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
}
/* Separación HORIZONTAL entre los dos campos (van al 50% cada uno, uno al
   lado del otro) — a petición expresa, el padding de fábrica de ACF entre
   ambos se quedaba corto. */
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] {
    padding-right: 40px;
}
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] {
    padding-left: 40px;
}
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] > .acf-label,
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] > .acf-label {
    display: contents;
}
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] > .acf-label > label,
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] > .acf-label > label {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
}
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] > .acf-input,
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] > .acf-input {
    grid-column: 2;
    grid-row: 1;
}
.acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"] > .acf-label > .description,
.acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] > .acf-label > .description {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    font-size: 0.8rem !important;
}

.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 input[type="url"],
.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);
}

/* Campos tipo "url" (08/10/2026, fallo real: Transporte, "Link de Google
   Maps") — "input[type=url]" se había quedado fuera de la regla de arriba
   por descuido, así que ACF le aplicaba su propio icono de globo + el
   borde 3D por defecto del navegador en vez del estilo del tema (único
   campo url del sitio hasta ahora). Se quita el icono y el hueco que le
   reservaba a la izquierda, para que quede igual que cualquier otro campo
   de texto. */
.acf-campos-personalizados .acf-input-wrap.acf-url .acf-icon {
    display: none;
}
.acf-campos-personalizados .acf-input-wrap.acf-url input[type="url"] {
    padding-left: 14px;
}

.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;
    }
    /* Edición (con la caja de acciones): la regla de escritorio de arriba deja 30px de aire arriba, y con los
       20px del menú hacía 50px hasta la primera caja. Aquí se reduce a 5px, para que queden 25px (la mitad)
       (22/10/2026, a petición expresa). Va después de la regla de escritorio para ganarle. */
    .scout-formulario-wrapper:has(.scout-cabecera-editor) {
        padding-top: 5px;
    }

    /* Subopciones en móvil (22/10/2026, a petición expresa): los campos que cuelgan de "Activar inscripción" y
       de "Activar sistema de pago" van sangrados 36px, para quedar alineados con el texto del interruptor
       principal (medido: el texto empieza a 36px del borde del campo). En escritorio no se aplica: esos campos
       van en columnas a la derecha del interruptor. */
    .scout-bloque-inscripcion .acf-field:not([data-name="activar_inscripcion"]),
    .scout-bloque-pago .acf-field:not([data-name="activar_sistema_de_pago"]) {
        margin-left: 36px;
    }

    /* Subopciones de inscripción y pago iguales (22/10/2026): sin el margen de 15px de cada campo, 6px entre
       un campo y el título del siguiente, y la mitad del aire que había entre título y campo (10px -> 5px).
       Los interruptores ("Activar...") no se tocan. */
    .scout-bloque-formulario.scout-bloque-pago {
        row-gap: 6px;
    }
    .scout-bloque-pago .acf-field {
        margin-top: 0;
    }
    .scout-bloque-inscripcion .acf-field:not([data-name="activar_inscripcion"]) .acf-label,
    .scout-bloque-pago .acf-field:not([data-name="activar_sistema_de_pago"]) .acf-label {
        margin-bottom: 2.5px;
    }

    /* Apartado de datos en móvil (22/10/2026, a petición expresa): mismo espacio que en las subopciones, 6px entre
       un campo y el título del siguiente y 2,5px entre título y campo. No se tocan el editor de contenido (tiene su
       propio aire por debajo) ni la imagen destacada (su etiqueta va a un lado). */
    .scout-bloque-formulario.scout-bloque-datos-evento {
        row-gap: 6px;
    }
    .scout-bloque-datos-evento .acf-field:not([data-name="contenido_evento"]):not([data-name="imagen_destacada_evento"]) {
        margin-top: 0;
    }
    .scout-bloque-datos-evento .acf-field:not([data-name="contenido_evento"]):not([data-name="imagen_destacada_evento"]) .acf-label {
        margin-bottom: 2.5px;
    }

    /* 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 /
     quien_paga dependen TODOS de activar_sistema_de_pago (por eso
     quien_paga 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...) --- */
/* Rejilla de 10 columnas (antes 5): así "Título" y "Sección" pueden ocupar cada una la mitad de la fila
   (21/10/2026). Cada campo normal ocupa 2 columnas, igual que antes ocupaba 1 de 5. */
.scout-bloque-datos-evento {
    grid-template-columns: repeat(10, 1fr);
}
.scout-bloque-datos-evento > .acf-field {
    grid-column: span 2;
}

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

.scout-bloque-datos-evento .acf-field[data-name="contenido_evento"] {
    grid-column: 1 / -1;
    /* Aire bajo el editor de contenido (22/10/2026, a petición expresa: "el triple"): 93 px en total con el
       hueco de la rejilla (16px) y el margen del campo siguiente (15px), frente a los 31 px de antes. */
    margin-bottom: 62px;
}

/* "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: span 5;
}
/* El texto del título, en negrita y algo más grande que el resto de campos, para que se vea de un vistazo
   que es el título (22/10/2026, a petición expresa). */
.scout-bloque-datos-evento .acf-field[data-name="titulo_evento"] input[type="text"] {
    font-weight: 700;
    font-size: 1.15rem;
}
/* La caja de Sección tiene la misma altura que la del título (36 px medidos en la página), para que las
   dos queden alineadas (22/10/2026, a petición expresa). Si cambia el tamaño del título, cambiar también este. */
/* !important: select2 (plugin de ACF) fija 30px con su propia regla y no se deja ganar sin esto.
   35.77px = la altura medida del campo del título (line-height 25.76px + relleno 8px + borde 2px). */
.scout-bloque-datos-evento .acf-field[data-name="seccion_evento"] .select2-container,
.scout-bloque-datos-evento .acf-field[data-name="seccion_evento"] .select2-selection {
    min-height: 35.77px !important;
}
/* Mismo borde y mismas esquinas que el campo del título (select2 trae su gris oscuro por defecto). */
.scout-bloque-datos-evento .acf-field[data-name="seccion_evento"] .select2-selection {
    border-color: var(--scout-global-borde) !important;
    border-radius: 6px !important;
}

/* "Cancelar evento" va en el bloque "Otros", después de camiseta, comida y visita, en la misma columna
   (21/10/2026). Se distingue de las demás casillas porque hace algo distinto: una línea separadora encima,
   el nombre en negrita con el rojo de "Cancelado" y la casilla en rojo al marcarla. */
.scout-bloque-otros .acf-field[data-name="estado_evento"] {
    margin-top: 8px;
    margin-bottom: 8px;
    /* Relleno de arriba igual al aire que queda entre el texto y la raya de abajo (medido: 27 px), para que
       "Cancelar evento" quede centrado entre las dos rayas (22/10/2026). */
    padding-top: 26px;
    padding-bottom: 12px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.scout-bloque-otros .acf-field[data-name="estado_evento"] .acf-label label {
    font-weight: 700;
    color: var(--wp--custom--estado--problema-texto);
}
.scout-bloque-otros .acf-field[data-name="estado_evento"] input[type="checkbox"] {
    accent-color: var(--wp--custom--accion--rojo);
}

/* En móvil, Título y Sección van cada uno en su fila (21/10/2026). */
@media (max-width: 600px) {
    .scout-bloque-datos-evento .acf-field[data-name="titulo_evento"],
    .scout-bloque-datos-evento .acf-field[data-name="seccion_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 IZQUIERDO del icono
   ("top" en vez de "bottom", "left:0" en vez de centrado) — 28/09/2026,
   invertido: cada campo nuevo con este icono (Fecha de fin, Cód.
   Actividad, los "Activar ___", Sección, Imagen destacada, Información
   adicional, Contenido...) iba pidiendo el mismo arreglo de "se sale por
   la izquierda", uno detrás de otro, porque casi ningún campo de este
   formulario está pegado al borde derecho. Así que ahora ese es el
   comportamiento por defecto para todos, y "Estado del evento" — que SÍ
   vive en la esquina superior derecha de la caja (con
   "overflow:hidden", recortando lo que se salga) — es la única
   excepción, con su regla propia más abajo para abrir hacia la
   izquierda como antes. */
/* Transporte (08/10/2026, a petición expresa: "agrupar en una caja") —
   a diferencia de ".scout-bloque-formulario" (Evento/Noticia, sin caja ni
   título a propósito desde el 19/08/2026), aquí SÍ se pidió una caja con
   fondo, borde y título — se usa una clase propia para no heredar esa
   decisión antigua. En el formulario de solicitud, la disposición de los
   campos dentro de cada caja está en css/modulos/transporte/solicitud.css. */
.scout-bloque-transporte {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 1.4rem;
}
.scout-bloque-transporte h3 {
    margin: 0 0 12px;
    /* 09/10/2026, a petición expresa: los títulos de sección (Datos de la
       solicitud/Ofertas/Gestión) deben notarse más grandes que las
       etiquetas de los campos (0.95rem) — antes 1rem, casi igual. */
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--scout-global-oscuro);
}
.scout-bloque-transporte .acf-field:last-child {
    margin-bottom: 0;
}

.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);
    left: 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;
    /* Oculto con "display:none" y no solo con opacity/visibility (22/10/2026): oculto pero
       presente, un tooltip junto al borde derecho seguía ocupando sitio fuera de la pantalla.
       En un móvil real eso permitía arrastrar la página a los lados y descolocaba lo que va
       en "position:fixed" (el botón del menú se movía con el dedo y salía descentrado). */
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transicion-suave);
    /* 28/09/2026, corregido: con z-index:10 el tooltip de "Sección"
       quedaba tapado por el propio selector de sección (select2), que
       monta su propia capa por encima. Mismo valor "siempre por encima
       de todo" que ya usa ".scout-aviso-overlay" más abajo en este mismo
       archivo. */
    z-index: 999999;
}

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

/* Burbuja colocada por js/comun/ayuda-colocar.js (11/11/2026): se corre a la izquierda lo justo para no salirse del borde de
   la pantalla ni del contenedor que la recorta. Gana a la colocación de arriba y a la de móvil (más especificidad). */
.scout-icono-ayuda.is-colocada::after {
    left: var(--ayuda-x, 0);
    right: auto;
    transform: none;
    width: var(--ayuda-ancho, 220px);
    max-width: none;
}

/* (21/10/2026) "Cancelar evento" ya no vive en el borde derecho: se quitó la excepción que abría su
   tooltip hacia la izquierda, y ahora abre hacia la derecha como el resto de iconos "?". */

/* 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;
}
/* Etiquetas de estado: componente .etiqueta-estado desde el 19/10/2026 (css/componentes/etiqueta-estado.css). */
/* 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; }
/* Misma línea de abajo que el título (22/10/2026, a petición expresa): las dos cajas se centran en la línea, pero con
   distinto tamaño de letra y relleno el texto de "Última edición" quedaba 1,14px más alto (medido con las métricas de
   la fuente Manrope). Se baja esa distancia exacta. */
.scout-linea-estado-evento .texto-ultima-edicion-form {
    position: relative;
    top: 1.14px;
}

/* Botón de acción + su icono "?" (Editar Evento, caja de acciones):
   el "?" queda a 2px del botón y a 10px del siguiente. */
.scout-accion-con-ayuda {
    display: inline-flex;
    align-items: center;
}
.scout-accion-con-ayuda > .scout-icono-ayuda {
    margin-left: 2px;
    margin-right: 10px;
}
/* Estos "?" van pegados al borde derecho (en móvil, cada botón ocupa todo el ancho):
   su tooltip se abre hacia la izquierda para no salirse de la pantalla (22/10/2026). */
.scout-accion-con-ayuda > .scout-icono-ayuda::after {
    left: auto;
    right: 0;
    transform: none;
}

/* En móvil, todos los botones de acción del mismo ancho (también el de
   Cancelar/Reactivar, que va dentro de su propio campo de ACF). */
@media (max-width: 640px) {
    .scout-estado-evento-boton,
    .scout-accion-con-ayuda {
        width: 100%;
    }
    .scout-accion-con-ayuda {
        display: flex;
    }
    .scout-accion-con-ayuda > .scout-btn-accion {
        flex: 1;
    }
}

/* 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 8;
}

.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 6;
}
/* 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;
}

/* "Quién paga" va en la columna 2, debajo de "Primer día de pago": el nombre como título encima y las
   casillas debajo, una por línea (20/10/2026). */
.scout-bloque-pago .acf-field[data-name="quien_paga"] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* El título va el primero y las casillas debajo. ACF pone la etiqueta y la casilla en lateral y
   WordPress/ACF las flotan: por eso aquí se anulan con !important (20/10/2026). */
.scout-bloque-pago .acf-field[data-name="quien_paga"] > .acf-label {
    order: 0;
    float: none !important;
    width: 100% !important;
    margin: 0;
    text-align: left;
}
/* Letra normal, como el resto de campos (22/10/2026): antes iba en negrita y con tamaño propio.
   Las casillas van con su propio espacio interior (unos 11px hasta el texto); se sube la lista 8px para que el
   espacio hasta el título sea parecido al de los demás campos. */
.scout-bloque-pago .acf-field[data-name="quien_paga"] > .acf-input {
    margin-top: -6.75px;
}
.scout-bloque-pago .acf-field[data-name="quien_paga"] > .acf-input {
    order: 1;
    float: none !important;
    width: 100% !important;
}
.scout-bloque-pago .acf-field[data-name="quien_paga"] .acf-checkbox-list li {
    display: block;
    float: none;
}

/* --- 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/comun/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;
}

/* Lista opcional de la ventana (08/11/2026; p. ej. destinatarios de Transporte → Correo a proveedores). Con muchas
   líneas se desplaza dentro de la ventana en vez de alargarla. */
.scout-aviso-lista {
    margin: 0 0 18px;
    padding: 8px 10px 8px 28px;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    font-size: 0.9rem;
    color: var(--scout-global-oscuro);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.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/modulos/inscripciones/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;
    }

    /* "Fecha de publicación"/"Fecha de caducidad" (02/10/2026, a petición
       expresa): el padding horizontal añadido para separarlos en
       escritorio (uno al 50% junto al otro) se colaba también aquí, donde
       pasan a apilarse en una sola columna — sin vecino al lado, ese
       padding ya no separa nada, solo desplaza el campo entero hacia un
       lado. Se anula en móvil. */
    .acf-campos-personalizados .acf-field[data-name="fecha_de_publicacion"],
    .acf-campos-personalizados .acf-field[data-name="fecha_de_caducidad"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- 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/comun/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; }
/* En móvil, el aviso queda justo debajo de la galleta del menú cuando el menú está pegado arriba (22/10/2026).
   Antes se quedaba detrás de la galleta (las dos fijas arriba: el aviso en 8px y la galleta en 12px). */
@media (max-width: 599px) {
    .aviso-cambios-sin-guardar {
        top: 64px;
    }
}
.aviso-cambios-sin-guardar .icono-aviso { font-size: 1.1em; }
/* Botón de reapertura de inscripción (14/10/2026) — ver js/comun/backend-form-edicion-post.js */
/* "Estado actual" de la inscripción, detrás del interruptor "Activar inscripción" (22/10/2026): el campo es una
   fila flexible, así que se manda al final (order) y a una línea propia (flex-basis 100%). Rojo si la inscripción
   está inactiva (el mismo rojo que "Cancelado") y verde (el mismo que "Publicado") si está activa. */
.scout-bloque-inscripcion .acf-field[data-name="activar_inscripcion"] {
    flex-wrap: wrap;
    /* Sin el hueco por defecto de ACF (8px) entre el texto y el estado: el estado va pegado (22/10/2026). */
    row-gap: 0;
}
.scout-estado-inscripcion {
    order: 3;
    flex-basis: 100%;
    /* 36 px = casilla más separación hasta el texto "Activar inscripción" (medido en la página, 22/10/2026):
       así el estado empieza justo debajo del texto y no debajo de la casilla. */
    margin-left: 36px;
    margin-top: -3px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wp--custom--estado--problema-texto);
}
.scout-estado-inscripcion.is-activa {
    color: #166534;
}

/* Bloque de inscripción (22/10/2026, a petición expresa): "Primer día", "Último día" y "Reabrir una hora" son
   parte de "Activar inscripción", así que van más pegados que el resto de campos (en móvil se apilan; el
   espacio que había era 16 px de la rejilla más 15 px de margen de cada campo). */
.scout-bloque-inscripcion {
    row-gap: 6px;
}
.scout-bloque-inscripcion .acf-field {
    margin-top: 0;
}

/* Botón apagado mientras la inscripción sigue abierta (22/10/2026): sin esto, el botón gris de "no disponible"
   se veía igual que uno pulsable. */
.scout-reapertura-inscripcion button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.scout-reapertura-inscripcion {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tooltip de la reapertura abierto hacia la izquierda (14/10/2026): el campo
   está en el borde derecho del panel y, hacia la derecha, el texto se cortaba. */
.acf-field[data-name="ultimo_dia_de_inscripcion"] .scout-icono-ayuda::after {
    left: auto;
    right: 0;
}

/* Soltar imágenes en el editor: pista junto a "Añadir medios" y barra de progreso al subir. */
/* !important: el tema pone márgenes y tamaños de párrafo propios que, si no, ganan. */
.soltar-medios-zona { margin: 0 !important; padding: 0 !important; }
.soltar-medios-zona .soltar-medios-pista { margin: 0 !important; padding: 0 !important; font-size: 0.7rem !important; line-height: 1.3 !important; color: #4b5563; }
.soltar-medios-pista a { color: var(--scout-global-base); text-decoration: underline; }

/* Ventana flotante de progreso al subir una imagen: centrada en la pantalla. */
.soltar-medios-capa { position: fixed; inset: 0; z-index: 100000; background: rgba(17, 24, 39, 0.35); display: flex; align-items: center; justify-content: center; }
.soltar-medios-capa[hidden] { display: none; }
.soltar-medios-ventana { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); padding: 20px 24px; width: min(360px, 90vw); box-sizing: border-box; text-align: center; }
.soltar-medios-ventana-titulo { margin: 0 0 12px; font-weight: 700; color: #374151; font-size: 1rem; }
.soltar-medios-ventana-texto { margin: 10px 0 0; font-size: 0.85rem; color: #6b7280; }
.soltar-medios-barra { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.soltar-medios-relleno { height: 100%; width: 0; background: var(--scout-global-base); border-radius: 999px; transition: width 0.2s ease; }


/* Selector de galería (botón "Añadir medios" del editor): ventana emergente propia. */
.scout-selector-capa { position: fixed; inset: 0; z-index: 99999; background: rgba(17, 24, 39, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.scout-selector-capa[hidden] { display: none; }
.scout-selector-ventana { background: #fff; width: 100%; height: 100%; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; box-sizing: border-box; padding: 16px 22px; font-size: 0.9rem; color: #374151; }
.scout-selector-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.scout-selector-titulo { margin: 0; font-weight: 700; font-size: 1.05rem; color: #374151; }
.scout-selector-cerrar { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.scout-selector-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.scout-selector-buscar { flex: 1 1 220px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 0.9rem; }
.scout-selector-subir { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid #16a34a; color: #16a34a; border-radius: 8px; cursor: pointer; font-weight: 600; background: #fff; }
.scout-selector-subir:hover { background: #f0fdf4; }
.scout-selector-categorias { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.scout-selector-categoria { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.85rem; }
.scout-selector-rejilla { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 4px; align-content: start; }
.scout-selector-item { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px; cursor: pointer; text-align: left; font-family: inherit; }
.scout-selector-item:hover { border-color: var(--scout-global-base); box-shadow: 0 0 0 2px rgba(98, 37, 153, 0.15); }
.scout-selector-item:disabled { opacity: 0.5; cursor: not-allowed; }
.scout-selector-item img { width: 100%; height: 110px; object-fit: contain; background: #f8fafc; border-radius: 6px; }
.scout-selector-sinvista { display: flex; align-items: center; justify-content: center; height: 110px; background: #f8fafc; border-radius: 6px; color: #6b7280; font-size: 0.8rem; }
.scout-selector-nombre { font-size: 0.78rem; font-weight: 700; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scout-selector-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.scout-selector-estado { font-size: 0.8rem; color: #6b7280; }

/* Campos de imagen (destacada, producto): el lápiz abría la ventana nativa de WordPress solo para
   marcar categorías. Las categorías se gestionan en Gestión de Imágenes, así que se oculta.
   La X (quitar la imagen) se mantiene. */
.acf-field-image .acf-icon.-pencil { display: none !important; }

/* Barra fija abajo (21/10/2026, prueba): la fila de botones de guardar se queda visible al desplazarse
   por un formulario largo, sin tener que bajar hasta el final. Va a la derecha (norma de botones). */
.scout-fila-acciones-guardar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    /* Sin fondo, borde ni sombra propios (22/10/2026): la única caja visible es la redondeada de fuera
       (".scout-caja-info-acciones"). */
    background: none;
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* Eliminar (acción destructiva) va a la izquierda de la fila de botones, separado del guardado (21/10/2026). */
.scout-fila-acciones-guardar .scout-accion-peligro {
    order: -1;
    margin-right: auto;
}

/* Cabecera de la edición: "Ir al Listado" a la izquierda y los botones de Duplicar a la derecha (21/10/2026). */
.scout-caja-info-acciones .scout-cabecera-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.scout-caja-info-acciones .scout-botones-duplicar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Caja de abajo de la edición de eventos: "Estado actual" en su propia línea, encima de los botones (21/10/2026). */
.scout-fila-acciones-guardar .scout-estado-actual-bloque {
    order: -2;
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
/* En escritorio, "Estado actual" termina donde termina el botón "Guardar y publicar", sin contar su "?"
   (16 px del icono + 2 px y 10 px de margen; ver ".scout-accion-con-ayuda > .scout-icono-ayuda") (21/10/2026). */
@media (min-width: 641px) {
    .scout-fila-acciones-guardar .scout-estado-actual-bloque {
        padding-right: 28px;
    }
}
/* El texto "Estado actual" lleva estilos en línea (margen, negrita y color): se anulan aquí para que tenga
   el mismo tamaño y grosor que las etiquetas de los campos, a la derecha (21/10/2026). */
.scout-fila-acciones-guardar .scout-estado-actual-bloque > span {
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Separador "Opciones" en la edición de eventos: una línea horizontal con el título a la izquierda.
   Marca dónde terminan los datos obligatorios y empiezan las opciones (21/10/2026). El título usa el
   mismo estilo que los títulos de sección de los formularios (ver ".scout-bloque-transporte h3"). */
.scout-separador-opciones {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 72px 0 16px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-titulo);
}
.scout-separador-opciones::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #d1d5db;
}
.scout-separador-opciones > span {
    flex: 0 0 auto;
}
/* Separador "Datos" dentro de la rejilla de la caja de datos (22/10/2026): ocupa todo el ancho y no añade
   su propio margen superior, porque el aire de arriba ya lo da el editor de contenido. */
.scout-bloque-datos-evento .scout-separador-datos {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* "Estado actual" arriba: a la derecha de la línea de Editar Evento / Última edición, con el mismo tamaño y
   grosor que abajo (21/10/2026). Sus estilos en línea se anulan igual que en la caja de abajo. */
.scout-linea-estado-evento .scout-estado-actual-linea {
    margin-left: auto;
}
.scout-linea-estado-evento .scout-estado-actual-linea > span {
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Noticias en móvil (22/10/2026): mismas medidas que las subopciones y el apartado de datos de Editar Evento:
   6px entre un campo y el título del siguiente, 2,5px entre título y contenido. Solo los formularios de noticia
   (los que tienen el campo de sección de noticia). */
@media (max-width: 640px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field {
        margin-top: 0;
        margin-bottom: 6px;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field > .acf-label {
        margin-bottom: 2.5px;
    }
}

/* Noticias en PC (22/10/2026, a petición expresa): título y sección en una misma fila al 50 %, como en Editar
   Evento. El título en negrita y algo más grande (mismo tamaño que en evento). En móvil van uno debajo del otro. */
@media (min-width: 641px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field {
        grid-column: 1 / -1;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="titulo_post"],
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="seccion_post"] {
        grid-column: auto;
    }
}
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) .acf-field[data-name="titulo_post"] input[type="text"] {
    font-weight: 700;
    font-size: 1.15rem;
}

/* Sección de noticia: mismas medidas que la sección de Editar Evento (22/10/2026): misma altura que el título,
   mismo borde morado suave y mismas esquinas. select2 trae sus propias reglas, por eso !important. */
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) .acf-field[data-name="seccion_post"] .select2-container,
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) .acf-field[data-name="seccion_post"] .select2-selection {
    min-height: 35.77px !important;
}
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) .acf-field[data-name="seccion_post"] .select2-selection {
    border-color: var(--scout-global-borde) !important;
    border-radius: 6px !important;
}

/* Noticias (22/10/2026, a petición expresa): imagen destacada al final; las dos fechas, una al lado de la otra
   (sin el relleno lateral de 40px que se pensó para esa fila), y en móvil, todo en columna en el orden nuevo. */
@media (min-width: 641px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"],
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] {
        grid-column: auto;
        padding-left: 0;
        padding-right: 0;
    }
}
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] {
    order: 1;
}
@media (max-width: 640px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) {
        display: flex;
        flex-direction: column;
    }
}

/* Noticias en PC (22/10/2026, a petición expresa, según la captura de Datos de Editar Evento): título encima de
   cada campo, también en las fechas; imagen destacada con el título a la izquierda y la imagen a la derecha. */
@media (min-width: 641px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"],
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] {
        display: block;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-label {
        display: block;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-label > label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-label > label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-input,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-input {
        grid-column: auto;
        grid-row: auto;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 20px;
        align-items: start;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] > .acf-label {
        grid-column: 1;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] > .acf-input {
        grid-column: 2 / -1;
    }
}

/* Noticias en PC (22/10/2026, a petición expresa): las dos fechas, cada una en su propia fila, a la izquierda y
   en una sola columna. */
@media (min-width: 641px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"],
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] {
        grid-column: 1 / -1;
    }
}

/* Noticias (22/10/2026): ACF pone una línea vertical a la izquierda de los campos de fecha (borde de su rejilla de
   columnas). Como las fechas ya van en una sola columna, esa línea sobra y se quita. */
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"],
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] {
    border-left: 0;
}

/* Noticias en móvil (22/10/2026): título encima del campo también en las fechas y en la imagen destacada,
   igual que Editar Evento en móvil (una sola columna, título sobre el campo). */
@media (max-width: 640px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"],
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-label {
        display: block;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-label > label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-label > label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_publicacion"] > .acf-input,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="fecha_de_caducidad"] > .acf-input {
        grid-column: auto;
        grid-row: auto;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] {
        display: grid;
        grid-template-columns: 1fr;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] > .acf-label,
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="imagen_destacada_post"] > .acf-input {
        grid-column: 1;
    }
}

/* Noticias (22/10/2026, a petición expresa): mismo separador "Datos" y mismas separaciones que en Editar Evento.
   En PC, los campos van en rejilla con 16px entre filas y sin margen propio; el separador ocupa todo el ancho y no
   añade margen arriba (el aire lo da el editor de contenido, que lleva 62px por debajo como en evento). */
@media (min-width: 641px) {
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) {
        row-gap: 16px;
    }
    .acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field {
        margin-bottom: 0;
    }
}
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) > .acf-field[data-name="contenido_post"] {
    margin-bottom: 62px;
}
.acf-campos-personalizados:has(> .acf-field[data-name="seccion_post"]) .scout-separador-datos {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* Crear evento (22/10/2026): estado "Nuevo" en la primera caja, en ámbar como "Borrador" (aún no publicado). */
.scout-estado-sin-guardar {
    color: var(--color-accion-ambar);
}

/* Aviso tras guardar: "Guardado. ¿Quieres avisar a los usuarios suscritos?" y el botón "Enviar aviso por email"
   (22/10/2026, ver LISTAS_CORREO.md e inc/notificaciones-secciones.php). Misma caja que la primera de la página;
   el botón a la derecha (norma de botones). */
.scout-aviso-guardado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.scout-aviso-guardado__textos {
    flex: 1 1 260px;
    min-width: 0;
}
.scout-aviso-guardado__titulo {
    margin: 0;
    font-weight: 700;
    color: var(--wp--custom--estado--activo-texto);
}
.scout-aviso-guardado__info {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--wp--custom--estado--inactivo-texto);
}
.scout-aviso-guardado .scout-aviso-enviar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Ventana del aviso tras guardar (22/10/2026): algo más ancha que un aviso normal, con la lista de quién lo recibe. */
.scout-aviso-caja--aviso {
    max-width: 640px;
}
/* Línea de avisos por correo en la ficha de usuario (22/10/2026): ocupa todo el ancho, bajo correo y teléfono. */
.scout-avisos-usuario {
    clear: both;
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--scout-global-texto);
}

/* Aviso rojo de la ventana del borrador: en negrita, pegado al borde de arriba de la caja. */
.scout-aviso-alerta {
    margin: 0 0 14px;
    font-weight: 700;
}
/* Borrador del correo: marco aislado (sin scripts) con el correo tal como saldrá. */
.scout-aviso-asunto {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--scout-global-texto);
}
.scout-aviso-borrador {
    display: block;
    width: 100%;
    height: min(420px, 55vh);
    box-sizing: border-box;
    margin: 0 0 16px;
    border: 1px solid var(--scout-global-borde);
    border-radius: 8px;
    background: #f9f9f9;
}
.scout-aviso-lista {
    margin: 0 0 16px;
    padding: 10px 14px 10px 30px;
    max-height: 200px;
    overflow-y: auto;
    background: #f8fafc;
    border: 1px solid var(--scout-global-borde);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--scout-global-texto);
}

/* Recuadro opcional "Nota" de la ventana del aviso (va en el correo). */
.scout-aviso-nota-etiqueta {
    display: block;
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}
.scout-aviso-nota-etiqueta span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--wp--custom--estado--inactivo-texto);
}
.scout-aviso-nota {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

/* Botón "Quitar" de cada hijo/a (22/10/2026), en Editar Usuario. Rojo: es una eliminación. Los campos
   del hijo/a marcado se ocultan hasta guardar (el servidor lo quita al guardar). !important: ACF muestra y oculta
   estos campos con su propio estilo en línea al cambiar los interruptores. */
/* Nombre, apellidos, fecha y "Quitar" en la misma línea (22/10/2026, a petición expresa): el botón va a la derecha
   del campo de la fecha, dentro de su misma columna, y la fecha ocupa el resto del ancho. */
.acf-field[data-name^="hijo_"][data-name$="_fecha"] > .acf-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acf-field[data-name^="hijo_"][data-name$="_fecha"] > .acf-input > .acf-date-picker {
    flex: 1 1 auto;
    min-width: 0;
}
.scout-quitar-hijo {
    flex: 0 0 auto;
    margin: 0;
}
.sw-hijo-quitado {
    display: none !important;
}