/* =====================================================================
   Recursividad en Java
   Paleta de depurador: pizarra azul profunda, ambar para lo que baja,
   menta para lo que sube. La pila es el elemento protagonista.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --fondo:      #0f1b2d;
  --sup:        #17263c;
  --sup2:       #1f3350;
  --borde:      #2b4160;
  --texto:      #dde6f2;
  --tenue:      #8399b8;
  --ambar:      #e9a23b;
  --menta:      #3fc79a;
  --coral:      #e05c56;
  --violeta:    #9186de;

  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono:  'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  --r: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--menta); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.02em; }
h2 { font-size: 1.55rem; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
code { font-family: var(--mono); font-size: .92em; background: var(--sup2); padding: .1em .35em; border-radius: 3px; }

/* ---------- estructura ---------- */
.barra-sup {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem 1.5rem;
  background: var(--sup);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.marca { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--texto); text-decoration: none; }
.marca b { color: var(--ambar); }
.barra-sup nav { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; font-size: .92rem; }
.barra-sup nav a { color: var(--tenue); text-decoration: none; }
.barra-sup nav a:hover { color: var(--texto); }

.marco-pagina { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.doble { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .doble { grid-template-columns: 1fr; } }

.prosa { max-width: 68ch; }
.prosa p { margin: 0 0 1.1em; }

/* ---------- ruta de niveles ---------- */
.ruta { position: sticky; top: 5rem; }
@media (max-width: 900px) { .ruta { position: static; } }
.ruta h2 { font-size: .8rem; letter-spacing: .04em; color: var(--tenue); font-family: var(--sans); font-weight: 600; }
.ruta ol { list-style: none; margin: 0; padding: 0; }
.ruta a {
  display: grid; grid-template-columns: 2rem 1fr; gap: .5rem;
  padding: .55rem .6rem; border-radius: var(--r);
  color: var(--texto); text-decoration: none; font-size: .92rem;
  border-left: 2px solid transparent;
}
.ruta a:hover { background: var(--sup); }
.ruta a b { color: var(--tenue); font-family: var(--mono); font-weight: 600; }
.ruta a.activo { background: var(--sup2); border-left-color: var(--ambar); }
.ruta a.activo b { color: var(--ambar); }
.ruta a.hecho b::after { content: ' ✓'; color: var(--menta); }

/* ---------- portada ---------- */
.portada { padding: 1rem 0 2.5rem; }
.portada p.lead { font-size: 1.15rem; color: var(--tenue); max-width: 58ch; }
.cifras { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2rem 0; }
.cifras div b { display: block; font-family: var(--display); font-size: 1.9rem; color: var(--ambar); }
.cifras div span { font-size: .85rem; color: var(--tenue); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.tarjeta {
  display: block; padding: 1.1rem 1.2rem; background: var(--sup);
  border: 1px solid var(--borde); border-radius: var(--r);
  text-decoration: none; color: var(--texto);
}
.tarjeta:hover { border-color: var(--ambar); }
.tarjeta .num { font-family: var(--mono); font-size: .8rem; color: var(--ambar); }
.tarjeta h3 { margin: .3rem 0 .35rem; font-size: 1.02rem; }
.tarjeta p { margin: 0; font-size: .88rem; color: var(--tenue); line-height: 1.5; }
.tarjeta .dur { display: block; margin-top: .7rem; font-size: .78rem; color: var(--tenue); font-family: var(--mono); }

/* ---------- secciones de teoria ---------- */
.seccion { margin: 0 0 2.5rem; }
.nota {
  margin: .9rem 0 0; padding: .7rem .9rem;
  border-left: 2px solid var(--ambar); background: rgba(233,162,59,.07);
  font-size: .92rem; color: var(--texto);
}

pre.codigo {
  margin: 1rem 0; padding: .9rem 1rem;
  background: #0b1522; border: 1px solid var(--borde); border-radius: var(--r);
  font: 400 13.5px/1.7 var(--mono); overflow-x: auto; white-space: pre;
}
pre.codigo-mini { font-size: 12.5px; margin: .6rem 0; }
.linea { display: block; padding: 0 .3rem; border-radius: 3px; }
.linea i { display: inline-block; width: 2.2em; color: #46617f; font-style: normal; user-select: none; }
.linea-activa { background: rgba(233,162,59,.18); box-shadow: inset 2px 0 0 var(--ambar); }

/* ---------- visualizador ---------- */
.viz { border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); margin: 1.5rem 0 2rem; overflow: hidden; }
.viz-cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--borde); }
.viz-cab h3 { margin: 0 0 .15rem; }
.viz-cab p { margin: 0; font-size: .88rem; color: var(--tenue); max-width: 46ch; }
.viz-params { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }

.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--tenue); }
.campo input[type=number], .campo input[type=text], .campo select {
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 4px; padding: .38rem .5rem; font: 400 13px var(--mono); min-width: 5rem;
}
.campo input[type=text] { min-width: 12rem; }
.campo-check { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .45rem; }

.viz-cuerpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 780px) { .viz-cuerpo { grid-template-columns: 1fr; } }
.viz-codigo { border-right: 1px solid var(--borde); padding: .9rem 1rem 1.2rem; }
.viz-pila { padding: .9rem 1rem 1.2rem; display: flex; flex-direction: column; }
.viz-etiqueta { font-size: .72rem; letter-spacing: .05em; color: var(--tenue); font-weight: 600; margin-bottom: .5rem; }
.viz-etiqueta span { float: right; font-family: var(--mono); font-weight: 400; }
.viz-codigo pre.codigo { margin: 0; max-height: 340px; }

.pila { display: flex; flex-direction: column; gap: .4rem; min-height: 210px; max-height: 340px; overflow-y: auto; justify-content: flex-end; }
.pila-vacia { color: var(--tenue); font-size: .85rem; text-align: center; margin: auto 0; }
.pila-base { margin-top: .5rem; padding: .45rem .7rem; background: var(--sup2); border-radius: var(--r); font: 600 12px var(--mono); color: var(--tenue); text-align: center; }

.marco { background: var(--sup2); border: 1px solid var(--borde); border-radius: var(--r); padding: .45rem .6rem; }
.marco-activo { border-color: var(--ambar); background: rgba(233,162,59,.12); }
.marco-cab { font: 600 12.5px var(--mono); color: var(--texto); }
.marco-cab em { float: right; font-style: normal; color: var(--tenue); font-size: 11px; }
.marco-params { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .2rem; }
.marco-params span { font: 400 11.5px var(--mono); color: var(--tenue); }
.marco-params i { font-style: normal; color: var(--tenue); opacity: .65; margin-right: .25rem; }
.marco-activo .marco-params span { color: var(--texto); }
.marco-nota { margin-top: .25rem; font: 400 11.5px var(--mono); color: var(--ambar); }

.retorno {
  align-self: center; padding: .25rem .6rem; border-radius: 20px;
  background: rgba(63,199,154,.15); border: 1px solid var(--menta);
  color: var(--menta); font: 600 11.5px var(--mono);
}

.viz-consola { border-top: 1px solid var(--borde); padding: .9rem 1.2rem; }
pre.consola { margin: 0; padding: .7rem .8rem; background: #0b1522; border-radius: var(--r); font: 400 12.5px/1.7 var(--mono); color: var(--menta); max-height: 150px; overflow-y: auto; white-space: pre-wrap; }

.viz-barra { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .8rem 1.2rem; border-top: 1px solid var(--borde); background: var(--fondo); }
.viz-botones { display: flex; gap: .35rem; }
.viz-vel { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--tenue); }
.viz-vel input { width: 110px; accent-color: var(--ambar); }
.viz-contadores { margin-left: auto; display: flex; gap: 1.1rem; font: 400 12px var(--mono); color: var(--tenue); }
.viz-contadores b { color: var(--texto); }
.viz-estado { margin: 0; padding: .7rem 1.2rem; font-size: .84rem; color: var(--tenue); border-top: 1px solid var(--borde); }
.viz-estado.error { color: var(--coral); }

.btn {
  background: var(--sup2); border: 1px solid var(--borde); color: var(--texto);
  padding: .4rem .8rem; border-radius: 4px; cursor: pointer;
  font: 600 13px var(--sans);
}
.btn:hover:not(:disabled) { border-color: var(--ambar); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--ambar); border-color: var(--ambar); color: #10192b; }
.btn-primario:hover:not(:disabled) { background: #f2b455; }

/* ---------- arbol de llamadas ---------- */
.arbol-panel { border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); margin: 1.5rem 0 2rem; overflow: hidden; }
.arbol-cifras { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--borde); }
.arbol-cifras b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--ambar); }
.arbol-cifras span { font-size: .78rem; color: var(--tenue); }
.arbol-lienzo { overflow-x: auto; padding: 1rem 1.2rem; }
.arbol-pie { margin: 0; padding: .8rem 1.2rem; border-top: 1px solid var(--borde); font-size: .84rem; color: var(--tenue); }

.arista { stroke: var(--borde); stroke-width: 1.4; }
.arista-cache { stroke: var(--violeta); stroke-dasharray: 3 3; }
.nodo circle { fill: var(--sup2); stroke: var(--borde); stroke-width: 1.4; }
.nodo text { fill: var(--texto); font: 600 11px var(--mono); text-anchor: middle; }
.nodo-base circle { fill: rgba(63,199,154,.14); stroke: var(--menta); }
.nodo-repetido circle { fill: rgba(233,162,59,.2); stroke: var(--ambar); }
.nodo-cache circle { fill: rgba(145,134,222,.2); stroke: var(--violeta); }

/* ---------- errores comunes ---------- */
.error-caso { border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); padding: 1rem 1.2rem; margin: 1rem 0; }
.error-caso h4 { margin: 0 0 .5rem; color: var(--coral); font-size: 1rem; }
.error-caso p { margin: .6rem 0; font-size: .92rem; color: var(--tenue); }
.error-caso pre.codigo { border-left: 2px solid var(--coral); }
.error-caso .arreglo pre.codigo { border-left-color: var(--menta); }

/* ---------- quiz ---------- */
.pregunta { border-top: 1px solid var(--borde); padding: 1.3rem 0; }
.pregunta h4 { display: grid; grid-template-columns: 1.7rem 1fr; gap: .4rem; font-size: 1rem; margin: 0 0 .6rem; align-items: baseline; }
.pregunta h4 span { font-family: var(--mono); font-size: .8rem; color: var(--ambar); }
.opciones { display: grid; gap: .4rem; }
.opcion {
  text-align: left; background: var(--sup); border: 1px solid var(--borde);
  color: var(--texto); padding: .55rem .8rem; border-radius: var(--r);
  cursor: pointer; font: 400 .92rem var(--sans);
}
.opcion:hover:not(:disabled) { border-color: var(--ambar); }
.opcion:disabled { cursor: default; opacity: .7; }
.opcion-correcta { border-color: var(--menta); background: rgba(63,199,154,.13); opacity: 1; }
.opcion-mala { border-color: var(--coral); background: rgba(224,92,86,.13); opacity: 1; }
.veredicto { margin-top: .7rem; font-size: .89rem; padding: .6rem .8rem; border-radius: var(--r); }
.veredicto-bien { background: rgba(63,199,154,.1); color: var(--texto); }
.veredicto-mal { background: rgba(224,92,86,.1); color: var(--texto); }
.quiz-pie { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; border-top: 1px solid var(--borde); padding-top: 1.2rem; }
.quiz-pie p { margin: 0; font-size: .88rem; color: var(--tenue); }
.quiz-pie .btn { margin-left: auto; }

.aviso { padding: .7rem .9rem; border-radius: var(--r); font-size: .89rem; width: 100%; margin: .5rem 0 0; }
.aviso.ok { background: rgba(63,199,154,.12); border: 1px solid var(--menta); }
.aviso.error { background: rgba(224,92,86,.12); border: 1px solid var(--coral); }
.aviso.info { background: var(--sup); border: 1px solid var(--borde); color: var(--tenue); }

/* ---------- formularios de cuenta ---------- */
.caja-form { max-width: 380px; margin: 3rem auto; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); padding: 1.8rem; }
.caja-form label { display: block; margin-bottom: 1rem; font-size: .85rem; color: var(--tenue); }
.caja-form input { width: 100%; margin-top: .3rem; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); padding: .5rem .6rem; border-radius: 4px; font: 400 14px var(--sans); }
.caja-form .btn { width: 100%; }
.caja-form p { font-size: .85rem; color: var(--tenue); text-align: center; margin: 1rem 0 0; }

/* ---------- navegacion entre niveles ---------- */
.pasos-nivel { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); }
.pasos-nivel a { color: var(--tenue); text-decoration: none; font-size: .9rem; }
.pasos-nivel a:hover { color: var(--ambar); }

.pie { border-top: 1px solid var(--borde); padding: 2rem 1.5rem; color: var(--tenue); font-size: .84rem; text-align: center; }

/* ---------- playground ---------- */
.pg { border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); overflow: hidden; margin: 1.5rem 0; }
.pg-cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid var(--borde); }
.pg-acciones { display: flex; gap: .5rem; }

.pg-editor { display: grid; grid-template-columns: 3.2rem 1fr; background: #0b1522; }
.pg-gutter {
  padding: .9rem .5rem .9rem 0; text-align: right; overflow: hidden;
  font: 400 13.5px/1.7 var(--mono); color: #46617f;
  background: #0a1320; border-right: 1px solid var(--borde);
  white-space: pre; user-select: none;
}
.pg-editor textarea {
  border: 0; resize: vertical; background: transparent; color: var(--texto);
  padding: .9rem 1rem; min-height: 400px;
  font: 400 13.5px/1.7 var(--mono); tab-size: 4; white-space: pre; overflow-wrap: normal;
  overflow-x: auto;
}
.pg-editor textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ambar); }

.pg-stdin { border-top: 1px solid var(--borde); padding: .7rem 1.2rem; }
.pg-stdin summary { cursor: pointer; font-size: .82rem; color: var(--tenue); }
.pg-stdin textarea {
  width: 100%; margin-top: .5rem; background: #0b1522; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 4px; padding: .5rem .6rem;
  font: 400 12.5px/1.6 var(--mono); resize: vertical;
}

.pg-salida { border-top: 1px solid var(--borde); padding: .9rem 1.2rem; }
.pg-salida .consola { max-height: 320px; color: var(--texto); }
.consola-error { color: var(--coral); }