/* ==========================================================================
   Recursos descargables (/recursos/) — page-recursos.php.
   --------------------------------------------------------------------------
   El framework no dispone de un diálogo genérico (solo .lmb-lightbox, pensado
   para galería). Este bloque aporta el modal de código reutilizando los tokens
   del framework (variables, .lmb-cluster, .lmb-icon-button, .lmb-button) y su
   patrón de apertura [data-open="true"] + .lmb-scroll-locked.
   ========================================================================== */

/* Buscador (mismo esquema visual que el de la Academia). */
.lmb-site .lmb-recursos-search { display: grid; gap: var(--lmb-space-1); }
.lmb-site .lmb-recursos-search__field { align-items: center; display: flex; gap: var(--lmb-space-2); }
.lmb-site .lmb-recursos-search__field .ph { font-size: 1.25rem; flex: 0 0 auto; }
.lmb-site .lmb-recursos-search .lmb-input { flex: 1 1 auto; min-inline-size: 0; }

/* Línea de resultados del listado (aria-live). */
.lmb-site .lmb-recursos-results { color: var(--lmb-ink-secondary); font-size: var(--lmb-body-small); margin: 0; }

/* Chips de filtro como enlaces (reutilizan .lmb-filter del framework; el
   estado activo lo marca el framework con [aria-pressed="true"]). */
/* Texto/label de cada chip centrado vertical y horizontalmente en su caja
   (scoped a /recursos/: el framework deja .lmb-filter sin centrado y aquí no
   se toca). */
.lmb-site .lmb-filters--recursos .lmb-filter { align-items: center; display: inline-flex; justify-content: center; text-align: center; text-decoration: none; }
.lmb-site .lmb-filters--recursos .lmb-filter:hover { background: var(--lmb-ink); color: var(--lmb-ink-inverse); }

/* Aire entre el borde superior del bloque de filtros (regla fina gris de
   .lmb-filters: border-block con --lmb-line) y el eyebrow "Tipo de recurso",
   primer hijo del grid con gap 0 y p con margenes reseteados por el
   framework: el texto quedaba pegado a la regla. Mismo ritmo que la fila de
   chips (padding-block de .lmb-filters__row: --lmb-space-3). */
.lmb-site .lmb-filters--recursos .lmb-label { margin-block-start: var(--lmb-space-3); }

/* ==========================================================================
   Listado compacto por filas — petición del cliente 2026-09-03.

   Anatomía por fila: nombre a la izquierda con el token de texto más pequeño
   del framework (--lmb-label, menor que --lmb-body-small) + botón único a la
   derecha («DESCARGAR» o «VER CÓDIGO» vía data-lmb-code). Sin fecha, sin
   badge de categoría ni tamaño de archivo: la categoría ya se filtra con los
   chips y las filas deben ocupar poco. Se pueden re-añadir si el cliente
   cambia de idea (ver el render PHP en inc/recursos.php).

   Decisión de reutilización: variante scoped propia, NO .lmb-feed-minimal ni
   su variante --compact del framework. Su anatomía (miniatura + título grande
   desde --lmb-body + CTA pegado tras el texto + padding vertical de 1 a
   2.5rem) no encaja con «nombre pequeño + acción a la derecha + filas que
   ocupen poco»; reutilizarla exigiría sobreescribir casi todas sus reglas.
   Aquí se replica su patrón visual (grid con gap 0, separador fino
   --lmb-rule-fine, última fila sin separador) con sus mismos tokens, scoped a
   /recursos/ y sin tocar framework.css.
   ========================================================================== */
.lmb-site .lmb-recursos-list { display: grid; gap: 0; min-inline-size: 0; }
.lmb-site .lmb-recursos-list__item {
  align-items: center;
  border-block-end: var(--lmb-rule-fine) solid var(--lmb-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lmb-space-1) var(--lmb-space-2);
  justify-content: space-between;
  min-inline-size: 0;
  padding-block: var(--lmb-space-2);
}
.lmb-site .lmb-recursos-list__item:last-child { border-block-end: 0; }
.lmb-site .lmb-recursos-list__name {
  color: var(--lmb-ink);
  flex: 1 1 auto;
  font-size: var(--lmb-label); /* token más pequeño del framework */
  font-weight: 600;
  line-height: 1.2;
  min-inline-size: 0;
  overflow-wrap: anywhere;     /* nombres largos envuelven sin reventar la fila */
}
/* Botón único compacto. El framework no define una variante pequeña de
   .lmb-button (solo --primary/--secondary/--shell/--block), así que este
   ajuste es local y scoped a /recursos/. Selector con más specificity que base
   y que .lmb-button--primary (padding-inline) para no depender del orden de
   carga de las hojas. */
.lmb-site .lmb-recursos-list__item .lmb-button {
  flex: 0 0 auto;
  font-size: var(--lmb-label);
  min-block-size: 0;
  padding-block: var(--lmb-space-1);
  padding-inline: var(--lmb-space-2);
  white-space: nowrap;
}

/* Modal de código: overlay fijo, una instancia reutilizada en el DOM.
   El overlay es el scroll container de último recurso: con `margin:auto` en
   la caja, el diálogo se centra cuando hay espacio y, si el viewport es
   extremadamente bajo, el overflow del overlay permite alcanzar el pie. */
.lmb-site .lmb-code-modal {
  align-items: flex-start; /* el centrado vertical lo hace margin:auto de la caja */
  background: rgb(0 0 0 / .92);
  display: none;
  inset: 0;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--lmb-space-4);
  position: fixed;
  z-index: 70;
}
.lmb-site .lmb-code-modal[data-open="true"] { display: flex; }

/* La caja es una columna flex con altura tope de viewport: cabecera, título y
   pie nunca se comprimen ni salen del cuadro; solo el área del código encoge
   y hace scroll. max-block-size con fallback vh → dvh para móvil. */
.lmb-site .lmb-code-modal__box {
  background: var(--lmb-bg);
  border: var(--lmb-rule-fine) solid var(--lmb-ink);
  box-shadow: var(--lmb-shadow-overlay);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: var(--lmb-space-3);
  inline-size: min(96vw, 46rem);
  margin: auto;          /* centra en ambos ejes si cabe; si no, scroll del overlay */
  max-block-size: 90vh;  /* fallback: navegadores sin dvh */
  max-block-size: 90dvh; /* viewport dinámico (barra retráctil del móvil) */
  min-block-size: 0;
  padding: var(--lmb-space-4);
}
.lmb-site .lmb-code-modal__head { flex: 0 0 auto; justify-content: space-between; }
.lmb-site .lmb-code-modal__title { flex: 0 0 auto; font-size: var(--lmb-body-small); margin: 0; }
.lmb-site .lmb-code-modal__pre {
  background: #000;
  border: var(--lmb-rule-fine) solid var(--lmb-line);
  color: #fff;
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--lmb-body-small);
  line-height: 1.5;
  margin: 0;
  min-block-size: 0;               /* permite que el flex lo comprima y active su scroll */
  -webkit-overflow-scrolling: touch; /* momentum en iOS */
  overflow: auto;                  /* scroll vertical y horizontal dentro del <pre> */
  overscroll-behavior: contain;    /* el scroll del código no se encadena al fondo */
  padding: var(--lmb-space-3);
  white-space: pre;                /* líneas intactas; scroll horizontal para líneas largas */
}
.lmb-site .lmb-code-modal__pre code { font: inherit; }
.lmb-site .lmb-code-modal__foot { flex: 0 0 auto; justify-content: space-between; }
.lmb-site .lmb-code-modal__status {
  color: var(--lmb-ink-secondary);
  font-size: var(--lmb-body-small);
  min-block-size: 1em;
}
/* Avance del listado por lotes (botón «CARGAR MÁS» + fin): misma colocación y
   estilo que el bloque de la Academia. */
.lmb-site .lmb-recursos-more { display: grid; gap: var(--lmb-space-2); justify-items: center; margin-block-start: var(--lmb-space-4); }
.lmb-site .lmb-recursos-end { color: var(--lmb-ink-secondary); margin: 0; text-align: center; }

/* Estado vacío servido vía AJAX dentro del feed: el feed ya no es grid, así
   que se elimina la regla grid-column; el bloque .lmb-empty-state del
   framework ocupa toda la anchura por sí mismo. */