/* Reset base */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ============================================================
   Laboratorio Flexbox — Robots y bases de carga
   Interfaz tomada del tema claro de Visual Studio Code
   ============================================================ */

:root{
  color-scheme: light;
  --chrome:#f3f3f3;
  --chrome-2:#ececec;
  --editor:#ffffff;
  --border:#e5e5e5;
  --border-2:#cecece;
  --fg:#3b3b3b;
  --fg-dim:#6f6f6f;
  --fg-faint:#8c8c8c;
  --accent:#0078d4;
  --accent-hover:#026ec1;
  --accent-soft:#e4ecf7;
  --sel:#e4e6f1;
  --hover:#e8e8e8;
  --ok:#1a7f4b;
  --ok-soft:#e4f4ea;
  --syn-prop:#0000ff;
  --syn-val:#a31515;
  --syn-sel:#800000;
  --piso:#eef2f6;
  --ui:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:Consolas, "Cascadia Mono", "Liberation Mono", "Courier New", ui-monospace, monospace;
  --w:56px;
  --h:60px;
}

*{box-sizing:border-box;}
html,body{margin:0;}
[hidden]{display:none !important;}
body{
  background-color:#dfe3e8;
  background-image:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)),
    url("fondo.jpg?v=20260922b");
  background-size:cover, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  color:var(--fg);
  font-family:var(--ui);
  font-size:13px;
  line-height:1.5;
}
@media (max-width:860px){ body{background-attachment:scroll, scroll;} }

.page{max-width:1300px;margin:0 auto;padding-inline:clamp(16px,4vw,56px);padding-block:clamp(20px,5vw,56px) clamp(28px,6vw,72px);}
.win{
  background:var(--editor);border:1px solid var(--border-2);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 26px 60px -18px rgba(0,0,0,.55);
}

/* ---------- Barra de título ---------- */
.titlebar{
  display:flex;align-items:center;gap:16px;background:var(--chrome);
  border-bottom:1px solid var(--border);padding:6px 14px;min-height:46px;
}
.titlebar img{display:block;width:auto;flex:none;}
.logo-uni{height:30px;}
.logo-cam{height:34px;}
.tb-title{flex:1 1 auto;min-width:0;text-align:center;font-size:12.5px;color:var(--fg-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-title b{color:var(--fg);font-weight:600;}

/* ---------- Barra lateral ---------- */
.shell{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:stretch;}
.sidebar{background:var(--chrome);border-right:1px solid var(--border);min-width:0;display:flex;flex-direction:column;}
.sb-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);padding:10px 16px 6px;}
.lista{flex:1;max-height:min(62vh,660px);overflow-y:auto;padding-bottom:6px;}
.lista::-webkit-scrollbar{width:10px;}
.lista::-webkit-scrollbar-thumb{background:#c9c9c9;border:3px solid var(--chrome);border-radius:5px;}

.nivel{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  font-family:var(--ui);font-size:12.5px;color:var(--fg);padding:4px 14px;cursor:pointer;
}
.nivel .num{font-family:var(--mono);font-size:11px;color:var(--fg-faint);width:18px;flex:none;}
.nivel .marca{width:6px;height:6px;border-radius:50%;background:#c6cdd4;flex:none;}
.nivel .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nivel:hover{background:var(--hover);}
.nivel[aria-current="true"]{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent);}
.nivel[aria-current="true"] .num{color:var(--accent);}
.nivel.hecho .marca{background:var(--ok);}
.nivel:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;}

.sb-pie{border-top:1px solid var(--border);padding:9px 14px;font-size:11px;color:var(--fg-dim);}
.barra{height:5px;background:#dde3e9;border-radius:3px;overflow:hidden;margin-bottom:5px;}
.barra span{display:block;height:100%;width:0;background:var(--ok);transition:width .25s ease;}

/* ---------- Área principal ---------- */
.editor-area{display:flex;flex-direction:column;min-width:0;background:var(--editor);}
.tabbar{display:flex;align-items:center;gap:0;background:var(--chrome-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.tab-fijo{
  border-right:1px solid var(--border);background:var(--editor);color:#1a1a1a;
  font-family:var(--mono);font-size:12.5px;padding:8px 16px;box-shadow:inset 0 2px 0 var(--accent);
}
.tabbar-acciones{margin-left:auto;display:flex;align-items:center;gap:6px;padding:4px 10px;flex-wrap:wrap;}
.campo{font-family:var(--ui);font-size:12px;color:var(--fg);border:1px solid var(--border-2);
  border-radius:2px;background:#fff;padding:4px 8px;width:126px;}
.campo:focus{outline:1px solid var(--accent);outline-offset:-1px;}
.btn{font-family:var(--ui);font-size:12px;padding:4px 12px;border-radius:2px;cursor:pointer;
  border:1px solid var(--border-2);background:#fbfbfb;color:var(--fg);}
.btn:hover{background:var(--hover);}
.btn:focus-visible{outline:1px solid var(--accent);outline-offset:1px;}
.btn:disabled{opacity:.45;cursor:default;}
.btn-run{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.btn-run:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-run:disabled{background:#c7d4e3;border-color:#c7d4e3;color:#fff;}
.btn-zip{border-color:var(--accent);color:var(--accent);font-weight:600;}
.btn-zip:hover{background:var(--accent);color:#fff;}

/* ---------- Juego ---------- */
.juego{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--border);
  border-bottom:1px solid var(--border);}
.pane{background:var(--editor);display:flex;flex-direction:column;min-width:0;}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 12px;background:var(--chrome);border-bottom:1px solid var(--border);}
.pane-title{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);}
.pane-note{font-size:11px;color:var(--fg-faint);}

.escena-caja{flex:1;display:grid;place-items:center;padding:16px;background:#f7f9fb;}
.escenario{
  position:relative;width:100%;max-width:430px;aspect-ratio:1/1;
  background:
    linear-gradient(var(--piso), var(--piso)),
    repeating-linear-gradient(0deg, #e2e8ee 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, #e2e8ee 0 1px, transparent 1px 34px);
  background-blend-mode:normal;
  border:1px solid var(--border-2);border-radius:4px;overflow:hidden;
}
.capa{position:absolute;inset:0;display:flex;padding:14px;}

/* Robots y bases: mismas medidas, distinta apariencia */
.robot{
  width:var(--w);height:var(--h);flex:none;border-radius:9px;
  background:var(--c);position:relative;
  box-shadow:0 2px 0 rgba(0,0,0,.18) inset, 0 3px 7px -2px rgba(20,30,40,.45);
}
.robot::before{
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:3px;height:11px;background:var(--c);border-radius:2px;
}
.robot::after{
  content:"";position:absolute;top:34%;left:50%;transform:translateX(-50%);
  width:62%;height:26%;border-radius:999px;background:#16242f;
  background-image:
    radial-gradient(circle at 27% 50%, #ffffff 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 73% 50%, #ffffff 0 2.5px, transparent 2.6px),
    linear-gradient(#16242f, #16242f);
}
.base{
  background:transparent;box-shadow:none;
  border:2px dashed var(--c);border-radius:9px;opacity:.65;
}
.base::before{background:var(--c);opacity:.4;}
.base::after{
  background:transparent;background-image:none;
  border-bottom:3px solid var(--c);opacity:.5;
  top:auto;bottom:18%;height:0;width:46%;border-radius:0;
}

.r-azul{--c:#2f7ff0;}
.r-verde{--c:#1f9d63;}
.r-ambar{--c:#e0a020;}
.r-rojo{--c:#d9534f;}
.r-morado{--c:#7a5cd6;}
.r-cian{--c:#128a9c;}
.r-rosa{--c:#c2457f;}
.r-lima{--c:#6aa524;}

/* ---------- Panel de la tarea ---------- */
.tarea{padding:14px 16px 4px;}
.tarea h2{font-family:var(--ui);font-size:16px;font-weight:600;margin:0 0 6px;color:#1a1a1a;}
.instruccion{margin:0 0 8px;font-size:13.5px;max-width:60ch;}
.instruccion code, .ref code, .pista code{
  font-family:var(--mono);font-size:12px;color:var(--syn-sel);
  background:var(--chrome);border:1px solid var(--border);padding:1px 5px;border-radius:2px;
}
.pista{margin:0 0 8px;font-size:13px;padding:8px 12px;background:var(--accent-soft);
  border-left:3px solid var(--accent);max-width:60ch;}

.editor-css{margin:8px 16px 0;border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.ed-head{display:flex;justify-content:space-between;gap:10px;padding:5px 11px;background:var(--chrome);
  border-bottom:1px solid var(--border);font-size:11px;color:var(--fg-dim);
  letter-spacing:.05em;text-transform:uppercase;}
.ed-nota{text-transform:none;letter-spacing:0;color:var(--fg-faint);}
#css{
  width:100%;min-height:172px;border:0;resize:vertical;padding:11px 13px;
  font-family:var(--mono);font-size:13px;line-height:1.65;color:#233b4b;background:#fbfcfd;
  display:block;tab-size:2;
}
#css:focus{outline:1px solid var(--accent);outline-offset:-1px;}

.estado{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px 16px;}
.estado-txt{font-size:13px;color:var(--fg-dim);}
.estado.bien .estado-txt{color:var(--ok);font-weight:600;}
.estado.bien{background:var(--ok-soft);}

/* ---------- Referencia ---------- */
.docs{padding:0 20px 24px;background:var(--editor);}
.eyebrow{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:20px 0 4px;}
.docs h2{font-family:var(--ui);font-size:16px;font-weight:600;margin:0;color:#1a1a1a;}
.lead{margin:6px 0 12px;max-width:74ch;color:var(--fg-dim);font-size:13px;}
.ref{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.ref-item{background:var(--editor);padding:9px 12px;}
.ref-item b{display:block;font-family:var(--mono);font-size:12px;color:var(--syn-prop);font-weight:400;margin-bottom:3px;}
.ref-item span{font-size:12.5px;color:var(--fg-dim);}
.ref-item em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--syn-val);}

/* ---------- Barra de estado ---------- */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--accent);color:#fff;font-size:11.5px;padding:3px 12px;min-height:24px;}
.statusbar span{white-space:nowrap;}
.st-izq{display:flex;gap:16px;flex-wrap:wrap;}
.statusbar b{font-weight:600;}

@media (max-width:980px){
  .shell{grid-template-columns:1fr;}
  .sidebar{border-right:0;border-bottom:1px solid var(--border);}
  .lista{max-height:168px;}
  .juego{grid-template-columns:1fr;}
  .titlebar{flex-wrap:wrap;gap:10px;}
  .logo-uni{height:22px;} .logo-cam{height:26px;}
  .tb-title{order:3;flex-basis:100%;text-align:left;white-space:normal;}
  .page{padding-inline:12px;padding-block:16px 24px;}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;}}


/* ============================================================
   Añadidos del Laboratorio CSS: pestañas, editor libre, plantillas
   ============================================================ */

.tabbar .tab{
  border:0;border-right:1px solid var(--border);background:transparent;
  font-family:var(--mono);font-size:12.5px;color:var(--fg-dim);
  padding:8px 16px;cursor:pointer;
}
.tabbar .tab:hover{color:var(--fg);}
.tabbar .tab[aria-pressed="true"]{background:var(--editor);color:#1a1a1a;box-shadow:inset 0 2px 0 var(--accent);}
.tabbar .tab:focus-visible{outline:1px solid var(--accent);outline-offset:-2px;}
.grupo-acciones{display:flex;align-items:center;gap:6px;}

.sb-nota{margin:0 16px 8px;font-size:11.5px;color:var(--fg-faint);line-height:1.45;}

/* Fragmentos y plantillas en la barra lateral */
.frag{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:var(--ui);font-size:12.5px;color:var(--fg);padding:6px 14px;
}
.frag b{display:block;font-weight:600;}
.frag span{display:block;font-size:11px;color:var(--fg-faint);}
.frag:hover{background:var(--hover);}
.frag:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;}
.frag[aria-current="true"]{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent);}

/* Editor libre: documento a la izquierda, resultado a la derecha */
.dos{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
  background:var(--border);border-bottom:1px solid var(--border);
}
.dos .pane{min-height:480px;}
#ed-doc{
  flex:1;width:100%;border:0;resize:none;padding:11px 13px;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:#233b4b;background:#fbfcfd;tab-size:2;
}
#ed-doc:focus{outline:1px solid var(--accent);outline-offset:-1px;}
#ed-vista{flex:1;width:100%;border:0;background:#fff;}

/* Plantillas */
.plantilla-caja{border-bottom:1px solid var(--border);}
.plantilla-caja .pane{min-height:520px;}
#pl-vista{flex:1;width:100%;border:0;background:#fff;}

@media (max-width:980px){
  .dos{grid-template-columns:1fr;}
  .dos .pane{min-height:300px;}
  .plantilla-caja .pane{min-height:420px;}
  .tabbar-acciones{width:100%;justify-content:flex-start;}
}