:root{
  --fondo:#0d1520; --panel:#131e2c; --panel2:#182536; --borde:#26374f;
  --texto:#e8eef7; --suave:#9db0c9; --acento:#2f9bd6; --acento2:#1d7fb5;
  --ok:#2fbf71; --error:#e5534b; --aviso:#e0a33e; --radio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.contenedor{max-width:820px;margin:0 auto;padding:20px 16px 60px}
header.cabecera{
  background:linear-gradient(160deg,#16334d,#0f1d2c);
  border-bottom:1px solid var(--borde); padding:28px 16px 24px;
}
header.cabecera .contenedor{padding-bottom:0}
.marca{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,var(--acento),#155e88);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;letter-spacing:.5px;color:#fff;
}
h1{font-size:26px;margin:0;line-height:1.2}
.subtitulo{color:var(--suave);font-size:14px;margin:2px 0 0}
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:20px;margin:18px 0;
}
.tarjeta h2{font-size:18px;margin:0 0 10px}
.tarjeta p{margin:0 0 10px;color:#cbd8e9}
.tarjeta p:last-child{margin-bottom:0}
ol.pasos,ul.lista{margin:8px 0 0;padding-left:20px;color:#cbd8e9}
ol.pasos li,ul.lista li{margin-bottom:6px}
label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
label .opc{font-weight:400;color:var(--suave)}
.campo{margin-bottom:16px}
.ayuda{font-size:12.5px;color:var(--suave);margin:5px 0 0}
input,select,textarea{
  width:100%;padding:11px 12px;border-radius:9px;
  border:1px solid var(--borde);background:var(--panel2);color:var(--texto);
  font-family:inherit;font-size:16px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px rgba(47,155,214,.18)}
input:disabled,select:disabled{opacity:.55}
textarea{resize:vertical;min-height:90px}
.fila{display:flex;gap:14px;flex-wrap:wrap}
.fila>*{flex:1 1 220px;min-width:0}
button{
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
  border:none;border-radius:9px;padding:12px 18px;
  background:var(--acento);color:#fff;
}
button:hover{background:var(--acento2)}
button:disabled{opacity:.6;cursor:not-allowed}
button.secundario{background:transparent;border:1px solid var(--borde);color:var(--texto)}
button.secundario:hover{background:var(--panel2)}
button.chico{padding:8px 12px;font-size:14px}
button.enviar{width:100%;padding:15px;font-size:17px;margin-top:6px}
.examen-fila{display:flex;gap:8px;margin-bottom:8px}
.examen-fila input{flex:1}
.quitar{background:transparent;border:1px solid var(--borde);color:var(--suave);padding:0 14px;font-size:20px;line-height:1;border-radius:9px}
.quitar:hover{background:rgba(229,83,75,.15);color:var(--error);border-color:var(--error)}
.aviso{padding:12px 14px;border-radius:9px;font-size:14.5px;margin:14px 0;display:none}
.aviso.ver{display:block}
.aviso.ok{background:rgba(47,191,113,.13);border:1px solid rgba(47,191,113,.45);color:#8ff0bb}
.aviso.mal{background:rgba(229,83,75,.13);border:1px solid rgba(229,83,75,.45);color:#ffb3ad}
.aviso.info{background:rgba(224,163,62,.12);border:1px solid rgba(224,163,62,.4);color:#f2cf94}
.exito{text-align:center;padding:36px 20px}
.exito .tic{font-size:46px;color:var(--ok);line-height:1}
.exito h2{font-size:22px;margin:12px 0 8px}
.pie{text-align:center;color:var(--suave);font-size:13px;margin-top:26px;line-height:1.7}
.pie a{color:var(--acento);text-decoration:none}
.tabla-envoltura{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio)}
table{border-collapse:collapse;width:100%;font-size:13.5px;white-space:nowrap}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--borde)}
th{background:var(--panel2);position:sticky;top:0;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--suave)}
tbody tr:hover{background:rgba(47,155,214,.07)}
.metricas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.metrica{flex:1 1 150px;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:14px 16px}
.metrica .n{font-size:26px;font-weight:700}
.metrica .t{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.4px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
@media (max-width:520px){h1{font-size:22px}.contenedor{padding:16px 13px 50px}.tarjeta{padding:16px}}