/* ==========================================================================
   COMPONENTE: TARJETA DE METADATOS / LOGÍSTICA (DATOS EVENTO)
   Archivo: /css/shortcode-datos-evento.css
   ========================================================================== */

/* --- CONTENEDOR PRINCIPAL --- */
.logistica-tabla-moderna {
    /* Marco (fondo, borde, radio) ya NO se define aquí — lo pone el Grupo
       de la plantilla que envuelve esta tabla. */
    display: flex;
    flex-direction: column;
    margin: 1.5rem auto;
    color: var(--scout-global-texto);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

/* Fondo del Grupo que envuelve esta tabla. Ese Grupo vive en la
   plantilla "single-evento" del Editor del Sitio (Apariencia → Editor
   del sitio), no en ningún archivo de este repo, y su color de fondo
   (#dddddd) está puesto A MANO como color personalizado del bloque — un
   "style" en línea, no una clase con la que enganchar CSS normal, así
   que hace falta "!important" para ganarle (mismo motivo de siempre: un
   estilo en línea tiene más prioridad que cualquier clase externa). Se
   identifica por ese valor exacto de fondo en su propio atributo
   "style", y se limita a "body.single-evento" (clase que WordPress ya
   pone en el body de esta plantilla) para no tocar ningún otro bloque
   del sitio que use por casualidad ese mismo gris con otra intención.
   Blanco (19/08/2026, a petición expresa: "pon en color blanco el fondo
   de los forms y del contenido" — antes #fafafa, mismo tono que
   --color-metadatos de los formularios de gestión del Scouter; ahora
   esta caja concreta se separa de esa convención). */
body.single-evento [style*="background-color:#dddddd"] {
    background-color: #ffffff !important;
    /* Marco leve (19/08/2026, a petición expresa) — el bloque ya traía un
       borde propio (también en línea, "border-color:#aaaaaa"), pero ese
       gris quedaba demasiado marcado sobre el fondo ya aclarado a
       #fafafa. Se sustituye por el mismo gris suave que ya usa el marco
       de la cabecera/pie del sitio (#D1D5DB, css/navegacion.css) y la
       caja equivalente en los formularios de gestión del Scouter
       (.acf-campos-personalizados, backend-form-edicion-post.css), para
       que las tres cajas se vean con el mismo lenguaje visual. */
    border-color: #D1D5DB !important;
}

/* ==========================================================================
   "3 CAJAS EN VEZ DE 1 ENVOLVIENDO A 2" (19/08/2026, a petición expresa:
   "el form de los metadatos tiene su propia caja, después el contenido
   sin caja, y por último el form de inscripción también en caja... poner
   el contenido en su propia caja y eliminar la caja que engloba a las
   3"). La plantilla "single-evento" mete "Datos de Evento" e
   "Inscripción a la Actividad" cada uno en su propio Grupo con fondo/
   borde, con el contenido libre (texto + imagen destacada) suelto entre
   los dos — y las tres cosas dentro de un Grupo exterior que TAMBIÉN
   pinta fondo/borde propios (la "tarjeta blanca" de la plantilla),
   dejando una caja envolviendo a otras dos con un hueco sin caja en
   medio.
   ========================================================================== */

/* 1. Caja exterior neutralizada — SOLO la que de verdad envuelve a
   ".logistica-tabla-moderna" (":has()", para no tocar por error alguna
   otra "tarjeta blanca" del sitio que comparta las mismas clases
   genéricas de Gutenberg con otra intención). */
body.single-evento .wp-block-group.has-base-background-color:has(.logistica-tabla-moderna) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Caja nueva para el contenido libre — creada por JS
   (js/shortcode-datos-evento.js, que mueve ahí los nodos sueltos entre
   la caja de Datos de Evento y la de Inscripción), coloreada IGUAL que
   esas otras dos (fondo blanco, borde #D1D5DB, radio 10px, relleno
   ~10.72px, margen 16px arriba/abajo — var(--wp--preset--spacing--30/40)
   del tema padre). */
.scout-caja-contenido-evento {
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: var(--radio-tarjeta);
    padding: 10.72px;
    margin: 16px 0;
    box-sizing: border-box;
}

/* ANTI-WPAUTOP (Seguro contra saltos de línea) */
.logistica-tabla-moderna > *:not(.log-fila) {
    display: none !important;
}

/* --- FILAS --- */
.log-fila {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: stretch;
    transition: var(--transicion-suave);
}

.log-fila:hover {
    background-color: color-mix(in srgb, var(--scout-global-base), white 97%);
}

/* --- ETIQUETAS (Columna Izquierda) --- */
.log-etiqueta {
    /* Recortado en dos rondas (19/08/2026, a petición expresa: "aún se
       puede compactar más") — de 1rem a 0.6rem, y de ahí a 0.35rem. Se
       deja el lateral (separa del borde de la caja exterior), se recorta
       el vertical, que es el que sobraba. */
    padding: 0.35rem 1rem;
    color: var(--scout-global-oscuro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    display: flex;
    /* "center" en vez de "flex-start" (19/08/2026, a petición expresa:
       "que el título del campo se alinee verticalmente con el valor").
       ".log-etiqueta" ocupa toda la altura de la fila (hereda
       "align-items:stretch" de ".log-fila"), pero ".log-dato" de al lado
       NO se estira ("align-self:start", más abajo) — sin este cambio, la
       etiqueta se quedaba anclada arriba de la fila mientras el valor se
       quedaba pegado a su propio contenido, descuadrados entre sí en las
       filas donde el valor mide más que una línea (ej. "PAGO"). */
    align-items: center;
}

/* --- DATOS (Columna Derecha) ---
   Mismo lenguaje visual que los campos del formulario de inscripción
   (fondo blanco, radio de los inputs), pero con un borde más suave para
   no parecer un campo editable: esto es solo lectura. */
.log-dato {
    display: block;
    /* CORRECCIÓN CRÍTICA: Permite que el contenido colapse y rompa las URLs largas en móviles */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    background-color: #ffffff;
    border: 1px solid color-mix(in srgb, var(--scout-global-borde), transparent 40%);
    border-radius: var(--radio-boton);
    /* Recortado en dos rondas (19/08/2026, "aún se puede compactar más")
       — de "0.75rem 1rem" a "0.45rem 1rem", y de ahí a lo de abajo.
       Mismo criterio que la etiqueta de al lado: se deja el lateral, se
       recorta el vertical (relleno interno Y separación entre filas). */
    padding: 0.3rem 1rem;
    /* Antes 1rem de margen a la derecha y 0 a la izquierda (15/08/2026,
       a petición expresa: "más aire" que el formulario de inscripción,
       cuyos campos son a ancho completo sin margen lateral). Quitado el
       margen horizontal — la caja ahora ocupa todo el ancho de su celda
       de la rejilla, igual que los campos del formulario. Solo queda el
       margen vertical, para separar una fila de la siguiente. */
    margin: 0.2rem 0;
    align-self: center;
}

.log-dato p {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- REFUERZO VISUAL PARA NEGRITAS --- */
.log-dato strong, 
.log-dato b {
    color: var(--scout-global-oscuro);
    font-weight: 900;
}

/* ==========================================================================
   MEDIA QUERIES - DISEÑO RESPONSIVO (MÓVILES)
   ========================================================================== */

@media (max-width: 781px) {
    /* Transformación a columna única */
    .log-fila {
        grid-template-columns: 1fr;
    }

    /* Corrección de la jerarquía visual de la etiqueta */
    .log-etiqueta {
        /* Ajuste asimétrico (Top, Right, Bottom, Left): acerca la etiqueta al dato inferior */
        padding: 1rem 1rem 0.2rem 1rem;
        font-size: 0.75rem; /* Reducción tipográfica para subordinar la etiqueta al dato */
        color: var(--scout-global-oscuro);
    }

    /* Ajuste del bloque de datos: caja pegada a su etiqueta, con hueco antes de la siguiente fila */
    .log-dato {
        margin: 0.2rem 1rem 1rem 1rem;
    }
}