/* ============================================================================
 *  masterclass.css — capa semántica del proyecto sobre el sistema The Bridge.
 *  Carga DESPUÉS de tokens.css (que trae la paleta de marca y las fuentes).
 *
 *  Dos familias de tokens:
 *   1) Alias de marca  → nombres cómodos para los de The Bridge (no inventan color).
 *   2) Sub-paleta "terminal" → extensión CONSCIENTE del sistema para los bloques de
 *      código, memoria y pila. La marca es clara y recta; el código vive dentro de
 *      bloques `950` con monoespaciada. Estos acentos técnicos (byte buffer verde,
 *      borde ámbar, desborde rojo, retorno lila) NO son tokens de marca: son el
 *      vocabulario de bajo nivel de la clase. Se usan SOLO dentro de .terminal.
 * ========================================================================== */

/* Los tokens semánticos y el fondo claro se scopan a body.proyeccion para NO
   pisar la paleta oscura que usan el mando y el panel (definida en Base.astro).
   Las clases de componente (.pastilla, .terminal, .lista-cuadrada…) son globales
   pero solo las usa la proyección. */
body.proyeccion {
  /* --- 1. Alias de marca ------------------------------------------------- */
  --rojo:        var(--brand-red);
  --rojo-hover:  var(--brand-red-hover);
  --rojo-suave:  var(--brand-red-soft);
  --blanco:      var(--brand-neutral-white);
  --gris-100:    var(--brand-neutral-100);
  --gris-200:    var(--brand-neutral-200);
  --gris-300:    var(--brand-neutral-300);
  --gris-500:    var(--brand-neutral-500);
  --gris-700:    var(--brand-neutral-700);
  --tinta:       var(--brand-neutral-black);   /* texto sobre claro */
  --negro-950:   var(--brand-neutral-950);     /* fondos oscuros */
  --estudio:     var(--brand-neutral-studio);  /* hueco de foto pendiente */

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* --- 2. Sub-paleta terminal (solo dentro de .terminal) ----------------- */
  --term-bg:     #0a0a0a;   /* = negro-950, el "folio" de la consola */
  --term-panel:  #141414;   /* bloque interior dentro de la terminal */
  --term-linea:  #262626;   /* divisores y rejilla */
  --term-fg:     #e8e8e8;   /* texto de código */
  --term-tenue:  #8a8a8a;   /* comentarios, notas */

  /* Semántica de bajo nivel (el símil del agua, en color) */
  --byte-buffer: #35c56a;   /* agua que cabe: dentro del buffer */
  --byte-borde:  #ffb020;   /* el borde: el límite que nadie mira */
  --byte-vecina: #ff8f40;   /* variable vecina (es_admin) */
  --byte-ebp:    #c9a0ff;   /* EBP guardado */
  --byte-retorno:#ff4d4d;   /* la nota de retorno / desbordamiento */
  --eip:         #43c7e8;   /* EIP, el dedo que avanza */
  --flag:        #d2a8ff;   /* dar_flag() / el premio */
}

/* Tipografía y fondo base de la proyección (cada lámina decide su propio fondo). */
body.proyeccion {
  margin: 0;
  font-family: var(--font-inter-tight-variable-font-wght);
  background: var(--negro-950);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.proyeccion ::selection { background: var(--rojo); color: var(--blanco); }

/* ---------------------------------------------------------------------------
 *  Píldora de marca (radius-full, controles/etiquetas redondos).
 * ------------------------------------------------------------------------- */
.pastilla {
  display: inline-flex; align-items: center; gap: .4em;
  border-radius: var(--radius-full);
  padding: .5em 1.1em;
  font: var(--text-label-sm);
  letter-spacing: .02em;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.pastilla--rojo  { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
.pastilla--linea { background: transparent; color: var(--tinta); }
.pastilla--clara { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }

/* Highlight de marca: caja roja detrás de una palabra de un titular (recta). */
.marca-hl {
  background: var(--rojo); color: var(--blanco);
  padding: 0 .18em; border-radius: var(--radius-none);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Bullet cuadrado rojo de la marca. */
.lista-cuadrada { list-style: none; margin: 0; padding: 0; }
.lista-cuadrada > li {
  position: relative; padding-left: 1.4em; margin: 0 0 var(--space-slides-md);
}
.lista-cuadrada > li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: .5em; height: .5em; background: var(--rojo); border-radius: var(--radius-none);
}

/* ---------------------------------------------------------------------------
 *  TERMINAL — el bloque oscuro donde vive el código / la memoria / la pila.
 *  Recto (radius-none), sin sombra, coherente con la marca pese a ser oscuro.
 * ------------------------------------------------------------------------- */
/* Dentro de una lámina, los contenedores pueden encoger por debajo de su
   contenido (min-width:0). Sin esto, un bloque de código ancho ensancha su
   columna y desborda la lámina en horizontal. */
body.proyeccion .lamina__cuerpo :where(div, section, article, figure, pre) { min-width: 0; }

.terminal {
  background: var(--term-bg); color: var(--term-fg);
  font-family: var(--mono);
  border-radius: var(--radius-none);
  border: 1px solid var(--term-linea);
  max-width: 100%;
}
.terminal__barra {
  display: flex; align-items: center; gap: .6em;
  padding: .7em 1em; border-bottom: 1px solid var(--term-linea);
  color: var(--term-tenue); font-size: .85em;
}
.terminal__sem { width: .7em; height: .7em; border-radius: var(--radius-full); background: var(--term-linea); }
.terminal__cuerpo { padding: 1.1em 1.3em; }
.terminal .coment { color: var(--term-tenue); }

/* Resaltado de una línea de código dentro de la terminal.
   Lo alterna aplicarPaso() (src/lib/pasos.js) con data-resalta + clase .on:
   una línea sin foco se atenúa; la enfocada se ilumina con filo rojo de marca. */
.cod-linea { display: block; padding: 0 .5em; transition: background .3s ease, opacity .3s ease; border-radius: var(--radius-none); opacity: .35; }
.cod-linea.on { opacity: 1; background: rgba(227,6,19,.16); box-shadow: inset 3px 0 0 var(--rojo); }
/* Una terminal sin ningún data-resalta muestra todo a plena opacidad. */
.terminal--plano .cod-linea { opacity: 1; }

/* Utilidades de color para texto técnico (solo dentro de .terminal). */
.c-buffer  { color: var(--byte-buffer); }
.c-borde   { color: var(--byte-borde); }
.c-vecina  { color: var(--byte-vecina); }
.c-ebp     { color: var(--byte-ebp); }
.c-retorno { color: var(--byte-retorno); }
.c-eip     { color: var(--eip); }
.c-flag    { color: var(--flag); }
.c-tenue   { color: var(--term-tenue); }

/* Respeta la preferencia de menos movimiento en toda la presentación. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}