/* Painel GMR — mesma identidade visual do formulario da pesquisa.
   Preto #1F1F1F: tom exato do fundo do PNG do logo, para a marca fundir na faixa.
   Laranja: cor de marca, usada so no "cromado" (faixa, botoes, foco, destaques).
   As barras de favorabilidade mantem verde/ambar/vermelho porque ali a cor
   carrega significado — misturar com o laranja da marca confundiria os dois. */
:root{
  --preto:#1F1F1F; --preto2:#2b2b2b;
  --laranja:#E9A93D; --laranja-claro:#F6CE86; --laranja-escuro:#B8811F;
  --accent:#1F1F1F; --accent2:#8a6c33; --ink:#1f1f1f; --muted:#6f6f6f;
  --line:#e4e0d8; --bg:#f6f5f2; --card:#fff; --good:#2f7d5b; --warn:#b8860b;
  --bad:#a23b3b; --soft:#fbf6ec;
}
*{box-sizing:border-box}
/* Precisa vir antes das regras de layout: um `display` de autor (ex.: .center)
   sobrepoe o display:none que o navegador aplica ao atributo [hidden], e a tela
   escondida continuaria cobrindo a pagina. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:24px 18px}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.logo{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.08em;margin:0}
h1{font-size:25px;color:var(--accent);margin:6px 0 2px}
h2{font-size:18px;color:var(--accent);margin:34px 0 12px;border-bottom:2px solid var(--laranja);padding-bottom:6px}
.sub{color:#5d5852;font-size:14.5px}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:12.5px}

/* ----- login ----- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
/* O PNG do logo tem fundo preto proprio. Num cartao branco ele viraria um
   retangulo escuro solto, entao a marca ganha uma faixa preta de largura total
   no topo do cartao — o fundo do arquivo passa a fazer parte do desenho. */
.auth{width:100%;max-width:400px;padding:0;overflow:hidden}
.auth-top{background:var(--preto);padding:18px;display:flex;justify-content:center}
.auth-body{padding:20px 22px 22px}
.field{margin:14px 0}
.field label{display:block;font-size:14px;margin-bottom:5px}
input{width:100%;font:inherit;padding:10px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--laranja);outline-offset:1px;border-color:var(--laranja)}
input.otp{letter-spacing:.4em;font-size:22px;text-align:center;font-weight:700}
button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 18px;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;width:100%}
button:hover{background:var(--laranja-escuro)}
button:disabled{opacity:.6;cursor:default}
button.link{background:none;color:var(--laranja-escuro);text-decoration:underline;padding:8px;font-weight:500;margin-top:8px}
button.link:hover{background:none;color:var(--accent)}
.msg{margin-top:14px;font-size:13px;padding:10px 12px;border-radius:8px}
.msg.err{background:#f7e7e7;color:var(--bad);border:1px solid #e6bcbc}
.msg.ok{background:#e5f2ec;color:var(--good);border:1px solid #b7ddc9}

/* ----- topo do painel ----- */
header.top{background:var(--preto);border-bottom:3px solid var(--laranja)}
header.top h1{color:#fff}header.top .logo{color:var(--laranja-claro)}
.logo-img{height:30px;width:auto;display:block;margin-bottom:10px}
.auth .logo-img{height:32px;margin:0}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px}
.topactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.who{font-size:12.5px;color:#c9c4bb}
.btn-sec{background:transparent;color:#fff;border:1px solid #4a4a4a;border-radius:8px;
  padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;width:auto;
  text-decoration:none;display:inline-block}
.btn-sec:hover{background:var(--laranja);color:var(--preto);border-color:var(--laranja)}

/* ----- KPIs ----- */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.kpi .num{font-size:40px;font-weight:800;color:var(--accent);line-height:1}
.kpi .num.pos{color:var(--good)} .kpi .num.neg{color:var(--bad)}
.kpi .lbl{color:var(--muted);font-size:13px;margin-top:6px}
.kpi .hint{margin-top:6px}

/* ----- barras ----- */
.barrow{display:flex;align-items:center;gap:12px;margin:9px 0}
.barrow .name{width:170px;font-size:13.5px;flex:none}
.track{flex:1;background:#eef2f5;border-radius:6px;height:20px;overflow:hidden}
.fill{height:100%;border-radius:6px;background:var(--accent2);transition:width .3s}
.fill.hi{background:var(--good)} .fill.mid{background:var(--warn)} .fill.lo{background:var(--bad)}
.barrow .val{width:64px;text-align:right;font-size:13.5px;font-weight:600;flex:none}

/* ----- tabelas ----- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--accent);color:#fff;position:sticky;top:0}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:nth-child(even){background:#f8fafb}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}

/* ----- textos abertos ----- */
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px}
.open{border-top:1px solid var(--line);padding:9px 0;font-size:13.5px}
.open:first-of-type{margin-top:10px}

/* ----- supressao ----- */
.supr{color:var(--muted);font-style:italic;font-size:13px}
.aviso{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--laranja);
  border-radius:8px;padding:12px 14px;font-size:13.5px;margin:16px 0}

.foot{color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}

@media(max-width:640px){
  .g3{grid-template-columns:1fr}
  .barrow .name{width:120px;font-size:12.5px}
  .topbar{align-items:flex-start}
}