/* ============================================
   ADAPSYS — Glosario CSS
   Estilos de la pestaña Glosario (Academia IA)
   Usa las variables de marca de brand.css.
   Todo va bajo #tab-glosario para no afectar al resto de la academia.
   Ojo: los nombres de @keyframes son globales (prefijos gl- / a-).
   ============================================ */

/* Solo para el glosario: color del punto de nivel.
   --gl-topbar: alto de lo fijo de la academia, .topbar + menú de pestañas (glosario.js lo mide) */
#tab-glosario {
  --gl-topbar:61px;
  --gl-head:0px;   /* alto del encabezado fijo (buscador + chips); glosario.js lo mide */
  --lvl-basico:var(--brand);
  --lvl-inter:var(--accent);
  --lvl-avanz:#534AB7;
  /* Lavanda de las ilustraciones */
  --lav:#ece8fb;
  --lav-tx:#3c3489;
}

/* ── Menú de pestañas de la academia fijo mientras el Glosario está abierto ──
   Única regla fuera de #tab-glosario: glosario.js agrega .gl-menu-fijo al .nav-tabs
   (y le fija top = alto de la .topbar) al entrar, y teardownGlosario lo quita al salir. */
#main-screen .nav-tabs.gl-menu-fijo { position:sticky; z-index:99; }

/* ── Encabezado con el robot guía ── */
#tab-glosario .gl-hero { display:flex; align-items:center; gap:18px; margin-bottom:14px; }
#tab-glosario .gl-robot { width:72px; height:72px; flex-shrink:0; animation:gl-bob 3s ease-in-out infinite; }
@keyframes gl-bob { 50% { transform:translateY(-5px); } }
#tab-glosario .gl-hero h1 { font-size:26px; font-weight:600; margin:0 0 2px; letter-spacing:-.01em; }
#tab-glosario .gl-hero p  { margin:0; color:var(--text-mid); font-size:15px; }

/* ── Encabezado fijo: buscador y filtros (+ título compacto al hacer scroll) ── */
#tab-glosario .gl-head {
  position:sticky; top:var(--gl-topbar); z-index:60; display:flex; align-items:center;
  background:var(--surface2); padding:10px 0; margin-bottom:14px; transition:box-shadow .3s;
}
#tab-glosario .gl-head.is-stuck { box-shadow:0 10px 12px -12px rgba(0,0,0,.18); }
#tab-glosario .gl-head-title {
  display:flex; align-items:center; gap:8px; flex-shrink:0; overflow:hidden; white-space:nowrap;
  max-width:0; margin-right:0; opacity:0; font-size:15px; font-weight:600; color:var(--text);
  transition:max-width .3s ease, margin-right .3s ease, opacity .3s ease;
}
#tab-glosario .gl-head.is-stuck .gl-head-title { max-width:180px; margin-right:16px; opacity:1; }
#tab-glosario .gl-robot.gl-robot-mini { width:28px; height:28px; animation:none; }
#tab-glosario .gl-tools { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
#tab-glosario .gl-search { flex:1 1 260px; position:relative; }
#tab-glosario .gl-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--muted); }
#tab-glosario .gl-search input {
  width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:11px 14px 11px 42px;
  border:1.5px solid var(--border); border-radius:var(--rpill); background:var(--surface); color:var(--text);
}
#tab-glosario .gl-search input:focus { outline:none; border-color:var(--brand); }
#tab-glosario .gl-search input { text-overflow:ellipsis; } /* placeholder con … cuando aparece el título compacto */
#tab-glosario .gl-chips { display:flex; gap:8px; flex-wrap:wrap; }
#tab-glosario .gl-chip {
  font:inherit; font-size:13px; padding:7px 14px; border-radius:var(--rpill); cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-mid); transition:all .2s;
}
#tab-glosario .gl-chip:hover { border-color:var(--brand); }
#tab-glosario .gl-chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── Layout: índice angosto (sticky) + tarjetas ── */
#tab-glosario .gl-layout { display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:24px; align-items:start; }
#tab-glosario .gl-nav {
  position:sticky; top:calc(var(--gl-topbar) + var(--gl-head) + 16px);
  max-height:calc(100vh - var(--gl-topbar) - var(--gl-head) - 32px); overflow-y:auto; scrollbar-width:thin;
}
#tab-glosario .gl-mbar { display:none; }

/* Indicador del término activo: barra de 3px que se desliza */
#tab-glosario .gl-index-list { position:relative; }
#tab-glosario .gl-ind {
  position:absolute; left:0; top:0; width:3px; height:0; border-radius:2px; background:var(--accent);
  pointer-events:none; transition:transform .35s ease, height .35s ease, opacity .2s;
  z-index:2; /* por encima de las filas (que son position:relative) */
}
#tab-glosario .gl-ind.is-hidden  { opacity:0; }
#tab-glosario .gl-ind.is-instant { transition:none; }

/* Leyenda de niveles */
#tab-glosario .gl-legend { list-style:none; margin:0 0 14px; padding:0 0 0 14px; display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); }
#tab-glosario .gl-legend li { display:flex; align-items:center; gap:8px; }

/* Punto de nivel */
#tab-glosario .gl-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
#tab-glosario .gl-dot.basico     { background:var(--lvl-basico); }
#tab-glosario .gl-dot.intermedio { background:var(--lvl-inter); }
#tab-glosario .gl-dot.avanzado   { background:var(--lvl-avanz); }

/* Acordeón de categorías */
#tab-glosario .gl-acc + .gl-acc { margin-top:4px; }
#tab-glosario .gl-acc-head {
  width:100%; display:flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600;
  text-align:left; color:var(--text); background:transparent; border:none; border-radius:var(--rs);
  padding:8px 10px; cursor:pointer;
}
#tab-glosario .gl-acc-head:hover { background:var(--surface2); }
#tab-glosario .gl-acc-count { font-size:11px; font-weight:400; color:var(--muted); }
#tab-glosario .gl-chev { width:16px; height:16px; margin-left:auto; flex-shrink:0; stroke:var(--muted); transition:transform .3s; }
#tab-glosario [aria-expanded="true"] > .gl-chev { transform:rotate(180deg); }
/* Cerrada: visibility:hidden (tras la transición) saca las filas del orden de Tab */
#tab-glosario .gl-acc-body { overflow:hidden; visibility:hidden; transition:max-height .3s ease, visibility 0s .3s; }
#tab-glosario .gl-acc.is-open .gl-acc-body { visibility:visible; transition:max-height .3s ease, visibility 0s 0s; }

/* Filas de término */
#tab-glosario .gl-term {
  width:100%; display:flex; align-items:center; gap:8px; font:inherit; font-size:13px; text-align:left;
  color:var(--text); background:transparent; border:none; border-radius:var(--rs);
  padding:6px 10px 6px 14px; cursor:pointer; margin:1px 0; transition:color .2s, transform .2s;
  position:relative; /* contiene a .gl-sr: si no, desborda el índice desde las categorías cerradas */
}
/* Hover sin fondo (no tapa el indicador): el nombre se tiñe, el punto crece y la fila se corre un poco */
#tab-glosario .gl-term:hover { color:var(--brand-dark); transform:translateX(3px); }
#tab-glosario .gl-term .gl-dot { transition:transform .2s ease; }
#tab-glosario .gl-term:hover .gl-dot { transform:scale(1.6); }
#tab-glosario .gl-term[aria-current="true"] { color:var(--accent-mid); font-weight:500; }

/* Texto solo para lectores de pantalla */
#tab-glosario .gl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Tarjetas: una por término, la activa resaltada ── */
#tab-glosario #gl-cards { display:flex; flex-direction:column; gap:48px; }
#tab-glosario .gl-detail {
  background:var(--surface); border-radius:var(--r); border:1.5px solid var(--border); padding:24px;
  scroll-margin-top:calc(var(--gl-topbar) + var(--gl-head) + 24px);
  opacity:.35; transform:scale(.97); transition:opacity .4s ease, transform .4s ease;
}
#tab-glosario .gl-detail.is-active { opacity:1; transform:scale(1); }
/* Entrada de la ilustración al activarse (glosario.js reinserta el SVG) */
#tab-glosario .gl-detail.is-active .gl-stage svg { animation:gl-in .45s ease both; }
@keyframes gl-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
/* Fuera de pantalla: ilustraciones en pausa */
#tab-glosario .gl-detail.is-offscreen .gl-stage * { animation-play-state:paused; }
/* Espacio final y centinelas de extremos (scroll-spy) */
#tab-glosario .gl-fin { height:calc(50vh - 48px); display:flex; align-items:flex-end; }
#tab-glosario .gl-edge { height:1px; width:100%; }
#tab-glosario .gl-detail h2 { font-size:20px; font-weight:600; margin:0 0 2px; }
#tab-glosario .gl-detail .full { font-size:13px; color:var(--muted); margin:0 0 14px; }
#tab-glosario .gl-stage { background:var(--surface2); border-radius:var(--rs); display:flex; justify-content:center; padding:14px; margin-bottom:18px; }
#tab-glosario .gl-stage svg { width:100%; max-width:380px; height:auto; }
#tab-glosario .gl-analogia { font-size:17px; line-height:1.55; font-weight:500; margin:0 0 12px; }
#tab-glosario .gl-explica  { font-size:14px; line-height:1.7; color:var(--text-mid); margin:0 0 16px; }
#tab-glosario .gl-ejemplo  { display:flex; gap:10px; background:var(--brand-bg); color:var(--brand-dark); border-radius:var(--rs); padding:12px 14px; font-size:14px; line-height:1.55; }
#tab-glosario .gl-ejemplo svg { width:20px; height:20px; flex-shrink:0; stroke:var(--brand-dark); margin-top:1px; }
#tab-glosario .gl-rel { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); }
#tab-glosario .gl-rel button { font:inherit; font-size:13px; padding:5px 12px; border-radius:var(--rpill); border:1.5px solid var(--accent); background:transparent; color:var(--accent-mid); cursor:pointer; }
#tab-glosario .gl-rel button:hover { background:var(--accent-bg); }

#tab-glosario .gl-empty { background:var(--surface); border-radius:var(--r); padding:28px; text-align:center; color:var(--text-mid); }
#tab-glosario .gl-empty button { margin-top:12px; font:inherit; font-size:14px; padding:9px 18px; border-radius:var(--rpill); border:none; background:var(--accent); color:#fff; cursor:pointer; }

#tab-glosario :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Animaciones de las ilustraciones ── */
#tab-glosario .a-wire  { stroke-dasharray:5 7; animation:a-flow 1s linear infinite; }
@keyframes a-flow { to { stroke-dashoffset:-24; } }
#tab-glosario .a-pulse { transform-box:fill-box; transform-origin:center; animation:a-pulse 2.4s ease-in-out infinite; }
@keyframes a-pulse { 50% { transform:scale(1.08); } }
#tab-glosario .a-slide { animation:a-slide 3.2s ease-in-out infinite; }
@keyframes a-slide { 0%,15% { transform:translateX(0); opacity:1; } 55% { transform:translateX(125px); opacity:1; } 70%,100% { transform:translateX(125px); opacity:0; } }
#tab-glosario .a-glow  { transform-box:fill-box; transform-origin:center; animation:a-glow 3.2s ease-in-out infinite; }
@keyframes a-glow { 0%,55% { transform:scale(1); } 68% { transform:scale(1.14); } 85%,100% { transform:scale(1); } }
#tab-glosario .a-raw   { animation:a-raw 4s ease-in-out infinite; }
#tab-glosario .a-fmt   { animation:a-fmt 4s ease-in-out infinite; }
@keyframes a-raw { 0%,35% { opacity:1; } 50%,90% { opacity:.25; } 100% { opacity:1; } }
@keyframes a-fmt { 0%,35% { opacity:0; transform:translateX(-8px); } 50%,90% { opacity:1; transform:none; } 100% { opacity:0; } }

/* ═══════════ ANIMACIONES FUNDAMENTOS ═══════════ */
/* IA generativa: palabras sueltas que se ordenan en una frase */
#tab-glosario .a-gen { transform-box:fill-box; transform-origin:center; animation:a-gen 5s ease-in-out infinite; }
@keyframes a-gen {
  0%,15%  { transform:translate(var(--sx),var(--sy)) rotate(var(--r)); opacity:.5; }
  55%,85% { transform:none; opacity:1; }
  100%    { transform:translate(var(--sx),var(--sy)) rotate(var(--r)); opacity:.5; }
}
#tab-glosario .a-spark { transform-box:fill-box; transform-origin:center; animation:a-spark 5s ease-in-out infinite; }
@keyframes a-spark { 0%,52% { transform:scale(0); } 62% { transform:scale(1.25); } 70%,86% { transform:scale(1); } 100% { transform:scale(0); } }

/* LLM: partículas que entran al modelo y palabras que salen */
#tab-glosario .a-part { animation:a-part 1.6s linear infinite; }
@keyframes a-part { 0% { transform:translateX(-70px); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 100% { transform:none; opacity:0; } }
#tab-glosario .a-word { animation:a-word 4.2s ease-out infinite; }
@keyframes a-word { 0%,8% { opacity:0; transform:translateX(-8px); } 20%,82% { opacity:1; transform:none; } 95%,100% { opacity:0; } }

/* Prompt: respuesta borrosa → contexto → respuesta nítida */
#tab-glosario .a-pvag  { animation:a-pvag 6s ease-in-out infinite; }
@keyframes a-pvag  { 0%,30% { opacity:1; } 45%,92% { opacity:0; } 100% { opacity:1; } }
#tab-glosario .a-psharp { animation:a-psharp 6s ease-in-out infinite; }
@keyframes a-psharp { 0%,32% { opacity:0; transform:translateY(6px); } 48%,90% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-pctx  { transform-box:fill-box; transform-origin:left center; animation:a-pctx 6s ease-out infinite; }
@keyframes a-pctx  { 0%,12% { opacity:0; transform:scale(.6); } 22%,90% { opacity:1; transform:none; } 100% { opacity:0; } }

/* Token: la frase se corta en fichas que caen al contador */
#tab-glosario .a-tk { animation:a-tk 5s ease-in-out infinite; }
@keyframes a-tk {
  0%,15%  { transform:translate(var(--sx),-90px); }
  32%     { transform:translate(0,-90px); }
  55%,88% { transform:none; }
  100%    { transform:translate(var(--sx),-90px); }
}
#tab-glosario .a-tkc { animation:a-tkc 5s ease-out infinite; }
@keyframes a-tkc { 0%,55% { opacity:0; } 65%,88% { opacity:1; } 100% { opacity:0; } }

/* Alucinación: lupa que revela un dato sin fuente */
#tab-glosario .a-mag { animation:a-mag 6s ease-in-out infinite; }
@keyframes a-mag { 0%,15% { transform:translate(190px,70px); } 42%,85% { transform:none; } 100% { transform:translate(190px,70px); } }
#tab-glosario .a-hol { animation:a-hol 6s ease-out infinite; }
@keyframes a-hol { 0%,44% { opacity:0; } 54%,85% { opacity:1; } 100% { opacity:0; } }
#tab-glosario .a-num { animation:a-num 6s ease-out infinite; }
@keyframes a-num { 0%,44% { opacity:1; } 54%,85% { opacity:.25; } 100% { opacity:1; } }

/* Ventana de contexto: cinta de documentos; los antiguos se caen */
#tab-glosario .a-ctx { animation:a-ctx 6s linear infinite; }
@keyframes a-ctx {
  0%   { transform:translate(calc(380px - var(--bx)),0); opacity:.3; }
  17%  { opacity:.3; }
  21%  { opacity:1; }
  72%  { transform:translate(calc(63px - var(--bx)),0); opacity:1; }
  84%,100% { transform:translate(calc(30px - var(--bx)),55px) rotate(-25deg); opacity:0; }
}

/* Razonamiento: camino rápido vs. camino pensado */
#tab-glosario .a-rz1 { animation:a-rz1 5s ease-out infinite; }
@keyframes a-rz1 { 0% { transform:translate(-270px,50px); } 18%,100% { transform:none; } }
#tab-glosario .a-rz2 { animation:a-rz2 5s ease-in-out infinite; }
@keyframes a-rz2 {
  0%   { transform:translate(-290px,-50px); }
  20%  { transform:translate(-210px,10px); }
  42%  { transform:translate(-130px,-30px); }
  64%  { transform:translate(-60px,15px); }
  80%,100% { transform:none; }
}
#tab-glosario .a-think { animation:a-think 5s ease-in-out infinite; }
@keyframes a-think { 0%,8% { opacity:0; } 15%,70% { opacity:1; } 80%,100% { opacity:0; } }
#tab-glosario .a-star { transform-box:fill-box; transform-origin:center; animation:a-star 5s ease-out infinite; }
@keyframes a-star { 0%,78% { transform:scale(.4); opacity:.35; } 86% { transform:scale(1.25); opacity:1; } 92%,100% { transform:scale(1); opacity:1; } }

/* ═══════════ ANIMACIONES TRABAJAR CON IA ═══════════ */
/* Proyecto: los archivos asoman de la carpeta y cada chat nuevo los recibe */
#tab-glosario .a-pfile { animation:a-pfile 5s ease-out infinite; }
@keyframes a-pfile { 0%,8% { transform:translateY(34px); } 24%,90% { transform:none; } 100% { transform:translateY(34px); } }
#tab-glosario .a-pchat { animation:a-pchat 5s ease-out infinite; }
@keyframes a-pchat { 0%,28% { opacity:0; transform:translateX(-14px); } 42%,90% { opacity:1; transform:none; } 100% { opacity:0; } }

/* Artifact: se abre una ventana y el documento se construye solo */
#tab-glosario .a-artw { transform-box:fill-box; transform-origin:left center; animation:a-artw 6s ease-out infinite; }
@keyframes a-artw { 0%,8% { transform:scaleX(0); opacity:0; } 20%,90% { transform:none; opacity:1; } 100% { transform:scaleX(0); opacity:0; } }
#tab-glosario .a-artl { transform-box:fill-box; transform-origin:left center; animation:a-artl 6s ease-out infinite; }
@keyframes a-artl { 0%,20% { transform:scaleX(0); } 34%,90% { transform:none; } 100% { transform:scaleX(0); } }
#tab-glosario .a-arts { transform-box:fill-box; transform-origin:center; animation:a-arts 6s ease-out infinite; }
@keyframes a-arts { 0%,58% { transform:scale(0); } 66% { transform:scale(1.15); } 72%,90% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-artb { animation:a-artb 6s ease-out infinite; }
@keyframes a-artb { 0%,2% { opacity:0; } 8%,90% { opacity:1; } 100% { opacity:0; } }

/* Memoria: las notas pasan por la libreta y aparecen en el chat nuevo */
#tab-glosario .a-memn { transform-box:fill-box; transform-origin:center; animation:a-memn 6s ease-in-out infinite; }
@keyframes a-memn {
  0%,12%  { transform:translate(-212px,0); }
  38%,46% { transform:translate(var(--nx),var(--ny)) scale(.7); }
  70%,90% { transform:none; }
  100%    { transform:translate(-212px,0); }
}
#tab-glosario .a-memb { transform-box:fill-box; transform-origin:center; animation:a-memb 6s ease-in-out infinite; }
@keyframes a-memb { 0%,34% { transform:none; } 42% { transform:scale(1.08); } 50%,100% { transform:none; } }

/* Instrucciones: la tarjeta de reglas baja y tiñe todas las respuestas */
#tab-glosario .a-insc { animation:a-insc 6s ease-out infinite; }
@keyframes a-insc { 0%,6% { transform:translateY(-50px); opacity:0; } 20%,90% { transform:none; opacity:1; } 100% { transform:translateY(-50px); opacity:0; } }
#tab-glosario .a-inst { animation:a-inst 6s ease-in-out infinite; }
@keyframes a-inst { 0%,26% { fill:#e9e9e9; } 40%,90% { fill:var(--brand-bg); } 100% { fill:#e9e9e9; } }
#tab-glosario .a-instl { animation:a-instl 6s ease-in-out infinite; }
@keyframes a-instl { 0%,26% { stroke:#c4c4c4; } 40%,90% { stroke:var(--brand); } 100% { stroke:#c4c4c4; } }

/* Gem: se configura un Gem, se guarda en "Mis Gems" y responde ya configurado */
#tab-glosario .a-gmn { animation:a-gmn 7s ease-out infinite; }
@keyframes a-gmn { 0%,6% { opacity:0; transform:translateX(-6px); } 14%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-gml { transform-box:fill-box; transform-origin:left center; animation:a-gml 7s ease-out infinite; }
@keyframes a-gml { 0%,14% { transform:scaleX(0); } 24%,92% { transform:none; } 100% { transform:scaleX(0); } }
#tab-glosario .a-gmc { transform-box:fill-box; transform-origin:center; animation:a-gmc 7s ease-out infinite; }
@keyframes a-gmc { 0%,28% { transform:scale(0); } 34% { transform:scale(1.1); } 38%,92% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-gmb { transform-box:fill-box; transform-origin:center; animation:a-gmb 7s ease-in-out infinite; }
@keyframes a-gmb { 0%,40% { transform:none; } 43% { transform:scale(.92); } 46%,100% { transform:none; } }
#tab-glosario .a-gmf { animation:a-gmf 7s ease-in-out infinite; }
@keyframes a-gmf { 0%,42% { opacity:0; transform:translate(-65px,99px); } 44% { opacity:1; transform:translate(-65px,99px); } 54% { opacity:1; transform:none; } 58%,100% { opacity:0; transform:none; } }
#tab-glosario .a-gmi { animation:a-gmi 7s ease-out infinite; }
@keyframes a-gmi { 0%,54% { opacity:0; } 58%,92% { opacity:1; } 100% { opacity:0; } }
#tab-glosario .a-gmu { animation:a-gmu 7s ease-out infinite; }
@keyframes a-gmu { 0%,60% { opacity:0; transform:translateY(6px); } 66%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-gmr { transform-box:fill-box; transform-origin:left center; animation:a-gmr 7s ease-out infinite; }
@keyframes a-gmr { 0%,68% { transform:scaleX(0); } 78%,92% { transform:none; } 100% { transform:scaleX(0); } }

/* NotebookLM: las fuentes entran al cuaderno, la respuesta cita su fuente y aparece el resumen en audio */
#tab-glosario .a-nbsrc { animation:a-nbsrc 8s ease-out infinite; }
@keyframes a-nbsrc { 0%,4% { opacity:0; transform:translateX(-16px); } 12%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-nbq { animation:a-nbq 8s ease-out infinite; }
@keyframes a-nbq { 0%,20% { opacity:0; transform:translateY(6px); } 28%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-nbl { transform-box:fill-box; transform-origin:left center; animation:a-nbl 8s ease-out infinite; }
@keyframes a-nbl { 0%,30% { transform:scaleX(0); } 42%,92% { transform:none; } 100% { transform:scaleX(0); } }
#tab-glosario .a-nbc { transform-box:fill-box; transform-origin:center; animation:a-nbc 8s ease-out infinite; }
@keyframes a-nbc { 0%,46% { transform:scale(0); } 52% { transform:scale(1.25); } 56%,92% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-nbh1 { animation:a-nbh1 8s ease-in-out infinite; }
@keyframes a-nbh1 { 0%,52% { stroke:rgba(0,0,0,.18); } 56%,70% { stroke:var(--accent); } 76%,100% { stroke:rgba(0,0,0,.18); } }
#tab-glosario .a-nbh2 { animation:a-nbh2 8s ease-in-out infinite; }
@keyframes a-nbh2 { 0%,58% { stroke:rgba(0,0,0,.18); } 62%,76% { stroke:var(--brand); } 82%,100% { stroke:rgba(0,0,0,.18); } }
#tab-glosario .a-nba { animation:a-nba 8s ease-out infinite; }
@keyframes a-nba { 0%,64% { opacity:0; transform:translateY(8px); } 72%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-nbw { transform-box:fill-box; transform-origin:center; animation:a-nbw 1.2s ease-in-out infinite; }
@keyframes a-nbw { 0%,100% { transform:scaleY(.4); } 50% { transform:none; } }

/* ═══════════ ANIMACIONES CONECTAR LA IA ═══════════ */
/* Conector: la app se acopla a la IA y se activa el permiso */
#tab-glosario .a-conapp { animation:a-conapp 6s ease-in-out infinite; }
@keyframes a-conapp { 0%,10% { transform:translateX(96px); opacity:.5; } 30% { transform:translateX(-4px); opacity:1; } 34%,90% { transform:none; opacity:1; } 100% { transform:translateX(96px); opacity:.5; } }
#tab-glosario .a-conf { transform-box:fill-box; transform-origin:center; animation:a-conf 6s ease-out infinite; }
@keyframes a-conf { 0%,32% { transform:scale(.3); opacity:0; } 36% { opacity:1; } 50%,100% { transform:scale(3); opacity:0; } }
#tab-glosario .a-cont { animation:a-cont 6s ease-in-out infinite; }
@keyframes a-cont { 0%,42% { fill:#d4d4d4; } 50%,90% { fill:var(--brand); } 100% { fill:#d4d4d4; } }
#tab-glosario .a-conk { animation:a-conk 6s ease-in-out infinite; }
@keyframes a-conk { 0%,42% { transform:translateX(-20px); } 50%,90% { transform:none; } 100% { transform:translateX(-20px); } }
#tab-glosario .a-conl { animation:a-conl 6s ease-out infinite; }
@keyframes a-conl { 0%,46% { opacity:0; } 54%,90% { opacity:1; } 100% { opacity:0; } }

/* API: el pedido viaja al modelo y la respuesta vuelve */
#tab-glosario .a-apit { animation:a-apit 5s ease-in-out infinite; }
@keyframes a-apit { 0%,6% { transform:translateX(-116px); opacity:1; } 38% { transform:none; opacity:1; } 46%,100% { transform:none; opacity:0; } }
#tab-glosario .a-apir { animation:a-apir 5s ease-in-out infinite; }
@keyframes a-apir { 0%,48% { transform:translateX(110px); opacity:0; } 54% { opacity:1; } 84%,100% { transform:none; opacity:1; } }

/* Agente: avanza solo por los pasos y entrega el resultado */
#tab-glosario .a-agi { animation:a-agi 6s ease-in-out infinite; }
@keyframes a-agi { 0%,12% { transform:translateY(-84px); } 17%,27% { transform:translateY(-56px); } 32%,42% { transform:translateY(-28px); } 47%,90% { transform:none; } 100% { transform:translateY(-84px); } }
#tab-glosario .a-agc0, #tab-glosario .a-agc1, #tab-glosario .a-agc2, #tab-glosario .a-agc3 { transform-box:fill-box; transform-origin:center; }
#tab-glosario .a-agc0 { animation:a-agc0 6s ease-out infinite; }
#tab-glosario .a-agc1 { animation:a-agc1 6s ease-out infinite; }
#tab-glosario .a-agc2 { animation:a-agc2 6s ease-out infinite; }
#tab-glosario .a-agc3 { animation:a-agc3 6s ease-out infinite; }
@keyframes a-agc0 { 0%,12% { transform:scale(0); } 16%,90% { transform:none; } 100% { transform:scale(0); } }
@keyframes a-agc1 { 0%,27% { transform:scale(0); } 31%,90% { transform:none; } 100% { transform:scale(0); } }
@keyframes a-agc2 { 0%,42% { transform:scale(0); } 46%,90% { transform:none; } 100% { transform:scale(0); } }
@keyframes a-agc3 { 0%,57% { transform:scale(0); } 61%,90% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-agr { transform-box:fill-box; transform-origin:center; animation:a-agr 6s ease-out infinite; }
@keyframes a-agr { 0%,64% { transform:scale(.4); opacity:0; } 72% { transform:scale(1.08); opacity:1; } 78%,90% { transform:none; opacity:1; } 100% { transform:scale(.4); opacity:0; } }

/* Webhook: un evento dispara un aviso automático en otra app */
#tab-glosario .a-whn { animation:a-whn 5s ease-out infinite; }
@keyframes a-whn { 0%,8% { opacity:0; transform:translateY(-10px); } 18%,90% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-whb { transform-box:fill-box; transform-origin:center; animation:a-whb 5s ease-out infinite; }
@keyframes a-whb { 0%,16% { transform:scale(0); } 22% { transform:scale(1.3); } 28%,90% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-whp { animation:a-whp 5s ease-in-out infinite; }
@keyframes a-whp { 0%,24% { transform:translateX(-92px); opacity:0; } 27% { opacity:1; } 44% { transform:none; opacity:1; } 47%,100% { transform:none; opacity:0; } }
#tab-glosario .a-whbell { transform-box:fill-box; transform-origin:50% 0; animation:a-whbell 5s ease-in-out infinite; }
@keyframes a-whbell { 0%,44% { transform:none; } 47% { transform:rotate(16deg); } 50% { transform:rotate(-14deg); } 53% { transform:rotate(10deg); } 56%,100% { transform:none; } }
#tab-glosario .a-whm { animation:a-whm 5s ease-out infinite; }
@keyframes a-whm { 0%,45% { opacity:0; transform:translateX(16px); } 55%,90% { opacity:1; transform:none; } 100% { opacity:0; } }

/* ═══════════ ANIMACIONES ELEGIR Y USAR ═══════════ */
/* Cómo elegir modelo: en el chat de Claude se despliega el selector y se elige el modelo */
#tab-glosario .a-embt { transform-box:fill-box; transform-origin:center; animation:a-embt 8s ease-in-out infinite; }
@keyframes a-embt { 0%,12% { transform:none; } 14% { transform:scale(.94); } 17%,100% { transform:none; } }
#tab-glosario .a-emdd { transform-box:fill-box; transform-origin:80% 100%; animation:a-emdd 8s ease-out infinite; }
@keyframes a-emdd { 0%,15% { transform:scale(.92) translateY(10px); opacity:0; } 22%,90% { transform:none; opacity:1; } 96%,100% { transform:scale(.96); opacity:0; } }
#tab-glosario .a-emhl { animation:a-emhl 8s ease-in-out infinite; }
@keyframes a-emhl { 0%,30% { transform:translateY(24px); } 38%,92% { transform:none; } 100% { transform:translateY(24px); } }
#tab-glosario .a-emck1, #tab-glosario .a-emlb1 { animation:a-emold 8s ease-in-out infinite; }
#tab-glosario .a-emck2, #tab-glosario .a-emlb2 { animation:a-emnew 8s ease-in-out infinite; }
@keyframes a-emold { 0%,42% { opacity:1; } 46%,96% { opacity:0; } 100% { opacity:1; } }
@keyframes a-emnew { 0%,42% { opacity:0; } 46%,96% { opacity:1; } 100% { opacity:0; } }
#tab-glosario .a-emtg { animation:a-emtg 8s ease-in-out infinite; }
@keyframes a-emtg { 0%,56% { fill:#d4d4d4; } 60%,92% { fill:var(--accent); } 100% { fill:#d4d4d4; } }
#tab-glosario .a-emtk { animation:a-emtk 8s ease-in-out infinite; }
@keyframes a-emtk { 0%,56% { transform:translateX(-10px); } 60%,92% { transform:none; } 100% { transform:translateX(-10px); } }
#tab-glosario .a-emcur { animation:a-emcur 8s ease-in-out infinite; }
@keyframes a-emcur {
  0%       { transform:translate(130px,178px); opacity:0; }
  4%       { transform:translate(130px,178px); opacity:1; }
  12%,28%  { transform:translate(300px,162px); opacity:1; }
  38%,44%  { transform:translate(290px,42px); opacity:1; }
  52%,62%  { transform:translate(312px,122px); opacity:1; }
  70%,100% { transform:translate(312px,122px); opacity:0; }
}

/* Privacidad: el pincel reemplaza datos personales por etiquetas */
#tab-glosario .a-prb { animation:a-prb 6s ease-in-out infinite; }
@keyframes a-prb { 0%,14% { transform:translateX(-30px); opacity:0; } 18% { opacity:1; } 50% { transform:translateX(250px); opacity:1; } 55%,100% { transform:translateX(250px); opacity:0; } }
#tab-glosario .a-pro { animation:a-pro 6s ease-in-out infinite; }
@keyframes a-pro { 0%,30% { opacity:1; } 40%,92% { opacity:0; } 100% { opacity:1; } }
#tab-glosario .a-prn { animation:a-prn 6s ease-out infinite; }
@keyframes a-prn { 0%,34% { opacity:0; transform:translateX(-6px); } 44%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
#tab-glosario .a-prs { transform-box:fill-box; transform-origin:center; animation:a-prs 6s ease-out infinite; }
@keyframes a-prs { 0%,56% { transform:scale(0); } 64% { transform:scale(1.2); } 70%,92% { transform:none; } 100% { transform:scale(0); } }

/* Claude Code: se escribe la instrucción y la página se arma */
#tab-glosario .a-cct { transform-box:fill-box; transform-origin:right center; animation:a-cct 7s steps(22,end) infinite; }
@keyframes a-cct { 0%,6% { transform:none; } 30%,100% { transform:scaleX(0); } }
#tab-glosario .a-ccl0, #tab-glosario .a-ccl1, #tab-glosario .a-ccl2 { animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-out; }
#tab-glosario .a-ccl0 { animation-name:a-ccl0; } #tab-glosario .a-ccl1 { animation-name:a-ccl1; } #tab-glosario .a-ccl2 { animation-name:a-ccl2; }
@keyframes a-ccl0 { 0%,34% { opacity:0; } 38%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes a-ccl1 { 0%,42% { opacity:0; } 46%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes a-ccl2 { 0%,58% { opacity:0; } 62%,92% { opacity:1; } 100% { opacity:0; } }
#tab-glosario .a-ccn { transform-box:fill-box; transform-origin:center bottom; animation:a-ccn 7s ease-out infinite; }
@keyframes a-ccn { 0%,40% { transform:scale(0); } 46% { transform:scale(1.2); } 50%,92% { transform:none; } 100% { transform:scale(0); } }
#tab-glosario .a-ccg { animation:a-ccg 7s ease-out infinite; }
@keyframes a-ccg { 0%,46% { opacity:0; transform:translateY(8px); } 56%,92% { opacity:1; transform:none; } 100% { opacity:0; } }

/* Vibe coding: la idea se vuelve app y gira el ciclo probar-ajustar */
#tab-glosario .a-vcw { animation:a-vcw 6s ease-in-out infinite; }
@keyframes a-vcw { 0%,14% { opacity:0; } 22%,38% { opacity:1; } 48%,100% { opacity:0; } }
#tab-glosario .a-vcs { animation:a-vcs 6s ease-in-out infinite; }
@keyframes a-vcs { 0%,38% { opacity:0; } 50%,92% { opacity:1; } 100% { opacity:0; } }
#tab-glosario .a-vcr { transform-box:fill-box; transform-origin:center; animation:a-vcr 4s linear infinite; }
@keyframes a-vcr { to { transform:rotate(360deg); } }
#tab-glosario .a-vcb { transform-box:fill-box; transform-origin:center; animation:a-vcb 6s ease-in-out infinite; }
@keyframes a-vcb { 0%,60% { transform:none; } 66% { transform:scale(1.12); } 72%,100% { transform:none; } }

@media (prefers-reduced-motion: reduce) {
  #tab-glosario *, #tab-glosario *::before, #tab-glosario *::after { animation:none !important; transition:none !important; }
  #tab-glosario .a-fmt { opacity:1; }
  #tab-glosario .gl-detail { transform:none !important; }
}

/* ── Móvil: sin índice lateral; barra sticky "Categoría · Término" que despliega el índice ── */
@media (max-width: 860px) {
  #tab-glosario .gl-layout { grid-template-columns:1fr; gap:16px; }
  #tab-glosario .gl-head { padding:8px 0; }
  #tab-glosario .gl-head-title { display:none; }
  #tab-glosario .gl-tools { gap:8px; }
  /* Chips en una sola fila (con scroll horizontal si no caben) para que el encabezado fijo sea bajo */
  #tab-glosario .gl-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
  #tab-glosario .gl-chip { flex-shrink:0; font-size:12px; padding:6px 12px; }
  #tab-glosario .gl-nav {
    top:calc(var(--gl-topbar) + var(--gl-head)); z-index:50; max-height:none; overflow:visible;
    background:var(--surface2); padding:8px 0; margin:-8px 0;
  }
  #tab-glosario .gl-mbar {
    display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:13px; font-weight:500;
    text-align:left; color:var(--text); background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--rpill); padding:9px 14px; cursor:pointer; box-shadow:var(--shadow-sm);
  }
  #tab-glosario .gl-mbar-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .15s; }
  #tab-glosario .gl-mbar-txt.is-fading { opacity:0; }
  #tab-glosario .gl-index {
    display:none; position:absolute; left:0; right:0; top:calc(100% - 2px);
    max-height:min(60vh, 480px); overflow-y:auto; background:var(--surface);
    border:1.5px solid var(--border); border-radius:var(--r); padding:12px 8px; box-shadow:var(--shadow-md);
  }
  #tab-glosario .gl-nav.is-open .gl-index { display:block; }
  #tab-glosario .gl-detail { padding:18px; scroll-margin-top:calc(var(--gl-topbar) + var(--gl-head) + 72px); }
  #tab-glosario .gl-hero h1 { font-size:22px; }
  #tab-glosario .gl-robot { width:56px; height:56px; }
}