/* ============ ABEA Solver · tema pixel art morado claro ============ */
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/pressstart.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('../fonts/pixelify.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/vt323.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #efe8ff;
  --bg-2: #e6dcff;
  --panel: #ffffff;
  --panel-2: #f8f4ff;
  --panel-3: #f1eaff;
  --line: #2f2454;
  --ink: #2b2147;
  --ink-2: #625888;
  --ink-3: #8e86ad;
  --pri: #8b6cf0;
  --pri-hover: #9c81f5;
  --pri-dark: #5d40c6;
  --pri-soft: #d9ccff;
  --pri-softer: #ece5ff;
  --ok: #2f9e6c;
  --ok-soft: #d6f3e5;
  --warn: #c98a12;
  --warn-soft: #fff0cc;
  --err: #d6456b;
  --err-soft: #ffdbe5;
  --info: #4a7fe0;
  --info-soft: #dce8ff;
  --mint: #d3f2e3;
  --peach: #ffe6c4;
  --lav: #e3d9ff;
  --pink: #ffd8e6;
  --sky: #d4e9ff;
  --sombra: 5px 5px 0 var(--line);
  --sombra-s: 3px 3px 0 var(--line);
  --f-titulo: 'Press Start 2P', 'Courier New', monospace;
  --f-texto: 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
  --f-code: 'VT323', 'Consolas', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.45;
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--bg-2) 25%, transparent 25%, transparent 75%, var(--bg-2) 75%),
    linear-gradient(45deg, var(--bg-2) 25%, transparent 25%, transparent 75%, var(--bg-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  background-attachment: fixed;
  -webkit-font-smoothing: none;
}
[hidden] { display: none !important; }
::selection { background: var(--pri); color: #fff; }

.contenedor { width: min(1240px, 100% - 32px); margin: 0 auto; }

/* ---------- Iconos ---------- */
.ico { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }
.ico .px-l { fill: currentColor; }
.ico .px-o { fill: var(--ico-o, var(--pri)); }
.ico .px-w { fill: var(--ico-w, #fff); }
[data-ico] { display: inline-flex; align-items: center; justify-content: center; }
.ico.g { width: 32px; height: 32px; }
.ico.xg { width: 48px; height: 48px; }

/* ---------- Encabezado ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--panel);
  border-bottom: 3px solid var(--line);
  box-shadow: 0 4px 0 rgba(47, 36, 84, .12);
}
.barra .contenedor { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }
.marca-logo {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--pri-soft); border: 3px solid var(--line); box-shadow: var(--sombra-s);
  --ico-o: var(--pri); --ico-w: #fff;
}
.marca-logo .ico { width: 32px; height: 32px; }
.marca h1 { margin: 0; font-family: var(--f-titulo); font-size: 17px; letter-spacing: 1px; line-height: 1.3; }
.marca h1 span { color: var(--pri); }
.marca p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 14px; font-weight: 600;
  background: var(--panel-2); border: 2px solid var(--line); white-space: nowrap;
}
.chip .ico { width: 16px; height: 16px; }
.chip.ok { background: var(--ok-soft); --ico-o: var(--ok); }
.chip.warn { background: var(--warn-soft); --ico-o: var(--warn); }
.chip.err { background: var(--err-soft); --ico-o: var(--err); }
.chip.info { background: var(--info-soft); --ico-o: var(--info); }
.chip.pri { background: var(--pri-softer); }

/* ---------- Botones ---------- */
.btn {
  --b-bg: var(--panel); --b-fg: var(--ink); --ico-o: var(--pri);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 8px 18px;
  font: 600 16px/1.2 var(--f-texto); color: var(--b-fg); text-decoration: none;
  background: var(--b-bg); border: 3px solid var(--line); box-shadow: var(--sombra-s);
  cursor: pointer; user-select: none;
  transition: transform .06s steps(2), box-shadow .06s steps(2), background-color .1s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); background: var(--panel-3); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line); }
.btn:focus-visible, .tab:focus-visible, .paso-btn:focus-visible, .drop:focus-within, .nodo:focus-visible {
  outline: 3px dashed var(--pri-dark); outline-offset: 3px;
}
.btn[disabled], .btn.desactivado { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sombra-s); }
.btn.pri { --b-bg: var(--pri); --b-fg: #fff; --ico-o: #fff; --ico-w: var(--pri-soft); }
.btn.pri:hover { background: var(--pri-hover); }
.btn.ok { --b-bg: var(--ok); --b-fg: #fff; --ico-o: #fff; --ico-w: var(--ok-soft); }
.btn.ok:hover { background: #38b37b; }
.btn.plano { box-shadow: none; border-color: transparent; background: transparent; min-height: 40px; padding: 6px 10px; }
.btn.plano:hover { border-color: var(--line); background: var(--panel-2); transform: none; box-shadow: none; }
.btn.chico { min-height: 36px; padding: 4px 12px; font-size: 15px; gap: 8px; }
.btn.grande { min-height: 56px; padding: 10px 26px; font-size: 18px; }
.btn.copiado { --b-bg: var(--ok-soft); }

/* ---------- Pasos ---------- */
.pasos { margin: 28px auto 22px; }
.pasos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.paso-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left;
  font: 600 16px/1.2 var(--f-texto); color: var(--ink-2);
  background: var(--panel-2); border: 3px solid var(--line); box-shadow: var(--sombra-s);
  cursor: pointer; position: relative;
}
.paso-btn .num {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  font: 12px var(--f-titulo); color: var(--ink); background: #fff; border: 3px solid var(--line);
}
.paso-btn small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.paso-btn:hover:not([disabled]) { background: var(--panel-3); }
.paso-btn[aria-current="step"] { background: var(--pri); color: #fff; }
.paso-btn[aria-current="step"] small { color: var(--pri-softer); }
.paso-btn[aria-current="step"] .num { background: var(--line); color: #fff; border-color: var(--line); }
.paso-btn.hecho .num { background: var(--ok-soft); --ico-o: var(--ok); }
.paso-btn.hecho .num .ico { width: 20px; height: 20px; }
.paso-btn[disabled] { cursor: not-allowed; opacity: .55; box-shadow: none; }

/* ---------- Tarjetas ---------- */
.card {
  position: relative; background: var(--panel); border: 3px solid var(--line); box-shadow: var(--sombra);
  padding: 26px; margin-bottom: 24px;
}
.card.suave { background: var(--panel-2); }
.card-titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 14px/1.5 var(--f-titulo); }
.card-titulo .ico { width: 28px; height: 28px; }
.card-sub { margin: 0 0 20px; color: var(--ink-2); max-width: 70ch; }
.card-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.card-pie .empuje { margin-left: auto; }
h3.mini { font: 11px/1.6 var(--f-titulo); margin: 0 0 10px; letter-spacing: .5px; color: var(--ink); }

/* ---------- Paso 1 ---------- */
.inicio-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: stretch; }
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 260px; padding: 28px; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 20px) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 20px) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(0deg, var(--line) 0 12px, transparent 12px 20px) left / 3px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--line) 0 12px, transparent 12px 20px) right / 3px 100% no-repeat,
    var(--pri-softer);
  transition: background-color .1s;
}
.drop:hover, .drop.encima { background-color: var(--pri-soft); }
.drop.encima .drop-ico { transform: translateY(-6px); }
.drop-ico { display: grid; place-items: center; width: 92px; height: 92px; background: #fff; border: 3px solid var(--line); box-shadow: var(--sombra-s); transition: transform .12s steps(3); }
.drop-ico .ico { width: 56px; height: 56px; }
.drop strong { font: 13px/1.6 var(--f-titulo); margin-top: 8px; }
.drop span { color: var(--ink-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.opciones { display: grid; gap: 14px; align-content: start; }
.opcion {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-2); border: 3px solid var(--line); box-shadow: var(--sombra-s);
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.opcion:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); background: var(--panel-3); }
.opcion:active { transform: translate(3px, 3px); box-shadow: none; }
.opcion .ico-caja { display: grid; place-items: center; width: 46px; height: 46px; background: #fff; border: 3px solid var(--line); }
.opcion .ico-caja .ico { width: 30px; height: 30px; }
.opcion b { display: block; font-weight: 600; font-size: 17px; }
.opcion small { color: var(--ink-2); font-size: 14px; }
.opcion > .ico { width: 18px; height: 18px; color: var(--ink-3); }

.ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 3px dashed var(--pri-soft); }
.ficha-cab .nombre { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; margin-right: auto; word-break: break-all; }
.ficha-cab .nombre .ico { width: 30px; height: 30px; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 8px; margin-bottom: 18px; }
.campo > label, .campo .etiqueta { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.campo .ayuda { font-size: 14px; color: var(--ink-2); margin: -2px 0 0; }
textarea, input[type="text"], select {
  width: 100%; font: 18px/1.35 var(--f-texto); color: var(--ink);
  background: var(--panel-2); border: 3px solid var(--line); padding: 10px 12px; border-radius: 0;
  box-shadow: inset 3px 3px 0 rgba(47, 36, 84, .08);
}
textarea { resize: vertical; min-height: 120px; }
textarea.code, .code { font-family: var(--f-code); font-size: 20px; line-height: 1.2; }
textarea:focus, input:focus, select:focus { outline: 3px solid var(--pri); outline-offset: 0; background: #fff; }
select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%), linear-gradient(135deg, var(--line) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.check input { appearance: none; width: 24px; height: 24px; margin: 0; border: 3px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.check input:checked { background: var(--pri); }
.check input:checked::after { content: ''; width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 2px var(--pri-dark); }

/* ---------- Avisos ---------- */
.aviso {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: 3px solid var(--line); background: var(--info-soft); --ico-o: var(--info);
  margin-bottom: 16px;
}
.aviso .ico { width: 24px; height: 24px; margin-top: 1px; }
.aviso p { margin: 0; }
.aviso b { font-weight: 600; }
.aviso.warn { background: var(--warn-soft); --ico-o: #e9a923; }
.aviso.err { background: var(--err-soft); --ico-o: var(--err); }
.aviso.ok { background: var(--ok-soft); --ico-o: var(--ok); }

/* ---------- Paso 2: prompt ---------- */
.prompt-caja { position: relative; border: 3px solid var(--line); background: #241b40; box-shadow: var(--sombra); }
.prompt-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--line); color: #d9ccff; font: 10px var(--f-titulo); }
.prompt-barra i { width: 10px; height: 10px; display: inline-block; background: var(--pri); }
.prompt-barra i:nth-child(2) { background: #f0b545; }
.prompt-barra i:nth-child(3) { background: #46c48b; }
.prompt-barra span { margin-left: auto; font-family: var(--f-code); font-size: 18px; color: #a99be0; }
.prompt-texto {
  margin: 0; padding: 18px 20px; max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font: 20px/1.25 var(--f-code); color: #e6ddff;
}
.prompt-texto::-webkit-scrollbar, .terminal-pantalla::-webkit-scrollbar { width: 14px; }
.prompt-texto::-webkit-scrollbar-thumb, .terminal-pantalla::-webkit-scrollbar-thumb { background: var(--pri); border: 3px solid #241b40; }
.pasos-uso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: uso; }
.pasos-uso li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px; background: var(--panel-2); border: 3px solid var(--line); counter-increment: uso; }
.pasos-uso li::before { content: counter(uso); display: grid; place-items: center; width: 30px; height: 30px; font: 11px var(--f-titulo); color: #fff; background: var(--pri); border: 3px solid var(--line); }
.pasos-uso b { display: block; }
.pasos-uso small { color: var(--ink-2); font-size: 14px; }

/* ---------- Paso 3 ---------- */
.estado-json { display: flex; align-items: center; gap: 10px; min-height: 30px; font-weight: 600; margin-top: 10px; }
.estado-json .ico { width: 20px; height: 20px; }
.estado-json.ok { color: var(--ok); --ico-o: var(--ok); }
.estado-json.err { color: var(--err); --ico-o: var(--err); }
.estado-json.vacio { color: var(--ink-3); --ico-o: var(--ink-3); }
#respuesta { min-height: 320px; }

/* ---------- Paso 4: resultado ---------- */
.veredicto { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.veredicto-ico { display: grid; place-items: center; width: 84px; height: 84px; border: 3px solid var(--line); box-shadow: var(--sombra-s); background: var(--ok-soft); --ico-o: var(--ok); }
.veredicto-ico .ico { width: 52px; height: 52px; }
.veredicto.mal .veredicto-ico { background: var(--err-soft); --ico-o: var(--err); }
.veredicto h2 { margin: 0 0 6px; font: 16px/1.5 var(--f-titulo); }
.veredicto.bien h2 { color: var(--ok); }
.veredicto.mal h2 { color: var(--err); }
.veredicto p { margin: 0; color: var(--ink-2); }
.veredicto .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.veredicto-acciones { display: flex; flex-direction: column; gap: 10px; }

.resultado-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.lateral { position: sticky; top: 96px; display: grid; gap: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: -26px -26px 22px; border-bottom: 3px solid var(--line); background: var(--panel-3); }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px;
  font: 600 15px var(--f-texto); color: var(--ink-2); background: transparent; border: 0; border-right: 3px solid var(--line);
  cursor: pointer; position: relative; --ico-o: var(--ink-3);
}
.tab .ico { width: 18px; height: 18px; }
.tab:hover { background: var(--panel-2); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--panel); color: var(--ink); --ico-o: var(--pri); }
.tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--panel); }
.tab .cuenta { font: 9px var(--f-titulo); padding: 3px 5px; background: var(--err); color: #fff; border: 2px solid var(--line); }

/* Analisis */
.pregunta { border: 3px solid var(--line); background: var(--panel-2); margin-bottom: 14px; }
.pregunta-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--pri-softer); border-bottom: 3px solid var(--line); }
.pregunta-num { display: grid; place-items: center; width: 32px; height: 32px; font: 11px var(--f-titulo); color: #fff; background: var(--pri); border: 3px solid var(--line); }
.pregunta-cab b { font-weight: 600; }
.pregunta-cab .btn { min-height: 32px; padding: 2px 8px; }
.pregunta-ayuda { margin: 0; padding: 8px 12px; font-size: 14px; color: var(--ink-2); background: #fff; border-bottom: 2px dashed var(--pri-soft); }
.pregunta textarea { border: 0; box-shadow: none; min-height: 72px; background: #fff; }
.pregunta.vacia { border-color: var(--err); }
.pregunta.vacia .pregunta-num { background: var(--err); }

/* Variables */
.tabla-scroll { overflow-x: auto; border: 3px solid var(--line); }
table.vars { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 720px; }
table.vars th { font: 9px/1.4 var(--f-titulo); text-align: left; padding: 10px 8px; background: var(--line); color: #fff; letter-spacing: .5px; }
table.vars td { padding: 6px 8px; border-bottom: 2px solid var(--pri-soft); vertical-align: middle; }
table.vars tr:nth-child(even) td { background: var(--panel-2); }
table.vars tr.con-error td { background: var(--err-soft); }
table.vars input, table.vars select { font-size: 16px; padding: 4px 8px; border-width: 2px; box-shadow: none; min-width: 80px; }
table.vars select { padding-right: 30px; background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; }
table.vars .id { font-family: var(--f-code); font-size: 19px; }
.rol { display: inline-grid; place-items: center; width: 26px; height: 26px; font: 9px var(--f-titulo); border: 2px solid var(--line); background: #fff; color: var(--ink-3); margin-right: 3px; }
.rol.on { background: var(--pri); color: #fff; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.leyenda .rol { margin-right: 6px; }

/* Diagrama */
.diagrama-marco { overflow: auto; max-height: 760px; border: 3px solid var(--line); background:
  linear-gradient(var(--pri-softer) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(90deg, var(--pri-softer) 1px, transparent 1px) 0 0 / 20px 20px, #fff; }
.diagrama-marco svg { display: block; margin: 0 auto; }
.diagrama .sombra { fill: var(--line); }
.diagrama .cuerpo { stroke: var(--line); stroke-width: 3; fill: #fff; }
.diagrama .n-leer .cuerpo { fill: var(--mint); }
.diagrama .n-escribir .cuerpo { fill: var(--peach); }
.diagrama .n-calcular .cuerpo { fill: var(--lav); }
.diagrama .n-si .cuerpo { fill: var(--pink); }
.diagrama .n-mientras .cuerpo, .diagrama .n-para .cuerpo, .diagrama .n-hasta .cuerpo { fill: var(--sky); }
.diagrama .n-ini .cuerpo, .diagrama .n-fin .cuerpo { fill: var(--pri); }
.diagrama .n-ini .cod, .diagrama .n-fin .cod { fill: #fff; }
.diagrama .n-ini .etq, .diagrama .n-fin .etq { display: none; }
.diagrama .etq { font: 7px var(--f-titulo); fill: var(--ink-2); letter-spacing: .5px; }
.diagrama .cod { font: 18px var(--f-code); fill: var(--ink); }
.diagrama .lin { stroke: var(--line); stroke-width: 3; fill: none; stroke-linecap: square; }
.diagrama .punta, .diagrama .union { fill: var(--line); }
.diagrama .rot { font: 8px var(--f-titulo); fill: var(--pri-dark); }
.diagrama .nodo[data-ruta] { cursor: pointer; }
.diagrama .nodo[data-ruta]:hover .cuerpo { stroke: var(--pri-dark); stroke-width: 4; }
.diagrama .n-error .cuerpo { stroke: var(--err); stroke-width: 4; fill: var(--err-soft); }
.diagrama .n-error .sombra { fill: var(--err); }
.diagrama .n-sel .cuerpo { stroke: var(--pri-dark); stroke-width: 5; }
.diagrama .n-sel .sombra { fill: var(--pri); }
.leyenda-dia { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.leyenda-dia i { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); vertical-align: -3px; margin-right: 6px; }

.editor-nodo { margin-top: 16px; padding: 16px; border: 3px solid var(--line); background: var(--panel-2); box-shadow: var(--sombra-s); }
.editor-nodo header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.editor-nodo header b { font: 10px var(--f-titulo); }
.editor-nodo header .btn { margin-left: auto; }
.editor-nodo .fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.editor-nodo textarea, .editor-nodo input { min-height: 0; }
.editor-nodo .acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Pseudocodigo y archivo */
.bloque-codigo { margin: 0; padding: 16px 18px; max-height: 620px; overflow: auto; white-space: pre; font: 20px/1.25 var(--f-code); background: var(--panel-2); border: 3px solid var(--line); }
.barra-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.barra-acciones .empuje { margin-left: auto; }

/* Terminal */
.terminal { border: 3px solid var(--line); background: #1f1638; box-shadow: var(--sombra); }
.terminal-pantalla {
  position: relative; height: 340px; overflow: auto; padding: 16px 18px; color: #dcd0ff;
  font: 22px/1.2 var(--f-code); white-space: pre-wrap; word-break: break-word;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px);
}
.terminal-pantalla .t-sis { color: #9a8cd0; }
.terminal-pantalla .t-in { color: #7ff0b3; }
.terminal-pantalla .t-err { color: #ff8fac; }
.terminal-pantalla .t-out { color: #fff; }
.terminal-entrada { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 3px solid var(--line); background: #2a1f4a; color: #c9bbff; }
.terminal-entrada label { font: 10px var(--f-titulo); white-space: nowrap; }
.terminal-entrada input { flex: 1; font: 22px var(--f-code); color: #fff; background: #140d29; border: 2px solid var(--pri); box-shadow: none; padding: 4px 10px; }
.terminal-entrada input:disabled { opacity: .5; }
.cursor { display: inline-block; width: 10px; height: 18px; background: #7ff0b3; vertical-align: -2px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.traza { margin-top: 18px; }
table.traza-tabla { border-collapse: collapse; font-size: 15px; width: 100%; min-width: 520px; }
table.traza-tabla th { font: 8px/1.4 var(--f-titulo); background: var(--pri-soft); padding: 8px 6px; text-align: left; border-bottom: 3px solid var(--line); }
table.traza-tabla td { padding: 4px 6px; border-bottom: 2px solid var(--pri-softer); font-family: var(--f-code); font-size: 18px; }
table.traza-tabla td.cambio { background: var(--warn-soft); font-weight: 700; }

/* Lateral: descarga y problemas */
.descarga .campo { margin-bottom: 14px; }
.cod-opcion { display: grid; gap: 8px; }
.cod-opcion label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px; border: 3px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 600; font-size: 15px; }
.cod-opcion label small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; }
.cod-opcion input { appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 3px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.cod-opcion input:checked { background: var(--pri); box-shadow: inset 0 0 0 3px #fff; }
.cod-opcion label:has(input:checked) { background: var(--pri-softer); border-color: var(--pri-dark); }
.recomendado { display: inline-block; font: 7px var(--f-titulo); padding: 3px 5px; margin-left: 4px; background: var(--ok); color: #fff; vertical-align: 2px; }

.problemas { padding: 0; }
.problemas details { border-bottom: 3px solid var(--line); }
.problemas details:last-child { border-bottom: 0; }
.problemas summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 600;
}
.problemas summary::-webkit-details-marker { display: none; }
.problemas summary .flecha { margin-left: auto; transition: transform .1s steps(2); }
.problemas details[open] summary .flecha { transform: rotate(180deg); }
.problemas summary .num { font: 9px var(--f-titulo); padding: 4px 6px; border: 2px solid var(--line); background: #fff; }
.problemas .s-err summary { --ico-o: var(--err); }
.problemas .s-err summary .num { background: var(--err); color: #fff; }
.problemas .s-warn summary { --ico-o: #e9a923; }
.problemas .s-fix summary { --ico-o: var(--pri); }
.problemas ul { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.problemas li { padding: 8px 10px; font-size: 15px; background: var(--panel-2); border: 2px solid var(--line); }
.problemas li .donde { display: inline-block; font: 8px/1.6 var(--f-titulo); padding: 2px 5px; margin: 0 0 4px; background: var(--line); color: #fff; }
.problemas li.ir { cursor: pointer; }
.problemas li.ir:hover { background: var(--pri-softer); }
.problemas .vacio { padding: 0 16px 14px; color: var(--ink-3); font-size: 15px; }

/* ---------- Ayuda (dialog) ---------- */
dialog {
  width: min(760px, 100% - 32px); max-height: min(86vh, 900px); padding: 0; color: var(--ink);
  border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--line); background: var(--panel);
}
dialog::backdrop { background: rgba(47, 36, 84, .55); }
dialog header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--pri); color: #fff; border-bottom: 3px solid var(--line); --ico-o: #fff; --ico-w: var(--pri-soft); }
dialog header h2 { margin: 0; font: 13px var(--f-titulo); }
dialog header .btn { margin-left: auto; --b-bg: #fff; }
dialog .cuerpo-dlg { padding: 20px 24px 26px; overflow: auto; max-height: calc(86vh - 70px); }
dialog h3 { font: 10px/1.6 var(--f-titulo); margin: 22px 0 8px; color: var(--pri-dark); }
dialog h3:first-child { margin-top: 0; }
dialog p, dialog li { color: var(--ink); }
dialog code { font: 19px var(--f-code); background: var(--pri-softer); padding: 0 4px; }

/* ---------- Pie y toasts ---------- */
.pie { padding: 26px 0 40px; color: var(--ink-2); font-size: 14px; text-align: center; }
.pie b { font-weight: 600; color: var(--ink); }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: 10px; width: min(380px, calc(100% - 36px)); }
.toast { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px 14px; background: var(--panel); border: 3px solid var(--line); box-shadow: var(--sombra-s); font-weight: 600; animation: entra .18s steps(3); }
.toast.ok { --ico-o: var(--ok); }
.toast.err { --ico-o: var(--err); }
.toast.warn { --ico-o: #e9a923; }
.toast .ico { width: 24px; height: 24px; }
@keyframes entra { from { transform: translateY(16px); opacity: 0; } }

.cargando { display: inline-block; width: 14px; height: 14px; background: currentColor; animation: pasos 0.8s steps(4) infinite; }
@keyframes pasos { 0% { transform: translate(0, 0); } 25% { transform: translate(4px, 0); } 50% { transform: translate(4px, 4px); } 75% { transform: translate(0, 4px); } }

.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Adaptable ---------- */
@media (max-width: 1100px) {
  .resultado-grid { grid-template-columns: 1fr; }
  .lateral { position: static; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .inicio-grid { grid-template-columns: 1fr; }
  .pasos ol { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .paso-btn { flex-direction: column; text-align: center; padding: 8px 4px; gap: 6px; font-size: 13px; }
  .paso-btn small { display: none; }
  .pasos-uso { grid-template-columns: 1fr; }
  .veredicto { grid-template-columns: auto 1fr; }
  .veredicto-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .card { padding: 18px; }
  .tabs { margin: -18px -18px 18px; }
  .tab { padding: 10px 12px; font-size: 14px; }
  .editor-nodo .fila3 { grid-template-columns: 1fr; }
  .marca p { display: none; }
  .barra .chip { display: none; }
}
@media (max-width: 520px) {
  .marca h1 { font-size: 13px; }
  .paso-btn .txt { font-size: 11px; }
  .veredicto-ico { width: 60px; height: 60px; }
  .veredicto-ico .ico { width: 36px; height: 36px; }
  .veredicto h2 { font-size: 13px; }
  .tab span.txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- Donación ---------- */
.btn.donar { --b-bg: var(--pink); --ico-o: var(--err); --ico-w: #fff; }
.btn.donar:hover { background: #ffc4d8; }
.pila-botones { display: grid; gap: 10px; }
.dlg-donar { width: min(460px, 100% - 32px); }
.dlg-donar header { background: var(--err); }
.dlg-donar .cuerpo-dlg { text-align: center; }
.donar-arte { display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 12px; background: var(--pink); border: 3px solid var(--line); box-shadow: var(--sombra-s); --ico-o: var(--err); animation: latido 1.2s steps(2) infinite; }
.donar-arte .ico { width: 52px; height: 52px; }
.dlg-donar p { margin: 0 0 18px; }
@keyframes latido { 50% { transform: scale(1.08); } }

/* ---------- Análisis: una pregunta a la vez, como en ProyectoSAAA ---------- */
.analisis-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.an-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px;
  font: 11px var(--f-titulo); color: var(--ink); background: #fff; border: 3px solid var(--line); cursor: pointer;
  box-shadow: 2px 2px 0 var(--line); --ico-o: var(--ok);
}
.an-btn .ico { width: 16px; height: 16px; }
.an-btn:hover { background: var(--panel-3); }
.an-btn.lleno { background: var(--ok-soft); }
.an-btn.vacio { background: var(--err-soft); border-color: var(--err); }
.an-btn[aria-current="true"] { background: var(--pri); color: #fff; --ico-o: #fff; transform: translate(2px, 2px); box-shadow: none; }
.analisis-actual { border: 3px solid var(--line); background: var(--panel-2); }
.analisis-actual .pregunta-cab { grid-template-columns: auto 1fr; }
.analisis-actual .pregunta-ayuda { display: flex; gap: 8px; align-items: flex-start; --ico-o: var(--info); }
.analisis-actual .pregunta-ayuda .ico { flex: none; margin-top: 2px; }
.analisis-actual textarea { border: 0; box-shadow: none; background: #fff; min-height: 190px; display: block; }
.analisis-pie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 3px solid var(--line); background: var(--pri-softer); }
.analisis-pie .contador { margin: 0 auto; font: 10px var(--f-titulo); color: var(--ink-2); }
.tab-panel, .pregunta { position: relative; }

/* ---------- Problemas a lo ancho, debajo del resultado ---------- */
#problemas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
#problemas details { border-bottom: 0; border-right: 3px solid var(--line); min-width: 0; }
#problemas details:last-child { border-right: 0; }
#problemas summary { white-space: nowrap; }
#problemas ul { max-height: 240px; }
.lateral { position: sticky; top: 96px; }
@media (max-width: 860px) {
  #problemas { grid-template-columns: 1fr; }
  #problemas details { border-right: 0; border-bottom: 3px solid var(--line); }
  #problemas details:last-child { border-bottom: 0; }
}

/* ---------- Ventanas: un solo desplazamiento ---------- */
dialog { overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; }
dialog header { flex: none; }
dialog .cuerpo-dlg { flex: 1; min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pri) var(--pri-softer); }
dialog .cuerpo-dlg::-webkit-scrollbar { width: 12px; }
dialog .cuerpo-dlg::-webkit-scrollbar-track { background: var(--pri-softer); }
dialog .cuerpo-dlg::-webkit-scrollbar-thumb { background: var(--pri); border: 2px solid var(--pri-softer); }

/* Problemas debajo del panel de pestañas, adaptables */
.col-izq { display: grid; gap: 24px; min-width: 0; }
.col-izq > .card { margin-bottom: 0; }
#problemas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#problemas details { border-right: 0; box-shadow: 3px 0 0 var(--line); }
#problemas details:last-child { box-shadow: none; }
@media (max-width: 860px) {
  #problemas details { box-shadow: none; }
}
#problemas { grid-template-columns: 1fr; }
#problemas details { box-shadow: none; border-right: 0; border-bottom: 3px solid var(--line); }
#problemas details:last-child { border-bottom: 0; }
#problemas ul { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }

/* La columna izquierda nunca crece más que su espacio (tablas anchas se desplazan dentro) */
.col-izq { grid-template-columns: minmax(0, 1fr); }
#panel-principal, .tab-panel, .terminal, .traza { min-width: 0; max-width: 100%; }
.terminal-entrada { flex-wrap: wrap; }
.terminal-entrada input { min-width: 0; }