:root{
  --bg:#0a0d14; --bg2:#111622; --card:#161d2c; --linea:#243049;
  --txt:#eef2f9; --muted:#8e9bb3; --azul:#2f6bff; --azul2:#5b8cff;
  --verde:#1db97a; --rojo:#e5484d; --amar:#f2c744;
  --r:16px; --sombra:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#1b2740 0%,var(--bg) 60%) fixed,var(--bg);
  color:var(--txt); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:80px;
}
a{color:var(--azul2);text-decoration:none}
h1{font-size:20px;margin:.2em 0 .4em;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.muted{color:var(--muted);font-size:13px}
.wrap{max-width:520px;margin:0 auto;padding:16px}

/* marca */
.marca{font-weight:800;letter-spacing:-.02em;font-size:18px;padding:18px 16px;text-align:center}
.marca span{color:var(--azul2)}
.topbar{display:flex;align-items:center;justify-content:space-between;max-width:520px;margin:0 auto;padding:14px 16px}
.topbar .marca{padding:0}
.yo{font-size:12px;color:var(--muted)}

/* botones */
button,.btn{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--linea);
  background:var(--bg2);color:var(--txt);padding:11px 14px;transition:.15s}
button:hover,.btn:hover{border-color:#35466b}
.principal{width:100%;background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600;margin-top:14px}
.principal:hover{background:var(--azul2)}
.peligro{color:var(--rojo);border-color:#4a2430;background:transparent}
.fila-btns{display:flex;gap:8px}
.fila-btns button{flex:1}

/* campos */
label{display:block;margin:12px 0 5px;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border-radius:12px;
  border:1px solid var(--linea);background:#0d1320;color:var(--txt)}
input:focus,select:focus{outline:2px solid var(--azul);border-color:transparent}
.dos{display:grid;grid-template-columns:1fr 90px;gap:10px}

/* tarjetas fiscales */
.tarjetas{display:grid;gap:12px}
.tarjeta{position:relative;border-radius:var(--r);padding:16px;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,var(--c,#2f6bff) 0%,#0f1626 85%);box-shadow:var(--sombra);
  border:1px solid rgba(255,255,255,.08)}
.tarjeta:active{transform:scale(.99)}
.tarjeta .alias{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.tarjeta .razon{font-weight:700;font-size:17px;margin:6px 0 10px;line-height:1.25}
.tarjeta .ruc{font-variant-numeric:tabular-nums;font-size:14px;opacity:.95}
.tarjeta .estrella{position:absolute;top:14px;right:14px;font-size:14px}
.tarjeta .chip{position:absolute;bottom:14px;right:14px;font-size:11px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.14)}

/* modal / hoja */
.hoja{position:fixed;inset:0;background:rgba(4,7,13,.75);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;z-index:50}
.hoja[hidden]{display:none}
.hoja>div{background:var(--card);width:100%;max-width:520px;border-radius:20px 20px 0 0;
  padding:20px 18px 28px;max-height:92vh;overflow:auto;border-top:1px solid var(--linea)}
@media(min-width:560px){.hoja{align-items:center}.hoja>div{border-radius:20px}}
.cerrar{position:absolute;right:14px;top:10px;background:none;border:none;color:var(--muted);font-size:22px}

/* QR */
.qr-caja{background:#fff;border-radius:18px;padding:14px;display:grid;place-items:center;margin:14px 0}
.qr-caja img{width:100%;max-width:300px;display:block}
.qr-titulo{text-align:center}
.qr-titulo .et{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.qr-titulo .razon{font-weight:700;font-size:18px;margin:4px 0}
.qr-titulo .ruc{font-variant-numeric:tabular-nums;color:var(--muted)}

/* página pública del comercio */
.publico .card{max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.ok{color:var(--verde);font-weight:600;font-size:13px}
.badge{display:inline-block;font-size:11px;padding:4px 9px;border-radius:999px;margin-bottom:8px}
.badge.verde{background:rgba(29,185,122,.15);color:var(--verde)}
.badge.gris{background:rgba(142,155,179,.14);color:var(--muted)}
.fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--linea)}
.fila .et{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.fila .val{font-size:16px;font-variant-numeric:tabular-nums;word-break:break-all}
.copiar{font-size:12px;padding:7px 11px}
.pie{text-align:center;padding:22px;font-size:13px}

/* scanner */
#video{width:100%;border-radius:var(--r);background:#000;aspect-ratio:3/4;object-fit:cover}
.hint{text-align:center;color:var(--muted);font-size:13px;margin:10px 0}
.lista-vacia{text-align:center;color:var(--muted);padding:36px 10px}
.aviso{background:rgba(242,199,68,.1);border:1px solid rgba(242,199,68,.3);color:#f7dd93;
  padding:10px 12px;border-radius:12px;font-size:13px;margin:10px 0}
.tabs{display:flex;gap:6px;margin:14px 0}
.tabs button{flex:1;background:transparent}
.tabs button[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea)}
.item small{color:var(--muted)}