/* ============ Matebase · estructura general ============ */
.app{display:flex; height:100%; overflow:hidden}

/* ---------- Barra lateral / índice ---------- */
.side{
  width:322px; flex:0 0 322px; height:100%;
  background:var(--bg-alt); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:20;
}
.side__head{padding:16px 18px 12px; border-bottom:1px solid var(--line-soft)}
.brand{display:flex; align-items:center; gap:7px; margin-bottom:12px}
.brand__mark{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; color:inherit;
}
.brand__logo{
  font-family:var(--serif); font-style:italic; font-size:1.6875rem; font-weight:700;
  color:var(--accent); line-height:1;
}
.brand__name{font-size:1.1875rem; font-weight:680; letter-spacing:-.02em}
/* Boton de inicio, junto al nombre: es donde se busca instintivamente.
   Atras y adelante comparten la regla en vez de copiarla: son la misma
   familia de mandos y tienen que seguir pareciendose dentro de un ano. */
.brand__home,
.nav__b{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:var(--accent); border:1px solid var(--accent); border-radius:9px;
  padding:6px 11px; font:inherit; font-size:0.7812rem; font-weight:650; line-height:1.65;
  color:var(--on-accent);
  cursor:pointer; text-decoration:none; transition:.13s;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.brand__home{margin-left:auto}
.brand__home:hover,
.nav__b:hover:not([disabled]){
  background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent);
  text-decoration:none;
}
.brand__home:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.search{position:relative}
.search input{
  width:100%; padding:8px 30px 8px 31px; font:inherit; font-size:0.875rem;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
}
.search input::placeholder{color:var(--ink-faint)}
.search__icon{position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:0.8125rem; pointer-events:none}
.search__clear{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:0.9375rem;
  padding:2px 6px; border-radius:6px; display:none}
.search.is-filled .search__clear{display:block}
.search__clear:hover{background:var(--panel-2); color:var(--ink)}

.side__scroll{flex:1; overflow-y:auto; padding:10px 10px 40px}
.side__foot{
  border-top:1px solid var(--line-soft); padding:9px 12px;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  font-size:0.7812rem; color:var(--ink-faint);
}
.side__foot-row{display:flex; align-items:center; gap:10px}
.side__by{flex:1; font-size:0.7375rem; line-height:1.35; color:var(--ink-faint)}
.side__by a{color:var(--ink-soft); font-weight:620; text-decoration:none;
  border-bottom:1px solid var(--line)}
.side__by a:hover{color:var(--accent); border-color:var(--accent)}
.side__foot .mini{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; cursor:pointer; font-size:0.7812rem; color:var(--ink-soft);
}
.side__foot .mini:hover{border-color:var(--accent); color:var(--accent)}
.side__foot .grow{flex:1}
/* La version, en la esquina inferior izquierda: se lee si se busca y no
   compite con nada. */
.side__ver{
  margin-top:-2px; font-size:0.6875rem; line-height:1.2; letter-spacing:.01em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.side__ver:empty{display:none}

/* Selector de tema: los tres a la vista, y el activo se distingue solo. */
.themes{
  align-self:stretch;
  display:flex; gap:4px; padding:3px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
}
.themes__b{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 4px; border:1px solid transparent; border-radius:7px;
  background:none; cursor:pointer; font:inherit; font-size:0.75rem; font-weight:600;
  color:var(--ink-faint); white-space:nowrap;
  transition:color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.themes__b:hover{color:var(--ink); background:var(--panel-2)}
.themes__i{font-size:0.8125rem; line-height:1}
.themes__b.is-on{
  color:var(--accent-ink); background:var(--accent-soft);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--glow);
}
.themes__b.is-on:hover{background:var(--accent-soft)}
.themes__b.is-on .themes__i{color:var(--accent)}
.themes__b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* bloques del índice */
.blk{margin-bottom:3px}
.blk__btn{
  width:100%; display:flex; align-items:center; gap:9px; text-align:left;
  background:none; border:0; cursor:pointer; padding:8px 9px; border-radius:9px;
  font-size:0.85rem; font-weight:640; color:var(--ink); letter-spacing:-.01em;
}
.blk__btn:hover{background:var(--panel-2)}
.blk__num{
  flex:0 0 22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-size:0.7188rem; font-weight:700;
}
.blk__caret{margin-left:auto; color:var(--ink-faint); font-size:0.625rem; transition:transform .18s}
.blk.is-open .blk__caret{transform:rotate(90deg)}
.blk__list{display:none; margin:2px 0 8px; padding-left:11px; border-left:1px solid var(--line-soft)}
.blk.is-open .blk__list{display:block}

.tpc{
  display:flex; align-items:flex-start; gap:8px; padding:7px 9px; border-radius:8px;
  font-size:0.8375rem; color:var(--ink-soft); cursor:pointer; line-height:1.4;
}
.tpc:hover{background:var(--panel-2); color:var(--ink); text-decoration:none}
.tpc.is-active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.tpc__dot{
  flex:0 0 7px; width:7px; height:7px; border-radius:50%; margin-top:7px;
  background:var(--line); box-shadow:0 0 0 2px var(--bg-alt);
}
.tpc.is-seen .tpc__dot{background:var(--ink-faint)}
.tpc.is-done .tpc__dot{background:var(--ok)}
.tpc.is-soon{color:var(--ink-faint)}
.tpc.is-soon .tpc__t::after{
  content:"en preparación"; font-size:0.5938rem; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:5px; padding:0 4px; margin-left:6px;
  vertical-align:1.5px; color:var(--ink-faint); white-space:nowrap;
}

/* ---------- Panel de contenido ---------- */
.main{flex:1; height:100%; overflow-y:auto; scroll-behavior:smooth; position:relative}
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px;
  padding:10px 26px; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--line-soft);
  font-size:0.8125rem; color:var(--ink-faint);
}
.topbar__crumb{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.topbar__crumb b{color:var(--ink-soft); font-weight:600}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:8px;
  padding:4px 9px; cursor:pointer}
.wrap{max-width:880px; margin:0 auto; padding:26px 26px 120px}

/* cabecera de tema */
.hdr{margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.hdr__over{font-size:0.75rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--accent); font-weight:680; margin-bottom:8px}
.hdr h1{font-size:2.0625rem; letter-spacing:-.025em; margin-bottom:10px}
.hdr__sub{color:var(--ink-soft); font-size:1.0312rem; margin:0}
.hdr__meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}

/* navegación anterior/siguiente */
.pager{display:flex; gap:12px; margin-top:46px; padding-top:22px; border-top:1px solid var(--line)}
.pager a{
  flex:1; display:block; padding:12px 15px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); text-decoration:none;
}
.pager a:hover{border-color:var(--accent); text-decoration:none}
.pager .k{font-size:0.7188rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint)}
.pager .t{font-size:0.9062rem; font-weight:600; color:var(--ink); margin-top:3px}
.pager .nx{text-align:right}
.pager .sp{flex:1}

@media (max-width:920px){
  .side{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s;
    box-shadow:var(--shadow)}
  .side.is-open{transform:none}
  .burger{display:block}
  .wrap{padding:20px 16px 100px}
  .hdr h1{font-size:1.6875rem}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:15; display:none}
  .scrim.is-on{display:block}
}

/* la autoría va en la línea superior de la portada, sin gritar */
.hdr__over a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.hdr__over a:hover{color:var(--accent-ink)}

/* ---------- Glosario (columna derecha, ocultable) ---------- */
.topbar__glos{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); border:1px solid var(--accent); border-radius:9px;
  padding:5px 12px; font:inherit; font-size:0.7812rem; font-weight:650; color:var(--on-accent);
  cursor:pointer; transition:.13s;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.topbar__glos:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent)}
/* abierto: se hunde, para distinguirlo de cuando esta cerrado */
.topbar__glos[aria-expanded="true"]{
  background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
}
.topbar__glos:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.glos{
  width:322px; flex:0 0 322px; height:100%;
  background:var(--bg-alt); border-left:1px solid var(--line);
  display:none; flex-direction:column; z-index:20;
}
.glos.is-open{display:flex}
.glos__head{padding:14px 16px 12px; border-bottom:1px solid var(--line-soft); position:relative}
.glos__title{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.11em;
  font-weight:680; color:var(--accent); display:block; margin-bottom:10px;
}
.glos__x{
  position:absolute; top:10px; right:12px;
  background:none; border:0; font-size:1.1875rem; line-height:1;
  color:var(--ink-faint); cursor:pointer; padding:5px 9px; border-radius:8px;
}
.glos__x:hover{color:var(--ink); background:var(--panel-2)}
.glos__count{font-size:0.7188rem; color:var(--ink-faint); margin-top:8px}
.glos__scroll{flex:1; overflow-y:auto; padding:8px 10px 40px}

/* cada término es un desplegable que se abre en su sitio */
.glos__item{border-bottom:1px solid var(--line-soft)}
.glos__t{
  width:100%; display:flex; align-items:flex-start; gap:8px; text-align:left;
  background:none; border:0; cursor:pointer; padding:9px 6px;
  font:inherit; font-size:0.875rem; font-weight:600; color:var(--ink); letter-spacing:-.01em;
}
.glos__t:hover{color:var(--accent)}
.glos__t:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}
.glos__caret{
  flex:0 0 11px; margin-top:5px; font-size:0.5625rem; color:var(--ink-faint);
  transition:transform .18s;
}
.glos__t[aria-expanded="true"] .glos__caret{transform:rotate(90deg)}
.glos__t[aria-expanded="true"]{color:var(--accent-ink)}
.glos__d{
  display:none; padding:0 6px 12px 25px;
  font-size:0.85rem; line-height:1.62; color:var(--ink-soft); text-wrap:pretty;
}
.glos__d.is-open{display:block}
.glos__d strong{color:var(--ink)}
.glos__ir{
  display:inline-block; margin-top:9px; font-size:0.7812rem; font-weight:600;
  color:var(--accent); text-decoration:none;
}
.glos__ir:hover{text-decoration:underline}
.glos__nada{padding:22px 8px; color:var(--ink-faint); font-size:0.8438rem; line-height:1.55}
.glos__marca{background:var(--accent-soft); color:var(--accent-ink); border-radius:3px}

/* ---------- La columna tiene dos documentos: glosario y referencia GLSL ---------- */
.topbar__docs{flex:0 0 auto; display:flex; gap:6px}
.topbar__ico{font-family:var(--mono); font-weight:700; font-size:0.75rem; letter-spacing:-.04em}
.glos[data-modo="glsl"] .glos__title{color:var(--gfx)}
.glos[data-modo="js"] .glos__title{color:var(--son)}
.glos__intro{margin:4px 6px 8px; font-size:0.8125rem; line-height:1.55; color:var(--ink-soft); text-wrap:pretty}
.glos__grupo{
  margin:16px 6px 3px; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--gfx);
}
.glos__n{flex:1; min-width:0; overflow-wrap:anywhere}
.glos__t--cod .glos__n{font-family:var(--mono); font-size:0.8125rem; letter-spacing:0}
.glos__tag{
  flex:0 0 auto; margin-top:2px; padding:0 5px; border:1px solid var(--line); border-radius:5px;
  font-size:0.625rem; font-weight:600; color:var(--ink-faint); white-space:nowrap; letter-spacing:0;
}
.glos__cod{
  margin:8px 0; padding:8px 10px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.75rem; line-height:1.55;
  /* la columna es estrecha: mejor partir la linea que obligar a desplazarse */
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink);
}
.glos__cod .cod-com{font-style:italic}
.glos__ejt{
  margin-top:10px; font-size:0.6562rem; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; color:var(--ink-faint);
}
.glosres__n--cod{font-family:var(--mono); font-size:0.8125rem}

/* en pantallas estrechas se superpone, como el índice */
@media (max-width:1240px){
  .glos{position:fixed; right:0; top:0; transform:translateX(100%); transition:transform .25s;
    box-shadow:var(--shadow); display:flex}
  .glos.is-open{transform:none}
}
@media (max-width:520px){
  .glos{width:100%; flex-basis:100%}
  .topbar__glos span{display:none}
}


@media (pointer:coarse){
  .tpc{padding:11px 9px}
  .blk__btn{padding:12px 9px}
  .side__foot .mini{padding:10px 13px}
  .glos__t{padding-top:12px; padding-bottom:12px}
  .glos__x{padding:9px 13px}
}


/* Los grupos de preferencia comparten aspecto. Tamano de letra e idioma
   van en una fila: las tres «A» y los dos codigos se entienden sin rotulo,
   y el rotulo queda para el lector de pantalla y el title. */
.side__prefs{display:flex; gap:6px; align-items:stretch}
.side__prefs>.themes--letra{flex:3 1 0; min-width:0}
.side__prefs>.themes--idioma{flex:2 1 0; min-width:0}
.themes--letra .themes__b{gap:0; padding-left:2px; padding-right:2px}
.themes--letra .themes__i{
  font-family:var(--serif); font-weight:700; line-height:1;
  display:inline-block; min-width:1em; text-align:center;
}


/* Enlace para saltarse el indice. Escondido hasta que lo enfoca el
   tabulador; entonces aparece arriba del todo y se ve bien. */
.saltar{
  position:fixed; top:-100px; left:12px; z-index:999;
  padding:11px 18px; border-radius:0 0 10px 10px;
  background:var(--accent); color:var(--on-accent);
  font:inherit; font-weight:650; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
  transition:top .12s;
}
.saltar:focus{top:0; text-decoration:none; color:var(--on-accent)}


/* --- atrás y adelante ---
   Lo visual sale de la regla que comparten con Inicio, ahí arriba. Aquí solo
   queda lo que es suyo: la fila, el ancho mínimo y el estado apagado. */
.nav{display:flex; align-items:center; gap:3px; flex:0 0 auto}
/* Son dos galones, no dos palabras: con estrecharlos caben los tres mandos
   junto al nombre sin que este tenga que encogerse. Y la altura se estira
   hasta la del boton de Inicio en vez de calcularse, para que sigan
   midiendo lo mismo cuando cambie el tamano de lectura. */
.nav__b{padding-left:8px; padding-right:8px}
.nav__b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav__b[disabled]{opacity:.34; cursor:default; box-shadow:none}

@media (pointer:coarse){
  .brand__home, .nav__b{padding-top:9px; padding-bottom:9px}
}

/* En pantallas estrechas la cabecera va justa y los tres botones no caben
   en la misma línea que el nombre: que el nombre ceda sitio antes que ellos. */
@media (max-width:430px){
  .brand__name{display:none}
}


/* --- bloque 13: programación gráfica ---
   Redefinir el acento dentro del bloque hace que TODO lo herede sin tocar
   ni una regla más: barras de sección, avisos, enlaces, botones, y las
   gráficas, que leen estas variables al pintarse. */
.blk[data-piel="maq"] .blk__num{background:var(--maq-soft); color:var(--maq-ink)}
.blk[data-piel="maq"] .blk__btn{color:var(--maq-ink)}
.blk[data-piel="maq"] .tpc.is-active{background:var(--maq-soft); color:var(--maq-ink)}
.blk[data-piel="maq"] .blk__list{border-left-color:color-mix(in srgb, var(--maq) 30%, transparent)}

.blk[data-piel="gfx"] .blk__num{background:var(--gfx-soft); color:var(--gfx-ink)}
.blk[data-piel="gfx"] .blk__btn{color:var(--gfx-ink)}
.blk[data-piel="gfx"] .tpc.is-active{background:var(--gfx-soft); color:var(--gfx-ink)}
.blk[data-piel="gfx"] .blk__list{border-left-color:color-mix(in srgb, var(--gfx) 30%, transparent)}
/* --- bloque de síntesis de sonido: la misma idea, en latón --- */
.blk[data-piel="son"] .blk__num{background:var(--son-soft); color:var(--son-ink)}
.blk[data-piel="son"] .blk__btn{color:var(--son-ink)}
.blk[data-piel="son"] .tpc.is-active{background:var(--son-soft); color:var(--son-ink)}
.blk[data-piel="son"] .blk__list{border-left-color:color-mix(in srgb, var(--son) 30%, transparent)}
/* --- bloque de criptografía: la misma idea, en cobre --- */
.blk[data-piel="cr"] .blk__num{background:var(--cr-soft); color:var(--cr-ink)}
.blk[data-piel="cr"] .blk__btn{color:var(--cr-ink)}
.blk[data-piel="cr"] .tpc.is-active{background:var(--cr-soft); color:var(--cr-ink)}
.blk[data-piel="cr"] .blk__list{border-left-color:color-mix(in srgb, var(--cr) 30%, transparent)}
/* --- bloques de inteligencia artificial: la misma idea, en verde fósforo --- */
.blk[data-piel="ia"] .blk__num{background:var(--ia-soft); color:var(--ia-ink)}
.blk[data-piel="ia"] .blk__btn{color:var(--ia-ink)}
.blk[data-piel="ia"] .tpc.is-active{background:var(--ia-soft); color:var(--ia-ink)}
.blk[data-piel="ia"] .blk__list{border-left-color:color-mix(in srgb, var(--ia) 30%, transparent)}


/* --- qué temario muestra el índice ---
   Mismo aspecto que el selector de tema: son tres opciones excluyentes y el
   estado activo tiene que verse sin leer. */
.themes--itin{margin-top:9px}
.itin__nota{font-size:0.7375rem; line-height:1.45; color:var(--ink-faint); margin-top:7px}
.itin__nota:empty{display:none}

/* --- lo que el buscador encuentra en el glosario --- */
.glosres{margin:10px 2px 0; padding-top:8px; border-top:1px solid var(--line-soft)}
.glosres__t{font-size:0.6875rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-faint); font-weight:700; margin:0 8px 4px}
.glosres__nada{margin:4px 8px 8px; font-size:0.8125rem; color:var(--ink-faint)}
.glosres__b{
  display:flex; flex-direction:column; width:100%; text-align:left; gap:1px;
  background:none; border:0; padding:6px 9px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:0.8375rem; color:var(--ink-soft);
}
.glosres__b:hover{background:var(--panel-2); color:var(--ink)}
.glosres__b:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.glosres__n{font-weight:600}
.glosres__i{font-size:0.7188rem; color:var(--ink-faint)}