/* ═══════════════════════════════════════════════════════════════════════════
   Biblioteca — estilos propios de la página.

   NO redefine nada del sistema: toma prestadas las variables, las tipografías
   y los componentes de /assets/css/style.css (que se carga antes) y sólo añade
   las piezas que la portada no tiene: el selector de colección, la barra de
   herramientas y la retícula de documentos.

   Regla al tocar esto: si un color no sale de una var(--…), está mal. La
   paleta entera vive en el :root de style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- El atributo hidden gana ---------------------------------------
   Dar `display` a un elemento pisa la regla del navegador `[hidden]{display:none}`
   y el elemento se queda a la vista aunque el JS lo marque como oculto. Le pasaba
   a la cruz de la búsqueda y al botón «Mostrar más» (que hereda display de .btn).
   Se acota a estos dos: un `[hidden]{display:none!important}` global rompería las
   transiciones del menú móvil, que style.css anima desde su estado oculto. */
.busca-x[hidden],
.mas .btn[hidden] { display: none !important; }

/* ---------- Cifras ---------------------------------------------------------
   La franja de cifras se mudó a assets/css/style.css el 2026-08-19: la usan la
   biblioteca y el índice del blog, así que dejó de ser propia de esta página. */

/* ---------- Selector de colección ----------------------------------------
   Rediseñado el 2026-09-05: eran dos pestañas dentro de una píldora angosta y
   en el móvil la segunda quedaba fuera del riel (había que arrastrar para
   descubrirla). Ahora son DOS TARJETAS que ocupan el ancho entero del
   contenido, una al lado de la otra en escritorio y una debajo de la otra en
   pantalla angosta: las dos se ven siempre, con nombre, descripción, cuántos
   documentos tiene cada una y un tilde que marca cuál se está viendo.

   Sigue siendo un role="tablist" con aria-selected, igual que antes; lo que
   desapareció es la píldora deslizante (.col-pill) y su medición en píxeles.
   Las clases siguen siendo propias A PROPÓSITO: si reusara .filters/.filter,
   el initFilters() de app.js se adueñaría de estos botones. */
.coleccion { margin-top: clamp(2.2rem, 4.5vw, 3.1rem); }

.col-kicker {
  margin: 0 0 .85rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: .78rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ember-600);
}

.col-tabs {
  display: grid; width: 100%;
  grid-template-columns: 1fr;               /* móvil: una debajo de la otra */
  gap: clamp(.7rem, 1.6vw, .95rem);
}
@media (min-width: 720px) {
  .col-tabs { grid-template-columns: 1fr 1fr; }
}

.col-tab {
  position: relative; overflow: hidden;
  display: grid; gap: .35rem;
  grid-template-columns: 1fr auto;
  align-content: start;
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.45rem);
  border-radius: var(--r-lg);
  text-align: left; cursor: pointer;
  background: rgba(255, 252, 246, .62);
  border: 1.5px solid rgba(216, 195, 165, .6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(44,29,20,.04), 0 14px 34px -26px rgba(44,29,20,.35);
  transition: transform .45s var(--spring-soft), box-shadow .45s var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.col-tab:hover:not([aria-selected="true"]) {
  transform: translateY(-3px);
  border-color: rgba(217,164,65,.8);
  box-shadow: 0 1px 2px rgba(44,29,20,.05), 0 18px 38px -22px rgba(110,30,29,.42);
}
.col-tab:focus-visible { outline: 2.5px solid var(--ember-600); outline-offset: 3px; }
.col-tab:active { transform: scale(.99); transition-duration: .08s; }

.col-orden {
  grid-column: 1; align-self: center;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: .69rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
/* el tilde: anillo vacío cuando no está elegida, relleno cuando sí — es lo que
   deja claro de un vistazo que hay que elegir entre dos */
.col-radio {
  grid-column: 2; grid-row: 1 / span 1; align-self: center;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.5px solid rgba(216,195,165,.9);
  color: transparent;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.col-radio svg { width: .85rem; height: .85rem; }

.col-nombre {
  grid-column: 1 / -1;
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.18rem, 2.6vw, 1.5rem); line-height: 1.2; letter-spacing: -.015em;
  color: var(--espresso);
}
.col-desc {
  grid-column: 1 / -1;
  font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}
.col-pie {
  grid-column: 1 / -1;
  margin-top: .55rem; padding-top: .7rem;
  border-top: 1px solid rgba(216,195,165,.5);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.col-cuenta {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: .95rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--gold-600);
}
.col-estado {
  font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute);
}
/* los dos rótulos conviven en el marcado y el estado decide cuál se ve: así no
   hace falta que el JS reescriba texto en cada cambio de colección */
.col-estado .es-on { display: none; font-style: normal; }
.col-estado .es-off { font-style: normal; }

/* ---- elegida ---- */
.col-tab[aria-selected="true"] {
  background: var(--grad-warm);
  border-color: rgba(160,110,31,.65);
  box-shadow: 0 1px 2px rgba(44,29,20,.06), 0 20px 44px -22px rgba(176,68,42,.75);
}
.col-tab[aria-selected="true"] .col-nombre,
.col-tab[aria-selected="true"] .col-cuenta { color: #fff; }
.col-tab[aria-selected="true"] .col-desc { color: rgba(255,255,255,.9); }
.col-tab[aria-selected="true"] .col-orden,
.col-tab[aria-selected="true"] .col-estado { color: rgba(255,255,255,.82); }
.col-tab[aria-selected="true"] .col-pie { border-top-color: rgba(255,255,255,.32); }
.col-tab[aria-selected="true"] .col-radio {
  background: #fff; border-color: #fff; color: var(--ember-600);
}
.col-tab[aria-selected="true"] .col-estado .es-on { display: inline; }
.col-tab[aria-selected="true"] .col-estado .es-off { display: none; }

/* Angosto: las dos tarjetas van una debajo de la otra (siguen viéndose las dos
   sin desplazar), un poco más compactas para no empujar tan abajo el buscador. */
@media (max-width: 719px) {
  .col-tab { padding: .95rem 1.05rem; gap: .28rem; }
  .col-desc { font-size: .875rem; line-height: 1.45; }
  .col-pie { margin-top: .4rem; padding-top: .55rem; }
}

/* ---------- Barra de herramientas ---------------------------------------- */
.herramientas {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(.85rem, 2vw, 1.05rem);
}
@media (min-width: 760px) {
  .herramientas { grid-template-columns: 1fr auto auto; align-items: center; }
}

.busca { position: relative; display: flex; align-items: center; }
.busca > svg {
  position: absolute; left: .95rem; color: var(--ink-mute); pointer-events: none;
}
.busca input {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  padding: .78rem 2.6rem .78rem 2.7rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(216,195,165,.7);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.busca input::placeholder { color: var(--ink-mute); }
.busca input:focus {
  outline: none; background: #fff;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(217,164,65,.18);
}
/* el aspa nativa del type=search estorba: hay una propia */
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca-x {
  position: absolute; right: .7rem;
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 7px;
  color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.busca-x:hover { background: rgba(158,43,37,.1); color: var(--crimson); }

.campo { display: flex; align-items: center; gap: .5rem; }
.campo > span {
  font-size: .72rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.campo select {
  font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
  padding: .6rem 2rem .6rem .85rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(216,195,165,.7);
  max-width: 15rem;
  /* la flecha va dibujada: la nativa cambia de forma en cada navegador */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857161' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.campo select:focus {
  outline: none; border-color: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(217,164,65,.18);
}

/* ---------- Conteo -------------------------------------------------------- */
.conteo {
  margin: clamp(1.4rem, 3vw, 1.9rem) 0 0;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.conteo b { color: var(--ember-600); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Retícula de documentos --------------------------------------- */
.docs {
  display: grid; gap: clamp(.7rem, 1.6vw, .95rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  margin-top: 1.1rem;
}

.doc {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(255, 252, 246, .62);
  border: 1px solid rgba(216, 195, 165, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-align: left;
  /* Los documentos entran con un fundido propio, NO con .reveal: aquella se
     observa una sola vez al arrancar la página y estas tarjetas se crean
     después, así que se quedarían invisibles para siempre. */
  animation: doc-in .5s var(--ease-out) both;
  transition: transform .45s var(--spring-soft), box-shadow .45s var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
@keyframes doc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .doc { animation: none; } }

.doc:hover {
  transform: translateY(-3px);
  border-color: rgba(217,164,65,.75);
  box-shadow: 0 1px 2px rgba(44,29,20,.05), 0 16px 34px -20px rgba(110,30,29,.4);
}
.doc:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.doc-ico {
  flex: none; display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 8px;
  background: var(--grad-warm); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(176,68,42,.9);
}
.doc-cuerpo { min-width: 0; flex: 1; }
.doc-t {
  display: block;
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.02rem; line-height: 1.28; letter-spacing: -.012em;
  color: var(--espresso);
  /* los títulos largos se cortan a tres líneas para que la retícula no baile */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc:hover .doc-t { color: var(--crimson); }
.doc-m {
  margin-top: .4rem;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-mute);
}
.doc-m .autor { color: var(--ink-soft); font-weight: 540; }
.doc-m .sep { opacity: .5; }
.doc-anio {
  font-family: 'Barlow', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--gold-600);
}
.doc-go {
  flex: none; align-self: center; color: var(--ink-mute);
  transition: transform .42s var(--spring-soft), color var(--t-base) var(--ease-out);
}
.doc:hover .doc-go { transform: translateX(3px); color: var(--crimson); }

/* marca de coincidencia al buscar */
.doc mark {
  background: rgba(217,164,65,.32); color: inherit;
  border-radius: 2px; padding: 0 .1em;
}

/* ---------- Estados ------------------------------------------------------- */
.vacio, .fallo {
  margin: 2.4rem 0 0; text-align: center;
  color: var(--ink-soft); font-size: 1rem;
}
.fallo { color: var(--crimson); }

.mas { display: grid; place-items: center; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.centinela { display: block; height: 1px; width: 1px; }

/* esqueleto mientras llega el CSV */
.doc-fantasma {
  height: 5.2rem; border-radius: var(--r-md);
  background: linear-gradient(100deg,
    rgba(216,195,165,.16) 30%, rgba(216,195,165,.34) 50%, rgba(216,195,165,.16) 70%);
  background-size: 220% 100%;
  animation: fantasma 1.5s linear infinite;
}
@keyframes fantasma { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .doc-fantasma { animation: none; } }

/* ---------- Angosto ------------------------------------------------------- */
@media (max-width: 560px) {
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(216,195,165,.45); }
  .campo { justify-content: space-between; }
  .campo select { flex: 1; max-width: none; }
}