:root{
  --rojo:#c0392b; --rojo2:#e74c3c; --oro:#f1c40f; --negro:#141414;
  --gris:#f4f4f5; --texto:#1e1e1e; --verde:#1e9e63; --linea:#e2e2e6;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;color:var(--texto);background:var(--gris)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.top{background:var(--negro);color:#fff;padding:14px 0;border-bottom:4px solid var(--rojo)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.brand{font-weight:800;letter-spacing:1px} .brand b{color:var(--rojo2)}
.evt{font-size:13px;opacity:.85}
main.wrap{padding-top:24px;padding-bottom:40px;min-height:60vh}
h1{font-size:26px;margin:.2em 0} h2{font-size:20px} .muted{color:#666}
.card{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:20px;margin:16px 0;
      box-shadow:0 2px 10px rgba(0,0,0,.04)}
.hero{background:linear-gradient(135deg,#1b1b1b,#3a1111);color:#fff;text-align:center;padding:34px 20px;border-radius:16px}
.hero h1{font-size:30px} .hero .fecha{color:var(--oro);font-weight:700;margin-top:8px}
label{display:block;font-weight:600;margin:14px 0 4px;font-size:14px}
input,select{width:100%;padding:12px;border:1px solid #cfcfd4;border-radius:9px;font-size:15px}
.btn{display:inline-block;background:var(--rojo);color:#fff;border:0;padding:14px 22px;border-radius:10px;
     font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--rojo2)} .btn.block{width:100%} .btn.oro{background:var(--oro);color:#222}
.btn.ghost{background:#fff;color:var(--rojo);border:2px solid var(--rojo)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-weight:500;font-size:14px}
.check input{width:auto;margin-top:3px}
.alert{padding:12px 14px;border-radius:10px;margin:14px 0;font-size:14px}
.alert.ok{background:#e6f6ee;color:#166b45;border:1px solid #b7e3cc}
.alert.err{background:#fdeaea;color:#a02020;border:1px solid #f3c2c2}
.alert.info{background:#eef3fd;color:#20438a;border:1px solid #c4d3f3}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge.prem{background:var(--oro);color:#222} .badge.nac{background:#e6f6ee;color:#166b45}
.exp{border:1px solid var(--linea);border-radius:12px;padding:16px;margin:12px 0;display:flex;
     justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.exp .precio{font-size:20px;font-weight:800}
.exp .tach{color:#999;text-decoration:line-through;font-size:14px;margin-right:6px}
.best{border:2px solid var(--oro);position:relative}
.best .flag{position:absolute;top:-11px;left:14px;background:var(--oro);color:#222;font-size:11px;
     font-weight:800;padding:3px 9px;border-radius:10px}
.pase{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--linea)}
.pase .cab{background:var(--negro);color:#fff;padding:18px;text-align:center}
.pase .cab .folio{color:var(--oro);font-weight:800;letter-spacing:2px;font-size:18px}
.pase .qr{display:flex;justify-content:center;padding:22px}
.pase .datos{padding:0 20px 20px} .row{display:flex;justify-content:space-between;
     padding:8px 0;border-bottom:1px dashed var(--linea);font-size:15px}
.si{color:var(--verde);font-weight:700} .no{color:#bbb;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--linea);text-align:left}
th{background:#fafafa} .foot{background:#111;color:#bbb;padding:20px 0;font-size:13px;text-align:center}
.foot a{color:#e88}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:16px;text-align:center}
.kpi b{display:block;font-size:26px;color:var(--rojo)} .kpi span{font-size:12px;color:#666}
.scanbox{max-width:460px;margin:auto}
#reader{width:100%;border-radius:12px;overflow:hidden}
.big-ok{background:var(--verde);color:#fff;text-align:center;padding:26px;border-radius:14px;font-size:24px;font-weight:800}
.big-err{background:var(--rojo);color:#fff;text-align:center;padding:26px;border-radius:14px;font-size:24px;font-weight:800}