/* ==========================================================================
   COMPONENTE: MURO DE INICIO (Tarjetas de Portada)
   Archivo: /css/shortcode-muro-inicio.css
   Descripción: Estilos para la cuadrícula de noticias y eventos en la página principal.
   ========================================================================== */
/* ==========================================================================
   0. BANNER DE PRIVACIDAD PARA VISITANTES
   ========================================================================== */
/* 23/08/2026: este banner ya no vive arriba del muro (por eso ya no
   necesita "grid-column:1/-1", pensado para ocupar todo el ancho de esa
   rejilla) — ahora lo pinta [scout_agenda] cuando se oculta a un
   visitante (shortcode-agenda.php), en la columna del calendario/agenda,
   no en la del muro. También se quita el "border-left" morado de fábrica
   — a petición expresa, ese acento ya no se usa como color de UI
   genérico (mismo criterio que los botones de acción, ver CLAUDE.md:
   el morado se reserva para identidad de marca). */
.muro-banner-privacidad {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: #ffffff !important;
    border: 1px solid var(--scout-global-borde) !important;
    border-radius: var(--radio-tarjeta) !important;
    box-shadow: var(--sombra-tarjeta) !important;
    padding: 20px 24px;
    margin-top: 0.75rem;
}

.muro-banner-icono {
    font-size: 1.6rem;
    line-height: 1;
}

.muro-banner-texto h3 {
    margin: 0 0 8px;
    color: var(--scout-global-oscuro) !important;
    font-size: 1.15rem;
}

.muro-banner-texto p {
    margin: 0 0 10px;
    color: var(--scout-global-texto) !important;
    font-size: 0.95rem;
    line-height: 1.5;
}

.muro-banner-boton {
    display: inline-block;
    margin: 4px 10px 4px 0;
    padding: 8px 16px;
    border-radius: var(--radio-boton);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--scout-global-base) !important;
    color: #ffffff !important;
}

.muro-banner-boton-secundario {
    background-color: transparent !important;
    color: var(--scout-global-base) !important;
    border: 1px solid var(--scout-global-base) !important;
}
/* ==========================================================================
   1. CONTENEDOR PRINCIPAL Y CUADRÍCULA (GRID)
   ========================================================================== */

/* 1.1. Grid Automático: Se adapta al tamaño de la pantalla sin romperse */
.muro-mixto-contenedor {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Ancho mínimo por tarjeta: 280px */
    gap: 1.5rem !important; /* Espacio hueco entre las tarjetas */
    /* "max-width:100%" + "min-width:0" (19/08/2026, fallo real encontrado:
       "en pantallas pequeñas... se salen un poquito por la derecha...
       empieza a pasar en <380px"). El suelo de 280px de "minmax()" de
       arriba es justo lo que provoca el corte: por debajo de ~380px de
       ancho de pantalla, el hueco real disponible para esta rejilla baja
       de 280px (descontando los márgenes globales del sitio y el propio
       "gap"), y sin un límite máximo propio aquí, este <div> (dentro de
       ".wp-block-column", un elemento flex) se queda con el ancho de SU
       CONTENIDO en vez del ancho que le deja su columna — es la misma
       trampa "min-width:0 en cascada" ya documentada en CLAUDE.md para
       las tablas de gestión, aplicada aquí por primera vez al muro de
       inicio: sin este tope, no es la rejilla la que se encoge o saca
       scroll interno, es TODA LA PÁGINA la que se ensancha hacia la
       derecha (comprobado en vivo: la página entera desbordaba ~18px a
       350px de ancho de ventana). */
    max-width: 100%;
    min-width: 0;
}

/* 1.2. Noticia Destacada: Fuerza a la primera tarjeta a ocupar toda la fila superior */
.muro-mixto-contenedor article:first-child {
    grid-column: 1 / -1 !important;
}


/* ==========================================================================
   2. ESTRUCTURA BASE DE LA TARJETA
   ========================================================================== */

/* 2.1. Estado de reposo de la tarjeta (sin interacción) */
.tarjeta-elevada {
    position: relative;
    background-color: #ffffff !important; /* Fondo blanco de la tarjeta */
    border: 1px solid var(--scout-global-borde) !important; /* Línea fina de borde gris verdoso */
    border-radius: var(--radio-tarjeta) !important; /* Esquinas redondeadas generales */
    box-shadow: var(--sombra-tarjeta) !important; /* Sombra inferior sutil */
    overflow: hidden; /* Corta la imagen para que no sobresalga de las esquinas redondeadas */
    display: flex;
    flex-direction: column;
    transition: var(--transicion-suave) !important; /* Animación general al interactuar */
    z-index: 1;
}



/* 2.2. Efecto Hover: Lo que ocurre al poner el ratón encima */
.tarjeta-elevada:hover {
    box-shadow: var(--sombra-hover) !important; /* La sombra se hace más profunda y amplia */
    border-color: var(--scout-global-base) !important; /* El marco se tiñe del verde principal */
    transform: translateY(-4px); /* La tarjeta "flota" o se eleva 4px hacia arriba */
}


/* ==========================================================================
   2.5. TARJETA DESTACADA (la primera, a todo el ancho): formato horizontal
   ========================================================================== */
@media (min-width: 640px) {
    .muro-mixto-contenedor article:first-child {
        flex-direction: row !important;
    }

    .muro-mixto-contenedor article:first-child .tarjeta-imagen {
        width: 42%;
        height: auto;
        flex-shrink: 0;
    }

    .muro-mixto-contenedor article:first-child .tarjeta-cuerpo {
        flex: 1;
        justify-content: center;
    }

    .muro-mixto-contenedor article:first-child .tarjeta-titulo {
        font-size: 1.7rem;
    }
}

/* ==========================================================================
   3. ÁREA DE IMAGEN (CABECERA DE LA TARJETA)
   ========================================================================== */

/* 3.1. Imagen destacada subida en el post */
.tarjeta-imagen {
    height: 180px; /* Altura máxima estricta para la zona de la foto */
    background-size: cover; /* Recorta y ajusta la foto para llenar todo el recuadro sin deformar */
    background-position: center; /* Centra el enfoque de la imagen */
    background-repeat: no-repeat;
}

/* 3.2. Imagen por defecto (cuando la noticia no tiene foto propia).
   La imagen de referencia (Bandera_cielo.jpg) es una fotografía, no un
   escudo pequeño: debe llenar el hueco igual que una imagen destacada
   manual (background-size: cover, heredado de .tarjeta-imagen). Solo se
   deja el fondo corporativo como color de carga mientras llega la foto. */
.tarjeta-imagen.imagen-por-defecto {
    background-color: var(--scout-global-fondo);
}


/* ==========================================================================
   4. CONTENEDOR DE TEXTOS (CUERPO DE LA TARJETA)
   ========================================================================== */

/* 4.1. Caja interna inferior donde van todos los textos y etiquetas */
.tarjeta-cuerpo {
    padding: 20px; /* Margen de aire entre los textos y las paredes de la tarjeta */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Estira la caja si el texto es corto, para que todas las tarjetas midan lo mismo */
}


/* ==========================================================================
   5. METADATOS Y ETIQUETAS (BADGES)
   ========================================================================== */



/* 5.1. Etiqueta indicadora superior (ej. "NOTICIA" o "EVENTO") */
.tarjeta-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase; /* Fuerza las mayúsculas */
    letter-spacing: 0.5px;
    margin-bottom: 12px; /* Aire inferior antes de las siguientes etiquetas */
    padding: 4px 10px; /* Relleno interno de la píldora */
    border-radius: var(--radio-badge); /* Forma redondeada de pastilla */
    background-color: var(--scout-global-fondo) !important; /* Fondo verde clarito */
    color: var(--scout-global-oscuro) !important; /* Letras verde oscuro */
    align-self: flex-start; /* Evita que la pastilla se estire a lo ancho */
}

/* 5.2. Fila agrupador de las etiquetas de Secciones (Grupo, Manada, Esculta, etc.) */
.tarjeta-secciones {
    display: flex;
    gap: 5px; /* Distancia horizontal de 5px entre una píldora y otra */
    margin-bottom: 12px; /* Aire inferior antes de llegar a la fecha o título */
    flex-wrap: wrap; /* Permite que las etiquetas bajen de línea si hay demasiadas */

}

/* 5.3. Texto de alerta rojo (ej. "Inscripción hasta: 14 Jun") */
.tarjeta-fecha-limite {
    display: block;
    font-size: 0.95rem;
    color: #b91c1c !important; /* Tono granate/rojo alerta de alta visibilidad */
    font-weight: 700;
    margin-bottom: 12px; /* Separación con el título principal */
}


/* ==========================================================================
   6. TIPOGRAFÍA: TÍTULOS Y TEXTO PRINCIPAL
   ========================================================================== */

/* 6.1. Contenedor estructural del título */
.tarjeta-titulo {
    margin: 15px 0 12px 0 !important; /* Crea 15px de aire por arriba, aislándolo de metadatos */
    font-size: 1.4rem;
    line-height: 1.3; /* Controla el espaciado vertical cuando el título ocupa varias líneas */
}

/* 6.2. Enlace en estado normal dentro del título */
.tarjeta-titulo a {
    color: var(--scout-global-oscuro) !important; /* Usa el tono oscuro de lectura corporativo */
    text-decoration: none !important; /* Elimina cualquier línea de subrayado heredada del tema */
    font-weight: 700;
    transition: var(--transicion-suave); /* Suaviza el cambio al pasar el cursor */
}

/* 6.2.b "Enlace estirado" (18/08/2026, a petición expresa): antes solo el
   texto del título era clicable, sin ninguna pista visual de que el resto
   de la tarjeta (imagen, etiquetas, extracto) también debería llevar al
   detalle — nada indicaba dónde pinchar. En vez de envolver TODA la
   tarjeta en un <a> (inválido en HTML anidar bloques dentro de un enlace,
   y aquí no hace falta: no hay ningún otro enlace/botón dentro de la
   tarjeta con el que pueda entrar en conflicto), se estira el ÁREA DE
   CLIC del enlace ya existente con un ::after absoluto que cubre toda
   ".tarjeta-elevada" (su ancestro con position:relative). El navegador
   sigue registrando el clic como un clic sobre este <a> real, así que el
   enlace conserva su semántica y accesibilidad normales. */
.tarjeta-titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Pista visual (18/08/2026): con toda la tarjeta ahora clicable, el
   cursor de mano debe notarse en cualquier punto de ella, no solo sobre
   el texto del título. */
.tarjeta-elevada {
    cursor: pointer;
}

/* 6.3. Enlace en estado Hover (al pasar el ratón) */
.tarjeta-titulo a:hover {
    color: var(--scout-global-base) !important; /* Destaca el texto con el verde principal vivo */
}

/* 6.4. Párrafo de resumen (Extracto inferior) */
.tarjeta-extracto {
    font-size: 1.05rem;
    color: var(--scout-global-texto) !important; /* Gris-verdoso medio para lectura prolongada */
    margin-bottom: 18px; /* Separación respecto a la parte inferior de la tarjeta */
    line-height: 1.5; /* Altura de línea recomendada para lectura en párrafos */
    font-weight: 500;
}

/* ==========================================================================
   7. TARJETA DE EVENTO CANCELADO (18/08/2026, a petición expresa: "las
   [tarjetas] tachadas y atenuadas, tanto en las tarjetas como en la
   agenda"). Mismo criterio que ya usa shortcode-agenda.css: SIN opacity en
   el contenedor (".tarjeta-elevada") — un padre con opacity < 1 atenuaría
   también al badge "Cancelada", que debe leerse a toda claridad. Se atenúa
   cada elemento de texto por separado con colores apagados explícitos.
   ========================================================================== */
.tarjeta-elevada.tarjeta-cancelada .tarjeta-tag,
.tarjeta-elevada.tarjeta-cancelada .tarjeta-titulo a,
.tarjeta-elevada.tarjeta-cancelada .tarjeta-extracto {
    color: #9ca3af !important;
}
.tarjeta-elevada.tarjeta-cancelada .tarjeta-titulo a:hover {
    color: #6b7280 !important;
}

/* Badges de sección también atenuados (18/08/2026, a petición expresa:
   "para que aún se note más" que está cancelado) — mismo criterio que en
   shortcode-agenda.css: "opacity" aplicado a cada badge de sección por
   separado (":not(.badge-cancelada)"), no al contenedor, para no
   atenuar de paso a la propia etiqueta "Cancelada". */
.tarjeta-elevada.tarjeta-cancelada .badge-seccion:not(.badge-cancelada) {
    opacity: 0.45;
    text-decoration: line-through;
}

/* "Inscripción hasta: ..." tachada y atenuada también (19/08/2026, a
   petición expresa) — para un evento cancelado ya no aplica ningún plazo,
   y se queda en rojo llamativo (".tarjeta-fecha-limite", pensado para
   "atención, esto urge") si no se anula aquí. */
.tarjeta-elevada.tarjeta-cancelada .tarjeta-fecha-limite {
    color: #9ca3af !important;
    text-decoration: line-through;
}