/*
 * Hoja de estilos base — CJS-CNSE
 * Hoja única, sin preprocesadores ni build step, para que cualquier persona
 * pueda abrirla y entenderla directamente.
 *
 * Paleta: #054150 (teal oscuro), #f8952a (naranja), #fee01d (amarillo).
 * El naranja y el amarillo son demasiado claros para usar texto blanco
 * encima (no cumplen 4.5:1) — siempre se combinan con texto en
 * --color-primario. El teal oscuro sí admite texto blanco encima.
 */

/*
 * ---------- Tipografía de marca (Figtree) ----------
 * Figtree es la fuente propia del sitio: geométrica, cálida y muy
 * legible. Se sirve DESDE EL PROPIO SERVIDOR (carpeta /assets/fonts/),
 * nunca desde un CDN externo — así cumplimos la restricción del
 * proyecto (sin dependencias de terceros) y protegemos la privacidad
 * de quien visita (no se hacen peticiones a Google).
 *
 * Son fuentes "variables": un solo archivo cubre TODOS los grosores
 * (de 300 a 900), por eso el descriptor font-weight indica un rango.
 * Esto ahorra peso y peticiones frente a tener un archivo por grosor.
 *
 * font-display: swap → el texto se ve de inmediato con la fuente de
 * sistema y se cambia a Figtree en cuanto carga, sin pantalla en
 * blanco (mejor rendimiento percibido en móvil / 4G).
 */
@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/figtree-latin-wght-italic.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --color-primario: #054150;
    --color-primario-claro: #0a6a82;
    --color-acento: #f8952a;
    --color-acento-claro: #fee01d;
    --color-texto: #1a1a1a;
    --color-texto-claro: #4a4a4a;
    --color-fondo: #ffffff;
    --color-fondo-alterno: #f4f7f8;
    --color-borde: #d8e0e2;
    --color-exito-fondo: #e3f5e9;
    --color-exito-texto: #14622f;
    --color-error-fondo: #fdecea;
    --color-error-texto: #8a1f11;

    /*
     * Tipografía. --fuente-base es Figtree con una pila de reserva de
     * fuentes del sistema por si el woff2 fallara al cargar: el sitio
     * sigue siendo legible sin ella. --fuente-titulos existe por si en
     * el futuro se quiere una fuente distinta para los encabezados;
     * hoy apunta a la misma familia para mantener coherencia.
     */
    --fuente-base: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fuente-titulos: var(--fuente-base);

    --espacio-1: 0.5rem;
    --espacio-2: 1rem;
    --espacio-3: 1.5rem;
    --espacio-4: 2rem;
    --espacio-5: 3rem;

    --radio-borde: 0.5rem;

    /*
     * Escala de sombras y transiciones (sistema de diseño).
     * Antes cada componente definía su propia box-shadow y su propia
     * duración de transición, con decenas de valores distintos que se
     * fueron acumulando fase a fase. Estas variables son la referencia
     * única: todo código nuevo debe usarlas en vez de inventar valores.
     *
     *   --sombra-sm  → tarjetas en reposo, elevación mínima.
     *   --sombra-md  → tarjetas al pasar el ratón, menús desplegables.
     *   --sombra-lg  → modales y elementos flotantes destacados.
     */
    --sombra-sm: 0 2px 8px rgba(5, 65, 80, 0.08);
    --sombra-md: 0 6px 18px rgba(5, 65, 80, 0.12);
    --sombra-lg: 0 16px 40px rgba(5, 65, 80, 0.18);

    --transicion: 0.15s ease;
    --transicion-lenta: 0.3s ease;
}

/* ---------- Reinicio básico ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 100%; /* respeta el tamaño de fuente del navegador/usuario */
    scroll-behavior: smooth;
}

/* Respeta la preferencia del sistema operativo de movimiento reducido.
   WCAG 2.3.3: ningún scroll automático brusco para quien lo desactiva. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--fuente-base);
    font-size: 1rem; /* 16px mínimo, según criterio de accesibilidad */
    line-height: 1.6;
    color: var(--color-texto);
    background: var(--color-fondo);
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    line-height: 1.2;
    letter-spacing: -0.01em; /* Figtree respira mejor con tracking algo cerrado en titulares */
    color: var(--color-primario);
}

a {
    color: var(--color-primario);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* ---------- Accesibilidad: foco visible y utilidades ---------- */

:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primario);
    color: #fff;
    padding: var(--espacio-1) var(--espacio-2);
    z-index: 1000;
    border-radius: 0 0 var(--radio-borde) 0;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Botones (objetivo táctil mínimo 44x44px en móvil) ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radio-borde);
    border: 2px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* Botón principal — usa el NARANJA de la marca (#f8952a) con texto en
   el teal oscuro. La combinación pasa contraste WCAG 2.1 AA (4.7:1)
   y crea más jerarquía visual frente al teal del header y el menú. */
.boton-principal {
    background: var(--color-acento);
    color: var(--color-primario);
    border-color: var(--color-acento);
    font-weight: 700;
}

.boton-principal:hover,
.boton-principal:focus-visible {
    background: var(--color-acento);
    box-shadow: 0 4px 14px rgba(248, 149, 42, 0.45);
    transform: translateY(-1px);
}

.boton-secundario {
    background: var(--color-fondo);
    color: var(--color-primario);
    border-color: var(--color-primario);
}

/* Botón "de acción": teal sólido. Convive con boton-principal (naranja)
   sin competir: la regla es "un solo naranja por pantalla". Este es el
   verde/teal para acciones secundarias que aún quieren llamar la
   atención (Filtrar, Aplicar, etc.). */
.boton-accion {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

.boton-accion:hover,
.boton-accion:focus-visible {
    background: var(--color-primario-claro);
    border-color: var(--color-primario-claro);
}

.boton-peligro {
    background: var(--color-error-texto);
    color: #fff;
}

.boton-enlace {
    background: none;
    border: none;
    color: var(--color-primario);
    text-decoration: underline;
    padding: 0.4rem;
    min-height: 44px;
    cursor: pointer;
}

.boton-salir {
    color: #fff;
    text-decoration: underline;
    align-self: center;
    /* Empuja el botón al extremo derecho de la cabecera del panel,
       separado del menú de secciones. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radio-borde);
}

.boton-salir:hover,
.boton-salir:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

/* Botones de acción con icono dentro de tablas/listas del panel. */
.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    background: var(--color-fondo);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    color: var(--color-primario);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

/* Dentro de tablas del panel, los botones de acción se compactan a
   32x32 — el mínimo de WCAG 2.2 SC 2.5.8 son 24x24 px, así que 32 es
   cómodo y deja sitio para varios botones por fila. En tablet/móvil
   recuperan los 44px del default. */
@media (min-width: 768px) {
    .tabla-admin .boton-icono {
        min-width: 32px;
        min-height: 32px;
        padding: 0.25rem 0.4rem;
        font-size: 0.85rem;
    }
}

.boton-icono:hover,
.boton-icono:focus-visible {
    border-color: var(--color-primario);
    background: var(--color-fondo-alterno);
}

.boton-icono[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.boton-icono--peligro {
    color: var(--color-error-texto);
    border-color: rgba(138, 31, 17, 0.3);
}

.boton-icono--peligro:hover,
.boton-icono--peligro:focus-visible {
    background: var(--color-error-fondo);
    border-color: var(--color-error-texto);
}

/* ---------- Avisos (éxito/error) — nunca solo color, siempre texto ---------- */

.aviso {
    padding: var(--espacio-2);
    border-radius: var(--radio-borde);
    margin-bottom: var(--espacio-2);
    border: 2px solid transparent;
    font-weight: 600;
}

.aviso-exito {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
    border-color: var(--color-exito-texto);
}

.aviso-error {
    background: var(--color-error-fondo);
    color: var(--color-error-texto);
    border-color: var(--color-error-texto);
}

/* ---------- Fieldset como agrupador visual en formularios largos ----
   Se usa en admin/destacado para separar "Imagen destacada",
   "Imagen de fondo" y "Botón" del resto del formulario. Alineado con
   la estética del sitio: fondo alterno claro, borde suave, título en
   la parte superior. */
.campo-fieldset {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    background: var(--color-fondo-alterno);
    padding: var(--espacio-3);
    margin: var(--espacio-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.campo-fieldset > legend {
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--color-primario);
}

/* Vista previa de imagen ya guardada (miniatura + checkbox "quitar"). */
.destacado-vista-previa {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-2);
}

/* ====================================================================
   HERO UNIFICADO DE PÁGINA (.pagina-hero)
   ==================================================================== */

/* Cabecera común de páginas internas del sitio (noticias, agenda,
   transparencia, recursos, contacto…). Nace del patrón `.al-hero`
   de la página de Alianzas, que gustó, y aquí queda extraído a un
   componente reutilizable con variables globales para no duplicar
   estilos ni valores hard-codeados por página.

   Estructura del HTML esperado:
       <section class="pagina-hero" aria-labelledby="…">
           <div class="pagina-hero__contenido">
               <p class="pagina-hero__eyebrow">Categoría corta</p>
               <h1 id="…">Título de la página</h1>
               <p class="pagina-hero__intro">Descripción de una o dos frases.</p>
               <div class="pagina-hero__acciones">…</div>  (opcional)
           </div>
       </section>

   La imagen de fondo (assets/img/CJS-CNSE_bg.png) es la misma que
   la de la portada, así todas las cabeceras del sitio comparten
   identidad visual. Encima va un degradado teal semitransparente
   que garantiza contraste 4.5:1 del texto blanco (WCAG AA). */
.pagina-hero {
    padding: clamp(2.5rem, 5vw, 3.5rem) var(--espacio-3);
    /* El color sólido va en la última capa del shorthand: sirve de
       reserva si la imagen no carga y hace que los verificadores de
       contraste midan el texto blanco sobre teal oscuro (y no sobre el
       blanco del body, que daría un falso "sin contraste"). */
    background:
        linear-gradient(135deg, rgba(5, 65, 80, 0.94), rgba(10, 106, 130, 0.9)),
        url('/assets/img/CJS-CNSE_bg.png') center / cover no-repeat,
        var(--color-primario);
    color: #fff;
}

.pagina-hero__contenido {
    max-width: 72rem;
    margin: 0 auto;
}

/* "Eyebrow": pastilla corta encima del título que da contexto de la
   sección (ej. "Actividades", "Materiales"). Estilo pill sobre fondo
   translúcido blanco. */
.pagina-hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.8rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Título grande del hero. clamp() lo hace fluir sin depender de
   media queries: se agranda con la ventana pero no se descontrola
   en pantallas gigantes. */
.pagina-hero h1 {
    margin: 0 0 var(--espacio-2);
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    line-height: 1.15;
    color: #fff;
}

.pagina-hero__intro {
    max-width: 48rem;
    margin: 0 0 var(--espacio-2);
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.94);
}

.pagina-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--espacio-3);
}

@media (max-width: 600px) {
    .pagina-hero {
        padding: 2rem var(--espacio-3) 1.5rem;
    }
}


/* ---------- Bandera del selector de idioma en el menú ------------
   Pequeño SVG inline (Union Jack simplificado) que va justo antes
   del texto "English". El wrapper le da tamaño fijo, aspecto de
   pastilla y un borde suave para que se distinga sobre el fondo
   teal del header sin perder la forma rectangular clásica de
   bandera. */
.bandera-icono {
    display: inline-flex;
    width: 22px;
    height: 14px;
    margin-right: 6px;
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.bandera-icono svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Foco visible mejorado sobre el ítem de idioma: la bandera es
   pequeña, así que reforzamos con un outline naranja del sistema
   general para que sea perfectamente perceptible. */
.site-nav__item--idioma a:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Campo con checkbox ("Recordarme", RGPD, etc.) ----------
   Patrón compartido: checkbox pegado a la izquierda + label a la
   derecha, alineados por la parte superior para que si el label
   ocupa varias líneas, el cuadradito no se estire. El accent-color
   moderno pinta el marco/tick del checkbox con el color de marca,
   respetando el aspecto nativo del navegador. */
.campo-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.6rem;
    align-items: start;
}

/* !important y selector con .campo delante para vencer a la regla
   general ".campo input" (línea 362), que impone min-height 44px y
   bordes gruesos pensados para inputs de texto. Aquí queremos un
   checkbox nativo pequeño. */
.campo-check input[type="checkbox"],
.campo.campo-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    margin-top: 0.15rem;
    border: 0;
    accent-color: var(--color-primario);
    cursor: pointer;
}

.campo-check label {
    font-weight: 400;
    cursor: pointer;
    line-height: 1.45;
}

/* ---------- Formularios ---------- */

.formulario {
    max-width: 32rem;
    /* Centrado horizontal del formulario en su contenedor. Antes
       quedaba pegado a la izquierda y dejaba un hueco visual grande
       a la derecha en pantallas anchas. */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* El atributo hidden debe ganar al display:flex de arriba. Sin esto,
   cualquier .campo oculto por JS (como la hora del evento cuando se
   marca "todo el día") seguiría viéndose igual (mismo bug ya conocido
   en Recursos y en la biblioteca de imágenes de este proyecto). */
.campo[hidden] {
    display: none;
}

/* Fecha y hora en la misma fila en pantallas amplias; apiladas en
   móvil para no forzar campos minúsculos. */
.campo-fila-fecha-hora {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-3);
}

@media (max-width: 599.98px) {
    .campo-fila-fecha-hora {
        grid-template-columns: 1fr;
    }
}

.campo label {
    font-weight: 600;
}

.campo input,
.campo textarea,
.campo select {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-family: inherit;
}

.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
    border-color: var(--color-primario);
}

/* Etiqueta del campo: el "qué tengo que hacer aquí".
   Va arriba, en negrita, con icono opcional a la izquierda. */
.campo-label {
    font-weight: 600;
    color: var(--color-texto);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.campo-label i {
    color: var(--color-primario);
    font-size: 0.95em;
}

/* Texto de ayuda: el "para qué sirve esto" o "qué tener en cuenta".
   Va debajo del campo, en gris atenuado y con tamaño menor para que
   se entienda visualmente que es complementario, no la acción. */
.campo-ayuda {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--color-texto-claro);
    line-height: 1.45;
}

/* Variante "importante": fondo cálido para llamar la atención sobre
   ayudas críticas (como la del texto alt, que mucha gente se salta). */
.campo-ayuda--importante {
    background: #fff4d6;
    border-left: 4px solid #d4a017;
    color: #6a4500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radio-borde);
    font-weight: 500;
}

/* Botón con aspecto de enlace, dentro de una ayuda en línea (abre el
   modal "Cómo describir la imagen"). */
.enlace-en-linea {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    font: inherit;
}

.enlace-en-linea:hover,
.enlace-en-linea:focus-visible {
    color: var(--color-primario);
}

/* Campo "slug" / URL de la noticia. Prefijo fijo a la izquierda
   (/noticias/) + input editable + botón para regenerar desde el título. */
.campo-slug {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.campo-slug__prefijo {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--color-fondo-alterno);
    color: var(--color-texto-claro);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    border-right: 1px solid var(--color-borde);
}

.campo-slug input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    min-width: 10rem;
}

.campo-slug input:focus-visible {
    outline: none;
    background: #fffbea;
}

.campo-slug .boton-icono {
    border: none;
    border-left: 1px solid var(--color-borde);
    border-radius: 0;
}

.campo-ayuda code {
    background: var(--color-fondo-alterno);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Contenedor de campo con icono decorativo a la izquierda (sobre, candado…) */
.campo-con-icono {
    position: relative;
    display: flex;
    align-items: stretch;
}

.campo-con-icono input {
    flex: 1;
    padding-left: 3rem;
}

.campo-icono {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--color-texto-claro);
    pointer-events: none;
    font-size: 1.05rem;
}

/* El campo de contraseña hereda el campo-con-icono (candado a la izquierda)
   y además reserva sitio a la derecha para el botón de mostrar/ocultar. */
.campo-password input {
    padding-right: 3rem;
}

.boton-mostrar-pass {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radio-borde);
    cursor: pointer;
    padding: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-claro);
}

.boton-mostrar-pass:hover {
    color: var(--color-primario);
}

.boton-mostrar-pass:focus-visible {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

/* Por defecto vemos el "ojo abierto" (mostrar). Cuando el campo ya muestra
   la contraseña, cambiamos al "ojo tachado" (ocultar). */
.boton-mostrar-pass {
    font-size: 1.05rem;
}

.boton-mostrar-pass .icono-ojo--ocultar {
    display: none;
}

.boton-mostrar-pass.mostrada .icono-ojo--ver {
    display: none;
}

.boton-mostrar-pass.mostrada .icono-ojo--ocultar {
    display: inline-block;
}

/* (El campo trampa anti-bots se oculta con estilos en línea en el HTML
   del login para no depender de esta hoja de estilos. Buscar
   "trampa anti-bots" en admin/login.php.) */

.formulario-acciones {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

.formulario-en-linea {
    display: inline;
}

/* ---------- Cabecera y navegación pública ---------- */

/* Header pegado a la parte superior al hacer scroll. La sombra al
   despegar del top da contexto visual. z-index alto pero por debajo
   del overlay de modal (1000) para que un modal abierto siempre
   cubra el header. */
.site-header {
    background: var(--color-primario);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

body.menu-abierto {
    overflow: hidden;
}

body.menu-abierto::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2, 18, 26, 0.55);
    backdrop-filter: blur(2px);
    z-index: 40;
}

/* Cualquier elemento que sea destino de un ancla (#comite, etc.)
   debe dejar un hueco superior igual al alto del header sticky, o el
   navegador desplazaría el ancla justo debajo del header tapándolo.
   Aplicamos a section/h2/[id] para cubrir los casos del proyecto.
   --alto-header se ajusta por media query más abajo. */
:root {
    --alto-header: 80px;
}

[id]:not(body) {
    scroll-margin-top: var(--alto-header);
}

.site-header__interior {
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--espacio-2) var(--espacio-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* Logo de marca: imagen en lugar de texto. La altura fija + width auto
   mantiene la proporción original (342x161 ≈ 2.12:1) sin distorsión. */
.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0; /* evita el hueco fantasma debajo del img */
}

.site-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.menu-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    /* Fondo SÓLIDO (teal claro) en vez de blanco translúcido: sobre el
       header teal se ve casi igual, pero un fondo translúcido hace que
       los verificadores de contraste lo compongan sobre el blanco del
       body y marquen un falso "sin contraste" del icono blanco. Con un
       color sólido miden blanco sobre teal (6:1, cumple AA). */
    background: var(--color-primario-claro);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.24);
}

.site-nav__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
}

.site-nav__lista.menu-abierto {
    display: flex;
}

/* Enlace top-level (Transparencia, Recursos, Alianzas, Contacto). */
.site-nav__lista > .site-nav__item > a {
    display: block;
    padding: 0.75rem var(--espacio-1);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radio-borde);
}

.site-nav__lista > .site-nav__item > a:hover,
.site-nav__lista > .site-nav__item > a:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

/* Botón top-level de un grupo desplegable (Quiénes somos, Actualidad).
   Se ve y se comporta como los enlaces vecinos, pero internamente es
   <button> porque su acción es "abrir submenú", no "navegar". */
.site-nav__boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem var(--espacio-1);
    background: transparent;
    border: 0;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radio-borde);
}

.site-nav__boton:hover,
.site-nav__boton:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

.site-nav__flecha {
    font-size: 0.75em;
    transition: transform 0.15s ease;
}

.site-nav__boton[aria-expanded="true"] .site-nav__flecha {
    transform: rotate(180deg);
}

/*
 * Iconos amarillos de las entradas del menú. Antes esto se repetía como
 * style="..." en línea en cada <i> del header.php; se centralizó aquí
 * para poder cambiar el color de todos los iconos del menú desde un
 * único sitio. Se excluye la flecha de los desplegables (site-nav__flecha),
 * que debe seguir siendo blanca como el texto.
 */
.site-nav__lista > .site-nav__item > a > i,
.site-nav__boton > i:not(.site-nav__flecha) {
    margin-right: 6px;
    color: #ffde00;
}

/* Submenú en móvil: lista indentada bajo el botón cuando el menú
   principal está abierto. No hace falta un segundo tap: si la persona
   ya ha abierto el hamburguesa, queremos enseñarle TODO. */
.site-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--espacio-3);
}

.site-nav__submenu a {
    display: block;
    padding: 0.6rem var(--espacio-1);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radio-borde);
    font-size: 0.95rem;
    opacity: 0.92;
}

.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

@media (max-width: 991.98px) {
    .site-header__interior {
        padding: 0.9rem var(--espacio-3);
    }

    .menu-toggle {
        margin-left: auto;
        position: relative;
        z-index: 60;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(88vw, 24rem);
        max-width: 100%;
        height: 100dvh;
        padding: 1rem 1rem 1.5rem;
        background: linear-gradient(180deg, #0f4f6b 0%, #0b3b4d 100%);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25);
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
        z-index: 55;
        overflow-y: auto;
    }

    .site-nav.menu-abierto {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-nav__lista {
        display: none;
        margin-top: 4rem;
        gap: 0.45rem;
    }

    .site-nav__lista.menu-abierto {
        display: flex;
    }

    .site-nav__item {
        width: 100%;
    }

    .site-nav__lista > .site-nav__item > a,
    .site-nav__boton {
        width: 100%;
        padding: 0.9rem 1rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        justify-content: flex-start;
        border-radius: 0.9rem;
    }

    .site-nav__submenu {
        padding: 0.35rem 0 0 0.4rem;
        display: none;
        gap: 0.2rem;
    }

    .site-nav__boton[aria-expanded="true"] + .site-nav__submenu {
        display: grid;
    }

    .site-nav__submenu a {
        padding: 0.7rem 0.8rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle,
    .site-nav,
    .site-nav__flecha {
        transition: none;
    }
}

@media (min-width: 992px) {
    .menu-toggle {
        display: none;
    }

    /* Items del menú marcados como "solo móvil": desaparecen cuando el
       menú pasa a modo horizontal en escritorio. Se usa en "Inicio":
       en escritorio ya se accede desde el logo. */
    .site-nav__item--solo-movil {
        display: none;
    }

    .site-nav {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: visible;
    }

    .site-nav__lista {
        display: flex !important;
        flex-direction: row;
        width: auto;
        gap: 0.25rem;
        margin-top: 0;
    }

    /* Cada item top-level es relativo para anclar el submenú. */
    .site-nav__item {
        position: relative;
        width: auto;
    }

    /* Submenú: oculto por defecto, se muestra al hover/focus-within
       del item, o cuando el JS pone aria-expanded="true" en el botón
       (al hacer clic). Las tres rutas (ratón, teclado, click) abren
       el submenú, y todas comparten exactamente los mismos estilos. */
    /* IMPORTANTE: sin gap entre el botón y el submenú.
       Antes teníamos "top: calc(100% + 4px)" y esos 4 píxeles hacían
       que al bajar el ratón del botón se perdiera el estado :hover y
       el submenú desapareciese antes de llegar a él. Ahora "top:
       100%" lo pega al botón; el aire visual entre el borde superior
       del submenú y su primer enlace lo da el padding-top interno,
       que TAMBIÉN es zona activa del hover. Así el ratón nunca sale
       del área que mantiene el submenú abierto. */
    .site-nav__submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        padding: 0.6rem 0.4rem 0.4rem;
        background: var(--color-primario);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radio-borde);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }

    .site-nav__item--desplegable:hover .site-nav__submenu,
    .site-nav__item--desplegable:focus-within .site-nav__submenu,
    .site-nav__boton[aria-expanded="true"] + .site-nav__submenu {
        display: block;
    }
}

/* ---------- Pie de página público ---------- */

.site-footer {
    background: var(--color-fondo-alterno);
    border-top: 1px solid var(--color-borde);
    margin-top: var(--espacio-5);
}

.site-footer__interior {
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--espacio-4) var(--espacio-3);
    text-align: center;
}

.site-footer__redes {
    display: flex;
    justify-content: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-2);
}

.site-footer__redes a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin-bottom: var(--espacio-2);
}

.site-footer__menu a {
    color: var(--color-primario);
    font-size: 0.95rem;
    text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
    text-decoration: underline;
}

.red-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-primario);
    border: 2px solid var(--color-borde);
    border-radius: 50%;
    font-size: 1.25rem;
    text-decoration: none; /* sin subrayado, son iconos no texto */
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
    background: transparent;
}

.red-social:hover,
.red-social:focus-visible {
    color: #fff;
    background: var(--color-primario);
    border-color: var(--color-primario);
    transform: translateY(-1px);
}

/* ---------- Bloque de aliados institucionales ----------
   Aparece justo encima del copyright en el pie. Los logos van en
   /assets/img/aliados/; si el archivo no existe, el PHP cae a un
   <span> con el nombre, y este CSS lo presenta como una píldora
   gris discreta para que el footer no quede roto visualmente. */

.site-footer__aliados {
    margin: var(--espacio-3) 0;
    padding: var(--espacio-2) 0 0;
    border-top: 1px solid var(--color-borde);
}

.site-footer__aliados-titulo {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-texto-claro);
    margin: 0 0 var(--espacio-2);
}

.site-footer__aliados-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
}

/* Cada aliado se presenta sobre una "tarjeta" blanca: los logotipos
   son JPEG con fondo blanco (no transparentes) y el pie es gris claro,
   así que la tarjeta blanca los integra de forma limpia e intencionada
   en lugar de dejar rectángulos blancos sueltos sobre el gris. */
.site-footer__aliado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: var(--radio-borde);
    background: #fff;
    border: 1px solid var(--color-borde);
    text-decoration: none;
    color: var(--color-texto);
    transition: box-shadow 0.15s ease;
}

.site-footer__aliado:hover,
.site-footer__aliado:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.site-footer__aliado img {
    max-height: 48px;
    width: auto;
    display: block;
}

.site-footer__aliado-texto {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-weight: 600;
    color: var(--color-texto);
}

/* ---------- Página de portada provisional ---------- */

.hero {
    max-width: 48rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
    text-align: center;
}

/* ---------- CTA destacada de Transparencia en la portada ----------
   Es un criterio crítico del cliente: el Reglamento Interno debe estar
   accesible casi sin scroll. La maquetamos como un "banner" horizontal
   con icono grande, breve texto y un botón naranja primario muy claro.
   Estilo "noticia importante" — colores cálidos con buen contraste. */

.cta-transparencia {
    max-width: 75rem;
    margin: var(--espacio-4) auto;
    padding: var(--espacio-3) var(--espacio-4);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--espacio-3);
    align-items: center;
    /* Color sólido + gradiente: el sólido es el que miden los
       verificadores de contraste (no evalúan gradientes). */
    background-color: var(--color-primario);
    background-image: linear-gradient(135deg, var(--color-primario), var(--color-primario-claro));
    color: #fff;
    border-radius: var(--radio-borde);
    box-shadow: 0 4px 14px rgba(5, 65, 80, 0.25);
}

.cta-transparencia__icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.cta-transparencia__cuerpo h2 {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 1.25rem;
}

.cta-transparencia__cuerpo p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

/* En móvil/tablet: en vertical para que el botón no se quede arrinconado. */
@media (max-width: 768px) {
    .cta-transparencia {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--espacio-3);
    }
    .cta-transparencia__icono {
        margin: 0 auto;
    }
}

/* ---------- Últimas noticias en la portada pública ----------
   Mismo patrón visual que "Próximos eventos": cabecera con título a la
   izquierda y botón "Ver todas" a la derecha, y debajo la rejilla de
   tarjetas (que reutiliza .tarjetas-noticias / .tarjeta-noticia
   definidas más abajo). */

.ultimas-noticias {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.ultimas-noticias__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.ultimas-noticias h2 {
    margin: 0;
}

/* ---------- Comité Ejecutivo en la portada pública ---------- */

.comite-portada {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.comite-portada h2 {
    text-align: center;
    margin-bottom: var(--espacio-4);
}

.comite-tarjetas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--espacio-3);
}

/*
 * Tarjeta de miembro del Comité (rediseño Fase 6).
 *
 * Decisiones de accesibilidad: la bio corta se muestra SIEMPRE, no
 * oculta tras el hover. Ocultarla y revelarla al pasar el ratón la
 * dejaría inaccesible para quien navega con teclado o pantalla táctil
 * (que no pueden "hover"). El efecto de interacción se consigue con la
 * elevación de la tarjeta y el realce del aro de la foto, que son
 * puramente decorativos y no esconden información a nadie.
 *
 * align-items: stretch (por defecto en grid) hace que todas las
 * tarjetas de una fila tengan la misma altura aunque unas bios sean
 * más largas que otras, para que la rejilla quede alineada.
 */
.comite-tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    /* Filo superior de color de marca: da identidad a la tarjeta sin
       cargar de elementos. */
    border-top: 4px solid var(--color-acento);
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

/* Elevación al pasar el ratón. Solo en dispositivos con puntero real:
   en móvil/táctil no tiene sentido y el "hover pegajoso" molesta. */
@media (hover: hover) and (pointer: fine) {
    .comite-tarjeta:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-md);
    }
}

/* Respeta a quien pide movimiento reducido: sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .comite-tarjeta {
        transition: box-shadow var(--transicion);
    }
    .comite-tarjeta:hover {
        transform: none;
    }
}

.comite-tarjeta__foto {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-fondo-alterno);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espacio-2);
    /* Aro doble: anillo naranja + halo blanco que lo separa del filo
       de la tarjeta. box-shadow en vez de un segundo borde para no
       alterar el tamaño de la caja. */
    border: 3px solid var(--color-acento);
    box-shadow: 0 0 0 6px var(--color-fondo), var(--sombra-sm);
}

.comite-tarjeta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comite-tarjeta__nombre {
    margin: var(--espacio-1) 0 0;
    font-weight: 700;
    color: var(--color-primario);
    font-size: 1.15rem;
}

.comite-tarjeta__cargo {
    margin: 0;
    font-weight: 600;
    color: var(--color-primario-claro);
}

.comite-tarjeta__pronombres {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}

/* Bio separada del resto por una línea sutil, empujada al fondo con
   margin-top:auto para que, con tarjetas de igual altura, la bio de
   todas quede alineada abajo. */
.comite-tarjeta__bio {
    margin: var(--espacio-2) 0 0;
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--color-borde);
    width: 100%;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}

/* ---------- Páginas de error (404 / error genérico) ---------- */

.pagina-error {
    max-width: 32rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
    text-align: center;
}

/* ---------- Página de login ---------- */

.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-fondo-alterno);
}

.login-caja {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-4);
    max-width: 24rem;
    width: 100%;
    margin: var(--espacio-3);
}

.login-subtitulo {
    color: var(--color-texto-claro);
    margin-top: -0.5rem;
}

/* ---------- Panel de administración ---------- */

.panel-admin {
    background: var(--color-fondo-alterno);
}

.panel-cabecera {
    background: var(--color-primario);
    padding: var(--espacio-2) var(--espacio-3);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
}

.panel-marca {
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.panel-menu {
    list-style: none;
    display: flex;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.panel-menu a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radio-borde);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

.panel-menu a:hover,
.panel-menu a:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

/* Las entradas del menú de secciones aún no terminadas se ven atenuadas. */
.panel-menu__pendiente {
    opacity: 0.55;
    cursor: not-allowed;
}

.panel-contenido {
    max-width: 80rem; /* antes 60rem: las tablas con muchas acciones no cabían */
    margin: 0 auto;
    padding: var(--espacio-4) var(--espacio-3);
}

.panel-pie {
    text-align: center;
    padding: var(--espacio-3);
    color: var(--color-texto-claro);
}

.panel-cabecera-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

/* ---------- Accesos directos del dashboard ---------- */

.panel-accesos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espacio-3);
}

.acceso-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
    background: var(--color-fondo);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-3);
    text-decoration: none;
    color: var(--color-texto);
    text-align: center;
    min-height: 7rem;
    justify-content: center;
}

a.acceso-tarjeta:hover,
a.acceso-tarjeta:focus-visible {
    border-color: var(--color-primario);
}

.acceso-tarjeta--pendiente {
    color: var(--color-texto-claro);
    background: var(--color-fondo-alterno);
}

.acceso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primario);
    font-size: 2.25rem;
}

.acceso-tarjeta--pendiente .acceso-icono {
    color: var(--color-texto-claro);
}

.acceso-texto {
    font-weight: 600;
}

.acceso-pendiente {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Tablas del panel ---------- */

.tabla-admin {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-fondo);
}

.tabla-admin th,
.tabla-admin td {
    text-align: left;
    padding: var(--espacio-2);
    border-bottom: 1px solid var(--color-borde);
}

.tabla-acciones {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Texto de ayuda y estados ---------- */

.texto-ayuda {
    color: var(--color-texto-claro);
    margin-bottom: var(--espacio-3);
}

.estado-vacio {
    background: var(--color-fondo);
    border: 2px dashed var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-4);
    text-align: center;
    color: var(--color-texto-claro);
}

/* ---------- Comité Ejecutivo (panel) ---------- */

.lista-comite {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.lista-comite__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--espacio-3);
    align-items: center;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2);
}

.lista-comite__foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-fondo-alterno);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lista-comite__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-vacia {
    display: inline-flex;
    color: var(--color-texto-claro);
    font-size: 1.75rem;
}

.lista-comite__datos p {
    margin: 0;
}

.lista-comite__nombre {
    font-weight: 700;
    color: var(--color-primario);
}

.lista-comite__cargo {
    color: var(--color-texto);
}

.lista-comite__pronombres {
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}

.lista-comite__acciones {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 575px) {
    .lista-comite__item {
        grid-template-columns: auto 1fr;
    }

    .lista-comite__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Foto actual al editar (con opción de eliminar) */
.foto-actual {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-2);
}

.foto-actual img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-fondo-alterno);
}

.checkbox-en-linea {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

.campo-titulo {
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
}

.campo-archivo-etiqueta {
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
}

/* ===========================================================
   FASE 1 — Noticias (panel y frontend público)
   =========================================================== */

/* ---------- Cabecera de sección con varias acciones ---------- */

.acciones-cabecera {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

/* ---------- Filtros del listado de noticias en el panel ---------- */

.filtros-noticias {
    /* Pasamos de grid a flex para que los botones de acción se queden
       siempre a la derecha al lado del último filtro (caben de sobra
       ahora que el panel ocupa 80rem). */
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    align-items: end;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.filtros-noticias > .campo {
    flex: 1 1 12rem;
    min-width: 9rem;
}

/* Los desplegables de "Categoría" y "Estado" no necesitan ser tan anchos
   como el campo "Buscar por título". Les damos un máximo razonable para
   que el espacio sobrante lo absorba el buscador (que sí agradece más
   ancho). */
.filtros-noticias > .campo:has(select#categoria),
.filtros-noticias > .campo:has(select#estado) {
    flex: 0 1 12rem;
    max-width: 13rem;
}

.campo-acciones-filtro {
    /* Fix: heredábamos flex-direction: column del .campo padre y los
       botones quedaban apilados. Forzamos fila para que el "Filtrar"
       y "Quitar filtros" queden siempre uno al lado del otro. */
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-self: end;
    flex: 0 0 auto;
}

/* ---------- Etiqueta de categoría ---------- */

.etiqueta-categoria {
    /* "align-self: flex-start" evita que la etiqueta ocupe el ancho
       completo de la tarjeta cuando vive dentro de un contenedor
       flex en columna (como .tarjeta-noticia__cuerpo). Sin esto la
       categoría aparecía como una barra del 100 %. */
    align-self: flex-start;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    color: #fff;
    background: var(--color-primario);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

a.etiqueta-categoria:hover,
a.etiqueta-categoria:focus-visible {
    text-decoration: underline;
}

/* ---------- Estado de la noticia (borrador/publicado) ---------- */

.estado-noticia {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.estado-noticia--publicado {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.estado-noticia--borrador {
    background: #fff4d6;
    color: #6a4500;
}

/* ---------- Miniatura junto al título en el listado ---------- */

/* El contenedor flex va DENTRO del <td>, no en el propio <td>: poner
   display:flex en una celda de tabla rompe la fila, las columnas no
   se alinean entre sí y el borde inferior se ve cortado. */
.tabla-admin td .celda-titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
}

.tabla-admin th,
.tabla-admin td {
    vertical-align: middle;
}

.miniatura-noticia {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radio-borde);
    flex-shrink: 0;
}

.texto-secundario {
    color: var(--color-texto-claro);
}

/* ---------- Paginación ---------- */

.paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-3);
    flex-wrap: wrap;
}

.paginacion a {
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-primario);
    border-radius: var(--radio-borde);
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.paginacion a:hover,
.paginacion a:focus-visible {
    background: var(--color-primario);
    color: #fff;
}

.paginacion--publica {
    justify-content: center;
    gap: var(--espacio-3);
}

/* ---------- Formulario de noticia: zonas específicas ---------- */

/* Formularios "grandes": noticias y eventos. Comparten ancho para
   mantener coherencia visual entre las dos pantallas más usadas
   del panel. .formulario ya les aplica margin auto, así que basta
   con subir el max-width. */
.formulario-noticia,
.formulario-evento {
    max-width: 50rem;
}

.zona-imagen-destacada {
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2);
    background: var(--color-fondo);
}

.zona-imagen-destacada legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

.imagen-destacada-actual {
    margin-bottom: var(--espacio-2);
    text-align: center;
}

.imagen-destacada-actual img {
    max-width: 100%;
    max-height: 280px;
    border-radius: var(--radio-borde);
    display: block;
    margin: 0 auto;
}

.zona-soltar {
    border: 2px dashed var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-3);
    text-align: center;
    background: var(--color-fondo-alterno);
    margin-bottom: var(--espacio-2);
}

.zona-soltar--activa {
    background: #e6f1f5;
    border-color: var(--color-primario);
}

.enlace-falso {
    color: var(--color-primario);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.bloque-estado {
    border: none;
    padding: 0;
    margin: 0;
}

.bloque-estado .campo-label {
    margin-bottom: 0.5rem;
    display: block;
}

.opciones-estado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--espacio-2);
}

/* Tarjeta de opción: una caja clickable entera con un radio a la izquierda,
   título en negrita (la acción) y un texto de ayuda en gris debajo.
   Cuando está seleccionada (input:checked) cambia de borde y de fondo
   para que se vea sin lugar a dudas cuál de las dos opciones está activa. */
.opcion-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    background: var(--color-fondo);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.opcion-card:hover {
    border-color: var(--color-primario-claro);
}

.opcion-card:has(input:checked),
.opcion-card--activa {
    border-color: var(--color-primario);
    background: #eef4f6;
}

.opcion-card__radio {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
}

.opcion-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.opcion-card__titulo {
    font-weight: 600;
    color: var(--color-texto);
    line-height: 1.3;
}

.opcion-card__ayuda {
    color: var(--color-texto-claro);
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400; /* heredaba la negrita del <label> padre */
}

/* ---------- Frontend público: cabecera de sección ---------- */

.seccion-noticias {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.seccion-noticias__cabecera {
    text-align: center;
    margin-bottom: var(--espacio-4);
}

.seccion-noticias__cabecera p {
    color: var(--color-texto-claro);
    font-size: 1.1rem;
}

/* ---------- Bloques "contenido relacionado" (fin de noticia/evento) ---------- */

.noticias-relacionadas,
.eventos-relacionados {
    background: var(--color-fondo-alterno);
    border-top: 1px solid var(--color-borde);
    padding: var(--espacio-5) 0;
    margin-top: var(--espacio-5);
}

.noticias-relacionadas__inner,
.eventos-relacionados__inner {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 var(--espacio-3);
}

.noticias-relacionadas__titulo,
.eventos-relacionados__titulo {
    margin: 0 0 var(--espacio-4);
    font-size: 1.5rem;
}

/* ---------- Buscador de noticias por título ---------- */

.buscador-noticias {
    max-width: 34rem;
    margin: 0 auto var(--espacio-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Campo con icono a la izquierda y botón "Buscar" a la derecha, todo
   dentro de una misma "cápsula" para que se lea como un solo control. */
.buscador-noticias__campo {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.buscador-noticias__campo:focus-within {
    border-color: var(--color-primario-claro);
    box-shadow: var(--sombra-md);
}

.buscador-noticias__icono {
    padding: 0 0.5rem 0 1rem;
    color: var(--color-texto-claro);
    display: inline-flex;
}

.buscador-noticias__campo input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.75rem 0.5rem;
    font: inherit;
    color: var(--color-texto);
}

/* El foco visible lo damos al contenedor (focus-within); quitamos el
   contorno propio del input para no duplicarlo dentro de la cápsula. */
.buscador-noticias__campo input[type="search"]:focus {
    outline: none;
}

.buscador-noticias__campo .boton {
    margin: 0.25rem;
    border-radius: 999px;
    white-space: nowrap;
}

.buscador-noticias__limpiar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-texto-claro);
}

/* ---------- Filtros de categoría como "píldoras" ---------- */

.filtro-categorias ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espacio-4);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.filtro-cat {
    /* Badge compacto pero que sigue cumpliendo WCAG 2.2 SC 2.5.8
       (target size mínimo 24x24px CSS). 32px de alto entra de sobra. */
    --color-categoria: var(--color-primario);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; /* separación entre el icono y el texto */
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 2px solid var(--color-categoria);
    color: var(--color-categoria);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}

.filtro-cat:hover,
.filtro-cat:focus-visible {
    background: var(--color-categoria);
    color: #fff;
}

.filtro-cat--activa {
    background: var(--color-categoria);
    color: #fff;
}

/* ---------- Tarjetas de noticias ---------- */

.tarjetas-noticias {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espacio-3);
}

.tarjeta-noticia {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.tarjeta-noticia:hover,
.tarjeta-noticia:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(5, 65, 80, 0.12);
}

.tarjeta-noticia__enlace {
    display: block;
    color: var(--color-texto);
    text-decoration: none;
    height: 100%;
}

.tarjeta-noticia__imagen {
    aspect-ratio: 16 / 10;
    background: var(--color-fondo-alterno);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta-noticia__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

/* Zoom suave de la imagen al pasar el ratón o al recibir foco la
   tarjeta, igual que en las cards de eventos. El contenedor
   .tarjeta-noticia__imagen ya tiene overflow:hidden, así que el
   zoom no se sale de los bordes. Respeta prefers-reduced-motion. */
.tarjeta-noticia:hover .tarjeta-noticia__imagen img,
.tarjeta-noticia:focus-within .tarjeta-noticia__imagen img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-noticia__imagen img { transition: none; }
    .tarjeta-noticia:hover .tarjeta-noticia__imagen img,
    .tarjeta-noticia:focus-within .tarjeta-noticia__imagen img { transform: none; }
}

.tarjeta-noticia__placeholder {
    color: var(--color-texto-claro);
    font-size: 3rem;
}

.tarjeta-noticia__cuerpo {
    padding: var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tarjeta-noticia__titulo {
    margin: 0;
    color: var(--color-primario);
    font-size: 1.2rem;
}

.tarjeta-noticia__fecha {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}

/* ---------- Vista individual de noticia ---------- */

.noticia-articulo {
    max-width: 50rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.noticia-cabecera {
    margin-bottom: var(--espacio-3);
}

.noticia-cabecera h1 {
    margin: 0.5rem 0;
}

.noticia-fecha {
    color: var(--color-texto-claro);
    font-size: 0.95rem;
    margin: 0;
}

.noticia-imagen-destacada {
    margin: 0 0 var(--espacio-4);
}

.noticia-imagen-destacada img {
    width: 100%;
    border-radius: var(--radio-borde);
}

.noticia-cuerpo {
    font-size: 1.05rem;
    line-height: 1.7;
}

.noticia-cuerpo p {
    margin: 0 0 1.2em;
}

.noticia-cuerpo h2,
.noticia-cuerpo h3 {
    margin: 1.6em 0 0.6em;
}

.noticia-cuerpo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio-borde);
    margin: 1.2em auto;
    display: block;
}

.noticia-cuerpo blockquote {
    border-left: 4px solid var(--color-acento);
    padding: 0.5rem 1rem;
    margin: 1.5em 0;
    color: var(--color-texto-claro);
    font-style: italic;
}

.noticia-cuerpo a {
    color: var(--color-primario);
}

/* ---------- Compartir en redes (pie de noticia) ---------- */

.noticia-pie {
    margin-top: var(--espacio-5);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--color-borde);
}

.compartir__titulo {
    font-weight: 600;
    margin: 0 0 var(--espacio-2);
}

.compartir ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.compartir__boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: var(--radio-borde);
    border: 2px solid var(--color-primario);
    background: var(--color-fondo);
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.compartir__boton:hover,
.compartir__boton:focus-visible {
    background: var(--color-primario);
    color: #fff;
}

.noticia-volver {
    margin-top: var(--espacio-4);
}

.noticia-volver a {
    color: var(--color-primario);
    font-weight: 600;
}

.estado-vacio--publico {
    max-width: 40rem;
    margin: 0 auto;
}

/* ---------- Dashboard del admin ---------- */

.panel-bienvenida {
    margin-bottom: var(--espacio-4);
}

.panel-bienvenida h1 {
    margin: 0 0 0.25rem;
}

.panel-bienvenida p {
    margin: 0;
    color: var(--color-texto-claro);
}

.estadisticas-panel {
    margin-bottom: var(--espacio-5);
}

.estadisticas-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--espacio-2);
}

.estadistica-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--espacio-3);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    text-decoration: none;
    color: var(--color-texto);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
    min-height: 9rem;
}

a.estadistica-tarjeta:hover,
a.estadistica-tarjeta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(5, 65, 80, 0.08);
    border-color: var(--color-primario);
    color: var(--color-texto);
}

.estadistica-icono {
    color: var(--color-primario);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.estadistica-numero {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primario);
    line-height: 1;
}

.estadistica-etiqueta {
    font-weight: 600;
    color: var(--color-texto);
    font-size: 0.95rem;
}

.estadistica-sub {
    font-size: 0.85rem;
    color: var(--color-texto-claro);
}

/* Variantes de color de las tarjetas de estadísticas.
   Cada una usa un fondo pastel + un acento en el icono. Mantenemos
   el texto en colores oscuros para cumplir contraste AA. */
.estadistica-tarjeta--verde    { background: #e8f4ec; border-color: #b8dec5; }
.estadistica-tarjeta--verde    .estadistica-icono,
.estadistica-tarjeta--verde    .estadistica-numero { color: #14622f; }

.estadistica-tarjeta--azul     { background: #e6f1f5; border-color: #b1d0db; }
.estadistica-tarjeta--azul     .estadistica-icono,
.estadistica-tarjeta--azul     .estadistica-numero { color: #054150; }

.estadistica-tarjeta--amarillo { background: #fff4d6; border-color: #ead292; }
.estadistica-tarjeta--amarillo .estadistica-icono,
.estadistica-tarjeta--amarillo .estadistica-numero { color: #6a4500; }

.estadistica-tarjeta--morado   { background: #ede2f3; border-color: #c8acdc; }
.estadistica-tarjeta--morado   .estadistica-icono,
.estadistica-tarjeta--morado   .estadistica-numero { color: #5b1e8a; }

.estadistica-tarjeta--gris     { background: #f4f7f8; border-color: #d8e0e2; }
.estadistica-tarjeta--gris     .estadistica-icono,
.estadistica-tarjeta--gris     .estadistica-numero { color: #4a4a4a; }

.estadistica-tarjeta--naranja  { background: #fde2c9; border-color: #f0bf91; }
.estadistica-tarjeta--naranja  .estadistica-icono,
.estadistica-tarjeta--naranja  .estadistica-numero { color: #b85a00; }

.estadistica-tarjeta--rojo     { background: #fde6e3; border-color: #f0b6af; }
.estadistica-tarjeta--rojo     .estadistica-icono,
.estadistica-tarjeta--rojo     .estadistica-numero { color: #8a1f11; }

/* ---------- Bloque de configuración del Comité (selector de columnas) ---------- */

.config-comite {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.config-comite__bloque {
    border: none;
    padding: 0;
    margin: 0;
}

.opciones-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}

/* Botón-radio: tarjeta clickable que muestra un número.
   Sirve para elegir entre opciones discretas (2, 3, 4 columnas). */
.boton-opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    background: var(--color-fondo);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-texto);
    transition: background 0.15s, border-color 0.15s;
}

.boton-opcion input {
    /* Ocultamos visualmente el radio pero seguimos enviándolo. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.boton-opcion:hover {
    border-color: var(--color-primario-claro);
}

/* Estado "guardada": el valor que en este momento está en la BD. Se ve
   con un toque de gris suave, para que la persona sepa qué tenía antes
   de tocar nada. Si selecciona otra opción, el "guardado" se queda en
   gris y el "checked" pasa al color principal (regla de abajo). */
.boton-opcion--guardada {
    border-color: var(--color-borde);
    background: var(--color-fondo-alterno);
    color: var(--color-texto-claro);
}

/* Estado "checked": la opción seleccionada AHORA mismo. Va al final del
   bloque para que su especificidad gane a "guardada" cuando ambos
   coinciden (cuando aún no se ha tocado el formulario). */
.boton-opcion:has(input:checked) {
    border-color: var(--color-primario);
    background: var(--color-primario);
    color: #fff;
}

.config-comite__guardar {
    margin-left: auto;
}

/* ---------- Columnas configurables del Comité en la portada ---------- */

.comite-tarjetas--cols-2 { grid-template-columns: repeat(2, 1fr); }
.comite-tarjetas--cols-3 { grid-template-columns: repeat(3, 1fr); }
.comite-tarjetas--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .comite-tarjetas--cols-3,
    .comite-tarjetas--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .comite-tarjetas--cols-2,
    .comite-tarjetas--cols-3,
    .comite-tarjetas--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Gestor de imágenes (modal del WYSIWYG) ---------- */

.gi-seccion-titulo {
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-primario);
}

.gi-input-file {
    margin-bottom: 0.5rem;
}

.gi-separador {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: var(--espacio-3) 0;
}

.gi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.gi-tarjeta {
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    background: var(--color-fondo);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.gi-tarjeta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-tarjeta:hover,
.gi-tarjeta:focus-visible {
    border-color: var(--color-primario);
}

.gi-tarjeta--seleccionada {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(248, 149, 42, 0.35);
}

.gi-tarjeta--seleccionada::after {
    content: '\f00c'; /* fa-check */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: var(--color-acento);
    color: var(--color-primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.gi-vacio,
.gi-cargando {
    grid-column: 1 / -1;
    color: var(--color-texto-claro);
    text-align: center;
    padding: var(--espacio-3);
}

.accesos-panel h2 {
    margin: 0 0 var(--espacio-3);
}

.grupo-accesos-titulo {
    margin: var(--espacio-4) 0 var(--espacio-2);
    color: var(--color-primario);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 0.4rem;
}

.grupo-accesos-titulo:first-of-type {
    margin-top: 0;
}

.acceso-sub {
    font-size: 0.85rem;
    color: var(--color-texto-claro);
    margin-top: 0.25rem;
}

/* ---------- Banner sticky de "vista previa" ---------- */

/* Se muestra arriba del todo cuando un admin abre una noticia con
   ?preview=1 y todavía está en borrador. Sticky para que siga visible al
   hacer scroll por la noticia, y con colores cálidos (amarillo/marrón)
   que avisen sin asustar. */
.banner-vista-previa {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff4d6;
    border-bottom: 3px solid #d4a017;
    color: #5a3e00;
    padding: var(--espacio-2) var(--espacio-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.banner-vista-previa__contenido {
    max-width: 60rem;
    margin: 0 auto;
}

.banner-vista-previa__titulo {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.banner-vista-previa__ayuda {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- Tabla del panel: acciones más compactas en anchos medios ---------- */

/* A partir del ancho del panel (80rem), el listado de noticias tiene
   sitio para mostrar todos los botones con icono + texto. Por debajo,
   ocultamos el texto y dejamos solo el icono (el texto sigue presente
   como aria-label para lectores de pantalla, no perdemos accesibilidad). */
@media (max-width: 1100px) {
    .tabla-noticias .tabla-acciones .boton-icono > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tabla-noticias .tabla-acciones {
        gap: 0.35rem;
    }
}

/* Los 4 botones de acciones de noticias SIEMPRE en una sola fila:
   sin salto de línea en el flex y botones algo más compactos. La
   columna Título cede el espacio (los títulos largos de los posts
   importados de Blogger pasan a 2-3 líneas, que es lo esperable). */
.tabla-noticias .tabla-acciones {
    flex-wrap: nowrap;
}

.tabla-noticias td:last-child {
    /* La celda de acciones no se comprime: fuerza al resto de columnas
       a repartirse el hueco restante. */
    width: 1%;
    white-space: nowrap;
}

.tabla-noticias .boton-icono {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    min-width: 40px;
    min-height: 40px;
}

/* Transparencia: el Título aprovecha el espacio muerto que sobraba a
   la derecha de Acciones. Igual que arriba, la celda de acciones se
   queda con su ancho mínimo y el título absorbe el resto. */
.tabla-documentos-transparencia th:first-child,
.tabla-documentos-transparencia td:first-child {
    width: 45%;
}

.tabla-documentos-transparencia td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* ---------- Botón flotante "ver la web" del panel ---------- */

/* Esquina inferior derecha, presente en todas las páginas del panel.
   Abre la portada pública en una pestaña nueva para comprobar cómo
   queda lo que se acaba de publicar. */
.panel-ver-web {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-acento);
    color: var(--color-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.panel-ver-web:hover,
.panel-ver-web:focus-visible {
    background: var(--color-primario);
    color: #fff;
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
}

.tabla-acciones {
    align-items: stretch;
}

/* ---------- Cuerpo de noticia: interlineado homogéneo ---------- */

/* Antes los párrafos iban a 1.2em y, sumado a un <p><br></p> vacío en
   medio que generaba el editor cuando se pulsaba Intro dos veces, se
   acumulaban huecos enormes. Ahora el sanitizador descarta los <p>
   vacíos y dejamos el margen a 1em, que da un espaciado natural. */
.noticia-cuerpo p {
    margin: 0 0 1em;
}

.noticia-cuerpo h2,
.noticia-cuerpo h3 {
    margin: 1.5em 0 0.5em;
}

/* ---------- Galería de imágenes y vídeos en el cuerpo ---------- */

.noticia-cuerpo .galeria,
.wysiwyg-lienzo .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 1.5em 0;
    padding: 0;
}

.noticia-cuerpo .galeria img,
.wysiwyg-lienzo .galeria img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radio-borde);
    margin: 0;
    display: block;
}

/* Vídeo incrustado por el WYSIWYG (YouTube o Vimeo).
   La regla es global porque queremos que el vídeo se vea responsive
   y con esquinas redondeadas en CUALQUIER contexto donde aparezca:
   cuerpo de noticia, lienzo del editor, descripción del evento, etc.
   El sanitizador del servidor garantiza que solo entran iframes de
   YouTube y Vimeo. */
.video-incrustado {
    margin: 1.5em 0;
    padding: 0;
}

.video-incrustado iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    border-radius: var(--radio-borde);
}

/* ---------- Aviso de contenido externo (facade de cookies) ----------
   Sustituye a un mapa/vídeo de terceros hasta que la persona lo acepta.
   Mantiene la misma proporción que ocuparía el contenido para que la
   maqueta no "salte" al cargarlo. */
.facade-aviso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--color-fondo-alterno);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-borde);
    color: var(--color-texto-claro);
    min-height: 180px;
}
.facade-aviso[data-facade="youtube"],
.facade-aviso[data-facade="vimeo"] { aspect-ratio: 16 / 9; }
.facade-aviso[data-facade="maps"]  { aspect-ratio: 4 / 3; }

.facade-aviso__icono { font-size: 2rem; color: var(--color-primario-claro); }
.facade-aviso__texto { margin: 0; max-width: 34rem; }
.facade-aviso__mas { font-size: 0.85rem; }

/* ---------- Breakpoints de referencia ----------
   Móvil:    hasta 575px (estilos por defecto, mobile-first)
   Tablet:   576px – 991px
   Escritorio: desde 992px
*/