:root{
  --bg:#0F3B36; --bg-deep:#0A2B27; --paper:#F6EFDD; --paper-dim:#EAE1C9;
  --ink:#1E2A28; --ink-soft:#46524F; --gold:#C9951A; --gold-deep:#A97B12;
  --rust:#A6451E; --line:#B9A77E;
  font-family:'Inter',sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--paper); min-height:100vh; padding:0 0 60px;
  background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.04),transparent 40%),
                   radial-gradient(circle at 85% 75%,rgba(255,255,255,.03),transparent 45%);
}
header{padding:36px 24px 26px;text-align:center;border-bottom:1px solid rgba(246,239,221,.12);margin-bottom:32px;}
header .kicker{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--gold);}
header h1{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(2rem,5vw,2.8rem);margin:6px 0 0;}
header a{color:inherit;text-decoration:none;}
main{max-width:760px;margin:0 auto;padding:0 24px;}
h2{font-family:'Zilla Slab',serif;font-size:1.2rem;margin:0 0 14px;}

.panel{background:var(--bg-deep);border:1px solid rgba(246,239,221,.14);border-radius:14px;padding:26px;margin-bottom:28px;}

/* Botones de plan (venta rápida) */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.planes form{margin:0;}
.plan{
  width:100%;min-height:96px;background:var(--gold);color:var(--bg-deep);border:none;border-radius:12px;
  font-family:'Zilla Slab',serif;font-weight:700;font-size:1.5rem;cursor:pointer;transition:background .15s ease;
}
.plan:hover{background:var(--gold-deep);}
.plan small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.75rem;margin-top:4px;opacity:.75;}

button{background:var(--gold);color:var(--bg-deep);border:none;padding:12px 22px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;}
button:hover{background:var(--gold-deep);}
button.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold);}
button.ghost:hover{background:rgba(201,149,26,.12);}
select:focus,input:focus,button:focus{outline:2px solid var(--gold);outline-offset:1px;}

details summary{cursor:pointer;color:var(--gold);font-weight:500;}
details form{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:18px;}
.field{flex:1;min-width:150px;}
.field label{display:block;font-size:.82rem;color:var(--gold);margin-bottom:8px;font-weight:500;}
select,input[type=number]{width:100%;background:var(--bg);border:1px solid rgba(246,239,221,.25);color:var(--paper);padding:11px 12px;border-radius:8px;font-size:.95rem;}

.error{background:rgba(166,69,30,.18);border:1px solid var(--rust);color:#F3CBB8;padding:12px 16px;border-radius:8px;font-size:.9rem;margin-bottom:24px;}

.resultado-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--paper-dim);font-size:.9rem;}
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}

/* Ficha estilo boleto perforado */
.ficha{position:relative;background:var(--paper);color:var(--ink);border-radius:10px;padding:18px 14px 14px;text-align:center;overflow:hidden;}
.ficha::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 16px);}
.ficha .qr{width:100%;max-width:130px;margin:8px auto 0;}
.ficha .qr svg{width:100%;height:auto;display:block;}
.ficha .codigo{font-family:'Space Mono',monospace;font-weight:700;font-size:1.15rem;letter-spacing:.08em;margin-top:8px;}
.ficha .perfil{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:.72rem;color:var(--ink-soft);}

/* Pantalla de venta: QR grande para que el cliente escanee */
.venta{max-width:360px;margin:0 auto;}
.venta .ficha{padding:22px 18px 18px;}
.venta .ficha .qr{max-width:280px;}
.venta .ficha .codigo{font-size:1.6rem;}
.venta .instruccion{text-align:center;color:var(--paper-dim);font-size:.92rem;margin:0 0 18px;}
.venta .acciones{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap;}

footer{max-width:760px;margin:44px auto 0;padding:0 24px;font-size:.78rem;color:rgba(246,239,221,.4);text-align:center;}

@media print{
  header,.panel,.resultado-header,.acciones,.instruccion,footer{display:none;}
  body{background:#fff;padding:0;}
  main{max-width:100%;padding:0;}
  .fichas{gap:10px;}
  .ficha{border:1px dashed #999;break-inside:avoid;}
  .venta{max-width:100%;}
}

/* ---- Navegación, tablas y progreso ---- */
header nav{margin-top:14px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:.9rem;}
header nav a{color:var(--gold);}
.fila{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;}
.ayuda{font-size:.85rem;color:var(--paper-dim);margin:14px 0 0;}
.aviso{background:rgba(201,149,26,.12);border:1px solid var(--gold);padding:12px 16px;border-radius:8px;font-size:.9rem;margin-bottom:24px;}
.aviso a{color:var(--gold);}
button:disabled{opacity:.5;cursor:not-allowed;}
button.chico{padding:6px 12px;font-size:.82rem;}
progress{width:100%;height:14px;accent-color:var(--gold);margin:6px 0;}
.mono{font-family:'Space Mono',monospace;}
.tabla-caja{overflow-x:auto;background:var(--bg-deep);border:1px solid rgba(246,239,221,.14);border-radius:12px;}
table{border-collapse:collapse;width:100%;font-size:.88rem;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(246,239,221,.1);white-space:nowrap;}
th{color:var(--gold);font-weight:500;font-size:.8rem;}
tr:last-child td{border-bottom:none;}
.en-linea{display:flex;gap:6px;margin:0;}
.en-linea input{background:var(--bg);border:1px solid rgba(246,239,221,.25);color:var(--paper);padding:6px 8px;border-radius:6px;width:130px;font-size:.85rem;}
code{font-family:'Space Mono',monospace;font-size:.82rem;}