:root{--bg:#0A0A3E;--bg2:#3230C6;--oro:#F0DC96;--oro2:#C9A961;--ok:#2ECC8F;--am:#F5B942;--rojo:#E5484D;--tx:#fff;--mut:#B9B9E0}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font:16px/1.4 Roboto,system-ui,sans-serif;color:var(--tx);background:linear-gradient(160deg,var(--bg2),var(--bg) 45%,#000);padding:16px;padding-block:max(16px,env(safe-area-inset-top))}
h1{font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin:0 0 12px}h1 span{color:var(--oro);font-weight:300}
.card{background:rgba(255,255,255,.07);border:1px solid rgba(240,220,150,.35);border-radius:14px;padding:16px;margin-bottom:14px}
input,button,select{font:inherit;border-radius:10px;border:1px solid rgba(240,220,150,.5);padding:12px 14px;background:rgba(0,0,0,.35);color:#fff;max-width:100%}
button{background:var(--oro);color:#0A0A3E;font-weight:700;border:0;cursor:pointer}button.sec{background:transparent;color:var(--oro);border:1px solid var(--oro2)}button:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.mut{color:var(--mut)}.big{font-size:2rem;font-weight:800}
.res{border-radius:14px;padding:18px;text-align:center;border:2px solid}.res.ok{background:rgba(46,204,143,.18);border-color:var(--ok)}.res.am{background:rgba(245,185,66,.18);border-color:var(--am)}.res.rojo{background:rgba(229,72,77,.18);border-color:var(--rojo)}
table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.12)}.scroll{overflow-x:auto}
video{display:none;width:100%;max-height:50vh;border-radius:12px;background:#000;object-fit:cover}
.bar{height:14px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--oro)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.kpi div{text-align:center}.kpi b{display:block;font-size:2.2rem;color:var(--oro)}
.estado{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.35);border:1px solid rgba(240,220,150,.3);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.estado b{display:block;font-size:.95rem}.estado small{color:var(--mut)}.estado button{margin-left:auto;padding:8px 12px;white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--ok)}.dot.am{background:var(--am)}.dot.rojo{background:var(--rojo)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px;z-index:10}.modal .card{width:min(420px,100%);margin:0}
.res .off{display:inline-block;margin-top:8px;font-size:.85rem;color:var(--mut)}
button:focus-visible,input:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.res{animation:in .18s ease-out}@keyframes in{from{transform:scale(.97);opacity:0}}}