/* ═══════════════════════════════════════════════════════════════════════
   DEMO JOKER CATCHER — HUD Diagnostic Console
   Sistema BYQ « GoSmart ». Tomado tal cual: el lienzo casi negro de matiz
   violeta (nunca negro puro, como advierte el sistema), la profundidad en
   dos escalones —lienzo y tesela elevada— con hover cálido intermedio, el
   borde de 1 px que da el corte láser, el radio de 24 px en tesela y 70 px
   en píldora, el aura de neón como fondo difuso y el ritmo de 70–160 px.
   Adaptado: el pliego añade cian de telemetría y magenta de alerta —el
   sistema pide monocromía violeta, así que ambos quedan restringidos a
   codificar estado, nunca a decorar— y fija Consolas y Lucida Console.
   Todo el arte es CSS: no hay un solo archivo gráfico.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --noche:#080411; --indigo:#0E091D; --bruma:#140D29; --hilo:#311F5D;
  --iris:#8351F1; --lavanda:#C9B0FF; --cian:#3BE7F0; --magenta:#FF3BC8;
  --papel:#FFFFFF; --papel-cc:rgba(255,255,255,.80); --papel-66:rgba(255,255,255,.66);
  --papel-40:rgba(255,255,255,.40);
  --titulo:Consolas,"Cascadia Mono","Courier New",monospace;
  --ui:"Lucida Console","Lucida Sans Typewriter",Consolas,monospace;
  --t-caption:15px; --t-body-sm:16px; --t-body:18px; --t-body-lg:20px;
  --t-h-sm:24px; --t-h:32px; --t-h-lg:44px; --t-display-sm:60px;
  --s-8:8px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;
  --s-64:64px;--s-80:80px;--s-100:100px;--s-120:120px;--s-160:160px;
  --pagina:1800px;
  --r-tesela:24px; --r-pildora:70px; --r-tag:80px; --r-menu:12px; --r-avatar:9999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--noche);color:var(--papel);
  font-family:var(--ui);font-size:var(--t-body);line-height:1.6;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--titulo);font-weight:700;margin:0;line-height:1.2}
h1{font-size:var(--t-display-sm)}
@media(max-width:991px){h1{font-size:38px}}
@media(max-width:479px){h1{font-size:28px}}
h2{font-size:var(--t-h)}
@media(max-width:767px){h2{font-size:var(--t-h-sm)}}
h3{font-size:var(--t-h-sm)}
p{margin:0 0 var(--s-16);max-width:72ch;color:var(--papel-cc)}
p:last-child{margin-bottom:0}
.seccion{padding-block:var(--s-100)}
@media(max-width:767px){.seccion{padding-block:var(--s-64)}}
.eyebrow{display:block;font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;
  color:var(--lavanda);margin-bottom:var(--s-16)}
.revelar{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.revelar.visto{opacity:1;transform:none}
html:not(.js-on) .revelar{opacity:1;transform:none}
.enlace{color:var(--lavanda);text-decoration:underline;text-underline-offset:.2em}
.enlace:hover{color:var(--cian)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  border-radius:var(--r-pildora);border:0;cursor:pointer;text-decoration:none;
  background:linear-gradient(74deg,var(--iris),#9A6DFF,#9B76EC);color:var(--papel);
  font-family:var(--titulo);font-size:var(--t-body-sm);font-weight:700;
  transition:transform 200ms ease}
.cta:hover{transform:scale(1.04)}
.cta.linea{background:transparent;border:1px solid var(--hilo);color:var(--papel)}
.cta.linea:hover{border-color:var(--iris);transform:none}
.chevron{width:6px;height:6px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--magenta);border:1px solid rgba(255,59,200,.42);border-radius:var(--r-tag);
  padding:7px 14px}
.divulgacion{font-size:var(--t-caption);line-height:1.65;color:var(--papel-40);
  max-width:86ch;margin:0}
.tesela{background:var(--indigo);border:1px solid var(--hilo);border-radius:var(--r-tesela);
  padding:var(--s-40);transition:background 350ms ease}
@media(max-width:479px){.tesela{padding:var(--s-24)}}
.tesela:hover{background:var(--bruma)}
.tag{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-tag);padding:6px 14px;border:1px solid var(--hilo);color:var(--lavanda)}
.tag.ok{color:var(--cian);border-color:rgba(59,231,240,.42)}
.tag.pend{color:var(--magenta);border-color:rgba(255,59,200,.42)}

/* ═══ BLOQUE 2.0 — Barra superior de consola ══════════════════════════ */
.consola{position:sticky;top:0;z-index:50;background:rgba(8,4,17,.94);
  border-bottom:1px solid var(--hilo);backdrop-filter:blur(8px)}
.consola .marco{display:flex;align-items:center;gap:var(--s-24);flex-wrap:wrap;
  padding-block:var(--s-16)}
.consola .id{font-family:var(--titulo);font-weight:700;color:var(--papel);
  text-decoration:none;margin-right:auto;letter-spacing:.04em}
.consola .mod{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--papel-40)}
.consola .mod b{color:var(--cian);font-weight:400}

/* ═══ BLOQUE 3.0 — Cuerpo con barra lateral permanente ════════════════ */
.cuerpo-consola{display:grid;grid-template-columns:250px 1fr;gap:var(--s-48);
  align-items:start}
@media(max-width:991px){.cuerpo-consola{grid-template-columns:1fr;gap:var(--s-32)}}
.lateral{position:sticky;top:88px;border:1px solid var(--hilo);border-radius:var(--r-tesela);
  background:var(--indigo);padding:var(--s-24)}
@media(max-width:991px){.lateral{position:static}}
.lateral .titulo{font-family:var(--titulo);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--papel-40);margin-bottom:var(--s-16)}
.lateral nav{display:flex;flex-direction:column;gap:2px}
.lateral nav a{font-size:var(--t-body-sm);color:var(--papel-cc);text-decoration:none;
  padding:8px 12px;border-radius:var(--r-menu);display:flex;gap:10px;align-items:baseline}
.lateral nav a:hover{background:var(--bruma);color:var(--papel)}
.lateral nav a i{font-style:normal;color:var(--iris);font-size:12px}
@media(max-width:991px){.lateral nav{flex-direction:row;flex-wrap:wrap}}

/* Rejilla de coordenadas del HUD, sólo con gradientes. */
.hud{position:relative;border:1px solid var(--hilo);border-radius:var(--r-tesela);
  padding:var(--s-48);overflow:hidden;background:
    repeating-linear-gradient(0deg,rgba(49,31,93,.35) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(49,31,93,.35) 0 1px,transparent 1px 48px),
    radial-gradient(ellipse at 70% 20%,rgba(131,81,241,.30),transparent 62%),
    var(--indigo)}
@media(max-width:479px){.hud{padding:var(--s-24)}}
.hud .esquina{position:absolute;width:18px;height:18px;border-color:var(--cian);
  border-style:solid;border-width:0}
.hud .esquina.a{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.hud .esquina.b{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.hud .esquina.c{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.hud .esquina.d{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}

/* ═══ BLOQUES 5.0, 8.0, 10.0–13.0 — Tablas técnicas ══════════════════ */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-body-sm)}
.tabla th{text-align:left;font-family:var(--titulo);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--papel-40);padding:var(--s-12,12px) var(--s-16);
  border-bottom:1px solid var(--hilo);white-space:nowrap}
.tabla td{padding:12px var(--s-16);border-bottom:1px solid rgba(49,31,93,.5);
  color:var(--papel-cc);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.desliza{overflow-x:auto}

/* ═══ BLOQUE 6.0 — Mapa de posiciones de pantalla ════════════════════ */
.mapa{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,90px);
  gap:8px}
@media(max-width:479px){.mapa{grid-template-rows:repeat(3,72px)}}
.mapa .zona{border:1px dashed var(--hilo);border-radius:var(--r-menu);padding:10px;
  display:flex;flex-direction:column;justify-content:space-between}
.mapa .zona b{font-family:var(--titulo);font-size:13px;color:var(--cian);letter-spacing:.06em}
.mapa .zona span{font-size:12px;color:var(--papel-40)}
.mapa .zona.activa{border-style:solid;border-color:var(--iris);background:rgba(131,81,241,.12)}

/* ═══ BLOQUE 15.0 — Consola de errores ═══════════════════════════════ */
.errores{display:flex;flex-direction:column;gap:8px;font-family:var(--ui);
  font-size:var(--t-body-sm)}
.err{display:grid;grid-template-columns:110px 1fr;gap:var(--s-16);padding:12px var(--s-16);
  border-left:2px solid var(--magenta);background:rgba(255,59,200,.06);
  border-radius:0 var(--r-menu) var(--r-menu) 0}
@media(max-width:479px){.err{grid-template-columns:1fr;gap:4px}}
.err b{font-family:var(--titulo);color:var(--magenta);font-size:13px;letter-spacing:.06em}
.err span{color:var(--papel-cc)}

/* ═══ BLOQUE 20.0 — Hub diagnóstico ══════════════════════════════════ */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24)}
.modulo{background:var(--indigo);border:1px solid var(--hilo);border-radius:var(--r-tesela);
  padding:var(--s-32);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:10px;transition:background 350ms ease,border-color 200ms ease}
.modulo:hover{background:var(--bruma);border-color:var(--iris)}
.modulo .ref{font-family:var(--titulo);font-size:13px;letter-spacing:.08em;color:var(--cian)}
.modulo p{margin:0;font-size:var(--t-body-sm);color:var(--papel-66)}

/* ═══ BLOQUE 22.0 — FAQ en línea de comandos ═════════════════════════ */
.cli{border:1px solid var(--hilo);border-radius:var(--r-tesela);overflow:hidden;
  background:var(--indigo)}
.cli .fila{border-bottom:1px solid var(--hilo)}
.cli .fila:last-child{border-bottom:0}
.cli .prompt{display:flex;align-items:center;gap:12px;width:100%;padding:var(--s-24);
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.cli .sig{font-family:var(--titulo);color:var(--cian);flex:none}
.cli .q{flex:1;font-family:var(--titulo);font-size:var(--t-body);color:var(--papel)}
.cli .est{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--papel-40);
  white-space:nowrap}
.cli .salida{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cli .salida.abierto{max-height:520px}
.cli .salida .dentro{padding:0 var(--s-24) var(--s-24) 44px}
@media(max-width:479px){.cli .salida .dentro{padding-left:var(--s-24)}}

/* ═══ BLOQUE 19.0 — Bloqueo del sistema ══════════════════════════════ */
.bloqueo{border:1px solid var(--magenta);border-radius:var(--r-tesela);
  background:rgba(255,59,200,.06);padding:var(--s-48)}
@media(max-width:479px){.bloqueo{padding:var(--s-24)}}
.bloqueo .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-24);margin-top:var(--s-32)}
.bloqueo .rejilla div{border-top:1px solid var(--hilo);padding-top:var(--s-16)}
.bloqueo .rejilla b{display:block;font-family:var(--titulo);color:var(--lavanda);
  margin-bottom:6px}
.bloqueo .rejilla span{font-size:var(--t-body-sm);color:var(--papel-66)}

/* ═══ BLOQUE 23.0 — Pie de apagado ═══════════════════════════════════ */
.pie-sitio{border-top:1px solid var(--hilo);padding-block:var(--s-80)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-family:var(--titulo);font-size:var(--t-h-sm);color:var(--lavanda);
  letter-spacing:.04em}
.pie-nota{margin-top:12px;font-size:var(--t-body-sm);color:var(--papel-40)}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:12px var(--s-32)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--papel-40);text-decoration:none}
.pie-sitio nav a:hover{color:var(--cian)}
.legal{margin-top:var(--s-24);font-size:13px;line-height:1.7;color:var(--papel-40);max-width:94ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}