:root{
  --azul:#2563eb; --azul-osc:#1e40af; --verde:#059669; --verde-cl:#ecfdf5;
  --rojo:#dc2626; --rojo-cl:#fef2f2; --amarillo:#d97706; --amarillo-cl:#fffbeb;
  --gris:#6b7280; --gris-cl:#f3f4f6; --borde:#e5e7eb; --texto:#111827; --fondo:#f8fafc;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--fondo);color:var(--texto);line-height:1.5;-webkit-tap-highlight-color:transparent}
.cont{max-width:520px;margin:0 auto;padding:16px}
.topbar{background:var(--azul);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar b{font-size:1.05rem}
.topbar small{opacity:.85;display:block;font-weight:400}
h1{font-size:1.4rem;margin:.2em 0}
h2{font-size:1.1rem;margin:1.2em 0 .5em}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
label{display:block;font-weight:600;font-size:.9rem;margin:10px 0 4px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--borde);border-radius:10px;font-size:1rem;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.btn{display:block;width:100%;border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:12px;color:#fff;background:var(--azul);transition:.15s}
.btn:active{transform:scale(.99)}
.btn.verde{background:var(--verde)}.btn.gris{background:var(--gris)}.btn.rojo{background:var(--rojo)}
.btn.sec{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.punto{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--borde)}
.punto:last-child{border-bottom:none}
.punto .nom{font-weight:600}.punto .cod{color:var(--gris);font-size:.85rem}
.punto button{width:auto;margin:0;padding:10px 16px;font-size:.9rem}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.pill.ok{background:var(--verde-cl);color:var(--verde)}
.pill.no{background:var(--rojo-cl);color:var(--rojo)}
.pill.adv{background:var(--amarillo-cl);color:var(--amarillo)}
.msg{padding:12px 14px;border-radius:10px;margin:10px 0;font-weight:600}
.msg.ok{background:var(--verde-cl);color:#065f46;border:1px solid #a7f3d0}
.msg.err{background:var(--rojo-cl);color:#991b1b;border:1px solid #fecaca}
.oculto{display:none!important}
#lector{width:100%;border-radius:12px;overflow:hidden}
.gps{font-size:.85rem;color:var(--gris);margin-top:6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;text-align:center}
.kpi .n{font-size:2rem;font-weight:800;line-height:1}
.kpi .l{color:var(--gris);font-size:.8rem;margin-top:6px}
.kpi.azul .n{color:var(--azul)}.kpi.verde .n{color:var(--verde)}.kpi.rojo .n{color:var(--rojo)}.kpi.amar .n{color:var(--amarillo)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--borde)}
th{background:var(--gris-cl);font-size:.75rem;text-transform:uppercase;color:var(--gris)}
.tabla-scroll{overflow-x:auto}
.barra{height:10px;background:var(--gris-cl);border-radius:6px;overflow:hidden}
.barra > i{display:block;height:100%;background:var(--azul)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.filtros > div{flex:1;min-width:120px}
.mini{color:var(--gris);font-size:.8rem}
a{color:var(--azul)}