@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

: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:linear-gradient(135deg, #0b0c0f 0%, #1a1f2e 100%);color:var(--text);
  font:14px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}

/* ====== BARRA SUPERIOR ====== */
.brandbar{
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  padding:10px 16px;background:rgba(21, 26, 35, 0.8);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255, 255, 255, 0.1); position:sticky; top:0; z-index:20; height:var(--topBrand);
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.3);
}
.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 Vfone */
}
.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:rgba(15, 18, 24, 0.8);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255, 255, 255, 0.1); position:sticky; top:var(--topBrand); z-index:19;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);}
button, select{
  background:rgba(27, 34, 48, 0.8);color:#dbe2ec;border:1px solid rgba(255, 255, 255, 0.1);border-radius:12px;
  padding:8px 16px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight:600;text-transform:uppercase;letter-spacing:0.5px;font-size:12px;}
button:hover, select:hover{background:rgba(34, 48, 72, 0.9);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);}
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:rgba(59, 66, 79, 0.9);backdrop-filter:blur(10px); color:#e5e7eb; font-weight:800; text-transform:uppercase;
  border-top:2px solid rgba(255, 255, 255, 0.1); border-bottom:2px solid #00ff7f;
  padding:12px 16px; font-size:12px;letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
}
th,td{padding:12px 16px;border-right:1px solid rgba(255, 255, 255, 0.05);border-bottom:1px solid rgba(255, 255, 255, 0.05);white-space:nowrap}
th:first-child, td:first-child{
  position:sticky; left:0; background:rgba(59, 66, 79, 0.9);backdrop-filter:blur(10px); z-index:5;
}
th:last-child,td:last-child{border-right:none}
tbody td{font-size:12px;transition:all 0.3s ease;}
tbody tr:nth-child(odd) td{background:rgba(15, 19, 26, 0.6);}
tbody tr:nth-child(even) td{background:rgba(17, 23, 34, 0.6);}
tbody tr:hover td{background:rgba(20, 28, 41, 0.8);transform:scale(1.01);box-shadow:0 4px 12px rgba(0, 0, 0, 0.2);}

/* 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:12px;padding:4px 12px;font-weight:700;
  transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.5px;font-size:11px;}
.ok{ background:linear-gradient(135deg, var(--good), #22c55e); color:#031806;box-shadow:0 2px 8px rgba(22, 163, 74, 0.3);}
.down{ background:linear-gradient(135deg, var(--bad), #ef4444); color:#1a0000;box-shadow:0 2px 8px rgba(220, 38, 38, 0.3);}
.warn{ background:linear-gradient(135deg, var(--warn), #fbbf24); color:#221500;box-shadow:0 2px 8px rgba(245, 158, 11, 0.3);}

/* Botão QR */
.btn-qrcode{
  display:inline-block; background:rgba(0,255,127,0.1); color:#00ff7f;
  border:2px solid #00ff7f; border-radius:12px; padding:6px 16px; font-size:12px;
  font-weight:600; cursor:pointer; text-decoration:none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform:uppercase;letter-spacing:0.5px;position:relative;overflow:hidden;
}
.btn-qrcode::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(0,255,127,0.3), transparent);
  transition:left 0.5s;
}
.btn-qrcode:hover::before{left:100%;}
.btn-qrcode:hover{ 
  background:rgba(0,255,127,0.2); 
  box-shadow:0 4px 16px rgba(0,255,127,0.4);
  transform:translateY(-1px) scale(1.02);
}

/* ====== RODAPÉ ====== */
.footer{
  padding:32px 16px 28px;
  margin-top:20px;
  text-align:center;color:var(--muted);font-size:13px;
  background:rgba(15, 18, 24, 0.8);backdrop-filter:blur(20px);border-top:1px solid rgba(255, 255, 255, 0.1);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 -4px 16px rgba(0, 0, 0, 0.2);
}
.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;}