/* labnotes.sh — implementacion del kit de marca.
   Los tokens salen tal cual de 05-design-tokens/tokens.css; no se inventa
   ninguno. Lo que se añade son los derivados que el kit no fija (bordes,
   grises intermedios, estados) y siempre a partir de sus colores.

   TIPOGRAFIAS, AUTOALOJADAS
   El kit pide Space Grotesk 500/600/700, Inter 400/500/600 y JetBrains Mono
   Regular/Medium. El paquete de Debian de Space Grotesk NO trae SemiBold —solo
   Light, Regular, Medium y Bold— asi que se usan 500 y 700, y donde el kit
   pedia 600 va 700. Subconjunto latino, 11-20 KB cada una, igual que en
   novrix.tech. Cero peticiones a terceros.

   CONTRASTE
   El cian #00E5FF sobre blanco da 1,50:1 — es un color de ACENTO y de fondo
   oscuro, nunca de texto sobre claro. Sobre grafito da 14,8:1, que es donde el
   kit lo usa (terminal, pie, glifos). En texto sobre fondo claro va grafito o
   el gris derivado, ambos por encima del minimo AA. */

@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;
 src:url('/assets/fonts/grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;
 src:url('/assets/fonts/grotesk-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;
 src:url('/assets/fonts/mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;
 src:url('/assets/fonts/mono-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;
 src:url('/assets/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;
 src:url('/assets/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;
 src:url('/assets/fonts/inter-600.woff2') format('woff2');}

:root{
  /* --- Tokens del kit, literales --- */
  --lab-graphite:#0F1216; --lab-slate:#2A313C; --lab-paper:#F6F7F9;
  --lab-white:#FFFFFF; --lab-cyan:#00E5FF; --lab-cyan-ui:#00CFE8;
  --lab-indigo:#2563EB; --lab-lime:#A6F36E; --lab-radius:14px;
  --lab-font-ui:Inter,system-ui,sans-serif;
  --lab-font-display:"Space Grotesk",Inter,sans-serif;
  --lab-font-code:"JetBrains Mono",ui-monospace,monospace;

  /* --- Derivados: el kit no fija bordes ni grises intermedios. Se sacan del
         grafito con transparencia para que sigan la marca si esta cambia. --- */
  --linea:rgba(15,18,22,.10);
  --linea-fuerte:rgba(15,18,22,.18);
  --gris:#5A6472;            /* 5,44:1 sobre paper — pasa AA */
  --medida:72ch;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--lab-paper);color:var(--lab-graphite);
  font-family:var(--lab-font-ui);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;}
.env{max-width:1120px;margin-inline:auto;padding-inline:28px;}
.medida{max-width:var(--medida);}

/* ===== Cabecera ========================================================= */
.barra{background:var(--lab-white);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:50;}
.barra .env{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:14px;flex-wrap:wrap;}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;}
.marca img{width:38px;height:38px;display:block;}
.marca .nombre{font-family:var(--lab-font-display);font-weight:700;font-size:23px;
  letter-spacing:-.02em;color:var(--lab-graphite);}
.marca .tld{color:var(--lab-cyan-ui);}
.barra nav{display:flex;gap:26px;font-family:var(--lab-font-code);font-size:13px;}
.barra nav a{color:var(--gris);text-decoration:none;transition:color .15s ease;}
.barra nav a:hover,.barra nav a[aria-current]{color:var(--lab-graphite);}

/* ===== Heroe ============================================================ */
.heroe{padding-block:64px 56px;}
.heroe .caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:start;}
.eyebrow{font-family:var(--lab-font-code);font-size:14px;font-weight:500;
  color:var(--lab-cyan-ui);margin:0 0 18px;}
.eyebrow .prompt{color:var(--gris);}
h1{font-family:var(--lab-font-display);font-weight:700;
  font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 20px;text-wrap:balance;}
h1 .destacado{color:var(--lab-cyan-ui);}
.entrada{font-size:18px;line-height:1.6;color:var(--gris);margin:0 0 30px;max-width:52ch;}
.botones{display:flex;gap:12px;flex-wrap:wrap;}
.boton{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  padding:13px 22px;border-radius:10px;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.boton-solido{background:var(--lab-graphite);color:var(--lab-white);}
.boton-solido:hover{background:var(--lab-slate);}
.boton-linea{border:1px solid var(--linea-fuerte);color:var(--lab-graphite);}
.boton-linea:hover{border-color:var(--lab-cyan-ui);color:var(--lab-cyan-ui);}
.boton .glifo{font-family:var(--lab-font-code);color:var(--lab-cyan);}
.boton-linea .glifo{color:var(--lab-cyan-ui);}
.nota-pie{display:flex;align-items:center;gap:9px;margin-top:20px;
  font-size:13.5px;color:var(--gris);}
.punto{width:8px;height:8px;border-radius:50%;background:var(--lab-lime);flex:none;}

/* ===== Ventana de terminal ==============================================
   La pieza mas caracteristica del kit: fondo grafito, radio 14, y el cian
   solo aqui dentro, donde tiene contraste de sobra. */
.terminal{background:var(--lab-graphite);border-radius:var(--lab-radius);
  overflow:hidden;font-family:var(--lab-font-code);font-size:13.5px;line-height:1.75;
  box-shadow:0 1px 2px rgba(15,18,22,.06),0 12px 32px rgba(15,18,22,.10);}
.terminal .cab{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  color:#E6EDF3;font-weight:500;}
.terminal .cab .dolar{color:var(--lab-cyan);margin-right:8px;}
.terminal .cab .etiqueta{color:#7D8794;font-size:12px;}
.terminal .cuerpo{padding:16px 18px 20px;color:#C9D3DD;overflow-x:auto;
  font-variant-numeric:tabular-nums;}
.terminal .linea{display:flex;gap:16px;white-space:pre;}
.terminal .num{color:#4C5663;user-select:none;min-width:1.4em;text-align:right;}
.terminal .cy{color:var(--lab-cyan);}
.terminal .li{color:var(--lab-lime);}
.terminal .gr{color:#7D8794;}
.terminal .cursor{display:inline-block;width:8px;height:1.05em;
  background:var(--lab-cyan);vertical-align:-.15em;}

/* ===== Chips ============================================================ */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;}
.chip{font-family:var(--lab-font-code);font-size:12.5px;color:var(--gris);
  background:var(--lab-white);border:1px solid var(--linea);
  border-radius:8px;padding:6px 12px;text-decoration:none;}
.chip .almo{color:var(--lab-cyan-ui);}

/* ===== Tarjetas de categoria =========================================== */
.categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;padding-bottom:56px;}
.cat{background:var(--lab-white);border:1px solid var(--linea);
  border-radius:var(--lab-radius);padding:22px;
  transition:border-color .15s ease,transform .15s ease;}
.cat:hover{border-color:var(--lab-cyan-ui);transform:translateY(-2px);}
.cat img{width:34px;height:34px;display:block;margin-bottom:14px;}
.cat .titulo{font-family:var(--lab-font-display);font-weight:700;font-size:16.5px;
  letter-spacing:-.015em;margin:0 0 5px;}
.cat .desc{font-size:13.5px;line-height:1.55;color:var(--gris);margin:0;}

/* ===== Indice de notas ================================================= */
.panel{background:var(--lab-white);border:1px solid var(--linea);
  border-radius:var(--lab-radius);overflow:hidden;margin-bottom:60px;}
.panel .cabecera{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--linea);}
.panel .cabecera h2{font-family:var(--lab-font-display);font-weight:700;font-size:17px;
  letter-spacing:-.015em;margin:0;}
.indice{list-style:none;margin:0;padding:0;}
.indice li+li{border-top:1px solid var(--linea);}
.indice a{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;
  text-decoration:none;color:inherit;transition:background-color .15s ease;}
.indice a:hover{background:var(--lab-paper);}
.indice .icono{width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--lab-graphite);display:flex;align-items:center;
  justify-content:center;font-family:var(--lab-font-code);color:var(--lab-cyan);
  font-size:14px;}
.indice .cuerpo{flex:1;min-width:0;}
.indice .titulo{font-family:var(--lab-font-display);font-weight:700;font-size:17.5px;
  letter-spacing:-.02em;line-height:1.32;margin:0 0 5px;}
.indice a:hover .titulo{color:var(--lab-cyan-ui);}
.indice .sumario{font-size:14.5px;line-height:1.55;color:var(--gris);margin:0 0 9px;}
.indice .fecha{font-family:var(--lab-font-code);font-size:12.5px;color:var(--gris);
  flex:none;font-variant-numeric:tabular-nums;padding-top:2px;}
.barra-ls{background:var(--lab-graphite);color:#C9D3DD;
  font-family:var(--lab-font-code);font-size:13px;padding:13px 22px;
  display:flex;justify-content:space-between;gap:16px;}
.barra-ls .dolar{color:var(--lab-cyan);}
.barra-ls .ruta{color:var(--lab-lime);}

/* ===== Nota ============================================================ */
article{padding-block:52px 40px;}
article h1{font-size:clamp(31px,4.4vw,46px);margin-bottom:16px;}
.meta{font-family:var(--lab-font-code);font-size:12.5px;color:var(--gris);
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:34px;
  font-variant-numeric:tabular-nums;}
article h2{font-family:var(--lab-font-display);font-weight:700;
  font-size:clamp(23px,3vw,30px);letter-spacing:-.028em;line-height:1.18;
  margin:2.5em 0 .4em;}
article h3{font-family:var(--lab-font-display);font-weight:700;font-size:19px;
  letter-spacing:-.02em;margin:2em 0 .3em;}
article p{margin:1.05em 0;}
article a{color:var(--lab-graphite);text-decoration:underline;
  text-decoration-color:var(--lab-cyan-ui);text-decoration-thickness:2px;
  text-underline-offset:3px;font-weight:500;}
article a:hover{color:var(--lab-cyan-ui);}
blockquote{border-left:3px solid var(--lab-cyan-ui);margin:1.6em 0;
  padding-left:20px;color:var(--gris);}
hr{border:0;border-top:1px solid var(--linea);margin:2.8em 0;}

pre{font-family:var(--lab-font-code);font-size:13.5px;line-height:1.7;
  background:var(--lab-graphite);color:#C9D3DD;border-radius:var(--lab-radius);
  padding:18px 20px;overflow-x:auto;margin:1.6em 0;
  font-variant-numeric:tabular-nums;}
pre code{background:none;padding:0;font-size:inherit;color:inherit;}

/* ===== Consolas largas: plegado + descarga ==============================
   Un volcado de 60 lineas en medio del texto rompe la lectura. Por encima de
   14 lineas el bloque llega plegado, con su cuenta de lineas y un enlace al
   .txt completo.

   TODO NATIVO: <details>/<summary> para plegar y <a download> a un fichero de
   verdad. Cero JavaScript, o sea que funciona con el script bloqueado y el
   .txt se puede enlazar o bajar con curl. El rotulo cambia con CSS segun el
   estado, sin tocar el DOM. */
.consola{margin:1.6em 0;border:1px solid var(--linea);
  border-radius:var(--lab-radius);overflow:hidden;background:var(--lab-white);}
.consola-cab{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:9px 14px;border-bottom:1px solid var(--linea);
  font-family:var(--lab-font-code);font-size:12px;}
.consola-cab .cuenta{color:var(--gris);}
.consola-cab .bajar{color:var(--gris);text-decoration:none;
  border:1px solid var(--linea);border-radius:8px;padding:4px 11px;
  transition:color .15s ease,border-color .15s ease,background .15s ease;}
.consola-cab .bajar:hover{color:var(--lab-graphite);
  border-color:var(--linea-fuerte);background:var(--lab-paper);}
.consola-cuerpo>summary{list-style:none;cursor:pointer;padding:11px 14px;
  font-family:var(--lab-font-code);font-size:12.5px;color:var(--gris);
  display:flex;align-items:center;gap:9px;
  transition:color .15s ease,background .15s ease;}
.consola-cuerpo>summary::-webkit-details-marker{display:none;}
.consola-cuerpo>summary:hover{color:var(--lab-graphite);background:var(--lab-paper);}
/* El triangulo y el texto los pone el CSS segun el estado. */
.consola-cuerpo>summary::before{content:"\25B8";display:inline-block;
  color:var(--lab-cyan-ui);transition:transform .15s ease;}
.consola-cuerpo[open]>summary::before{transform:rotate(90deg);}
.consola-cuerpo>summary .rotulo::after{content:"mostrar la salida";}
.consola-cuerpo[open]>summary .rotulo::after{content:"ocultar la salida";}
.consola-cuerpo>summary:focus-visible{outline:2px solid var(--lab-cyan-ui);
  outline-offset:-2px;}
/* El <pre> ya viene con su propio margen y radio; dentro de la caja sobran. */
.consola-cuerpo pre{margin:0;border-radius:0;}

:not(pre)>code{font-family:var(--lab-font-code);font-size:.87em;
  background:var(--lab-white);border:1px solid var(--linea);
  padding:.1em .4em;border-radius:6px;}

table{border-collapse:collapse;width:100%;font-size:15px;margin:1.6em 0;
  background:var(--lab-white);border:1px solid var(--linea);
  border-radius:var(--lab-radius);overflow:hidden;}
th{font-family:var(--lab-font-code);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);text-align:left;
  border-bottom:1px solid var(--linea-fuerte);padding:12px 14px;font-weight:500;}
td{border-bottom:1px solid var(--linea);padding:12px 14px;vertical-align:top;}
tr:last-child td{border-bottom:0;}
.tabla-scroll{overflow-x:auto;}
img{max-width:100%;height:auto;border-radius:var(--lab-radius);}

/* Diagramas SVG traidos de otro articulo. Se desplazan en horizontal en
   pantallas estrechas en vez de encogerse hasta ser ilegibles. */
.diagrama{background:var(--lab-white);border:1px solid var(--linea);
  border-radius:var(--lab-radius);padding:24px 20px;margin:1.8em 0;overflow-x:auto;}
.diagrama svg{display:block;width:100%;min-width:680px;height:auto;
  color:var(--lab-graphite);}

/* ===== Pie ============================================================= */
footer{background:var(--lab-graphite);color:#8B95A2;margin-top:20px;}
footer .env{padding-block:40px;display:flex;justify-content:space-between;
  gap:28px;flex-wrap:wrap;align-items:center;}
footer .marca .nombre{color:var(--lab-white);}
footer .lema{font-family:var(--lab-font-code);font-size:13px;color:var(--lab-cyan-ui);}
footer .lema .prompt{color:#4C5663;}
footer a{color:#8B95A2;}
footer a:hover{color:var(--lab-cyan-ui);}
footer .legal{font-family:var(--lab-font-code);font-size:12px;color:#5A6472;}

:focus-visible{outline:2px solid var(--lab-cyan-ui);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}html{scroll-behavior:auto;}
  .cat:hover{transform:none;}}
@media (max-width:900px){
  .heroe .caja{grid-template-columns:1fr;gap:36px;}
  .heroe{padding-block:44px 40px;}}
@media (max-width:620px){
  body{font-size:16px;}.env{padding-inline:20px;}
  .indice a{flex-wrap:wrap;}.indice .fecha{padding-top:0;}}