/*
 * Estilos de la Biblioteca de Recursos.
 *
 * Se carga solo en /recursos/ (frontend público) y en el panel
 * /admin/recursos/ (listado, formulario, papelera, selectores modales).
 *
 * Reutiliza variables ya definidas en base.css (--color-primario,
 * --color-acento, --espacio-*, --radio-borde, etc.) para mantener la
 * coherencia con el resto del sitio.
 */


/* ====================================================================
   FRONTEND PÚBLICO
   ==================================================================== */

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

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

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

/* ---------- Chips de categoría ---------- */
/* Bandeja horizontal con scroll en móvil para no romper la maquetación
   cuando hay muchas categorías. */
.recursos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 0 0 var(--espacio-3);
}

/* Mismo tamaño que ".filtro-cat" (las píldoras de categoría de
   /noticias/, en base.css) para que ambas secciones se vean iguales.
   La variable --color-chip la fija el inline style del PHP con el color
   propio de cada categoría (el mismo que se usa en las etiquetas de
   categoría del listado de debajo); para "Todos" no se fija y cae al
   teal principal del sitio. */
.recursos-chip {
    --color-chip: var(--color-primario);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 2px solid var(--color-chip);
    background: transparent;
    color: var(--color-chip);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.recursos-chip--activa {
    background: var(--color-chip);
    border-color: var(--color-chip);
    color: #fff;
}

/* ---------- Buscador ---------- */

.recursos-buscador {
    margin-bottom: var(--espacio-3);
    display: flex;
    gap: var(--espacio-2);
    align-items: end;
    flex-wrap: wrap;
}

.recursos-buscador .campo {
    flex: 1 1 16rem;
    margin-bottom: 0;
}

/* ---------- Grid de tarjetas ---------- */

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

.recurso-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;
}

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

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

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

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

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

/* Mismo CTA compacto que usamos en las tarjetas de Transparencia
   (más bajo que un botón principal, suficiente para WCAG 2.5.8). */
.recurso-tarjeta__cta {
    align-self: flex-start;
    margin-top: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.9rem;
}

.recurso-tarjeta__cta--no-disponible {
    color: var(--color-texto-claro);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Modal de vídeo (responsive 16:9) ---------- */
/* El contenido vive dentro de .modal-contenido (sistema de modales del
   sitio). Damos al iframe ratio 16:9 con aspect-ratio para que se
   adapte al ancho del modal sin scroll horizontal. */
.recurso-video-embed {
    width: 100%;
    background: #000;
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.recurso-video-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}


/* ====================================================================
   PANEL ADMIN — listado
   ==================================================================== */

/* El filtro de este listado reutiliza ".filtros-noticias" (base.css),
   que solo limita el ancho de los selects con id "categoria"/"estado"
   (los de Noticias). Los de Recursos tienen ids distintos y se quedaban
   con el ancho genérico de 12rem mínimo, empujando los botones
   "Filtrar"/"Quitar filtros" a otra altura. Les damos el mismo límite. */
.filtros-noticias > .campo:has(select#filtro-categoria),
.filtros-noticias > .campo:has(select#filtro-tipo) {
    flex: 0 1 11rem;
    max-width: 12rem;
}

/* Celda Tipo: icono + etiqueta alineados. */
.recurso-tipo-celda {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-texto-claro);
}

/* Misma técnica de table-layout fixed + anchos por columna explícitos
   que la tabla de documentos de transparencia, para que los botones de
   Acciones quepan en una línea en escritorio. */
.tabla-recursos {
    table-layout: fixed;
}

.tabla-recursos th:nth-child(1) { width: 28%; }   /* Título */
.tabla-recursos th:nth-child(2) { width: 14%; }   /* Categoría */
.tabla-recursos th:nth-child(3) { width: 14%; }   /* Tipo */
.tabla-recursos th:nth-child(4) { width: 12%; }   /* Fecha */
.tabla-recursos th:nth-child(5) { width: 32%; }   /* Acciones */

.tabla-recursos .celda-titulo-recurso {
    overflow-wrap: break-word;
}


/* ====================================================================
   PANEL ADMIN — formulario nuevo/editar
   ==================================================================== */

/* Selector de tipo (radios visuales tipo "tarjeta seleccionable"). */
.recurso-tipo__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--espacio-2);
    margin-top: 0.5rem;
}

.recurso-tipo__opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-borde);
    cursor: pointer;
    background: var(--color-fondo);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.recurso-tipo__opcion:hover,
.recurso-tipo__opcion:focus-within {
    border-color: var(--color-primario);
}

.recurso-tipo__opcion--activa {
    border-color: var(--color-primario);
    background: var(--color-fondo-alterno);
}

/* El radio HTML está visualmente oculto pero accesible (sigue navegable
   por teclado y reflejado a lectores de pantalla — la <label> envuelve
   todo, así que la persona puede pulsar Tab al radio y Espacio para
   marcarlo). */
.recurso-tipo__opcion input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.recurso-tipo__opcion input[type="radio"]:focus-visible + .recurso-tipo__icono {
    outline: 2px solid var(--color-acento);
    outline-offset: 4px;
    border-radius: 50%;
}

.recurso-tipo__icono {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1.4rem;
    color: var(--color-primario);
}

.recurso-tipo__texto {
    font-weight: 600;
    color: var(--color-texto);
}

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

/* Importante: ".campo" (base.css) define "display: flex" en TODOS sus
   elementos. Como esa regla de autor pesa más que la regla por defecto
   del navegador para [hidden] ("display: none"), un grupo con el
   atributo hidden seguía viéndose (en flex) aunque estuviera "oculto".
   Esta regla, más específica que ".campo" porque combina dos
   selectores, es la que de verdad lo oculta. Sin este fix, los cuatro
   grupos de campos del tipo de recurso (y los dos de la fecha) se veían
   todos a la vez, fuera cual fuera la opción elegida. */
.recurso-grupo[hidden],
.recurso-fecha-grupo[hidden] {
    display: none;
}

/* Selector de modo de fecha: dos opciones pequeñas en línea (más
   compacto que el selector de tipo, es un campo secundario). */
.recurso-fecha-modo {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

.recurso-fecha-modo__opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 2px solid var(--color-borde);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    background: var(--color-fondo);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.recurso-fecha-modo__opcion:hover,
.recurso-fecha-modo__opcion:focus-within {
    border-color: var(--color-primario);
}

.recurso-fecha-modo__opcion--activa {
    border-color: var(--color-primario);
    background: var(--color-fondo-alterno);
    font-weight: 600;
}

.recurso-fecha-modo__opcion input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Documento e imagen seleccionados (preview). */
.recurso-archivo-elegido {
    padding: 0.75rem 1rem;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    margin-bottom: 0.5rem;
}

.recurso-archivo-elegido p {
    margin: 0;
}

.recurso-imagen-elegida {
    margin-bottom: 0.75rem;
}

.recurso-imagen-elegida img {
    max-width: 240px;
    max-height: 240px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    display: block;
}


/* ====================================================================
   SELECTORES MODALES (Elegir documento / Elegir imagen)
   ==================================================================== */

.selector-biblioteca .campo {
    margin-bottom: var(--espacio-2);
}

.selector-biblioteca__estado {
    color: var(--color-texto-claro);
    text-align: center;
    padding: var(--espacio-3) 0;
    margin: 0;
}

/* Lista de documentos (selector "Elegir documento"). */
.selector-biblioteca__lista {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
}

.selector-biblioteca__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.selector-biblioteca__items li {
    border-bottom: 1px solid var(--color-borde);
}

.selector-biblioteca__items li:last-child {
    border-bottom: 0;
}

.selector-biblioteca__item {
    width: 100%;
    text-align: left;
    background: var(--color-fondo);
    border: 0;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
    font: inherit;
}

.selector-biblioteca__item:hover,
.selector-biblioteca__item:focus-visible {
    background: var(--color-fondo-alterno);
    outline: 2px solid var(--color-acento);
    outline-offset: -2px;
}

.selector-biblioteca__item-nombre {
    font-weight: 600;
    color: var(--color-texto);
}

.selector-biblioteca__item-meta {
    color: var(--color-texto-claro);
    font-size: 0.85rem;
}

/* Rejilla de imágenes (selector "Elegir imagen"). */
.selector-biblioteca__rejilla {
    max-height: 55vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
}

.selector-biblioteca__miniatura {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem;
    background: var(--color-fondo);
    border: 2px solid transparent;
    border-radius: var(--radio-borde);
    cursor: pointer;
    font: inherit;
}

.selector-biblioteca__miniatura:hover,
.selector-biblioteca__miniatura:focus-visible {
    border-color: var(--color-primario);
    outline: none;
}

.selector-biblioteca__miniatura img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: calc(var(--radio-borde) - 2px);
    background: var(--color-fondo-alterno);
}

.selector-biblioteca__miniatura-nombre {
    font-size: 0.8rem;
    color: var(--color-texto-claro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}