/**
 * foxtana.css — oscura y sobria. Sin dependencias, sin CDN, sin framework.
 * Los tokens son los mismos nombres que usa la consola, para que un componente
 * prestado (la entrada de materia, los huecos) se vea igual aquí que allá.
 */

:root{
  --bg:#0b0d11; --panel:#12161d; --panel2:#171c25; --ink:#e8eaee; --dim:#8d95a3;
  --line:#232a35; --accent:#ff7a33; --ok:#3ecf8e; --warn:#e0a33a; --stop:#ff6b5e;
  --idle:#69707d; --chip:#1b212a;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* ── la portada: FOXTANA y nada más ─────────────────────────────────────── */
#portada{
  position:fixed; inset:0; display:grid; place-items:center; cursor:pointer;
  user-select:none; text-align:center; padding:24px;
}
#portada .fox{font-size:64px;line-height:1;filter:saturate(.9)}
#portada h1{
  margin:18px 0 0; font-size:clamp(30px,7vw,52px); font-weight:600;
  letter-spacing:.34em; text-indent:.34em;
}
#portada .pista{
  margin:14px 0 0; color:var(--idle); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; transition:color .25s;
}
#portada:hover .pista{color:var(--dim)}
#portada .quien{
  position:fixed; right:16px; bottom:14px; color:var(--idle); font-size:12px;
}

/* ── la ventana ─────────────────────────────────────────────────────────── */
#ventana[hidden]{display:none}
#ventana{
  position:fixed; inset:0; z-index:10; background:rgba(4,6,9,.72);
  display:grid; place-items:center; padding:min(3vh,26px) min(3vw,26px);
}
.marco{
  width:min(1240px,100%); height:100%; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.barra{
  display:flex; gap:10px; align-items:center; padding:10px 14px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); background:var(--panel2); flex:0 0 auto;
}
.barra .tit{font-weight:600;letter-spacing:.18em;font-size:13px}

/* ── con quién hablas: a la vista, en la barra, nunca escondido ──────────── */
.selmod{display:flex;gap:7px;align-items:center;min-width:0}
.selmod .k{color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.selmod select{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:5px 9px; font-size:12.5px; max-width:min(42vw,340px); cursor:pointer;
}
.selmod select:hover:not(:disabled){border-color:var(--dim)}
.selmod select:focus{outline:none;border-color:var(--accent)}
.selmod select:disabled{opacity:.55;cursor:not-allowed}
#selNota{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#selNota.mal{color:var(--stop)}
/* Estrecho: la barra ya envuelve, así que lo primero que sobra es la etiqueta y
   la nota larga. La lista de modelos NUNCA se esconde: es el control principal. */
@media (max-width:1000px){ .selmod .k{display:none} #selNota{display:none} }
.grow{flex:1}
.cuerpo{flex:1; display:grid; grid-template-columns:300px 1fr; min-height:0}
.rail{border-right:1px solid var(--line); overflow:auto; padding:12px; background:var(--panel2)}
.obra{overflow:auto; padding:16px; min-width:0}

@media (max-width:860px){
  #ventana{padding:0}
  .marco{border-radius:0;border:0}
  .cuerpo{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .rail{border-right:0;border-bottom:1px solid var(--line);max-height:44vh}
}

/* ── controles ──────────────────────────────────────────────────────────── */
button{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:7px 11px; cursor:pointer; transition:.12s;
}
button:hover:not(:disabled){border-color:var(--dim)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#150a03;font-weight:700}
button.ghost{background:transparent}
button.sm{padding:4px 9px;font-size:12.5px}
input[type=text],input[type=url],textarea{
  background:#0d1116; border:1px solid var(--line); border-radius:9px; padding:8px 10px; width:100%;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical}

/* ── el pie del cuadro de texto: dice la verdad de las teclas ────────────── */
.pie{margin:6px 2px 0;color:var(--dim);font-size:11.5px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pie kbd{
  background:var(--chip);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  padding:0 5px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink);
}

/* ── las tres entradas ──────────────────────────────────────────────────── */
.entradas{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.entradas button{
  display:flex;gap:9px;align-items:center;text-align:left;padding:10px 11px;
  background:var(--panel);
}
.entradas button[aria-current=true]{border-color:var(--accent);background:#1d1410}
.entradas .g{font-size:16px;width:20px;text-align:center}
.entradas small{display:block;color:var(--dim);font-size:11.5px;line-height:1.35}

.hoja{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.hoja h3{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fila{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dim{color:var(--dim);font-size:12.5px}
.xs{font-size:11.5px}

/* ── el contexto cargado ────────────────────────────────────────────────── */
.ctx{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.ctx .it{
  display:flex;gap:8px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12.5px;
}
.ctx .it b{font-weight:600}
.ctx .it .g{opacity:.85}
.ctx .it .x{margin-left:auto;background:none;border:0;color:var(--idle);padding:0 2px;cursor:pointer}
.ctx .it .x:hover{color:var(--stop)}

/* ── árbol de repo ──────────────────────────────────────────────────────── */
.arbol{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#0d1116;padding:5px}
.arbol button{
  display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;
  padding:3px 6px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dim);
}
.arbol button:hover{background:var(--chip);color:var(--ink)}
.arbol button.puesto{color:var(--ok)}

/* ── modelos ────────────────────────────────────────────────────────────── */
.modelos{display:flex;flex-wrap:wrap;gap:6px}
.mod{
  display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;cursor:pointer;background:var(--panel);font-size:12.5px;
}
.mod input{accent-color:var(--accent);margin:0}
.mod.on{border-color:var(--accent);background:#1d1410}
.mod .v{color:var(--dim);font-size:11px}
details.masmodelos{margin-top:8px}
details.masmodelos summary{cursor:pointer;color:var(--dim);font-size:12.5px}
.lista{max-height:220px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.lista label{display:flex;gap:8px;align-items:center;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;padding:2px 4px;border-radius:6px;cursor:pointer}
.lista label:hover{background:var(--chip)}

/* ── respuestas lado a lado ─────────────────────────────────────────────── */
.respuestas{display:grid;gap:12px;margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.resp{border:1px solid var(--line);border-radius:11px;background:var(--panel2);display:flex;flex-direction:column;min-width:0}
.resp header{display:flex;gap:8px;align-items:baseline;padding:9px 11px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.resp header b{font-size:12.5px}
.resp .txt{padding:11px;white-space:pre-wrap;word-break:break-word;font-size:13.5px;max-height:52vh;overflow:auto;margin:0}
.resp.mal{border-color:var(--stop)}
.resp.mal .txt{color:var(--stop);font-family:ui-monospace,Menlo,monospace;font-size:12px}

/* ── avisos ─────────────────────────────────────────────────────────────── */
.aviso{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--panel2);
  border-radius:9px;padding:9px 11px;font-size:12.5px;margin:8px 0;color:var(--dim)}
.aviso.mal{border-left-color:var(--stop);color:var(--stop)}
.aviso.bien{border-left-color:var(--ok);color:var(--ink)}
.hole{border:1px dashed var(--line);border-radius:9px;padding:8px 11px;margin:8px 0;color:var(--dim);font-size:12.5px}
.tag{background:var(--chip);border-radius:6px;padding:1px 7px;font-size:11.5px;color:var(--dim)}
.tag.ok{color:var(--ok)}
.tag.mal{color:var(--stop)}

/* ── la entrada de materia prestada, en oscuro ──────────────────────────── */
.jos-entrada{margin-top:10px}
.jos-entrada .en-b{font-size:12.5px;padding:5px 10px}
.jos-entrada figure{background:var(--panel2);border:1px solid var(--line)}
.jos-entrada .en-pre{background:#0d1116}
.en-sobre{outline:2px dashed var(--accent);outline-offset:4px;border-radius:10px}