:root{
  --void:#04070F; --ground:#070D1A; --surface:#0E1727; --raise:#16233A; --sunk:#050A15;
  --line:#1D2E4A; --line-soft:#152238; --glow:rgba(30,123,255,.55);
  --shadow-borde:rgba(0,0,0,.6);
  --ink:#EAF1FB; --ink-2:#9FB2CE; --ink-3:#64789B;
  --c-metal:#D8E2F0; --c-crystal:#2AA8F5; --c-deuterium:#E8A33D;
  --accent:#1E7BFF; --accent-2:#7DD3FC;
  /* El cian saturado del anillo del logo. Se reserva para brillos y degradados
     de los iconos, donde no compite con ningun dato: como color de texto tiene
     menos contraste que --accent-2 y como color de dato se pega al cristal. */
  --spark:#22D3EE;
  --good:#3FD69C; --bad:#FF5C6E; --warn:#E8A33D;
  --good-bg:rgba(63,214,156,.13); --bad-bg:rgba(255,92,110,.13); --warn-bg:rgba(232,163,61,.14);
  --grid:rgba(30,123,255,.06);

  /* Escala tipografica modular. Antes habia ~20 tamanos sueltos (10, 10.5, 11,
     12, 12.5, 13, 13.5...) elegidos a ojo; una escala hace que la jerarquia se
     lea sola y evita el ruido de tener tres tamanos casi iguales. */
  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:18px;
  --t-xl:22px; --t-2xl:28px; --t-3xl:38px; --t-4xl:52px;
}
:root[data-theme="light"]{
  --void:#EAEEF5; --ground:#F1F4FA; --surface:#FFFFFF; --raise:#F8FAFD; --sunk:#E5EAF3;
  --line:#D3DBE8; --line-soft:#E3E9F2; --glow:rgba(11,95,217,.22);
  --shadow-borde:rgba(16,30,54,.22);
  --ink:#0B1524; --ink-2:#41546F; --ink-3:#6B7C96;
  /* Sobre blanco hay que rehacer los tres, y no basta con oscurecerlos: el
     primer intento —acero #5A7391 y azul #0B72C4— fallo el test con dE 13 en
     TRITANOPIA, porque los dos son azules y quien no distingue el azul los ve
     iguales. Lo que los separa aqui es la luminosidad, no el tono. */
  --c-metal:#36455A; --c-crystal:#0F7CC4; --c-deuterium:#8A590C;
  --accent:#0B5FD9; --accent-2:#0E7A9E;
  --spark:#0E7A9E;
  --good:#0F7A54; --bad:#C42B3C; --warn:#9A6410;
  --good-bg:rgba(15,122,84,.10); --bad-bg:rgba(196,43,60,.09); --warn-bg:rgba(154,100,16,.11);
  --grid:rgba(11,95,217,.05);
}
*{box-sizing:border-box}
/* Desplazamiento suave: la guia lo marca como severidad alta. Se respeta a quien
   pide menos movimiento, y se reserva el alto de la barra fija para que ningun
   titulo quede escondido detras al saltar a una seccion. */
html{scroll-behavior:smooth;scroll-padding-top:112px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;min-height:100%}
body{
  background:var(--void);color:var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:var(--t-md);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* El contenido usa la pantalla que hay, con un margen que respira.
   Antes se cortaba en 1300px y en un monitor ancho sobraba media pantalla
   vacia mientras las tablas —que son la mitad de esto— iban con scroll propio
   por falta de sitio. El margen crece con la ventana para que no se
   pegue al borde en grande ni desperdicie ancho en pequeño.
   El tope de 2200px no es estetico: mas alla de eso una fila de tabla es tan
   larga que se pierde el hilo entre la primera columna y la ultima. */
.wrap{max-width:2200px;margin:0 auto;padding:26px clamp(16px,2.2vw,44px) 80px}
h1,h2,h3,.eyebrow,.pill,.step-when,th,.tab,.btn,.livedot,.stat-k{
  font-family:"Rajdhani","IBM Plex Sans",system-ui,sans-serif}
h1{font-family:"Orbitron",sans-serif;font-size:var(--t-xl);font-weight:800;margin:0;letter-spacing:.02em}
h2{font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-3);margin:0 0 14px;display:flex;align-items:center;gap:9px}
h3{font-size:var(--t-lg);font-weight:700;margin:0 0 7px;letter-spacing:.01em;text-wrap:balance}
p{margin:0 0 10px;max-width:70ch;color:var(--ink-2)}
.dim{color:var(--ink-3)}
.eyebrow{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);font-weight:600}
.num,.mono,td.num,.big,.coords,.rung-val,.meter-foot,.stat-v,.delta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
svg.ico{width:1em;height:1em;flex:none;vertical-align:-.13em}

/* ---- panel con corchetes de HUD ---- */
.card{position:relative;background:linear-gradient(180deg,var(--surface),var(--ground));
  border:1px solid var(--line);border-radius:3px;padding:20px 22px}
.card::before,.card::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none}
.card::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
.card.plain::before,.card.plain::after{display:none}
section{margin-bottom:26px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* ---- cabecera ---- */
.top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;
  padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:22px;
  background:linear-gradient(180deg,transparent,rgba(30,123,255,.06))}
.ident{display:flex;flex-direction:column;gap:2px}
.coords{font-size:var(--t-sm);color:var(--ink-2);letter-spacing:.03em}
.topstats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--sunk);border:1px solid var(--line-soft);border-radius:3px;
  padding:7px 13px;min-width:92px}
.stat-k{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);font-weight:600}
.stat-v{display:block;font-size:var(--t-md);font-weight:500;margin-top:1px}

/* ---- cifra principal ---- */
.hero{position:relative;background:
    radial-gradient(120% 160% at 12% 0%,rgba(30,123,255,.20),transparent 62%),
    linear-gradient(180deg,var(--surface),var(--ground));
  border:1px solid var(--line);border-radius:3px;padding:22px 26px;margin-bottom:24px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);height:1px;top:0}
.hero-row{display:flex;flex-wrap:wrap;gap:32px;align-items:baseline;margin-top:8px}
.big{font-size:var(--t-4xl);font-weight:500;line-height:1;letter-spacing:-.035em}
.big small{font-size:var(--t-lg);color:var(--ink-3);font-weight:400;margin-left:8px;letter-spacing:0}
.split{display:flex;height:8px;border-radius:2px;overflow:hidden;margin:20px 0 11px;gap:2px}
.split span{display:block;box-shadow:0 0 10px currentColor}
.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.legend i,.swatch{display:inline-block;width:9px;height:9px;border-radius:1px;flex:none}
.legend i{margin-right:7px}

/* ---- medidores ---- */
.meters{display:flex;flex-direction:column;gap:15px}
.meter-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.meter-name{font-family:"Rajdhani",sans-serif;font-weight:600;font-size:var(--t-md);letter-spacing:.02em}
.bar{height:7px;background:var(--sunk);border:1px solid var(--line-soft);border-radius:2px;overflow:hidden}
.bar span{display:block;height:100%;transition:width .8s linear;box-shadow:0 0 8px currentColor}
.meter-foot{display:flex;align-items:baseline;gap:5px;margin-top:6px;font-size:var(--t-sm)}
.meter-foot .rate{margin-left:auto;color:var(--ink-2)}

/* ---- escalera ---- */
.ladder{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.rung{display:grid;grid-template-columns:225px 1fr 92px;gap:12px;align-items:center}
.rung-label{font-size:var(--t-sm);color:var(--ink-2);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.track{position:relative;height:21px;background:var(--sunk);border:1px solid var(--line-soft);border-radius:2px}
.track b{position:absolute;left:0;top:0;bottom:0;border-radius:1px;display:block;box-shadow:0 0 12px currentColor}
.rung-val{font-size:var(--t-sm)}
.scale{display:grid;grid-template-columns:225px 1fr 92px;gap:12px;margin-top:9px}
.ticks{position:relative;height:18px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3)}
.ticks span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace}

/* ---- tablas ---- */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
th{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  text-align:left;font-weight:700;padding:0 18px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 18px 10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-2)}
td b,td strong{color:var(--ink)}
tbody tr:hover td{background:rgba(30,123,255,.07)}
tbody tr[data-planet]{cursor:pointer}
th[title]{user-select:none}
th[title]:hover{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
/* Alinear a la derecha NO debe pegar una columna con la siguiente: el relleno
   solo se quita en la ultima, que es la que toca el borde de la tabla. */
td.r,th.r{text-align:right}
tr>td:last-child,tr>th:last-child{padding-right:0}
/* Un poco de aire entre columnas para tablas densas. */
th,td{padding-right:18px}
th:first-child,td:first-child{padding-left:0}

/* ---- pildoras ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:700;
  padding:2px 9px;border-radius:2px;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;
  border:1px solid currentColor}
.pill-good{background:var(--good-bg);color:var(--good)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-mute{background:var(--sunk);color:var(--ink-3);border-color:var(--line)}
.delta{font-size:var(--t-sm);font-weight:500}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)} .delta.flat{color:var(--ink-3)}

/* ---- plan ---- */
.step{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:17px 0;
  border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0} .step:first-child{padding-top:2px}
.step-when{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent-2);padding-top:3px}
.step ul{margin:0;padding-left:17px;color:var(--ink-2)}
.step li{margin-bottom:6px} .step li:last-child{margin-bottom:0}
.step b{color:var(--ink)}

.note{background:var(--sunk);border:1px solid var(--line-soft);border-left:2px solid var(--accent);
  border-radius:2px;padding:13px 17px;font-size:var(--t-sm);color:var(--ink-2);max-width:none}
.note b{color:var(--ink)}

/* Explicaciones plegables.
   El motivo por el que existen: medido con la cuenta real, Oportunidades ocupaba
   16,4 pantallas y el Plan 12,8 — y no eran las tablas (49 filas en total), era
   el texto que explica cada decision. Ese texto es media herramienta y no se
   borra: se pliega. Queda una linea que dice de que va, y quien quiera el
   porque lo abre. */
details.nota{background:var(--sunk);border:1px solid var(--line-soft);
  border-left:2px solid var(--accent);border-radius:2px;font-size:var(--t-sm);
  color:var(--ink-2);margin-top:12px}
details.nota > summary{padding:10px 17px;cursor:pointer;list-style:none;
  color:var(--ink-3);font-family:"Rajdhani",sans-serif;font-weight:600;
  letter-spacing:.04em;display:flex;align-items:center;gap:8px;user-select:none}
details.nota > summary::-webkit-details-marker{display:none}
details.nota > summary::before{content:"▸";color:var(--accent);font-size:11px;transition:.15s}
details[open].nota > summary::before{transform:rotate(90deg)}
details.nota > summary:hover{color:var(--ink-2)}
details.nota > div{padding:0 17px 13px;border-top:1px solid var(--line-soft);padding-top:11px}
details.nota.aviso{border-left-color:var(--warn)}
details.nota.malo{border-left-color:var(--bad)}

/* Indice de la pantalla: para las que tienen muchas tarjetas, permite saltar
   sin recorrer. Se pega arriba porque su utilidad es justamente estar cuando ya
   has bajado. */
.indice{position:sticky;top:56px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;
  margin:0 0 16px;padding:8px 0;background:var(--ground);
  border-bottom:1px solid var(--line-soft)}
.indice a{font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);text-decoration:none;
  padding:5px 10px;border:1px solid var(--line-soft);border-radius:2px;transition:.15s;
  white-space:nowrap}
.indice a:hover{color:var(--ink);background:var(--sunk);border-color:var(--accent)}
.indice a[aria-current="true"]{color:var(--ink);background:var(--sunk);border-color:var(--accent)}
@media (max-width:640px){.indice{overflow-x:auto;flex-wrap:nowrap}}

.foot{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-3)}
.foot p{max-width:80ch;margin-bottom:8px;color:var(--ink-3)}
.foot code{font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);background:var(--sunk);
  border:1px solid var(--line-soft);padding:1px 5px;border-radius:2px}

/* ---- controles ---- */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:var(--t-sm);
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:2px;
  padding:9px 16px;background:var(--raise);color:var(--ink);cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 1px var(--glow)}
/* Anillo de foco unico para todo lo pulsable. La guia pide un perimetro de al
   menos 2 px con contraste 3:1; --accent-2 lo cumple sobre ambos fondos. */
.btn:focus-visible,.tab:focus-visible,tr[tabindex]:focus-visible,
th[tabindex]:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px;border-radius:2px}
tr[tabindex]:focus-visible{outline-offset:-2px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.14)}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--sunk);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:var(--t-md)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--glow)}
label{display:block;font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin:0 0 6px}

/* ---- indice de secciones ---- */
.secnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:12px;
  border-bottom:1px solid var(--line-soft)}
.secnav button{font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);background:none;
  padding:9px 14px;border:1px solid transparent;border-bottom:2px solid transparent;
  border-radius:2px 2px 0 0;cursor:pointer;transition:.15s;white-space:nowrap}
.secnav button:hover{color:var(--ink-2);background:var(--sunk)}
.secnav button[aria-current="true"]{color:var(--ink);background:var(--sunk);
  border-bottom-color:var(--accent)}
.secnav button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (max-width:660px){
  .secnav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-bottom:16px}
  .secnav::-webkit-scrollbar{display:none}
}

/* ---- navegacion de dos niveles ----
   Trece pestañas planas envolvian a dos lineas y pesaban todas igual. Arriba
   van cuatro grupos, debajo solo las paginas del grupo activo: nunca hay mas de
   cinco opciones a la vez. */
.nav{margin:0 0 20px}
.nav-fila{display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--line)}
.nav-grupos{flex:1;min-width:0;display:flex;gap:4px}
.nav-grupo{font-family:"Rajdhani",sans-serif;font-size:var(--t-sm);
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
  background:none;padding:11px 18px;border:0;border-bottom:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:.15s;white-space:nowrap}
.nav-grupo:hover{color:var(--ink-2);background:var(--sunk)}
.nav-grupo[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.nav-grupo:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}

.nav-buscar{flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:2px;padding:6px 10px;margin-bottom:6px;
  cursor:pointer;transition:.15s}
.nav-buscar:hover{color:var(--ink);border-color:var(--accent)}
.nav-lupa{display:none;font-size:17px;line-height:1}

.nav-paginas{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 0}
.nav-paginas a{font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);background:none;
  border:1px solid var(--line-soft);border-radius:2px;padding:6px 12px;cursor:pointer;
  text-decoration:none;transition:.15s;white-space:nowrap}
.nav-paginas a:hover{color:var(--ink);background:var(--sunk);border-color:var(--accent)}
.nav-paginas a[aria-current="page"]{color:#fff;background:var(--accent);border-color:var(--accent)}
.nav-paginas a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* El contenido recibe el foco al cambiar de pantalla; el recuadro del navegador
   alrededor de media pagina asusta y no dice nada, asi que se quita. El aviso
   de que has cambiado de sitio ya lo dan el scroll y el titulo. */
#contenido:focus{outline:none}

/* Saltar al contenido: invisible hasta que se enfoca con el tabulador. */
.saltar{position:fixed;top:8px;left:8px;z-index:80;transform:translateY(-200%);
  font-family:"Rajdhani",sans-serif;font-size:var(--t-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;text-decoration:none;
  color:var(--ink);background:var(--surface);border:1px solid var(--accent);
  border-radius:2px;padding:9px 14px;transition:transform .15s}
.saltar:focus{transform:none;outline:2px solid var(--accent-2);outline-offset:2px}

/* Sombra en los bordes SOLO cuando de verdad hay mas contenido al lado. El
   truco son cuatro capas: dos tapas del color del fondo que se mueven con el
   scroll (background-attachment local) y dos sombras fijas debajo; cuando la tapa esta en su
   extremo, esconde la sombra. Sin JavaScript y sin medir nada. */
@media (max-width:660px){
  .nav-grupos,.nav-paginas{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    background:
      linear-gradient(to right,var(--ground),transparent) left/24px 100% no-repeat local,
      linear-gradient(to left,var(--ground),transparent) right/24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,var(--shadow-borde),transparent) left/14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,var(--shadow-borde),transparent) right/14px 100% no-repeat scroll}
  .nav-grupos::-webkit-scrollbar,.nav-paginas::-webkit-scrollbar{display:none}
  .nav-grupo{padding:11px 13px}
  .nav-buscar{padding:7px 9px}
  .nav-buscar kbd,.nav-buscar-txt{display:none}
  .nav-lupa{display:inline}
}

/* ---- alta de usuarios ---- */
.alta{display:grid;gap:12px;align-items:end;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.alta label{display:block}
.alta .eyebrow{display:block;margin-bottom:5px}
.alta .btn{white-space:nowrap}
@media (max-width:660px){.alta{grid-template-columns:1fr}}

.etiq{font-family:"Rajdhani",sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent);border-radius:2px;
  padding:1px 5px;margin-left:6px;vertical-align:middle}
/* Variantes por estado. La cortesia usa el verde de «esto esta resuelto» y no
   un gris de «falta algo»: que alguien no pague porque se le regalo el acceso
   es una decision tomada, no un hueco en los datos. */
.etiq.ok{color:var(--good);border-color:var(--good)}
.etiq.aviso{color:var(--warn);border-color:var(--warn)}
.etiq.malo{color:var(--bad);border-color:var(--bad)}

/* ---- dialogo modal ----
   El <dialog> nativo trae el foco atrapado dentro, la tecla Escape, el fondo
   inerte y el anuncio al lector de pantalla. Aqui solo se le pone el aspecto
   del resto de la consola.

   Sin acentos graves en este comentario: esto vive dentro de una plantilla de
   JavaScript y un acento grave la cierra. */
.modal{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  color:var(--ink);padding:24px;width:min(460px,calc(100vw - 32px));box-shadow:var(--shadow-borde)}
.modal::backdrop{background:rgba(4,6,14,.72)}
.modal h3{margin-bottom:4px}
.modal .campo{display:block;margin-top:14px}
.modal .campo input{width:100%;margin-top:5px}
/* En un movil el dialogo se pega abajo, que es donde llega el pulgar. */
@media (max-width:560px){
  .modal{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:3px 3px 0 0;padding:20px 18px}
}
/* En la tabla de la puerta la etiqueta abre linea, no va pegada a un texto. */
td > .etiq:first-child{margin-left:0}

/* ---- barras de actividad ---- */
.barras{display:flex;align-items:flex-end;gap:5px;height:110px;padding-top:6px}
.barra{flex:1;min-width:0;max-width:56px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;height:100%}
.barra i{display:block;width:100%;min-height:3px;background:var(--accent);border-radius:2px 2px 0 0;
  opacity:.85}
.barra span{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3)}

/* ---- frescura del dato ----
   El punto verde pulsaba igual con un dato de ocho segundos que con uno de
   veinte minutos: afirmaba una frescura que no siempre tenia. Ahora el color
   dice la verdad y al lado va la edad en palabras. */
.livedot.viejo{color:var(--warn)}
.livedot.muyviejo{color:var(--bad)}
@media (prefers-reduced-motion:no-preference){
  .livedot.viejo i,.livedot.muyviejo i{animation:none}
}
.edad{font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);color:var(--ink-3);
  white-space:nowrap}

/* ---- buscador de comandos (Ctrl+K) ---- */
.paleta-fondo{position:fixed;inset:0;z-index:60;background:rgba(6,7,12,.62);
  backdrop-filter:blur(3px);display:flex;justify-content:center;padding:12vh 16px 16px}
.paleta{width:min(620px,100%);align-self:flex-start;max-height:74vh;display:flex;
  flex-direction:column;background:var(--raise);border:1px solid var(--line);
  border-radius:3px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden}
.paleta input{border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:15px 18px;font-size:var(--t-lg);background:transparent}
.paleta input:focus{outline:none}
.paleta-lista{overflow-y:auto;padding:6px}
.paleta-lista button{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:2px;
  padding:9px 12px;cursor:pointer;color:var(--ink-2)}
.paleta-lista button[aria-selected="true"]{background:var(--sunk);color:var(--ink)}
.paleta-eti{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:var(--t-md);
  letter-spacing:.06em;white-space:nowrap}
.paleta-desc{font-size:var(--t-sm);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.paleta-grupo{font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap}
.paleta-pie{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line-soft);
  font-size:var(--t-xs);color:var(--ink-3)}
kbd{font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);background:var(--sunk);
  border:1px solid var(--line-soft);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;margin:0 2px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .paleta{animation:paleta-entra .13s ease-out}
  @keyframes paleta-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

/* ---- acceso ---- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.gate::before{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(30,123,255,.16),transparent 55%)}
.gate-card{position:relative;width:100%;max-width:430px;padding:34px 32px}
/* La portada: la puerta dejo de ser una caja centrada y paso a ser una pagina.
   Y una pagina de presentacion no se lee como un panel de datos: el panel puede
   ocupar los 2200px de ancho que tiene '.wrap' porque son tablas y graficas, y
   aqui son parrafos. A 1900px de monitor una linea de texto de 1800px es
   ilegible, y la rejilla de la cabecera dejaba el tercer dato solo en la otra
   punta del cristal. Asi que la portada estrecha su propio '.wrap'. */
.portada{min-height:100vh}
.portada .wrap{max-width:1180px;padding-top:0;padding-bottom:0}

/* La primera pantalla es una banda con luz propia: el degradado la separa del
   resto sin una linea, y el borde de abajo marca donde acaba «la promesa» y
   empieza «el detalle». */
.portada-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:clamp(30px,5vw,64px) 0 clamp(34px,5vw,58px);
  background:
    radial-gradient(120% 130% at 8% -10%,rgba(30,123,255,.20),transparent 58%),
    radial-gradient(90% 110% at 100% 0%,rgba(34,211,238,.10),transparent 55%),
    linear-gradient(180deg,var(--ground),var(--void))}
/* El filo luminoso de arriba, el mismo recurso que usa '.hero' dentro de la
   herramienta: cose la portada con lo que hay detras de la puerta. */
.portada-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent)}

/* Discurso a la izquierda, acceso a la derecha. La columna del panel no se
   estira: un formulario de dos campos con 700px de ancho parece un error, no un
   formulario. */
.portada-hero-in{display:grid;gap:clamp(26px,3.4vw,52px);
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:start}
@media (max-width:880px){.portada-hero-in{grid-template-columns:1fr}}

.portada .gate-mark h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:.02em;line-height:1}
.portada .gate-mark{margin-bottom:20px}
.hero-sub{color:var(--ink);font-size:clamp(19px,2vw,26px);line-height:1.32;
  font-weight:500;max-width:22ch;margin:0 0 14px;text-wrap:balance}
.hero-sub b{color:var(--accent)}
.hero-dice{color:var(--ink-2);font-size:var(--t-md);line-height:1.6;max-width:52ch;margin:0 0 22px}

/* Lo que hace fiable la respuesta, en etiquetas. No son cifras, y por eso no
   van con cara de cifra. */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hero-chips .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--line);border-radius:2px;background:var(--sunk);
  font-size:var(--t-sm);color:var(--ink-2)}
.hero-chips .chip .ico{filter:drop-shadow(0 0 5px currentColor)}

/* Las cifras, aparte y en tira. Antes compartian rejilla con las etiquetas y
   «Tu cuenta» salia con el mismo tamano gigante que «34»: cinco cosas con el
   mismo peso son cinco cosas que no destacan. */
.hero-tira{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,46px);
  padding-top:20px;border-top:1px solid var(--line)}
.hero-tira .dato{font-family:"Orbitron",sans-serif;font-size:var(--t-2xl);
  color:var(--accent);font-weight:700;line-height:1;margin-bottom:5px}
.hero-tira .dim{font-size:var(--t-sm)}

/* ---- el panel de acceso ---- */
/* Un solo panel, en el orden en que se necesita: cuanto cuesta, los dos campos
   y como conseguirlo. Las divisiones son lineas, no tarjetas sueltas: tres
   cajas apiladas habrian vuelto a repartir el peso a partes iguales. */
.card.acceso{padding:0;overflow:hidden}
.card.acceso > *{padding:20px 22px}
.card.acceso form{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.acceso-precio{background:
    radial-gradient(120% 180% at 0% 0%,rgba(30,123,255,.16),transparent 60%),
    var(--sunk)}
.acceso-precio .eyebrow{margin-bottom:8px}
.acceso-cifra{display:flex;align-items:center;gap:9px;
  font-family:"Orbitron",sans-serif;font-weight:700;color:var(--accent);
  font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.01em;margin-bottom:5px}
.acceso-cifra small{font-family:"Rajdhani",sans-serif;font-size:var(--t-md);
  color:var(--ink-2);font-weight:600;letter-spacing:.04em;align-self:flex-end;
  padding-bottom:.35em}
.acceso-cifra .ico{filter:drop-shadow(0 0 8px var(--spark))}
.acceso-alta{background:var(--sunk)}
.card.acceso .privacy{margin-top:16px}
.card.acceso .field:first-of-type{margin-top:2px}

/* ---- el cuerpo de la portada ---- */
.portada .wrap.portada-abajo{display:grid;gap:clamp(38px,5vw,64px);
  padding-top:clamp(38px,5vw,60px);padding-bottom:70px}

/* Rotulo numerado de seccion. Con cinco bloques largos seguidos, un titulo
   suelto no dice por donde vas; el numero si, y ademas da el orden de lectura
   sin tener que escribirlo. */
.sec-eti{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.sec-num{font-family:"Orbitron",sans-serif;font-weight:700;font-size:var(--t-sm);
  color:var(--accent);border:1px solid var(--line);border-radius:2px;
  padding:5px 8px;line-height:1;flex:none;background:var(--sunk)}
.sec-eti h2{font-family:"Orbitron",sans-serif;font-size:var(--t-xl);font-weight:700;
  text-transform:none;letter-spacing:.01em;color:var(--ink);margin:0;border:0;padding:0}
.sec-eti p{margin:6px 0 0;font-size:var(--t-sm);max-width:72ch}

/* Los tres pasos. Numero grande y fantasma detras: se ve que hay un orden de un
   vistazo, sin leer una palabra. */
.pasos3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.paso3{position:relative;padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.paso3-num{font-family:"Orbitron",sans-serif;font-weight:800;font-size:56px;
  line-height:1;color:var(--accent);opacity:.16;position:absolute;top:8px;right:14px;
  pointer-events:none}
.paso3-ico{position:relative;display:block;margin-bottom:10px}
.paso3 h3{font-size:var(--t-md);margin-bottom:6px;position:relative}
.paso3 p{font-size:var(--t-sm);margin:0;position:relative}

/* La muestra de la salida. Es una maqueta, no una captura, y la etiqueta de la
   barra lo dice: sin ella serian numeros inventados presentados como reales,
   que es justo lo que la herramienta promete no hacer. */
.vistazo{border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--ground))}
.vistazo-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 20px;background:var(--sunk);border-bottom:1px solid var(--line)}
.vistazo-tit{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2)}
.vistazo-eti{margin-left:auto;font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--warn);
  border:1px solid var(--warn);background:var(--warn-bg);border-radius:2px;padding:3px 8px}
.vistazo-cuerpo{display:grid;gap:26px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  padding:22px 20px}
@media (max-width:760px){.vistazo-cuerpo{grid-template-columns:1fr;gap:20px}}
.vistazo-cifra{font-family:"Orbitron",sans-serif;font-weight:700;font-size:var(--t-2xl);
  color:var(--ink);line-height:1.15;margin-top:7px}
.vistazo-cifra b{color:var(--accent)}
.vistazo-principal p{font-size:var(--t-sm);max-width:48ch}
.vistazo-principal b{color:var(--ink)}
.vistazo-lista{display:flex;flex-direction:column;gap:13px;justify-content:center}
.vistazo-fila{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:var(--t-sm)}
.vistazo-fila > span:first-child{display:flex;align-items:center;gap:7px}
.vistazo-fila .dim{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs)}
.v-bar{grid-column:1/-1;display:block;height:5px;background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:2px;overflow:hidden}
.v-bar i{display:block;height:100%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.vistazo-pie{padding:13px 20px;border-top:1px solid var(--line-soft);background:var(--sunk);
  font-size:var(--t-sm);color:var(--ink-3)}

/* Los grupos de pantallas: la cuenta a la derecha del titulo, y los nombres en
   pastillas. Con doce nombres unidos por «·» sale una frase rota, y lo que uno
   hace ahi es buscar una palabra, no leer. */
.grupo-cab{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.grupo-cab h3{margin:0;flex:1}
.grupo-cuenta{font-family:"Orbitron",sans-serif;font-weight:700;font-size:var(--t-xs);
  color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:2px 7px;flex:none}
.grupo-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.grupo-chips span{font-family:"Rajdhani",sans-serif;font-weight:600;font-size:var(--t-xs);
  letter-spacing:.05em;color:var(--ink-2);background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:2px;padding:3px 8px}

/* Lo que no hace, en rejilla. Cuatro viñetas seguidas se saltan; cuatro titulos
   con su frase, no. */
/* Dos columnas fijas, que son exactamente cuatro celdas en dos filas. Con
   auto-fit salian tres y una, y la ultima fila dejaba dos huecos del color de
   la linea divisoria: un bloque gris a media pagina. */
/* --- el veredicto: la respuesta antes que la explicacion ------------------- */
.veredicto{margin:14px 0 16px;padding:15px 17px;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent)}
.veredicto.vd-aviso{border-color:color-mix(in srgb, var(--warn) 50%, transparent);
  background:color-mix(in srgb, var(--warn) 9%, transparent)}
.vd-frase{margin:0;font-size:var(--t-lg);line-height:1.5}
.vd-datos{display:grid;gap:12px 22px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.vd-cifra{font-family:"Orbitron",sans-serif;font-size:var(--t-xl);line-height:1.15;
  font-weight:700;color:var(--accent-2)}
.vd-dato .dim{font-size:var(--t-xs);line-height:1.35;margin-top:2px}
.vd-nota{margin:13px 0 0;font-size:var(--t-sm);line-height:1.5;
  padding-top:11px;border-top:1px solid var(--line)}
/* --- la portada que vende: problema, objeciones y cierre ------------------- */
/* Las tarjetas del problema llevan el filo rojo A LA IZQUIERDA y no un fondo
   entero: cuatro paneles rojos seguidos se leen como cuatro errores de la
   aplicacion, que es exactamente lo contrario de lo que dicen. */
.problema{border-left:2px solid color-mix(in srgb, var(--bad) 55%, transparent)}
.problema h3{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:var(--t-lg)}
.problema p{margin:0;line-height:1.55}
.problema-donde{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;font-size:var(--t-sm);
  border-top:1px solid var(--line)}
.problema-donde .dim{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em}
.problema-donde b{color:var(--accent-2)}

/* Las preguntas van ABIERTAS, no en acordeon. Un acordeon aqui esconde detras de
   un clic justo lo que frena la decision —la contraseña, el baneo, el dinero—, y
   quien duda no abre seis cajas: se va. Son seis parrafos cortos, caben. */
.faq{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.faq-item{padding:15px 17px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface)}
.faq-item h3{margin:0 0 7px;font-size:var(--t-md);color:var(--ink)}
.faq-item p{margin:0;line-height:1.55;font-size:var(--t-sm)}

.cierre{text-align:center;padding:34px 20px;margin-top:8px;border-radius:16px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:radial-gradient(120% 140% at 50% 0%,
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%)}
.cierre h2{margin:0 0 10px;font-size:var(--t-2xl);line-height:1.25}
.cierre p{margin:0 auto;max-width:62ch;line-height:1.6}
.cierre-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
@media (max-width:560px){
  .cierre{padding:26px 16px}
  .cierre-botones .btn{width:100%;justify-content:center}
}
.limites{display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--line-soft)}
@media (max-width:640px){.limites{grid-template-columns:1fr}}
.limites > div{background:var(--surface);padding:20px 22px}
/* El titulo lleva el icono DENTRO, no un guion en un ::before: un guion
   generado por CSS no lo lee un lector de pantalla y tampoco dice nada. */
.limites h3{display:flex;align-items:center;gap:9px;font-size:var(--t-md);
  color:var(--ink);margin-bottom:6px}
.limites p{font-size:var(--t-sm);margin:0;max-width:52ch}

.portada-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:20px;border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--ink-3)}
.portada-pie a{margin-left:auto}

.gate-mark{display:flex;align-items:center;gap:13px;margin-bottom:16px}
/* El logo tiene su propio brillo, del color de la marca. Va en el filtro y no
   en un box-shadow porque un SVG con partes transparentes proyectaria la sombra
   de su caja, no la de la X. */
.logo{flex:none;filter:drop-shadow(0 0 10px rgba(30,123,255,.4))}
/* La mitad del nombre que es la marca del juego, en el azul de la marca: es el
   mismo corte que hace el logo, donde XNOVA lleva el color y ADVISOR la plata. */
.marca-x{color:var(--accent)}
.topbar-marca{display:inline-flex;align-items:center;padding:2px;border-radius:3px;
  text-decoration:none;transition:.15s}
.topbar-marca:hover{filter:brightness(1.25)}
.topbar-marca:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.gate h1{font-size:var(--t-2xl);line-height:1}
.gate .sub{color:var(--ink-2);font-size:var(--t-md);margin:6px 0 24px}
.field{margin-bottom:15px}
.privacy{margin-top:22px;padding:14px 16px;background:var(--sunk);border:1px solid var(--line-soft);
  border-left:2px solid var(--good);border-radius:2px;font-size:var(--t-sm);color:var(--ink-2)}
.privacy b{color:var(--ink)}
.err{margin-top:14px;padding:11px 14px;background:var(--bad-bg);color:var(--bad);
  border:1px solid var(--bad);border-radius:2px;font-size:var(--t-sm)}

/* Una fila que se puede abrir tiene que parecerlo antes de pulsarla: sin esto
   la unica pista es el cursor, que en un movil no existe. */
tr.fila-pulsable{cursor:pointer}
tr.fila-pulsable:hover td{background:var(--raise)}
tr.fila-pulsable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---- barra de sesion ---- */
/* La barra sigue el mismo margen que el contenido: si no, los bordes de la
   pagina no coinciden y se nota. */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px clamp(16px,2.2vw,44px);background:rgba(7,13,26,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);font-size:var(--t-sm)}
:root[data-theme="light"] .topbar{background:rgba(241,244,250,.94)}
/* Los recursos en la barra: se leen de un vistazo y no roban sitio.
   Tabulares para que los numeros no bailen al cambiar de tamaño, que en una
   barra que se actualiza sola marea mas que informa. */
.hud{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.hud-res{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;
  border:1px solid var(--line-soft);background:var(--sunk);
  font-size:var(--t-xs);white-space:nowrap;cursor:default}
.hud-res b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink)}
/* Por encima del 85% lo que produces empieza a perderse: es lo unico de esta
   barra que pide hacer algo, asi que es lo unico que cambia de color. */
.hud-lleno{border-color:color-mix(in srgb, var(--warn) 55%, transparent)}
.hud-lleno b{color:var(--warn)}
.hud-falta{border-color:color-mix(in srgb, var(--bad) 60%, transparent)}
.hud-falta b{color:var(--bad)}
.topbar .grow{flex:1}
.topbar .btn{padding:7px 14px}
.livedot{display:inline-flex;align-items:center;gap:8px;font-family:"Rajdhani",sans-serif;
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--good)}
.livedot i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;
  box-shadow:0 0 8px currentColor}

/* En un movil la barra envolvia a dos filas y se comia 185 px de 812 —el 23%
   de la pantalla— para enseñar, entre otras cosas, tu propio correo. Se queda
   en una fila: el correo fuera (ya sabes quien eres) y los botones en su
   inicial, que con tres seguidos no hay donde confundirse. */
@media (max-width:660px){
  .topbar{flex-wrap:nowrap;gap:8px;padding:8px 14px}
  .wrap{padding-left:14px;padding-right:14px}
  .topbar .dim.mono{display:none}
  .topbar .btn{padding:7px 10px}
  .topbar .btn .larga{display:none}
  .livedot{font-size:9px;letter-spacing:.1em}
  .planet-pick .eyebrow{display:none}
  .planet-pick select{padding:6px 8px;font-size:var(--t-xs)}
}
@media (prefers-reduced-motion:no-preference){
  .livedot i{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.22}}
}

/* ---- filtros ---- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filtros .btn{padding:7px 13px;font-size:var(--t-xs)}
.umbral{display:flex;align-items:center;gap:9px;padding:5px 12px;background:var(--sunk);
  border:1px solid var(--line);border-radius:2px}
.umbral input[type=range]{width:110px;padding:0;background:none;border:0;accent-color:var(--accent)}
.umbral b{font-size:var(--t-sm);min-width:34px;text-align:right}

/* ---- planificador ---- */
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper .btn{padding:4px 10px;font-size:var(--t-sm);min-width:32px;justify-content:center}
.stepper-val{min-width:34px;text-align:center;font-size:var(--t-sm);color:var(--ink-2)}
tr.fila-plan td{background:rgba(30,123,255,.10)}
tr.fila-plan td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.btn[aria-current="true"]{border-color:var(--accent);color:var(--ink);background:var(--sunk)}

/* ---- selector de planeta ---- */
.planet-pick{display:flex;align-items:center;gap:8px}
.planet-pick select{width:auto;min-width:170px;padding:6px 10px;font-size:var(--t-sm)}
.planet-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.planet-card{display:flex;flex-direction:column;gap:5px;text-align:left;padding:15px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;cursor:pointer;
  transition:.15s;font-family:inherit;color:inherit}
.planet-card:hover{border-color:var(--accent);background:var(--raise)}
.planet-card.activo{border-color:var(--accent);background:var(--raise);
  box-shadow:inset 3px 0 0 var(--accent)}
.planet-card:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.pc-name{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:var(--t-md);
  display:flex;align-items:center;gap:7px}
.pc-coords{font-size:var(--t-xs);color:var(--ink-3)}
.pc-row{display:flex;gap:8px;align-items:baseline;justify-content:space-between;
  font-size:var(--t-sm);margin-top:2px}
.pc-row b{font-size:var(--t-lg)}

/* ---- lista de bloqueos ---- */
.frenos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.frenos li{display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.frenos li:last-child{border-bottom:0}
.frenos .btn{padding:6px 14px;flex:none}

/* ---- graficas ---- */
.chart{margin-top:8px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2);
  margin-top:10px;align-items:center}
.chart-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:7px;
  vertical-align:middle}
.chart-legend b{color:var(--ink);font-weight:500}

.barlist{display:grid;gap:9px}
.barlist-row{display:grid;grid-template-columns:150px 1fr 74px;gap:12px;align-items:center}
.barlist-label{font-size:var(--t-sm);color:var(--ink-2);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.barlist-val{font-size:var(--t-sm);text-align:right}
@media (max-width:660px){.barlist-row{grid-template-columns:104px 1fr 62px}}

.gauge{display:flex;flex-direction:column;align-items:center;gap:7px}
.gauge-label{font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);text-align:center}

/* ---- fichas de indicador ---- */
/* Las claves del entorno de los crons: una pastilla por variable, con un punto
   que dice si esta puesta. El valor de un secreto NUNCA se pinta —de eso se
   encarga el servidor, que manda null— y aqui solo se ven cuatro puntos. */
.claves{display:flex;flex-wrap:wrap;gap:6px}
.clave{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  background:var(--sunk);border:1px solid var(--line-soft);border-radius:2px;
  font-size:var(--t-xs)}
.clave::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.clave.hay::before{background:var(--good);box-shadow:0 0 6px var(--good)}
.clave.falta::before{background:var(--warn)}
.clave b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink-2)}
.clave i{font-style:normal;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.clave.falta i{color:var(--warn)}

/* El log, tal cual lo escribio el cron. Se desplaza en su propia caja: una
   linea de traza de node mide 200 caracteres y sin esto empuja la pagina. */
.log{margin:0;padding:11px 13px;background:var(--void);border:1px solid var(--line-soft);
  border-radius:2px;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xs);
  color:var(--ink-2);line-height:1.6;overflow-x:auto;white-space:pre;max-height:280px;
  overflow-y:auto}
/* ---- movimiento ----
   TODO LO DE AQUI ABAJO VA DENTRO DE 'prefers-reduced-motion: no-preference'.
   No es un detalle de cortesia: a quien marca esa preferencia en su sistema, el
   movimiento le produce mareo o dolor de cabeza de verdad, y esta herramienta ya
   la respetaba en el pulso del punto de estado y en el desplazamiento suave.

   Y hay una segunda regla, esta de criterio: NADA SE MUEVE MIENTRAS SE LEE UN
   DATO. Las cifras, las tablas y las barras ya pintadas se quedan quietas. Esto
   es una consola donde se toman decisiones con numeros, y algo que se mueve al
   lado de una cifra hace que la cifra se lea peor. Lo que se anima es la ENTRADA
   —una vez, y se acabo— y lo que el raton toca a proposito. */

/* La entrada de un panel: sube dos pixeles y aparece. Dura poco a proposito;
   por encima de ~250 ms deja de sentirse como respuesta y empieza a sentirse
   como espera. */
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* El barrido de HUD: una linea de luz que cruza el borde superior una vez. Es
   el gesto de la marca —el mismo filo que lleva la portada— puesto en
   movimiento. */
@keyframes barrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* El latido del logo: apenas un 8% de brillo. Si se nota, esta mal. */
@keyframes latido{0%,100%{filter:drop-shadow(0 0 10px rgba(30,123,255,.4))}
  50%{filter:drop-shadow(0 0 16px rgba(30,123,255,.62))}}

/* La estela de una nave, para cuando el raton se para encima. */
@keyframes empuje{0%{opacity:0;transform:translateY(3px) scaleY(.6)}
  40%{opacity:.9}100%{opacity:0;transform:translateY(9px) scaleY(1.3)}}

@media (prefers-reduced-motion:no-preference){
  /* Los bloques de la portada entran al cargar, escalonados. El escalonado se
     corta en el sexto: mas alla, lo que era ritmo se convierte en que la ultima
     tarjeta tarda un segundo en aparecer y parece que la pagina va lenta. */
  .portada .card,.portada .paso3,.portada .vistazo,.portada .limites{
    animation:entra .34s cubic-bezier(.2,.7,.3,1) both}
  .portada .paso3:nth-child(2){animation-delay:.07s}
  .portada .paso3:nth-child(3){animation-delay:.14s}
  .portada .grid > .card:nth-child(2){animation-delay:.06s}
  .portada .grid > .card:nth-child(3){animation-delay:.12s}
  .portada .grid > .card:nth-child(4){animation-delay:.18s}

  /* El barrido cruza el filo superior del panel de muestra, una vez.
     NO va en '.card': ahi el '::before' ya son los corchetes de HUD de las
     esquinas, que son la firma visual de esta interfaz. Ponerlo encima los
     borraba en toda la portada — un efecto nuevo a cambio de perder el que ya
     identificaba la herramienta. */
  .vistazo{position:relative}
  .vistazo::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
    background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
    animation:barrido 1.6s ease-out .35s both;pointer-events:none}

  .logo{animation:latido 4.5s ease-in-out infinite}

  /* Al pasar por encima de una tarjeta: el borde se enciende y sube un pelo. La
     transicion tiene que estar FUERA del media query para que el hover siga
     siendo instantaneo para quien pide menos movimiento. */
  .portada .card:hover,.paso3:hover{transform:translateY(-2px)}

  /* Las barras de la muestra crecen desde cero al entrar. Son de ejemplo, no un
     dato de nadie: aqui el movimiento no estorba a ninguna lectura. */
  .v-bar i{animation:crece .9s cubic-bezier(.2,.7,.3,1) .35s both}
  @keyframes crece{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* La nave despega un poco cuando el raton se para encima. */
  .ico-juego{transition:transform .18s ease}
  a:hover > .ico-juego,button:hover > .ico-juego,tr:hover .ico-juego{transform:translateY(-1.5px)}
}

/* Fuera del media query: el hover y el foco responden SIEMPRE, con o sin
   movimiento reducido. Quitarle a alguien la respuesta al raton no es respetar
   una preferencia, es dejarle una interfaz muerta. */
.portada .card,.paso3{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.portada .card:hover,.paso3:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--glow),0 6px 24px -12px var(--accent)}
.v-bar i{transform-origin:left center}

/* ---- modales ---- */
/* El elemento <dialog> trae por defecto un margen automatico que lo centra y un
   borde de sistema; se limpia todo y se centra a mano con flex, que ademas
   permite que el panel no pase del alto de la ventana. */
.modal{border:0;padding:0;background:none;max-width:none;max-height:none;
  width:100%;height:100%;overflow:hidden}
.modal::backdrop{background:rgba(2,5,12,.72);backdrop-filter:blur(3px)}
:root[data-theme="light"] .modal::backdrop{background:rgba(20,32,54,.45)}
.modal:not([open]){display:none}
.modal[open]{display:flex;align-items:center;justify-content:center;padding:20px}

/* El panel. Igual que una tarjeta —mismos corchetes de HUD, mismo borde— porque
   es la misma interfaz: un modal que parece de otra aplicacion es un modal que
   parece un anuncio. */
.modal-panel{position:relative;display:flex;flex-direction:column;
  width:100%;max-width:560px;max-height:min(80vh,720px);
  background:linear-gradient(180deg,var(--surface),var(--ground));
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.7),0 0 0 1px var(--glow)}
.modal-ancho .modal-panel{max-width:840px}
/* LA FICHA DE UN JUGADOR ES UN EXPEDIENTE, no un aviso: siete bloques que en una
   columna de 840 px salen en vertical y obligan a un scroll largo con media
   pantalla vacia a los lados. Con mas ancho y dos columnas cabe casi entero. */
.modal-ficha .modal-panel{max-width:1120px;max-height:min(88vh,900px)}
/* Una fila de etiquetas que ocupan lo suyo y bajan de linea si no caben. */
.fila-etiquetas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}

/* La tabla de planetas de la ficha. Nada de partir palabras: en dos columnas
   estrechas «sin espiar» salia como «sin / espiar» y «2.2 h» como «2.2 / h»,
   y una fila de dos lineas por una palabra rota parece un fallo. Solo el
   nombre del planeta puede partirse —lo pone quien juega y puede ser
   cualquier cosa—; si no cabe, la tabla desliza en horizontal. */
.tabla-planetas td,.tabla-planetas th{white-space:nowrap}
.tabla-planetas td:first-child{white-space:normal;min-width:7em}
.ficha-cols{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.ficha-cols{grid-template-columns:1fr 1fr}}
/* Los bloques de la ficha van pegados: es un expediente, no una lista de
   tarjetas sueltas, y cada separacion de mas es scroll. */
.ficha h4{margin:16px 0 6px;font-size:var(--t-sm);text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-3)}
.ficha h4:first-child{margin-top:0}
.ficha .kpis{gap:8px}
.ficha .kpi{padding:10px 12px}
.ficha table{font-size:var(--t-sm)}
/* Las tres tarjetas del informe de espionaje, en fila: apiladas eran 222 px de
   un modal que no llega a 750. */
.ficha .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.modal-panel::before,.modal-panel::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none}
.modal-panel::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.modal-panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}

/* La cabecera NO se desplaza con el contenido: con una lista de doce pantallas,
   perder el titulo al bajar es perder de que iba lo que estas leyendo. */
.modal-cab{display:flex;align-items:flex-start;gap:14px;flex:none;
  padding:18px 20px 14px;border-bottom:1px solid var(--line-soft)}
.modal-cab h3{margin:0}
.modal-cab p{margin:5px 0 0;font-size:var(--t-sm)}
.modal-x{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin-left:auto;padding:0;background:var(--sunk);
  border:1px solid var(--line);border-radius:3px;color:var(--ink-3);cursor:pointer;
  transition:.15s}
.modal-x:hover{color:var(--ink);border-color:var(--accent)}
.modal-x:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* El cuerpo se desplaza solo. 'overscroll-behavior' evita que al llegar al final
   con la rueda siga desplazandose la pagina de detras, que es lo que hace que un
   modal se sienta barato. */
.modal-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}

@media (max-width:560px){
  .modal[open]{padding:0;align-items:flex-end}
  .modal-panel{max-width:none;max-height:88vh;border-radius:3px 3px 0 0}
}

@media (prefers-reduced-motion:no-preference){
  .modal[open] .modal-panel{animation:modal-entra .2s cubic-bezier(.2,.7,.3,1)}
  @keyframes modal-entra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  @media (max-width:560px){
    /* SUBE DESDE ABAJO, PERO POCO, y no es una decision estetica.
       El primer intento arrancaba en 'translateY(100%)', o sea con el panel
       ENTERO fuera de la pantalla. Se vio congelado en ese fotograma en un
       navegador que no estaba componiendo —la animacion figuraba como 'running'
       con currentTime 0— y el resultado era un modal abierto, con el fondo
       oscuro puesto, y el panel 616 px por debajo del borde: imposible de leer y
       de cerrar salvo por Escape.
       Puede pasar de verdad: una pestaña en segundo plano, un movil ahorrando
       bateria, un motor que decide no animar. Con 18 px, si la animacion no
       arranca el panel esta a 18 px de su sitio y se usa igual. */
    .modal[open] .modal-panel{animation:modal-sube .24s cubic-bezier(.2,.7,.3,1)}
    @keyframes modal-sube{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
  }
}

/* El boton que abre un modal desde una tarjeta: parece el resumen de un
   desplegable para no cambiar lo que la gente ya reconoce, pero lleva la flecha
   de "se abre algo" en vez del triangulo de "se despliega". */
.abre-modal{display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 17px;margin-top:12px;
  background:var(--sunk);border:1px solid var(--line-soft);
  border-left:2px solid var(--accent);border-radius:2px;
  font-family:"Rajdhani",sans-serif;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.04em;color:var(--ink-3);text-align:left;cursor:pointer;transition:.15s}
.abre-modal:hover{color:var(--ink-2);border-color:var(--accent)}
.abre-modal:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.abre-modal .flecha{margin-left:auto;color:var(--accent);transition:transform .15s ease}

/* LA TARJETA ENTERA SE PULSA. El area sensible del boton se estira hasta cubrir
   la tarjeta con un ::after transparente. El boton sigue siendo un boton —foco,
   teclado y anuncio incluidos— y no hace falta ni un tabindex a mano.
   La alternativa evidente, el onclick en el div, obliga a poner tabindex, role y
   el manejo de Enter y Espacio a mano, y a mantenerlos para siempre. */
.grupo-card{position:relative;cursor:pointer}
/* EL SELECTOR LLEVA .grupo-card DELANTE, Y NO ES ADORNO.
   La primera version decia .abre-modal::after a secas, y eso se lo aplicaba
   TAMBIEN a los botones de los textos legales. Esos no viven dentro de nada
   posicionado, asi que su 'inset:0' no se anclaba a ningun contenedor: se
   anclaba al documento. Resultado, dos capas invisibles del tamaño de la pagina
   por encima de todo — y el boton de «Iniciar sesion» dejaba de funcionar,
   porque el clic se lo llevaba el ultimo de los dos y abria la politica de
   privacidad. Un boton que estira su area sensible tiene que decir hasta donde. */
.grupo-card .abre-modal::after{content:"";position:absolute;inset:0;border-radius:3px}
.grupo-card:hover .abre-modal{color:var(--ink-2);border-color:var(--accent)}
.grupo-card:hover .abre-modal .flecha{transform:translateX(2px)}
/* El foco se dibuja sobre la TARJETA y no sobre la linea de abajo: si lo que
   responde es la tarjeta, el recuadro tiene que decir eso mismo. */
.grupo-card .abre-modal:focus-visible{outline:none}
.grupo-card:has(.abre-modal:focus-visible){outline:2px solid var(--accent-2);outline-offset:3px}

/* Lo legal en la portada: las cuatro frases que cambian una decision, visibles
   sin abrir nada. Llevan las palabras por las que alguien buscaria —contraseña,
   datos, cobro, afiliada— porque con el modal cerrado Ctrl+F no alcanza lo de
   dentro, y esa es la unica pega de haberlo movido ahi. */
/* Dos columnas fijas, que con cuatro frases son dos filas exactas. Con auto-fit
   salian tres y una, y la celda vacia de la ultima fila se ve como un hueco
   donde deberia haber algo. Es el mismo caso que «Lo que no hace». */
.legal-clave{display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--line-soft);border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media (max-width:620px){.legal-clave{grid-template-columns:1fr}}
.legal-clave > div{display:flex;flex-direction:column;gap:4px;
  background:var(--surface);padding:15px 17px}
.legal-clave b{font-family:"Rajdhani",sans-serif;font-size:var(--t-md);
  letter-spacing:.02em;color:var(--ink)}
.legal-clave .dim{font-size:var(--t-sm);line-height:1.5}
.legal-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.legal-botones .abre-modal{width:auto;flex:1 1 240px;margin-top:0}

/* El texto legal dentro del modal: mas estrecho que el panel a proposito. Una
   linea de 110 caracteres no se lee, se recorre con la vista y se pierde el
   renglon; el panel es ancho para que quepan los apartados, no para estirar los
   parrafos. */
.legal-texto h4{margin:18px 0 5px;font-size:var(--t-md)}
.legal-texto h4:first-child{margin-top:0}
.legal-texto p,.legal-texto li{max-width:74ch;font-size:var(--t-sm);line-height:1.6}
.legal-texto ul{margin:6px 0;padding-left:20px}

/* La lista de pantallas dentro del modal. Cada una en su fila con separador:
   con doce seguidas, sin la linea no se sabe donde acaba una descripcion y
   empieza el nombre siguiente. */
/* EN COLUMNAS SI HAY SITIO, EN UNA SOLA SI NO.
   Con doce pantallas en una columna hay que desplazarse para verlas, y entonces
   el modal deja de ser «una vista completa» —que es lo unico que justifica tapar
   la pagina— y vuelve a ser una lista que hay que recorrer. Un auto-fit con un
   minimo de 230 px reparte solo: tres columnas en un panel ancho, dos en tablet,
   una en el movil. Nadie decide un numero de columnas; lo decide el sitio. */
.lista-pantallas{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  column-gap:26px}
.lista-pantallas li{display:flex;flex-direction:column;gap:2px;
  padding:11px 0;border-bottom:1px solid var(--line-soft)}
.lista-pantallas li:last-child{border-bottom:0}
.lista-pantallas b{font-family:"Rajdhani",sans-serif;font-size:var(--t-md);letter-spacing:.02em}
.lista-pantallas .dim{font-size:var(--t-sm)}
.abre-modal:hover .flecha{transform:translateX(2px)}

/* ---- que se mueve en el mercado ---- */
.mo-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.mo-cab h3{margin:0;flex:1}

/* Los contadores. Cifra grande, etiqueta debajo y SIEMPRE un pie que dice de
   que sale: un numero suelto en una pantalla de mercado es una invitacion a
   equivocarse de decision. */
.mo-contadores{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin:14px 0}
.mo-contador{display:flex;align-items:flex-start;gap:11px;padding:15px 17px;
  background:var(--sunk);border:1px solid var(--line-soft);border-radius:3px}
.mo-contador > .ico{margin-top:3px;filter:drop-shadow(0 0 6px currentColor)}
.mo-cifra{font-family:"Orbitron",sans-serif;font-weight:700;font-size:var(--t-xl);
  color:var(--ink);line-height:1.15;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.mo-contador .dim{font-size:var(--t-sm);margin-top:2px}
.mo-pie{font-size:var(--t-xs);color:var(--ink-3);margin-top:5px;line-height:1.45}

/* El reparto, como barra dentro de la celda. Ocupa poco y dice de un vistazo si
   el mercado lo mueve uno solo o esta repartido. */
.mo-barra{display:inline-block;width:56px;height:6px;vertical-align:middle;margin-right:7px;
  background:var(--sunk);border:1px solid var(--line-soft);border-radius:2px;overflow:hidden}
.mo-barra i{display:block;height:100%;background:var(--accent);box-shadow:0 0 6px var(--accent)}

/* Las filas de poca muestra se atenuan. No se esconden: siguen siendo datos, y
   esconder lo que no encaja es peor que enseñarlo con su aviso. */
.mo-flojo{opacity:.62}
.mo-flojo .pill{margin-left:6px}

/* ---- iconos ---- */
/* El tamaño y la alineacion los pone la regla svg.ico de mas arriba, con la
   tipografica: un icono crece con el texto que acompaña. Aqui solo lo que falta. */
.ico{display:inline-block}

/* Nombre con icono delante, en las tablas.
   El hueco se reserva IGUAL cuando el codigo no tiene dibujo: el catalogo del
   juego trae cosas que aqui pueden no estar dibujadas todavia, y una tabla donde
   tres filas llevan icono y una no sale con los nombres desalineados — queda
   peor que no poner ninguno. */
.con-ico{display:inline-flex;align-items:center;gap:8px}
/* Un pelin mas grandes que la letra: heredando 1em exacto, dentro de una tabla
   de 13 px el dibujo se queda en nada. El hueco crece igual, que es lo que
   mantiene la columna alineada. */
.con-ico > .ico,.con-ico > .ico-hueco{width:1.18em;height:1.18em;flex:none}
.ico-hueco{display:inline-block}
.ico-juego{opacity:.85}
tr:hover .ico-juego{opacity:1}

/* Solo para lectores de pantalla. El texto sigue en el marcado y se puede
   buscar con Ctrl+F; simplemente no ocupa sitio. Con clip-path en vez del viejo
   truco del alto de 1px porque no rompe la lectura por palabras. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* La moneda y su cifra, pegadas: son una sola cosa y no se parten al final de
   una linea. */
.tung{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.tung .ico{align-self:center}
.tung-suf{color:var(--ink-3);font-size:.85em}

.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{background:var(--sunk);border:1px solid var(--line-soft);border-radius:3px;padding:15px 17px}
.kpi-k{display:block;font-family:"Rajdhani",sans-serif;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3)}
.kpi-v{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--t-xl);
  font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:-.02em}
.kpi-s{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:2px}

/* ---- lista de primeros pasos ---- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.checklist li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.checklist li:last-child{border-bottom:0}
.checklist .mark{width:20px;height:20px;border:1px solid var(--line);border-radius:2px;
  display:grid;place-items:center;font-size:12px;color:var(--good);margin-top:2px}
.checklist li.hecho .mark{border-color:var(--good);background:var(--good-bg)}
.checklist li.hecho>div>b{color:var(--ink-3);text-decoration:line-through}

/* ---- pestanas ---- */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;font-size:var(--t-sm);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);
  background:linear-gradient(180deg,transparent,rgba(30,123,255,.10))}
.tab:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
[hidden]{display:none!important}
section[data-page]{scroll-margin-top:120px}

/* ---- adaptacion a pantallas ----
   Escritorio ancho: rejilla de 3 columnas y escalera con etiquetas largas.
   Portatil: 2 columnas.
   Tableta: 1 columna, tablas con desplazamiento lateral propio.
   Movil: tipografia menor, cabecera apilada y fichas de estado en rejilla. */

@media (max-width:1180px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .rung,.scale{grid-template-columns:180px 1fr 84px}
}

@media (max-width:900px){
  :root{--t-4xl:42px; --t-3xl:32px; --t-2xl:24px; --t-xl:20px}
  .wrap{padding:20px 16px 60px}
  .grid{grid-template-columns:1fr}
  .hero-row{gap:22px}
  .rung,.scale{grid-template-columns:150px 1fr 74px}
  .step{grid-template-columns:88px 1fr;gap:14px}
}

@media (max-width:660px){
  :root{--t-xs:11px; --t-sm:12px; --t-md:14px; --t-lg:16px;
        --t-xl:19px; --t-2xl:22px; --t-3xl:27px; --t-4xl:34px}
  .wrap{padding:16px 12px 52px}
  h2{letter-spacing:.14em}
  .big small{margin-left:5px}
  .hero,.card{padding:16px 14px}
  .hero-row{gap:16px}

  /* Cabecera apilada y fichas de estado repartidas, no en una fila que rebosa. */
  .top{flex-direction:column;align-items:stretch;gap:14px}
  .topstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
  .stat{min-width:0;padding:6px 10px}
  .stat-v{font-size:var(--t-sm)}

  /* La escalera pasa a dos lineas: etiqueta arriba, barra y valor debajo. */
  .rung{grid-template-columns:1fr auto;grid-template-areas:"lbl lbl" "bar val";gap:6px 10px;
    padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
  .rung-label{grid-area:lbl;text-align:left;white-space:normal;color:var(--ink)}
  .track{grid-area:bar}
  .rung-val{grid-area:val}
  .scale{display:none}

  /* Las tablas se desplazan solas y la primera columna se queda fija. */
  .scroll{margin:0 -14px;padding:0 14px;-webkit-overflow-scrolling:touch}
  th,td{padding-right:12px}
  .step{grid-template-columns:1fr;gap:4px}
  .step-when{padding-top:0}
  .note{padding:11px 13px}
  .legend{gap:12px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:10px 14px;white-space:nowrap}
  .btn{padding:8px 13px}
}

@media (max-width:400px){
  :root{--t-4xl:29px; --t-3xl:24px}
  .topstats{grid-template-columns:repeat(2,1fr)}
  .hero-row>div{min-width:0}
}

/* En pantallas tactiles los objetivos de pulsacion necesitan mas alto. */
@media (pointer:coarse){
  .btn,.tab{min-height:42px}
  td{padding-top:11px;padding-bottom:11px}
  input,select{padding:12px 13px;font-size:16px}  /* 16px fijo: evita el zoom de iOS */
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- carga ----
   La guia marca "Loading States" como severidad alta: un texto plano no dice
   que va a aparecer. El esqueleto reserva el sitio y evita el salto de layout. */
.skeleton{display:grid;gap:14px}
/* 'display:block' y no solo dentro de '.skeleton': ahi los hijos son celdas de
   una rejilla y se comportan como bloques por su cuenta, pero un '.sk-line'
   suelto en cualquier otro sitio es un span en linea, ignora el alto y el ancho
   y no se ve nada. Paso justo eso en la caja del precio. */
.sk-line{display:block;height:12px;border-radius:2px;background:linear-gradient(90deg,
  var(--sunk),var(--raise),var(--sunk));background-size:220% 100%}
.sk-block{display:block;height:104px;border-radius:3px;border:1px solid var(--line);
  background:linear-gradient(90deg,var(--sunk),var(--raise),var(--sunk));background-size:220% 100%}
@media (prefers-reduced-motion:no-preference){
  .sk-line,.sk-block{animation:shimmer 1.5s ease-in-out infinite}
  @keyframes shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
}

/* ---- la barra en el movil, AL FINAL del fichero a proposito --------------

   DOS COSAS QUE APRENDI PELEANDOME CON ESTO.

   Va al final porque en CSS gana la ultima regla con la misma especificidad, y
   la del selector de planeta se define setenta lineas mas abajo del sitio donde
   habia puesto esto: mi min-width no se aplicaba y yo miraba el media query sin
   entender por que.

   Y va a 660 px, el mismo corte que el bloque de arriba, porque ese bloque ya
   habia decidido algo que yo estaba deshaciendo sin darme cuenta: en un movil la
   barra se queda en UNA fila. Al meter los cuatro recursos, con nowrap la barra
   no podia envolver, se desbordaba 558 px a la derecha y el hueco estrujado del
   HUD apilaba sus chips en CUATRO filas — que es lo que se veia en el telefono.

   La solucion es la que ya usa el resto del proyecto para lo que no cabe: que se
   desplace en horizontal, como la navegacion y las pestañas. */
@media (max-width:660px){
  /* El HUD coge el hueco que sobra y se desplaza si no caben los cuatro, en vez
     de empujar la barra o apilarse. */
  .hud{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;gap:5px}
  .hud::-webkit-scrollbar{display:none}
  .hud-res{flex:0 0 auto;padding:2px 6px;gap:4px}
  /* En una linea: partido en dos ocupa el doble de alto y no se lee mejor. */
  .livedot{white-space:nowrap}
  /* La antiguedad, fuera. El color del punto ya la dice y la hora exacta esta en
     su titulo: en una barra que no cabe, lo que se repite es lo que sobra. */
  .edad{display:none}
  /* El selector se salia por la derecha. Que encoja, con un tope. */
  .planet-pick{min-width:0}
  .planet-pick select{min-width:0;max-width:32vw}
}

/* El mismo tema claro, para quien no ha tocado el conmutador. */
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]){
  --void:#EAEEF5; --ground:#F1F4FA; --surface:#FFFFFF; --raise:#F8FAFD; --sunk:#E5EAF3;
  --line:#D3DBE8; --line-soft:#E3E9F2; --glow:rgba(11,95,217,.22);
  --shadow-borde:rgba(16,30,54,.22);
  --ink:#0B1524; --ink-2:#41546F; --ink-3:#6B7C96;
  /* Sobre blanco hay que rehacer los tres, y no basta con oscurecerlos: el
     primer intento —acero #5A7391 y azul #0B72C4— fallo el test con dE 13 en
     TRITANOPIA, porque los dos son azules y quien no distingue el azul los ve
     iguales. Lo que los separa aqui es la luminosidad, no el tono. */
  --c-metal:#36455A; --c-crystal:#0F7CC4; --c-deuterium:#8A590C;
  --accent:#0B5FD9; --accent-2:#0E7A9E;
  --spark:#0E7A9E;
  --good:#0F7A54; --bad:#C42B3C; --warn:#9A6410;
  --good-bg:rgba(15,122,84,.10); --bad-bg:rgba(196,43,60,.09); --warn-bg:rgba(154,100,16,.11);
  --grid:rgba(11,95,217,.05);
}
:root:not([data-theme="dark"]) .topbar{background:rgba(241,244,250,.94)}
:root:not([data-theme="dark"]) .modal::backdrop{background:rgba(20,32,54,.45)}
}