:root{
  --bg:#0b0c0f; --surface:#0f1218; --grid:#1f2430; --text:#e5e7eb; --muted:#9aa3af; --accent:#60a5fa;
  --section:#3b424f; --section2:#2f3642; --good:#16a34a; --bad:#dc2626; --warn:#f59e0b;
  --rowA:#0f131a; --rowB:#111722; --topBrand:72px;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}

/* ====== BARRA SUPERIOR ====== */
.brandbar{
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  padding:10px 16px;background:linear-gradient(90deg,#151a23,#0f1218);
  border-bottom:1px solid #1f2937; position:sticky; top:0; z-index:20; height:var(--topBrand);
}
.brand-left{display:flex;align-items:center;gap:14px;white-space:nowrap}
.brand-title{
  display:flex;align-items:baseline;gap:6px;line-height:1;
  font-style:italic; /* itálico para V-DID */
}
.brand-title .v{
  font-weight:900;font-size:32px;color:#00ff7f;
  text-shadow:0 0 6px rgba(0,255,127,0.9),0 0 14px rgba(0,255,127,0.6);
}
.brand-title .did{font-weight:900;font-size:32px;color:#fff}
.brand-title-2{font-weight:600}
.brand-subtitle{font-size:12px;color:var(--muted)}
.spacer{flex:1 1 auto}
.logo-right{height:72px;width:auto;object-fit:contain;opacity:.95;flex:0 0 auto}

/* ====== TOOLBAR ====== */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;background:var(--surface);
  border-bottom:1px solid #1c212b; position:sticky; top:var(--topBrand); z-index:19;}
button, select{
  background:#1b2230;color:#dbe2ec;border:1px solid #263148;border-radius:6px;
  padding:6px 10px;cursor:pointer}
button:hover, select:hover{background:#223048}
label{font-size:12px;color:var(--muted);margin-right:4px}
.filter{display:flex;align-items:center;gap:6px}
.status{margin-left:auto;font-size:12px;color:var(--muted)}
.badge{background:#133055;border:1px solid #264a7a;color:#bcd8ff;padding:2px 6px;border-radius:999px;font-size:11px}

/* ====== TABELA ====== */
.table-wrap{overflow:auto;} /* sem altura fixa para liberar rodapé */
table{border-collapse:separate;border-spacing:0;width:100%}

/* Cabeçalho (só títulos) */
thead th{
  position:sticky; top:0; z-index:10;
  background:var(--section); color:#e5e7eb; font-weight:800; text-transform:uppercase;
  border-top:2px solid #4a5568; border-bottom:2px solid #00ff7f;
  padding:8px 10px; font-size:12px;
}
th,td{padding:8px 10px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);white-space:nowrap}
th:first-child, td:first-child{
  position:sticky; left:0; background:var(--section); z-index:5;
}
th:last-child,td:last-child{border-right:none}
tbody td{font-size:12px;}
tbody tr:nth-child(odd) td{background:var(--rowA)}
tbody tr:nth-child(even) td{background:var(--rowB)}
tbody tr:hover td{background:#141c29}

/* Separador por EQUIPE */
.sep-row td{background:var(--section)!important;border-top:2px solid #4a5568;height:10px;padding:0;}
.sep-row.alt td{background:var(--section2)!important;}

/* Semáforo */
.pill{display:inline-block;min-width:42px;text-align:center;border-radius:6px;padding:2px 8px;font-weight:700}
.ok{ background:var(--good); color:#031806 }
.down{ background:var(--bad); color:#1a0000 }
.warn{ background:var(--warn); color:#221500 }

/* Botão QR */
.btn-qrcode{
  display:inline-block; background:rgba(255,255,255,0.08); color:#ffffff;
  border:1px solid #00ff7f; border-radius:6px; padding:3px 10px; font-size:12px;
  font-weight:600; cursor:pointer; text-decoration:none; transition: all .2s ease;
}
.btn-qrcode:hover{ background:rgba(255,255,255,0.15); box-shadow:0 0 6px rgba(0,255,127,0.6); }

/* ====== RODAPÉ ====== */
.footer{
  padding:32px 16px 28px;
  margin-top:20px;
  text-align:center;color:var(--muted);font-size:13px;
  background:#0f1218;border-top:1px solid #1f2937;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.footer-brand{
  font-style:italic;
  font-size:28px;font-weight:900;letter-spacing:.5px;
  display:flex;gap:4px;margin-bottom:6px;
}
.footer-brand .v{
  color:#00ff7f;
  text-shadow:0 0 6px rgba(0,255,127,0.9),0 0 14px rgba(0,255,127,0.6);
}
.footer-brand .did{color:#fff;}
.footer-top{font-size:14px;font-weight:600;color:#fff;margin-top:6px;}
.footer-bottom{font-size:12px;color:var(--muted);margin-top:4px;}