/* ============================================================
   App Aventura Python · E1B · 2.º SMR B
   Dirección visual: "Aventura clara"
   ============================================================ */
:root{
  --crema:#FBF6F0; --crema-2:#F5EDE2; --blanco:#FFFFFF;
  --tinta:#2B2521; --tinta-suave:#6E625A; --borde:#E4D9C9;
  --verde:#4CAF63; --verde-osc:#3B8B4E; --verde-claro:#EAF7EC; --verde-borde:#BFE4C6;
  --ambar:#E8A33D; --ambar-claro:#FDF1DC;
  --rojo:#D4603F; --rojo-claro:#FBEAE4;
  --azul:#4C6EF5;
  --code-bg:#242C27; --code-ink:#DFF2E2; --code-dim:#9AAEA1;
  --sombra:0 2px 0 rgba(0,0,0,.06), 0 8px 24px rgba(80,60,40,.08);
  --ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--crema); color:var(--tinta); font-family:var(--ui);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

/* ---------- estructura ---------- */
/* Ancho fluido: en pantallas pequeñas y medianas ocupa casi todo el viewport;
   a partir de ahí crece con la pantalla hasta un tope, para no dejar franjas
   enormes vacías en un monitor grande ni forzar líneas de texto kilométricas
   en uno ultra-ancho. El padding lateral también escala con clamp(). */
.app{width:min(96vw, 1180px); margin:0 auto; padding:18px clamp(16px, 2.4vw, 30px) 80px}
@media(min-width:1500px){ .app{width:min(80vw, 1320px)} }
.oculto{display:none !important}

/* ---------- cabecera ---------- */
.cab{display:flex; align-items:center; gap:14px; padding:10px 0 18px}
.cab .marca{font-weight:800; font-size:17px; letter-spacing:-.01em}
.cab .marca span{color:var(--verde-osc)}
.cab .der{margin-left:auto; display:flex; align-items:center; gap:10px}
.pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--blanco);
  border:1px solid var(--borde); border-radius:999px; padding:6px 13px;
  font-size:13.5px; font-weight:700; color:var(--tinta-suave)
}
.pill b{color:var(--tinta)}
.pill.xp{background:var(--ambar-claro); border-color:#F0DCB4; color:#8A6218}

/* ---------- botones ---------- */
.btn{
  border:none; border-radius:12px; padding:12px 22px; font-size:15px; font-weight:800;
  cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, background .12s;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--verde); color:#fff; box-shadow:0 3px 0 var(--verde-osc)}
.btn-p:hover{background:#56bb6d}
.btn-p:active{box-shadow:0 1px 0 var(--verde-osc)}
.btn-s{background:var(--blanco); color:var(--verde-osc); border:2px solid var(--verde-borde)}
.btn-s:hover{background:var(--verde-claro)}
.btn-g{background:var(--blanco); color:var(--tinta-suave); border:2px solid var(--borde)}
.btn-g:hover{background:var(--crema-2)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn-fila{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center}

/* ---------- portada ---------- */
.portada{
  background:linear-gradient(170deg,var(--verde-claro),var(--blanco));
  border:1px solid var(--verde-borde); border-radius:22px; padding:38px 32px;
  text-align:center; box-shadow:var(--sombra); margin-top:20px
}
.portada h1{font-size:30px; margin:14px 0 6px; letter-spacing:-.02em}
.portada p{color:var(--tinta-suave); max-width:56ch; margin:0 auto 20px; font-size:16.5px}
.portada input{
  font-family:inherit; font-size:16px; padding:13px 16px; border-radius:12px;
  border:2px solid var(--verde-borde); width:260px; text-align:center; outline:none
}
.portada input:focus{border-color:var(--verde)}

/* ---------- mapa ---------- */
.mundo{
  background:var(--blanco); border:1px solid var(--borde); border-radius:18px;
  padding:20px 22px 26px; margin-bottom:18px; box-shadow:var(--sombra)
}
.mundo.bloq{opacity:.62; background:var(--crema-2)}
.mundo-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.mundo-cab h2{font-size:20px; margin:0; letter-spacing:-.01em}
.mundo-cab .num{
  background:var(--verde); color:#fff; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:0 0 30px
}
.mundo.bloq .mundo-cab .num{background:#B5AA9A}
.mundo-cab .meta{margin-left:auto; font-size:13px; color:var(--tinta-suave); font-weight:600}
.mundo p.desc{color:var(--tinta-suave); font-size:14.5px; margin:2px 0 16px}

.ruta{display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; row-gap:20px}
.nodo-caja{display:flex; flex-direction:column; align-items:center; width:84px}
.nodo{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  font-weight:800; font-size:18px; font-family:inherit; display:flex; align-items:center;
  justify-content:center; box-shadow:0 3px 0 rgba(0,0,0,.16); transition:transform .1s
}
.nodo:hover{transform:translateY(-2px)}
.nodo.hecha{background:var(--verde)}
.nodo.actual{background:var(--ambar); box-shadow:0 0 0 6px rgba(232,163,61,.24), 0 3px 0 #B87D20}
.nodo.bloqueada{background:#C9C0B2; cursor:not-allowed}
.nodo.bloqueada:hover{transform:none}
.nodo.caso{background:#A5763F; width:64px; height:64px; font-size:15px}
.nodo-caja small{font-size:11.5px; color:var(--tinta-suave); text-align:center; margin-top:6px; font-weight:700; line-height:1.25}
.nodo-caja .estrellas{font-size:11px; color:var(--ambar); letter-spacing:1px; height:14px}
.conector{height:5px; background:var(--borde); border-radius:99px; flex:0 0 26px; width:26px; margin-top:27px}
.conector.on{background:#9FD6AC}

/* ---------- estación ---------- */
.est-cab{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.est-cab h2{font-size:20px; margin:0; letter-spacing:-.01em}
.fases{display:flex; gap:6px; margin-left:auto}
.fase-chip{
  font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px;
  background:var(--crema-2); color:var(--tinta-suave); border:1px solid var(--borde)
}
.fase-chip.on{background:var(--verde); color:#fff; border-color:var(--verde)}
.fase-chip.done{background:var(--verde-claro); color:var(--verde-osc); border-color:var(--verde-borde)}

.panel{
  background:var(--blanco); border:1px solid var(--borde); border-radius:18px;
  padding:22px 24px 26px; box-shadow:var(--sombra)
}

/* ---------- Ada y bocadillos ---------- */
.ada-fila{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px}
.ada-fila svg{flex:0 0 74px; width:74px; height:74px}
.bocadillo{
  background:var(--verde-claro); border:1px solid var(--verde-borde); border-left:5px solid var(--verde);
  border-radius:4px 14px 14px 14px; padding:12px 16px; font-size:15.5px; flex:1
}
.bocadillo p{margin:0 0 8px} .bocadillo p:last-child{margin:0}
.bocadillo code{background:#DCEFE0; border-radius:5px; padding:1px 5px; font-family:var(--mono); font-size:13.5px}
.bocadillo.aviso{background:var(--ambar-claro); border-color:#F0DCB4; border-left-color:var(--ambar)}
.bocadillo.aviso code{background:#F7E6C6}
.bocadillo.mal{background:var(--rojo-claro); border-color:#F0CFC3; border-left-color:var(--rojo)}
.bocadillo.mal code{background:#F5DACE}

/* ---------- código ---------- */
.codigo{
  background:var(--code-bg); color:var(--code-ink); border-radius:12px; padding:16px 18px;
  font-family:var(--mono); font-size:14.5px; line-height:1.75; white-space:pre-wrap;
  overflow-x:auto; margin:12px 0; tab-size:4
}
.codigo .ln{color:#93A399; user-select:none}
.codigo .mark{background:rgba(232,163,61,.22); border-radius:4px; box-shadow:0 0 0 2px rgba(232,163,61,.22)}
.hueco{
  font-family:var(--mono); font-size:14.5px; background:#fff; color:#1D2620; border:2px solid var(--ambar);
  border-radius:7px; padding:2px 8px; outline:none; text-align:center; min-width:62px
}
.hueco:focus{border-color:var(--verde); box-shadow:0 0 0 3px rgba(76,175,99,.25)}
.hueco.ok{border-color:var(--verde); background:#EAF7EC}
.hueco.ko{border-color:var(--rojo); background:#FBEAE4}

textarea.editor{
  width:100%; min-height:190px; background:var(--code-bg); color:var(--code-ink);
  border:2px solid #3A443D; border-radius:12px; padding:14px 16px; font-family:var(--mono);
  font-size:14.5px; line-height:1.7; resize:vertical; outline:none; tab-size:4
}
textarea.editor:focus{border-color:var(--verde)}

.terminal{
  background:#1A211D; color:#CFE3D4; border-radius:12px; padding:14px 16px; font-family:var(--mono);
  font-size:13.5px; line-height:1.65; white-space:pre-wrap; margin-top:12px; min-height:52px;
  border:1px solid #333C36
}
.terminal .prompt{color:#93A399}
.terminal .err{color:#FF9E80}
.terminal .ok{color:#8BE29C}
.detalle-tec{margin-top:8px; font-size:13px; color:var(--tinta-suave)}
.detalle-tec summary{cursor:pointer; font-weight:700}
.detalle-tec pre{
  background:#1A211D; color:#FF9E80; border-radius:10px; padding:12px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; margin:8px 0 0
}

/* ---------- opciones de traza ---------- */
.opciones{display:flex; flex-direction:column; gap:10px; margin:14px 0 4px}
.opcion{
  text-align:left; background:var(--blanco); border:2px solid var(--borde); border-radius:13px;
  padding:13px 17px; font-size:15.5px; font-family:var(--mono); cursor:pointer; transition:.12s
}
.opcion:hover{border-color:var(--verde-borde); background:var(--verde-claro)}
.opcion.ok{border-color:var(--verde); background:var(--verde-claro)}
.opcion.ko{border-color:var(--rojo); background:var(--rojo-claro)}
.opcion:disabled{cursor:default}

/* Opción de tipo "salida": la terminal tal como se vería de verdad, no una
   etiqueta abstracta. El alumnado elige entre pantallas reales. */
.opcion-salida{
  display:flex; align-items:flex-start; gap:10px; background:var(--code-bg); color:var(--code-ink);
  border-color:#3A443D; padding:12px 16px; line-height:1.55
}
.opcion-salida:hover{border-color:var(--verde); background:#2A342E}
.opcion-salida.ok{border-color:var(--verde); box-shadow:0 0 0 2px var(--verde) inset}
.opcion-salida.ko{border-color:var(--rojo); box-shadow:0 0 0 2px var(--rojo) inset; opacity:.75}
.opcion-salida-txt{white-space:pre-wrap; word-break:break-word}

/* ---------- pasos dentro de una fase ---------- */
.contador-fase{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--verde-osc); background:var(--verde-claro); border:1px solid var(--verde-borde);
  border-radius:999px; padding:4px 13px; margin-bottom:14px
}
.subtitulo-paso{font-size:19px; font-weight:800; margin:0 0 12px; letter-spacing:-.01em}
.etiqueta-mini{font-size:13px; font-weight:700; color:var(--tinta-suave); margin:14px 0 4px}
ul.avisos{margin:8px 0 0; padding-left:20px}
ul.avisos li{margin-bottom:8px}
.bocadillo ul{margin:6px 0 0; padding-left:20px}
.bocadillo li{margin-bottom:6px}

/* ---------- varios ---------- */
.enunciado{font-size:16px; margin:6px 0 4px}
.enunciado b{font-weight:800}
ol.pasos{margin:10px 0 0; padding-left:22px; font-size:15.5px}
ol.pasos li{margin-bottom:6px}
.etq{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--crema-2); border:1px solid var(--borde); color:var(--tinta-suave); border-radius:999px; padding:3px 10px}
.barra-xp{height:9px; background:var(--crema-2); border-radius:99px; overflow:hidden; margin-top:6px; width:120px}
.barra-xp i{display:block; height:100%; background:var(--ambar); border-radius:99px; transition:width .4s}
.pie{margin-top:36px; padding-top:16px; border-top:1px solid var(--borde); font-size:12.5px;
  color:var(--tinta-suave); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
.aviso-servidor{
  background:var(--ambar-claro); border:1px solid #F0DCB4; border-left:5px solid var(--ambar);
  border-radius:4px 14px 14px 14px; padding:16px 20px; margin:20px 0; font-size:15px
}
.aviso-servidor code{background:#F7E6C6; padding:2px 7px; border-radius:5px; font-family:var(--mono)}
.cargando{display:flex; align-items:center; gap:10px; color:var(--tinta-suave); font-size:14px; font-weight:600}
.spin{width:16px; height:16px; border:3px solid var(--verde-borde); border-top-color:var(--verde);
  border-radius:50%; animation:g .8s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

@media(max-width:620px){
  .app{padding:14px 14px 60px}
  .ada-fila svg{flex-basis:56px; width:56px; height:56px}
  .fases{width:100%; margin-left:0; margin-top:8px}
}

/* ============================================================
   DIAGRAMAS DIDÁCTICOS  (motor/diagramas.js)
   ============================================================ */
/* Los diagramas (anatomía, flujo, llaves...) tienen un ancho propio calculado
   a partir del código que representan, y no se encogen como el texto. En
   pantallas estrechas, mejor un scroll horizontal contenido que un diagrama
   aplastado o que se sale del móvil. */
.dg{position:relative; margin:18px 0; font-family:var(--ui); max-width:100%; overflow-x:auto; overflow-y:hidden}
.dg-svg{position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:2}
.dg-code{
  font-family:var(--mono); font-size:18px; line-height:30px; margin:0; white-space:pre;
  letter-spacing:0; font-variant-ligatures:none
}
.dg-linea{
  position:absolute; left:0; right:0; padding:0 20px; background:var(--code-bg); color:var(--code-ink);
  border-radius:10px; display:block; overflow:hidden
}
.dg-linea-sal{background:#1A211D; color:#CFE3D4}
.dg-etiq{
  position:absolute; z-index:3; background:var(--blanco); border:1.5px solid;
  border-radius:8px; padding:3px 11px; font-size:12.5px; font-weight:800; white-space:nowrap;
  height:26px; display:flex; align-items:center; transition:opacity .25s ease
}
.dg-flecha{transition:opacity .25s ease}
.dg-rotulo{
  position:absolute; right:4px; font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-suave)
}

/* --- pasos --- */
.dg-pareja{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:620px){.dg-pareja{grid-template-columns:1fr}}
.dg-panel{border:1px solid var(--borde); border-radius:12px; overflow-x:auto; overflow-y:hidden; background:var(--blanco)}
.dg-panel-cab{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-suave); padding:7px 12px; background:var(--crema-2); border-bottom:1px solid var(--borde)
}
.dg-panel.dg-oscuro{background:#1A211D; border-color:#333C36}
.dg-panel.dg-oscuro .dg-panel-cab{background:#222B25; color:#8FA398; border-color:#333C36}
.dg-lineas{display:block; padding:10px 0; font-size:16px}
.dg-ln{display:block; padding:0 14px; transition:background .2s, box-shadow .2s}
.dg-ln i{
  display:inline-block; width:22px; color:#AFA79B; font-style:normal; font-size:12.5px; user-select:none
}
.dg-ln.activa{background:var(--ambar-claro); box-shadow:inset 3px 0 0 var(--ambar)}
.dg-salida{display:block; padding:10px 14px; min-height:120px; color:#CFE3D4}
.dg-sal{display:block}
.dg-nueva{animation:dgEntra .35s ease}
@keyframes dgEntra{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.dg-nota{
  margin-top:12px; background:var(--verde-claro); border:1px solid var(--verde-borde);
  border-left:4px solid var(--verde); border-radius:4px 10px 10px 4px; padding:10px 14px;
  font-size:14.5px; min-height:42px
}
.dg-controles{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap}
.dg-btn{
  border:2px solid var(--borde); background:var(--blanco); color:var(--tinta); border-radius:10px;
  padding:8px 14px; font-size:13.5px; font-weight:800; cursor:pointer; font-family:var(--ui)
}
.dg-btn:hover{border-color:var(--verde-borde); background:var(--verde-claro)}
.dg-btn-p{background:var(--verde); color:#fff; border-color:var(--verde)}
.dg-btn-p:hover{background:#56bb6d; border-color:#56bb6d}
.dg-btn:disabled{opacity:.4; cursor:not-allowed}
.dg-contador{font-size:12.5px; font-weight:700; color:var(--tinta-suave); margin-left:auto}

/* --- caminos --- */
.dg-caminos{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media(max-width:620px){.dg-caminos{grid-template-columns:1fr}}
.dg-rama{text-align:center}
.dg-cabecera{
  border:2px solid; border-radius:10px; padding:10px; font-weight:800; background:var(--blanco)
}
.dg-cabecera code{font-family:var(--mono); font-size:14.5px; background:none; padding:0}
.dg-flecha-abajo{font-size:15px; line-height:1.1; margin:5px 0}
.dg-caja{
  border:1.5px solid var(--borde); border-radius:10px; padding:9px 12px; font-size:14px;
  background:var(--blanco)
}
.dg-fin{font-weight:800; border-width:2px}
.dg-fin.dg-ok{background:var(--verde-claro); border-color:var(--verde); color:var(--verde-osc)}
.dg-fin.dg-err{background:var(--rojo-claro); border-color:var(--rojo); color:#A33F22}

/* --- llaves --- */
.dg-bloque{
  position:relative; background:var(--code-bg); color:var(--code-ink);
  border-radius:10px; overflow-x:auto; overflow-y:hidden
}
.dg-bloque .dg-lineas{padding:10px 0; position:relative; z-index:1}
.dg-margen{
  position:absolute; z-index:3; font-family:var(--mono); font-size:14px; font-style:italic;
  line-height:1.3; max-width:290px
}

/* aviso del validador de diagramas */
.dg-avisos{
  background:var(--rojo-claro); border:1px solid #F0CFC3; border-left:5px solid var(--rojo);
  border-radius:4px 10px 10px 4px; padding:10px 14px; margin-top:10px; font-size:13.5px; color:#8E3116
}
.dg-avisos ul{margin:6px 0 0; padding-left:20px}

.pie-diagrama{
  font-size:14px; color:var(--tinta-suave); margin:-4px 0 14px; padding-left:2px; font-style:italic
}