/* ============================================================
   MicrobitLab — base.css
   Tokens de diseño, tema claro/oscuro, tipografía y controles.
   100% local: ninguna fuente, icono ni hoja viene de internet.
   ============================================================ */

/* ── Fuentes ─────────────────────────────────────────────────
   Las variables locales viven en root/font/. Si por lo que sea
   el archivo no carga, la pila de respaldo usa fuentes del
   sistema y la app se ve igual de legible.                     */
@font-face{
  font-family:'ML Sans';
  font-style:normal;font-weight:200 1000;font-display:swap;
  src:url('../../../../../font/Nunito-VariableFont_wght.ttf') format('truetype-variations'),
      url('../../../../../font/Nunito-VariableFont_wght.ttf') format('truetype');
}
@font-face{
  font-family:'ML Display';
  font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../../../../../font/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
      url('../../../../../font/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

/* ── Tokens ─────────────────────────────────────────────────
   Colores tomados del editor de bloques de micro:bit (captura de
   referencia en media/img/Makecode.png): barra azul, botón morado
   de descarga, lienzo gris claro y una familia de color por
   categoría.                                                     */
:root{
  --f-ui:'Segoe UI','Segoe UI Variable Text','ML Sans',system-ui,sans-serif;
  --f-dis:'Segoe UI','Segoe UI Variable Display','ML Sans',system-ui,sans-serif;
  --f-mono:'Cascadia Mono','Consolas','Roboto Mono','JetBrains Mono','Courier New',monospace;

  /* Colores fijos de la interfaz (no cambian con el tema) */
  --mc-azul:#3454d1;
  --mc-azul-2:#2a44b5;        /* hover / contenedor del conmutador */
  --mc-azul-3:#223a9e;
  --mc-morado:#6633cc;
  --mc-morado-2:#5424b0;
  --mc-ctrl:#e1e1e1;          /* botones del simulador */
  --mc-ctrl-ico:#555;

  /* Superficies (tema claro por defecto) */
  --bg:#ecf0f1;               /* lienzo */
  --bg-2:#e2e7ea;
  --panel:#ffffff;
  --panel-2:#f5f6f7;
  --panel-3:#ebedef;
  --border:#dadde0;
  --border-2:#bfc4c9;
  --text:#1f1f1f;
  --text-2:#4e5358;
  --text-3:#7b8187;
  --grid:#c9d0d6;             /* crucecitas del lienzo */

  --acc:#3454d1;
  --acc-2:#3454d1;
  --acc-soft:#e3e9fb;
  --ok:#00a650;
  --warn:#e38a00;
  --err:#e2303b;
  --info:#1e90ff;

  /* Colores por categoría de bloques */
  --c-basico:#1e90ff;
  --c-entrada:#d400d4;
  --c-musica:#e63022;
  --c-led:#5c2d91;
  --c-radio:#e3008c;
  --c-bucles:#00aa00;
  --c-logica:#00a4a6;
  --c-variables:#dc143c;
  --c-matematicas:#9400d3;
  --c-funciones:#3455db;
  --c-pines:#b22222;
  --c-matrices:#e65722;
  --c-texto:#b8860b;
  --c-juego:#007a4b;
  --c-imagenes:#7600a8;
  --c-serial:#002050;
  --c-control:#333333;
  /* categorías de versiones anteriores (proyectos viejos) */
  --c-sensores:#e07000;
  --c-comunicacion:#007a4b;
  --c-avanzado:#3c3c3c;

  /* Geometría y sombras */
  --r-s:4px; --r-m:6px; --r-l:10px; --r-xl:14px;
  --sh-1:0 1px 2px rgba(0,0,0,.10);
  --sh-2:0 3px 10px rgba(0,0,0,.14);
  --sh-3:0 10px 32px rgba(0,0,0,.22);
  --ring:0 0 0 3px rgba(52,84,209,.35);

  --topbar-h:56px;
  --bottombar-h:62px;
  --t-fast:.12s; --t-med:.2s;
}

/* Tema oscuro: la barra azul y los colores de categoría se mantienen;
   solo se oscurecen las superficies neutras.                       */
html[data-tema="oscuro"]{
  --bg:#1c1f24;
  --bg-2:#23272d;
  --panel:#2a2e35;
  --panel-2:#30353d;
  --panel-3:#383d46;
  --border:#40464f;
  --border-2:#565d68;
  --text:#eceff2;
  --text-2:#b9c0c8;
  --text-3:#8a929c;
  --grid:#353b43;
  --mc-ctrl:#3a3f47;
  --mc-ctrl-ico:#d5d9de;
  --acc:#6f8cff;
  --acc-2:#6f8cff;
  --acc-soft:#27325a;
  --ok:#3ecf7a;
  --warn:#fab005;
  --err:#ff6b6b;
  --info:#4dabf7;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.45);
  --sh-3:0 16px 44px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ── Reset ligero ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.45;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;                 /* el scroll vive dentro de cada panel */
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--f-dis);margin:0;font-weight:600;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--acc);color:#fff}

/* Iconos SVG del sprite de index.html */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.i{width:20px;height:20px;flex:0 0 auto;display:block;pointer-events:none}

/* Barras de desplazamiento discretas */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box}

/* ── Accesibilidad: foco siempre visible ────────────────────── */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Salto al contenido (teclado) */
.skip-link{
  position:fixed;top:-60px;left:8px;z-index:200;background:var(--acc);color:#fff;
  padding:8px 14px;border-radius:0 0 var(--r-m) var(--r-m);font-weight:600;transition:top var(--t-med);
}
.skip-link:focus{top:0}

/* ── Botones ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:34px;padding:0 12px;
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-m);
  font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{background:var(--panel-3);border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .ic{font-size:15px;line-height:1}
.btn.solo{padding:0;width:34px}
.btn.grande{min-height:40px;padding:0 16px;font-size:14px}
.btn.acc{background:var(--acc);border-color:transparent;color:#fff}
.btn.acc:hover{filter:brightness(1.07)}
.btn.prim{background:var(--mc-azul);border-color:transparent;color:#fff}
.btn.prim:hover{filter:brightness(1.08)}
.btn.peli{background:var(--err);border-color:transparent;color:#fff}
.btn.peli:hover{filter:brightness(1.08)}
.btn.fantasma{background:transparent;border-color:transparent}
.btn.fantasma:hover{background:var(--panel-3)}
.btn.activo{background:var(--acc-soft);border-color:var(--acc);color:var(--text)}

/* ── Campos ─────────────────────────────────────────────────── */
.campo{
  height:34px;padding:0 10px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-m);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.campo:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring)}
select.campo{padding-right:6px;cursor:pointer}
textarea.campo{height:auto;padding:8px 10px;resize:vertical;font-family:var(--f-mono)}

/* Interruptor */
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .pista{
  width:38px;height:21px;border-radius:999px;background:var(--border-2);
  position:relative;transition:background var(--t-med);flex:0 0 auto;
}
.sw .pista::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);transition:transform var(--t-med);
}
.sw input:checked + .pista{background:var(--acc)}
.sw input:checked + .pista::after{transform:translateX(17px)}
.sw input:focus-visible + .pista{box-shadow:var(--ring)}

/* ── Etiquetas / píldoras ───────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--panel-3);color:var(--text-2);border:1px solid var(--border);
}
.pill.ok{background:rgba(47,158,68,.14);color:var(--ok);border-color:transparent}
.pill.warn{background:rgba(217,119,6,.14);color:var(--warn);border-color:transparent}
.pill.err{background:rgba(224,49,49,.14);color:var(--err);border-color:transparent}

/* ── Animaciones suaves (respetando la preferencia del sistema) */
@keyframes ml-fade{from{opacity:0}to{opacity:1}}
@keyframes ml-suba{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ml-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}