/* ============================================================
   PLEASEPOINT 2026 — RECURSOS (el listado)

   La entrada, la barra —bloques y buscador—, la fila de páginas
   y los remates propios de esta página.

   LA TARJETA Y SU PARRILLA NO ESTÁN AQUÍ: viven en agency.css
   porque las comparte con el final de cada artículo, y una
   tarjeta que se pinta en dos sitios no puede tener dos hojas.
   ============================================================ */

/* ---------- R1 · Entrada ----------
   Mismo arranque que casos y que el catálogo: se aparta de la cabecera
   fija con el aire del hero y en la misma caja de texto.

   El padding de abajo es cero porque debajo va la barra, y las dos son
   la misma entrada. */
.res-intro{ padding-top:clamp(140px,16vh,200px); padding-bottom:0; }
.res-intro h1{ max-width:16ch; margin-top:20px; }
.res-intro-text{ margin-top:32px; }

/* ---------- R2 · La barra: bloques y buscador ----------
   OCULTA MIENTRAS NO HAYA JAVASCRIPT. Los artículos llegan todos en el
   HTML y se ven todos; lo único que no funciona sin script es filtrar,
   buscar y pasar de página, así que la barra no se pinta hasta que
   resources.js pone .js-on en el documento. Nadie ve cinco botones
   muertos ni un campo que no busca.

   LA SECCIÓN ENTERA es la que se pega, no su caja de texto. Un sticky
   solo dura mientras su contenedor está en pantalla, y el contenedor de
   la caja es esta franja, que mide lo que mide la barra: pegado ahí
   dentro, se despegaba a los dos dedos de scroll. Pegada la sección,
   dura toda la página, que es lo que hace falta con el archivo entero
   debajo.

   Papel opaco y no translúcido: por debajo pasan portadas, y con velo el
   texto de los botones se ensuciaba. */
.res-filter{
  display:none;
  position:sticky; top:var(--header-h); z-index:20;
  padding-top:16px; padding-bottom:12px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.js-on .res-filter{ display:block; }

/* Bloques a la izquierda, buscador a la derecha, una sola línea. Que la
   barra siga midiendo una línea es lo que la hace soportable pegada bajo
   una cabecera que ya ocupa 72 px. */
.res-filter-bar{
  display:flex; align-items:center; gap:16px clamp(16px,3vw,40px);
}

/* Una sola fila de botones, siempre. Cinco de anchos distintos no caben
   en cualquier ventana, y partidos en dos la barra deja de leerse como
   una barra: la de abajo parece otra cosa. Así que se deslizan, igual
   que la franja de marcas de la home.

   Los márgenes negativos sacan la fila del wrap por los dos lados, para
   que el botón cortado por el borde diga que hay más. */
.res-filter-row{
  flex:1 1 auto; min-width:0;
  display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
  margin-left:calc(var(--pad) * -1);
  padding-left:var(--pad); padding-right:8px;
  overflow-x:auto; scrollbar-width:none;
}
.res-filter-row::-webkit-scrollbar{ display:none; }

/* Subrayado, no relleno de color: el acento del sistema marca, no pinta
   fondos. El borde inferior transparente reserva su sitio desde el
   principio, así que al cambiar de botón nada se mueve. */
.res-filter-btn{
  flex:0 0 auto;
  font-family:var(--font-sans); font-size:.9375rem; font-weight:400;
  color:var(--ink-2); background:none; border:0;
  border-bottom:2px solid transparent;
  padding:8px 12px 7px; cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.res-filter-btn:hover{ color:var(--ink); }
.res-filter-btn[aria-pressed="true"]{
  color:var(--ink); font-weight:500;
  border-bottom-color:var(--point-ink);
}
.res-filter-n{ color:var(--ink-3); font-size:.75rem; }
.res-filter-btn[aria-pressed="true"] .res-filter-n{ color:var(--ink-2); }

/* ---------- El buscador ----------
   Mismo campo que el resto del sitio —píldora, campo hundido, hairline—
   en versión compacta, con la lupa dentro y el aspa al final. Las dos se
   dibujan: aquí no entra ninguna librería de iconos. */
.res-search{
  flex:0 0 auto; position:relative;
  display:flex; align-items:center;
  width:clamp(180px, 22vw, 260px);
}
.res-search-icon{
  position:absolute; left:13px; color:var(--ink-3); pointer-events:none;
}
.res-search-input{
  width:100%;
  font-family:var(--font-sans); font-size:.9375rem; line-height:1.5;
  padding:.5em 34px .5em 36px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper-sunk); color:var(--ink);
  transition:border-color .2s ease;
}
.res-search-input::placeholder{ color:var(--ink-3); }
.res-search-input:hover{ border-color:var(--ink-3); }
.res-search-input:focus{ border-color:var(--point-ink); }

/* El aspa nativa de WebKit se quita: no está en todos los navegadores y
   no se puede pintar, así que la barra tendría dos aspas distintas o
   ninguna según quién mire. */
.res-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.res-search-clear{
  position:absolute; right:8px;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0;
  background:none; border:0; border-radius:999px;
  color:var(--ink-3); cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.res-search-clear:hover{ color:var(--ink); background:var(--paper-raised); }

/* Un display: flex escrito a mano le gana al [hidden] del navegador, así
   que el aspa se veía con el campo vacío. Lo mismo le pasa a la fila de
   páginas más abajo. Cuando un elemento nace oculto y se enseña con
   JavaScript, su display tiene que devolver el atributo. */
.res-search-clear[hidden]{ display:none; }

/* La zona que anuncia el resultado no lleva estilo porque no se ve: va
   en .vh y solo existe para quien no mira la pantalla. Lo que decía ya
   lo dicen los botones con su cuenta al lado. */

/* En estrecho el buscador se va arriba y ocupa el ancho: es el mando
   que más se usa cuando no caben los cinco botones a la vista, y en la
   misma fila que ellos se quedaba en un campo de cuatro caracteres. */
@media (max-width:860px){
  .res-filter-bar{ flex-wrap:wrap; gap:12px 0; }
  .res-search{ order:-1; width:100%; }
  .res-filter-row{
    width:100%;
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad);
  }
}

/* ---------- R3 · La parrilla ----------
   El aire de arriba lo pone la barra pegajosa; el de abajo, el
   separador que va antes del cierre. */
#r3{ padding-top:clamp(40px,5vw,56px); }
#r3 .arts{ margin-top:0; }

/* Cuando la búsqueda no encuentra nada. La página tiene que decir algo
   y ofrecer la salida —quitar el bloque y la búsqueda de una vez— en
   lugar de quedarse en blanco debajo de la barra. */
.res-empty{
  margin:0; padding:clamp(48px,8vw,96px) 0;
  text-align:center; color:var(--ink-2);
}
.res-empty-btn{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--point-ink); font-weight:500; text-decoration:underline;
}

/* ---------- Las páginas ----------
   Anterior, los números y Siguiente, centrados bajo la parrilla y
   separados de ella por una regla hairline. Sin caja alrededor: en el
   sistema la elevación es superficie y regla, nunca sombra.

   La actual se marca con el mismo subrayado de acento que el bloque
   activo de la barra. Dos marcas distintas para la misma idea —dónde
   estás— serían dos cosas que aprender. */
.res-pager{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:4px;
  margin-top:clamp(48px,6vw,72px); padding-top:28px;
  border-top:1px solid var(--line);
}
/* Con una sola página no hay nada que pasar, y sin JavaScript tampoco. */
.res-pager[hidden]{ display:none; }

.res-pager button{
  font-family:var(--font-sans); font-size:.9375rem; font-weight:400;
  color:var(--ink-2); background:none; border:0;
  border-bottom:2px solid transparent;
  padding:8px 12px 7px; cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.res-pager button:hover:not([disabled]){ color:var(--ink); }

/* Los números en mono y a un ancho fijo: en sans, pasar de la 8 a la 9
   movía la fila entera un pelo. */
.res-pager-n{
  font-family:var(--font-mono) !important;
  min-width:38px; font-variant-numeric:tabular-nums;
}
.res-pager-n[aria-current="page"]{
  color:var(--ink); font-weight:500;
  border-bottom-color:var(--point-ink);
}

/* Anterior y Siguiente separadas de los números, para que se lean como
   otra cosa. Deshabilitadas se apagan y dejan de ser clicables, pero no
   desaparecen: una fila que cambia de ancho al pasar de página es una
   fila que se mueve bajo el cursor. */
.res-pager-prev{ margin-right:clamp(8px,2vw,24px); }
.res-pager-next{ margin-left:clamp(8px,2vw,24px); }
.res-pager button[disabled]{ color:var(--ink-3); opacity:.5; cursor:default; }

.res-pager-gap{
  padding:0 4px; color:var(--ink-3);
  font-family:var(--font-mono); font-size:.9375rem;
}

@media (max-width:560px){
  .res-pager-prev,
  .res-pager-next{ margin:0; }
  .res-pager button{ padding:8px 9px 7px; }
  .res-pager-n{ min-width:32px; }
}

/* ---------- R4 · Cierre ----------
   El separador ya ha puesto el aire de arriba. */
#r4{ padding-top:calc(var(--sec) / 2); }