/* Piel de VT Estudio. Un solo sitio para el color, como se decidió para los
   skins: se cambia `--marca` y cambia toda la aplicación. */
:root{
  --marca:#68A0B0; --marca-rgb:104,160,176; --marca-osc:#4C8695;
  --fondo:#141b22; --panel:#0f151b; --linea:rgba(255,255,255,.10);
  --tinta:#fff; --tenue:rgba(255,255,255,.48); --ok:#6ee7a8; --alerta:#f0c86a; --mal:#f08a7a;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--fondo);color:var(--tinta);
  font-family:Poppins,-apple-system,system-ui,sans-serif}
a{color:var(--marca)}
.barra{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 24px;border-bottom:1px solid var(--linea);background:var(--panel)}
.marca{font:700 16px Poppins;letter-spacing:.01em;margin:0}
.marca small{display:block;font:400 11px Poppins;color:var(--tenue);margin-top:2px}
.crece{margin-left:auto}
.btn{font:600 12px Poppins;color:#06222b;background:var(--marca);border:0;border-radius:8px;
  padding:9px 15px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--marca-osc);color:#fff}
.btn.sec{background:rgba(255,255,255,.09);color:var(--tinta);border:1px solid rgba(255,255,255,.16);font-weight:500}
.btn.mal{background:transparent;color:var(--mal);border:1px solid rgba(240,138,122,.4);font-weight:500}
.btn:disabled{opacity:.4;cursor:default}
main{padding:22px 24px 60px;max-width:1200px}
.caja{border:1px solid var(--linea);border-radius:12px;padding:16px 18px;margin-bottom:16px;background:var(--panel)}
.caja h2{margin:0 0 6px;font-size:13px}
.caja p{margin:0;font:400 11.5px/1.6 Poppins;color:var(--tenue);max-width:760px}
.caja.ok{border-color:rgba(110,231,168,.35)} .caja.ok h2::before{content:'✔ ';color:var(--ok)}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea);font-size:12px}
th{font:600 10.5px Poppins;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em}
tr:hover td{background:rgba(255,255,255,.03)}
input,select{background:#1b242e;border:1px solid rgba(255,255,255,.13);color:var(--tinta);
  border-radius:7px;padding:9px 11px;font:400 12px Poppins}
input:focus,select:focus{outline:2px solid rgba(var(--marca-rgb),.55);outline-offset:0}
label{display:block;font:500 11px Poppins;color:var(--tenue);margin:12px 0 5px}
.aviso{font:400 11.5px/1.6 Poppins;color:var(--alerta);margin-top:10px}
.error{font:400 11.5px/1.6 Poppins;color:var(--mal);margin-top:10px}
.cifras{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px}
.cifra b{display:block;font-size:22px;line-height:1.1}
.cifra span{font:400 10.5px Poppins;color:var(--tenue)}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font:600 10px Poppins;
  background:rgba(var(--marca-rgb),.18);color:var(--marca)}
code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:11px}
.centro{max-width:400px;margin:9vh auto;padding:0 20px}