:root {
  --ink:#0E1419; --surface:#18222B; --alt:#121A21; --line:#2A3945;
  --text:#E6ECF0; --muted:#8496A3; --accent:#4FA3D1; --go:#2ED47A; --wait:#F0B429; --stop:#F0524E;
  --mono: ui-monospace,"SF Mono","Roboto Mono",Consolas,monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ink); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
[hidden] { display:none !important; }
h1,h2,h3 { margin:0; text-wrap:balance; }
.marca { display:flex; align-items:center; gap:10px; font:700 14px/1 system-ui; letter-spacing:.18em; text-transform:uppercase; color:var(--text); }
.marca img { width:30px; height:30px; }
.marca span { color:var(--accent); }
.ancho { max-width:1120px; margin:0 auto; padding:0 16px; }

/* cabecera */
.cabecera { border-bottom:1px solid var(--line); background:var(--alt); position:sticky; top:0; z-index:5; }
.cabecera .ancho { display:flex; align-items:center; gap:16px; min-height:56px; flex-wrap:wrap; }
.nav { display:flex; gap:4px; flex:1; overflow-x:auto; }
.nav button { background:none; border:none; color:var(--muted); font:500 14px system-ui; padding:18px 10px 16px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.nav button:hover { color:var(--text); }
.nav button.activo { color:var(--text); border-bottom-color:var(--accent); }
.quien { font-size:13px; color:var(--muted); text-align:right; line-height:1.3; }
.quien b { color:var(--text); font-weight:600; }

/* controles */
label { display:block; }
.et { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
input, select, textarea { width:100%; background:var(--alt); border:1px solid var(--line); border-radius:6px; color:var(--text); padding:9px 11px; font:14px system-ui; }
input[type=number], .num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
input:disabled, select:disabled { opacity:.55; }
textarea { min-height:70px; resize:vertical; }
.bt { background:var(--accent); border:1px solid var(--accent); border-radius:6px; color:var(--ink); padding:9px 14px; font:600 14px system-ui; cursor:pointer; white-space:nowrap; }
.bt:hover { filter:brightness(1.1); text-decoration:none; }
.bt:disabled { opacity:.5; cursor:default; }
.bt.sec { background:var(--surface); border-color:var(--line); color:var(--text); font-weight:500; }
.bt.sec:hover { border-color:var(--accent); color:var(--accent); filter:none; }
.bt.peligro { background:none; border-color:var(--line); color:var(--stop); font-weight:500; }
.bt.peligro:hover { border-color:var(--stop); filter:none; }
.bt.fino { padding:5px 9px; font-size:12px; }
.fila { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.fila > label { flex:1 1 150px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.nota { font-size:13px; color:var(--muted); margin:8px 0 0; }
.error { color:var(--stop); font-size:13px; margin:8px 0 0; min-height:1em; }
.ok { color:var(--go); }

/* bloques */
main.ancho { padding:24px 16px 60px; }
.tarjeta { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:16px; }
.tarjeta h2 { font:600 11px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.tarjeta h3.sub { font:600 13px/1.3 system-ui; color:var(--text, inherit); margin:18px 0 8px; }
.aviso { border:1px solid var(--wait); color:var(--wait); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:14px; }
.aviso.rojo { border-color:var(--stop); color:var(--stop); }
.aviso.azul { border-color:var(--accent); color:var(--text); }
.aviso.azul .fila { margin-top:10px; }

.cifras { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.cifra { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.cifra .k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cifra .v { font:600 26px/1.2 var(--mono); font-variant-numeric:tabular-nums; margin-top:4px; }
.cifra .s { font-size:12px; color:var(--muted); }

/* tabla */
.tabla-caja { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:14px; }
th { text-align:left; font:600 11px system-ui; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tbody tr.pulsable { cursor:pointer; }
tbody tr.pulsable:hover { background:var(--alt); }
td.der, th.der { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
td small { display:block; color:var(--muted); font-size:12px; }
.punto { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--line); margin-right:6px; }
.punto.go { background:var(--go); } .punto.wait { background:var(--wait); } .punto.stop { background:var(--stop); }
.chapa { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:99px; padding:2px 8px; color:var(--muted); white-space:nowrap; }
.chapa.comprado { color:var(--accent); border-color:var(--accent); }
.chapa.vendido { color:var(--go); border-color:var(--go); }
.vacio { padding:28px 16px; text-align:center; color:var(--muted); }
.paginas { display:flex; justify-content:space-between; align-items:center; margin-top:12px; color:var(--muted); font-size:13px; gap:10px; flex-wrap:wrap; }

/* ficha lateral */
.velo { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:20; display:flex; justify-content:flex-end; }
.ficha { width:min(480px,100%); height:100%; overflow-y:auto; background:var(--ink); border-left:1px solid var(--line); padding:20px; }
.ficha h3 { font-size:19px; }
.ficha .sub { color:var(--muted); font-size:13px; margin:2px 0 14px; }
.pares { display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:14px; margin-bottom:14px; }
.pares .k { color:var(--muted); }
.pares .v { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.separa { border:none; border-top:1px solid var(--line); margin:16px 0; }

/* entrada */
.entrada { max-width:400px; margin:8vh auto 0; padding:0 16px; }
.entrada .tarjeta { padding:24px; }
.entrada .marca { justify-content:center; margin-bottom:22px; }
.entrada label { margin-top:12px; }
.entrada .bt { width:100%; margin-top:16px; }
.enlace { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }

/* portada */
.portada .cabecera .ancho { flex-wrap:nowrap; }
.enlaces { justify-content:center; gap:22px; }
.enlaces a { color:var(--muted); font-size:14px; padding:18px 0; white-space:nowrap; }
.enlaces a:hover { color:var(--text); text-decoration:none; }
.heroe { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; padding:72px 0 64px; }
.antetitulo { font:600 12px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.heroe h1 { font-size:clamp(34px,5vw,54px); line-height:1.05; letter-spacing:-.025em; margin:0 0 18px; }
.heroe p { color:var(--muted); font-size:18px; max-width:52ch; margin:0 0 26px; text-wrap:pretty; }
.heroe p.nota { font-size:13px; margin:14px 0 0; }
.bt.grande { padding:13px 20px; font-size:15px; }
.maqueta { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.maqueta-cab { font-size:14px; color:var(--muted); margin-bottom:16px; }
.maqueta .veredicto { font-size:14px; margin:0; }
.bloque { padding:56px 0; border-top:1px solid var(--line); }
.bloque > h2, .cierre h2 { font-size:clamp(24px,3.2vw,32px); letter-spacing:-.015em; margin-bottom:24px; }
.pasos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; counter-reset:paso; }
.pasos li { counter-increment:paso; color:var(--muted); font-size:15px; }
.pasos li::before { content:counter(paso); display:block; font:700 13px/28px var(--mono); width:28px; height:28px; text-align:center; border:1px solid var(--accent); color:var(--accent); border-radius:50%; margin-bottom:12px; }
.pasos b { display:block; color:var(--text); font-size:17px; margin-bottom:6px; }
.tres { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.tres.dos-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tres.cuatro-col { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tres .tarjeta { margin:0; }
.tres h3 { font-size:17px; margin-bottom:6px; }
.tres p { color:var(--muted); margin:0; font-size:14.5px; }
.cierre { text-align:center; padding:64px 0 72px; border-top:1px solid var(--line); }
.pie { border-top:1px solid var(--line); padding:20px 0; color:var(--muted); font-size:13px; text-align:center; }
@media (max-width:860px) {
  .heroe { grid-template-columns:1fr; gap:32px; padding:44px 0 40px; }
  .pasos, .tres.cuatro-col { grid-template-columns:1fr 1fr; }
  .enlaces { display:none; }
}
@media (max-width:560px) { .pasos, .tres.dos-col, .tres.cuatro-col { grid-template-columns:1fr; } .bloque { padding:40px 0; } }
@media (max-width:640px) { .quien { display:none; } .cabecera .ancho { gap:8px; } }
td:nth-child(2) { min-width:200px; }
.linea-gasto { display:grid; grid-template-columns:1fr 110px auto; gap:8px; margin-bottom:6px; }
.linea-gasto .g-i { text-align:right; }
.linea-gasto .g-p { grid-column:1 / -1; color:var(--muted); font-size:12px; margin:-2px 0 4px 2px; }
#fi-gastos .fila { align-items:center; margin-top:4px; }
#fi-gastos .nota { margin:0; }
.precios { text-align:left; }
.precios .sub { color:var(--muted); margin:-12px 0 22px; }
.precios .tres { text-align:left; }
.precio { font:600 30px/1.2 var(--mono); color:var(--text) !important; margin:4px 0 8px !important; }
.precio small { font:400 14px system-ui; color:var(--muted); }

/* tasar */
.dos { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:860px) { .dos { grid-template-columns:1fr; gap:0; } }
.sep { margin-top:12px; }
.tope { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tope .k { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.tope .v { font:700 34px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--accent); }
.veredicto { font-size:15px; margin:10px 0 0; min-height:1.4em; }
.veredicto.go { color:var(--go); } .veredicto.wait { color:var(--wait); } .veredicto.stop { color:var(--stop); }
.comp { list-style:none; margin:10px 0 0; padding:0; }
.comp li { display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.comp .p { flex:0 0 84px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.comp small { display:block; color:var(--muted); font-size:12px; }
.comp.bajas .p { color:var(--muted); }
.comp small .ambar { color:var(--wait, #B7791F); } .comp small .rojo { color:var(--stop, #C53030); } .comp small .verde { color:var(--go, #2F855A); }
.verde { color:var(--go); } .ambar { color:var(--wait); } .rojo { color:var(--stop); }
.heroe p.antetitulo { font:600 12px/1 system-ui; color:var(--accent); margin:0 0 16px; max-width:none; }
.tres p.precio { font:600 30px/1.2 var(--mono); color:var(--text); margin:4px 0 8px; }
.tres p.precio small { font:400 14px system-ui; color:var(--muted); }
#v-tasar .rejilla { grid-template-columns:repeat(2,minmax(0,1fr)); }
#ta-gastos { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tope { flex-wrap:wrap; }
.tope .v { white-space:nowrap; }
@media (max-width:560px) { .tope .v { font-size:30px; } }
.mensaje { border-top:1px solid var(--line); padding:12px 0; }
.mensaje.atendido { opacity:.55; }
.mensaje .fila { align-items:center; }
.mensaje .nota { margin:0; }
.texto-msj { margin:8px 0 0; white-space:pre-wrap; font-size:14px; }
.entrada .tarjeta[hidden] { display:none; }

.portales { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.chip { background:none; border:1px solid var(--line); color:var(--text); border-radius:999px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; }
.chip small { color:var(--muted); margin-left:2px; }
.chip:hover { border-color:var(--accent); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#0E1419; font-weight:600; }
.chip.on small { color:#0E1419; opacity:.7; }
.comp li.fuera > span { opacity:.4; }
.comp li.quitado .p { text-decoration:line-through; }
.comp .quita { margin-left:auto; align-self:center; background:none; border:0; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; padding:4px; }
.comp .quita:hover { color:var(--text); }

.pegar { margin-top:14px; padding:14px; border:1px dashed var(--line); border-radius:10px; background:var(--alt); }
.pegar .nota:first-child { margin-top:0; }
.pegar textarea { min-height:52px; }
.estado-portales { display:block; }
#ta-faltan { font-size:13px; padding:8px 12px; margin:0 0 12px; }

/* Contratar desde Cuenta */
.planes-pago { margin:4px 0 12px; }
.planes-lista { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
.plan-pago { display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.plan-pago span { color:var(--muted); }
.plan-pago .precio { color:var(--text); font-family:var(--mono); margin:6px 0 10px; }
.plan-pago .precio small { color:var(--muted); }
.casilla { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.casilla input { width:auto; margin:0; }

.trampa { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.acepto { display:flex !important; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--muted, #8496a3); margin:4px 0 10px; cursor:pointer; }
.acepto input { width:auto !important; margin-top:3px; flex:0 0 auto; }
.acepto a { color:#4fa3d1; }
.acepto[hidden] { display:none !important; }
.barras { display:flex; align-items:flex-end; gap:3px; height:64px; margin:12px 0 4px; }
.barras i { flex:1; background:#4fa3d1; border-radius:2px 2px 0 0; min-width:4px; }