:root{
--bg:#0A0C0F; --card:#161d26; --card2:#0f151c;
--accent:#C0392B; --accent-osc:#a5322459; --accent-2:#e04b3a;
--verde:#1f9d5b; --verde-cl:#0e2a1f;
--rojo:#e04b3a; --rojo-cl:#2a1512;
--amarillo:#d9a406; --amarillo-cl:#2a2408;
--gris:#94a3b8; --gris-cl:#1f2733; --borde:#26303c;
--texto:#e8edf6; --fondo:#0A0C0F;
/* alias heredados para no romper clases existentes */
--azul:#C0392B; --azul-osc:#a53224;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);color:var(--texto);line-height:1.5;-webkit-tap-highlight-color:transparent}
.cont{max-width:520px;margin:0 auto;padding:16px}
.topbar{background:#10161d;color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
position:sticky;top:0;z-index:10;border-bottom:2px solid var(--accent)}
.topbar .marca{display:flex;align-items:center;gap:10px}
.topbar .logo{width:36px;height:36px;border-radius:9px;object-fit:cover;flex:0 0 auto;
background:#0b0e14;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.topbar b{font-size:1.05rem;letter-spacing:.3px}
.topbar small{opacity:.75;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:var(--card);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:14px;
box-shadow:0 2px 10px rgba(0,0,0,.35)}
label{display:block;font-weight:600;font-size:.9rem;margin:10px 0 4px;color:#cbd5e1}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--borde);border-radius:10px;font-size:1rem;
background:var(--card2);color:var(--texto)}
input::placeholder,textarea::placeholder{color:#5b6675}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.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(--accent);transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.99)}
.btn.verde{background:var(--verde)}.btn.gris{background:#3a4453}.btn.rojo{background:var(--accent)}
.btn.sec{background:transparent;color:#f0b8b0;border:2px solid var(--accent)}
.btn:disabled{opacity:.5;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:#4ade80}
.pill.no{background:var(--rojo-cl);color:#fca5a5}
.pill.adv{background:var(--amarillo-cl);color:#fbbf24}
.msg{padding:12px 14px;border-radius:10px;margin:10px 0;font-weight:600}
.msg.ok{background:var(--verde-cl);color:#86efac;border:1px solid #14532d}
.msg.err{background:var(--rojo-cl);color:#fca5a5;border:1px solid #7f1d1d}
.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:var(--card);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(--accent-2)}.kpi.verde .n{color:#4ade80}.kpi.rojo .n{color:#fca5a5}.kpi.amar .n{color:#fbbf24}
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(--accent)}
.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(--accent-2)}