/* ═══════════════════════════════════════════════════════════════════════════
   Páginas sueltas — TecnicBot · Enciclopedia · Guardianes · Prompts

   Igual que biblioteca.css y blog.css: NO redefine nada del sistema. Se carga
   DESPUÉS de /assets/css/style.css y sólo añade las piezas que la portada no
   tiene. Todas las páginas heredan de ahí variables, tipografías, .wrap,
   .section-pad, .sec-head, .h-sec, .lede, .grad-text, .glass, .glow-follow,
   .btn, .cifras, .cred* y .reveal.

   Regla al tocar esto: si un color no sale de una var(--…), está mal.

   OJO con las clases de app.js: .filters, .filter, .book, [data-books],
   [data-timeline] son suyas y se adueñaría de lo que las use. Por eso el riel
   de categorías de /prompts va con nombres propios (.cat-tabs/.cat-tab).

   Las cuatro páginas se generan con backups/generar_paginas.py; esta hoja se
   edita a mano.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La primera sección arranca bajo la píldora del menú, que va fija arriba.
   (Misma regla que en blog.css; cada página carga una hoja o la otra.) */
.primera { padding-top: clamp(6.2rem, 10vw, 8rem); }

/* El atributo hidden tiene que ganarle al display de .btn y compañía. Se acota
   a lo de estas páginas: un [hidden] global rompe el menú móvil, que style.css
   anima desde su estado oculto. */
.busca-x[hidden], .prompt[hidden], .cat-vacia[hidden] { display: none !important; }

/* ---------- Cabecera de página ------------------------------------------- */
.pag-head { max-width: 62ch; }
.pag-head .lede { margin-top: 1rem; }
.volver {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 560; color: var(--ink-mute);
  margin-bottom: 1.4rem;
  transition: color var(--t-base) var(--ease-out);
}
.volver:hover { color: var(--crimson); }
.volver svg { transition: transform .42s var(--spring-soft); }
.volver:hover svg { transform: translateX(-4px); }

/* ---------- Dúo imagen + texto ------------------------------------------- */
.duo {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo.angosta { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
}
.duo-col { display: grid; gap: 1.1rem; align-content: start; }

.figura {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(216,195,165,.5);
  box-shadow: 0 1px 2px rgba(44,29,20,.06), 0 28px 60px -30px rgba(110,30,29,.4);
  transition: transform .55s var(--spring-soft), box-shadow var(--t-slow) var(--ease-out);
}
.figura img { width: 100%; height: auto; }
.figura:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(44,29,20,.06), 0 34px 70px -28px rgba(110,30,29,.5); }
.figura.retrato { max-width: 380px; margin-inline: auto; }
.figura-pie { display: block; margin-top: .7rem; font-size: .78rem; color: var(--ink-mute); font-style: italic; text-align: center; }

/* ---------- Bloque de texto en vidrio ------------------------------------ */
.bloque { padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--r-lg); }
.bloque > * + * { margin-top: .95rem; }
.bloque p { color: var(--ink-soft); font-size: .985rem; }
.bloque p.destacado { color: var(--ink); font-size: 1.06rem; }
.bloque strong { font-weight: 640; color: var(--espresso); }
.bloque h3 { font-size: 1.24rem; }

/* ---------- Retícula de tarjetas ----------------------------------------- */
.tarjetas { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); margin-top: clamp(1.8rem, 4vw, 2.4rem); }
@media (min-width: 780px) { .tarjetas.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tarjeta { padding: clamp(1.35rem, 3vw, 1.9rem); border-radius: var(--r-lg); }
.tarjeta h3 { font-size: 1.2rem; }
.tarjeta > * + * { margin-top: .85rem; }
.tarjeta p { color: var(--ink-soft); font-size: .92rem; }
.tarjeta-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sand-200), var(--sand-100));
  border: 1px solid rgba(216,195,165,.7); color: var(--gold-600);
  transition: background var(--t-base), color var(--t-base), transform .45s var(--spring-snap);
}
.tarjeta:hover .tarjeta-ico { background: var(--grad-warm); color: #fff; border-color: transparent; transform: rotate(-8deg) scale(1.08); }

/* ---------- Lista con tilde ---------------------------------------------- */
.lista-tick { display: grid; gap: .6rem; list-style: none; padding: 0; }
.lista-tick li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; color: var(--ink); }
.lista-tick svg { flex: none; margin-top: .28rem; color: var(--ember-600); }

/* ---------- Etiquetas ----------------------------------------------------- */
.etiquetas { display: flex; flex-wrap: wrap; gap: .42rem; }
.etiqueta {
  padding: .34rem .8rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 560; color: var(--gold-600);
  background: rgba(247,240,229,.85); border: 1px solid rgba(216,195,165,.7);
}

/* ---------- Fila de recurso (descarga / escuchar) ------------------------ */
.recursos { display: grid; gap: .8rem; }
.recurso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.05rem 1.25rem; border-radius: var(--r-md);
  border-left: 3px solid var(--gold-400);
}
.recurso b { display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.02rem; }
.recurso small { display: block; color: var(--ink-mute); font-size: .81rem; margin-top: .12rem; }

/* ---------- Datos sueltos (dos columnas chicas) --------------------------- */
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.datos > div { padding: .9rem 1rem; border-radius: var(--r-md); text-align: center; }
.datos dt {
  font-size: .68rem; font-weight: 640; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.datos dd { margin: .35rem 0 0; font-size: .9rem; font-weight: 560; color: var(--ink); }
.datos dd .mas { color: var(--ember-600); }

/* ---------- Correos (Enciclopedia) --------------------------------------- */
.correos { display: grid; gap: 1rem; margin-top: clamp(1.6rem, 3.5vw, 2.2rem); }
.correo { padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--r-lg); border-left: 3px solid var(--gold-400); }
.correo.responde { border-left-color: var(--crimson); }
@media (min-width: 780px) { .correo.responde { margin-left: clamp(1.5rem, 6vw, 4rem); } }
.correo-de {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.02rem; color: var(--gold-600);
  margin-bottom: .85rem;
}
.correo.responde .correo-de { color: var(--crimson); }
.correo p { color: var(--ink-soft); font-size: .95rem; }
.correo p + p { margin-top: .8rem; }
.correo strong { font-weight: 640; color: var(--espresso); }

/* ---------- Tomos (Enciclopedia) ----------------------------------------- */
.tomos {
  display: grid; gap: clamp(.6rem, 1.6vw, .9rem);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: clamp(1.6rem, 3.5vw, 2.2rem);
}
.tomo {
  display: grid; gap: .55rem; justify-items: center; text-align: center;
  padding: 1.1rem .8rem; border-radius: var(--r-md);
  transition: transform .42s var(--spring-soft), border-color var(--t-base), box-shadow var(--t-base);
}
.tomo:hover { transform: translateY(-4px); border-color: rgba(217,164,65,.7); box-shadow: 0 18px 38px -24px rgba(110,30,29,.5); }
.tomo-n {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .92rem;
  background: linear-gradient(145deg, var(--sand-200), var(--sand-100));
  border: 1px solid rgba(216,195,165,.7); color: var(--gold-600);
  transition: background var(--t-base), color var(--t-base), transform .45s var(--spring-snap);
}
.tomo:hover .tomo-n { background: var(--grad-warm); color: #fff; border-color: transparent; transform: rotate(-8deg) scale(1.08); }
.tomo b { font-weight: 560; font-size: .875rem; line-height: 1.25; }
.tomo span { font-size: .72rem; color: var(--ink-mute); }

/* ---------- Cita / mensaje ------------------------------------------------ */
.cita { padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: var(--r-lg); border-left: 3px solid var(--ember-600); }
.cita p { color: var(--ink-soft); font-size: .95rem; }
.cita p + p { margin-top: .8rem; }
.cita b { font-weight: 640; color: var(--espresso); }

/* ---------- Aviso al pie -------------------------------------------------- */
.aviso {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.05rem 1.2rem; border-radius: var(--r-md);
  background: rgba(247,240,229,.8); border: 1px solid rgba(216,195,165,.7);
  font-size: .88rem; color: var(--ink-soft);
}
.aviso svg { flex: none; margin-top: .18rem; color: var(--gold-600); }
.aviso strong { font-weight: 640; color: var(--espresso); }

/* ═══════════════════════════ /prompts ═════════════════════════════════════ */

/* Riel de categorías. Píldora que se desliza, como el de la biblioteca, y con
   clases propias porque .filters/.filter son de app.js.

   A DIFERENCIA de la biblioteca (dos pestañas cortas) acá son once, y con los
   nombres largos suman ~2000px: en un riel de una sola línea la mitad quedaba
   fuera de la vista, sin nada que avisara que se podía desplazar. Por eso ENVUELVE
   en varias filas y se ven todas. La píldora, entonces, tiene que moverse también
   en vertical: el JS le escribe translate(x, y) con offsetLeft/offsetTop y le copia
   el alto del botón (por eso acá no lleva top ni height fijos). */
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; position: relative; padding: .34rem;
  border-radius: var(--r-md); width: fit-content; max-width: 100%;
  background: rgba(255, 252, 246, .62);
  border: 1px solid rgba(216, 195, 165, .6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  margin-top: clamp(1.6rem, 3.5vw, 2.2rem);
}
.cat-pill {
  position: absolute; top: 0; left: 0;
  border-radius: var(--r-pill); background: var(--grad-warm);
  box-shadow: 0 6px 16px -8px rgba(176,68,42,.8);
  transition: transform .5s var(--spring-drop), width .5s var(--spring-drop),
              height .5s var(--spring-drop);
  z-index: 0;
}
.cat-tab {
  position: relative; z-index: 1;
  padding: .58rem 1.1rem; border-radius: var(--r-pill);
  font-size: .86rem; font-weight: 580; color: var(--ink-soft);
  cursor: pointer; text-align: left;
  /* En pantalla angosta un nombre largo («Gestión institucional y comunicación
     educativa») es más ancho que el riel entero: sin este tope se salía de la
     caja. Con él parte el texto en dos líneas dentro de la píldora. */
  max-width: 100%;
  transition: color .3s var(--ease-out);
}
/* Ahí abajo el riel ya no puede ser compacto: ocupa todo el ancho disponible. */
@media (max-width: 720px) { .cat-tabs { width: 100%; } }
/* El texto va en blanco cuando la píldora está DEBAJO, no cuando la pestaña
   está seleccionada: como en el menú de la cabecera, la píldora acompaña al
   puntero y vuelve a la categoría activa al salir. Con `aria-selected` se veía
   blanco sobre el fondo claro en cuanto la píldora se iba a otra. */
.cat-tab.con-pildora { color: #fff; }

/* Buscador */
.busca {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-radius: var(--r-md);
  margin-top: 1rem;
}
.busca > svg { flex: none; color: var(--ink-mute); }
.busca input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-size: .95rem;
}
.busca input::-webkit-search-cancel-button { display: none; }
.busca-x {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; color: var(--ink-mute);
  transition: background var(--t-fast), color var(--t-fast);
}
.busca-x:hover { background: rgba(216,195,165,.35); color: var(--crimson); }

.conteo { margin-top: 1.1rem; font-size: .84rem; color: var(--ink-mute); }
.conteo b { color: var(--ember-600); font-weight: 620; }

/* Lista de prompts */
.prompts { display: grid; gap: .7rem; margin-top: 1.1rem; }
.prompt { border-radius: var(--r-md); overflow: hidden; }
.prompt > summary {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.15rem; cursor: pointer; list-style: none;
  transition: background var(--t-fast) var(--ease-out);
}
.prompt > summary::-webkit-details-marker { display: none; }
.prompt > summary:hover { background: rgba(255,255,255,.5); }
.prompt-n {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .84rem;
  background: linear-gradient(145deg, var(--sand-200), var(--sand-100));
  border: 1px solid rgba(216,195,165,.7); color: var(--gold-600);
  transition: background var(--t-base), color var(--t-base), transform .45s var(--spring-snap);
}
.prompt[open] .prompt-n, .prompt > summary:hover .prompt-n {
  background: var(--grad-warm); color: #fff; border-color: transparent;
}
.prompt-tit { flex: 1 1 auto; min-width: 0; }
.prompt-tit b { display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.prompt-tit span { font-size: .74rem; color: var(--ink-mute); }
.prompt-chev { flex: none; color: var(--ink-mute); transition: transform .42s var(--spring-soft); }
.prompt[open] .prompt-chev { transform: rotate(180deg); }

.prompt-cuerpo { padding: 0 1.15rem 1.15rem; border-top: 1px solid rgba(216,195,165,.4); }
.prompt-barra { display: flex; justify-content: flex-end; padding: .8rem 0; }
.prompt pre {
  margin: 0; padding: 1.15rem; border-radius: var(--r-md);
  background: var(--grad-deep); color: var(--sand-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .845rem; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
  border: 1px solid rgba(231,190,106,.22);
  max-height: 30rem; overflow-y: auto; overscroll-behavior-y: contain;
}
.copiar.is-done { color: #2E7D4F; border-color: #2E7D4F; }
.copiar .i-done { display: none; }
.copiar.is-done .i-copy { display: none; }
.copiar.is-done .i-done { display: block; }

.cat-vacia { margin-top: 1.6rem; color: var(--ink-mute); font-size: .92rem; }

/* Resaltado de la búsqueda */
.prompt mark { background: rgba(231,190,106,.42); color: inherit; border-radius: 3px; padding: 0 .12em; }