/*
 * Estilos de la página pública de Transparencia y de los bloques
 * específicos del panel (estado del Reglamento).
 *
 * Se carga solo donde hace falta (la página pública y el admin de
 * transparencia), para no inflar la CSS global.
 */

/* ---------- Contenedor de la página pública ---------- */

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

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

.seccion-transparencia__cabecera p {
    color: var(--color-texto-claro);
    font-size: 1.05rem;
    max-width: 48rem;
    margin: 0.5rem auto 0;
}

/* ---------- Bloque destacado del Reglamento Interno ---------- */

.reglamento-bloque {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-left: 6px solid var(--color-acento);
    border-radius: var(--radio-borde);
    padding: var(--espacio-4);
    margin-bottom: var(--espacio-5);
}

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

.reglamento-bloque__cabecera h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-primario);
}

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

.reglamento-bloque__intro {
    margin: 0 0 var(--espacio-3);
    line-height: 1.6;
}

.reglamento-bloque__acciones {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-3);
}

/* Vídeo LSE responsive con aspect-ratio 16:9. */
.reglamento-bloque__video {
    margin: var(--espacio-3) 0 0;
    padding: 0;
    background: var(--color-fondo-alterno);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.reglamento-bloque__video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

.reglamento-bloque__video figcaption {
    padding: 0.6rem 1rem;
    color: var(--color-texto-claro);
    font-size: 0.95rem;
    text-align: center;
}

/* ---------- Modal "Versión accesible" ----------
   Hereda el estilo del sistema de modales. El template solo aporta
   el "boxing" de su contenido. */

.reglamento-modal-contenido {
    line-height: 1.7;
    color: var(--color-texto);
    /* Imitamos los estilos del cuerpo de noticia para que el HTML
       quede legible aunque venga del WYSIWYG con párrafos, listas,
       cabeceras, etc. */
}

.reglamento-modal-contenido h2,
.reglamento-modal-contenido h3,
.reglamento-modal-contenido h4 {
    margin: 1.5em 0 0.5em;
    color: var(--color-primario);
}

.reglamento-modal-contenido p {
    margin: 0 0 1em;
}

.reglamento-modal-contenido ul,
.reglamento-modal-contenido ol {
    margin: 0 0 1em 1.5em;
}

.reglamento-modal-contenido a {
    color: var(--color-primario);
}

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

/* ---------- "Otros documentos": filtro + rejilla plana ---------- */

.otros-documentos > h2 {
    text-align: center;
    margin: 0 0 var(--espacio-4);
}

/* El formulario de filtro reutiliza .filtros-noticias (mismo aspecto
   que el filtro de noticias); solo añadimos algo de margen inferior. */
.transparencia-filtros {
    margin-bottom: var(--espacio-4);
}

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

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

.documento-tarjeta__icono {
    font-size: 2rem;
    color: var(--color-primario);
    line-height: 1;
    padding-top: 0.2rem;
}

.documento-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.documento-tarjeta__titulo {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-texto);
}

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

.documento-tarjeta__meta {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 0.85rem;
    font-style: italic;
}

.documento-tarjeta__cta {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* El botón "Descargar PDF" de cada tarjeta es una acción secundaria
   dentro de una rejilla con muchas tarjetas, así que se hace más
   compacto que un botón normal del sitio (que usa min-height: 44px,
   pensado para botones principales). 36px de alto sigue muy por
   encima del mínimo de 24x24px CSS que pide WCAG 2.2 — criterio 2.5.8
   Target Size Minimum, nivel AA. El icono mantiene su tamaño normal
   (1rem, heredado de .boton); no se toca. */
.documento-tarjeta__cta {
    min-height: 36px;
    padding: 0.35rem 0.9rem;
}


/* ============================================================
   Panel admin: estado del Reglamento Interno
   ============================================================ */

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

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

.reglamento-estado__cabecera h2 {
    margin: 0;
}

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

.reglamento-pieza {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radio-borde);
    border: 2px solid var(--color-borde);
}

.reglamento-pieza--ok {
    background: var(--color-exito-fondo);
    border-color: var(--color-exito-texto);
}

.reglamento-pieza--pendiente {
    background: var(--color-fondo-alterno);
    border-style: dashed;
}

.reglamento-pieza__icono {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.reglamento-pieza--ok .reglamento-pieza__icono {
    background: var(--color-exito-texto);
    color: #fff;
}

.reglamento-pieza--pendiente .reglamento-pieza__icono {
    background: var(--color-borde);
    color: var(--color-texto-claro);
}

.reglamento-pieza__nombre {
    margin: 0;
    font-weight: 600;
    color: var(--color-texto);
}

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

.reglamento-estado__actualizado {
    margin-top: var(--espacio-3);
}

.transparencia-docs-admin {
    margin-top: var(--espacio-4);
}

.transparencia-docs-admin > h2 {
    margin-bottom: 0.4rem;
}


/* ============================================================
   Panel admin: tabla "Otros documentos".

   table-layout: fixed reparte el ancho según el de las celdas de la
   CABECERA (<th>), no según max-width en las celdas del cuerpo — por
   eso el ancho real se fija aquí, en porcentajes sobre los <th>, y no
   alcanza con max-width en .celda-titulo-documento. Fecha y Tamaño se
   dejan estrechos a propósito para que Acciones tenga sitio de sobra
   para sus 3 botones (Editar, Descargar, Papelera) en una sola línea
   en pantallas de escritorio.
   ============================================================ */

.tabla-documentos-transparencia {
    table-layout: fixed;
}

/* Reparto calculado a partir de medidas reales (ver discusión en el
   historial de cambios): los 3 botones de Acciones (Editar, Descargar,
   Papelera) necesitan unos 304px en una sola línea contando los huecos
   entre ellos (gap de .tabla-acciones). Con el padding de la celda
   (32px) eso exige que la columna Acciones tenga al menos un 44% del
   ancho de la tabla. El resto se recorta de Título y Tamaño, que tenían
   más margen que Categoría y Fecha. */
.tabla-documentos-transparencia th:nth-child(1) { width: 24%; }
.tabla-documentos-transparencia th:nth-child(2) { width: 12%; }
.tabla-documentos-transparencia th:nth-child(3) { width: 12%; }
.tabla-documentos-transparencia th:nth-child(4) { width: 8%; }
.tabla-documentos-transparencia th:nth-child(5) { width: 44%; }

.tabla-documentos-transparencia .celda-titulo-documento {
    overflow-wrap: break-word;
}