/* Portal do cliente BPO4 — identidade BPO4 (azul-marinho), layout do portal Dourado:
   canto reto, sem sombra, cartões com chip, miniatura, título e rodapé. */
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700;800&display=swap");
:root{
  --navy:#13294b; --deep:#0b1a33; --blue:#6fa8ff;
  --bg:#f4f7fb; --surface:#fff; --line:#d9e2ef; --line-2:#e9eef5;
  --ink:#13294b; --ink-2:#52627a; --ink-3:#7b8aa3;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Overpass,"Noto Sans",sans-serif;font-size:15px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit}
.caps{text-transform:uppercase;letter-spacing:.1em}
.nota{font-size:13px;color:var(--ink-2)}
.nota a{color:var(--ink-2)}

/* marca */
.marca{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--navy);text-decoration:none;position:relative;padding-top:6px}
.marca::before{content:"";position:absolute;top:0;left:0;width:28px;height:3px;background:var(--blue);transform:skewY(-8deg);transform-origin:left}
.marca svg{width:24px;height:24px}
.marca small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}

/* topo */
.topo{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--surface)}
.quem{text-align:right}

/* botões e controles (nada com cara de navegador) */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:0;background:var(--navy);color:#fff;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.botao:hover{background:var(--deep)}
.botao:disabled{opacity:.6;cursor:default}
.campo{display:grid;gap:4px;margin-bottom:18px}
.campo label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.input{font-family:inherit;font-size:16px;color:var(--ink);padding:10px 0;border:0;border-bottom:1px solid var(--line);background:transparent;outline:none;width:100%}
.input:focus{border-bottom:2px solid var(--navy);padding-bottom:9px}

/* login */
.login-pagina{min-height:100vh;display:grid;place-items:center;background:var(--deep);padding:20px}
.login-cartao{width:100%;max-width:400px;background:var(--surface);padding:40px 38px;border-top:4px solid var(--blue)}
.login-cartao h1{font-size:28px;font-weight:300;margin:26px 0 6px}
.login-cartao p{color:var(--ink-2);font-size:14px;margin-bottom:28px}
.login-cartao .botao{width:100%;margin-top:6px}
.aviso{margin-top:14px;color:var(--crit);font-size:14px;min-height:20px}

/* hub */
.hub-centro{max-width:1180px;margin:0 auto;padding:56px 28px 80px}
.hub-titulo{font-size:24px;font-weight:300;letter-spacing:.12em;text-transform:uppercase}
.hub-linha{margin:12px 0 36px}
.hub-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.cartao{background:var(--surface);border:1px solid var(--line);padding:14px 14px 16px;display:flex;flex-direction:column;transition:border-color .2s}
.cartao:hover{border-color:var(--navy)}
.cartao-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg);border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.chip svg{width:14px;height:14px}
.estrela{background:none;border:0;cursor:pointer;padding:4px;color:var(--ink-3)}
.estrela svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.estrela.marcada{color:var(--s4)}
.estrela.marcada svg{fill:currentColor}
.mini{aspect-ratio:16/11;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.mini svg{width:62%;height:auto}
.mini .bar{fill:var(--navy)}
.mini .bar2{fill:var(--blue)}
.mini .tr{fill:none;stroke:var(--s1);stroke-width:2.2}
.mini .fina{fill:none;stroke:var(--line);stroke-width:1}
.cartao h2{font-size:18px;font-weight:600;margin:14px 0 2px}
.cartao h2 a{text-decoration:none}
.cartao h2 a::after{content:"";position:absolute;inset:0}
.cartao{position:relative}
.cartao .estrela{position:relative;z-index:1}
.cartao .sub{font-size:13px;color:var(--ink-3)}
.cartao-pe{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.cartao-pe span{display:inline-flex;align-items:center;gap:6px}
.cartao-pe svg{width:14px;height:14px}
.obra .cartao-pe .aviso-obra{color:var(--s2);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.hub-vazio{padding:40px;border:1px dashed var(--line);color:var(--ink-2);background:var(--surface)}

/* BI */
.bi-cab{background:var(--surface);border-bottom:1px solid var(--line)}
.bi-cab-in{max-width:1320px;margin:0 auto;padding:22px 28px 0}
.voltar{font-size:13px;color:var(--ink-2);text-decoration:none}
.voltar:hover{color:var(--navy)}
.bi-nome{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:8px 0 18px}
.bi-nome h1{font-size:28px;font-weight:300}
.abas{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{background:none;border:0;border-bottom:3px solid transparent;padding:10px 16px 12px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.aba:hover{color:var(--navy)}
.aba[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--blue)}
.bi-corpo{max-width:1320px;margin:0 auto;padding:22px 28px 70px}
.filtros{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:22px}
.filtro{display:flex;align-items:center;gap:8px}
.filtro b{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface)}
.seg button{background:none;border:0;padding:7px 11px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;border-left:1px solid var(--line-2)}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--navy);background:var(--bg)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button:disabled{color:var(--line);cursor:default;background:none}

.grade{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:2fr 1fr}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--navy);padding:16px 18px}
.kpi span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kpi b{display:block;font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.kpi.neg b{color:var(--crit)}
.painel{background:var(--surface);border:1px solid var(--line);padding:18px 20px 16px;min-width:0}
.painel h3{font-size:15px;font-weight:700;margin-bottom:2px}
.painel .desc{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.legenda i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.grafico{position:relative}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.grafico text{font-family:Overpass,sans-serif;fill:var(--ink-2);font-size:11px}
.grafico .val{fill:var(--ink);font-weight:700;font-size:10.5px}
.grafico .eixo{stroke:var(--line);stroke-width:1}
.grafico .grade-l{stroke:var(--line-2);stroke-width:1}
.grafico .alvo{fill:transparent;cursor:default}
.grafico .esm{opacity:.35}
.dica{position:absolute;pointer-events:none;background:var(--deep);color:#fff;font-size:12.5px;padding:7px 10px;white-space:nowrap;transform:translate(-50%,-100%);margin-top:-8px;z-index:5;display:none}
.dica b{font-weight:700}

/* tabelas */
.tab-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table.mat{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.mat th,.mat td{padding:7px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2)}
.mat th{background:var(--navy);color:#fff;font-weight:700;font-size:11.5px;position:sticky;top:0}
.mat th:first-child,.mat td:first-child{text-align:left;position:sticky;left:0;background:inherit}
.mat thead th:first-child{background:var(--navy)}
.mat tbody tr{background:var(--surface)}
.mat tr.grupo td{font-weight:700}
.mat tr.grupo td:first-child{cursor:pointer}
.mat tr.grupo td:first-child::before{content:"+";display:inline-block;width:16px;color:var(--ink-3);font-weight:800}
.mat tr.grupo.aberto td:first-child::before{content:"–"}
.mat tr.grupo.sem td:first-child::before{content:"";}
.mat tr.cat td{color:var(--ink-2)}
.mat tr.cat td:first-child{padding-left:34px}
.mat tr.sub{background:var(--bg)}
.mat tr.sub td{font-weight:800;color:var(--navy);border-top:1px solid var(--line)}
.mat tr.total td{background:var(--navy);color:#fff;font-weight:800}
.mat td.neg{color:var(--crit)}
.mat tr.sub td.neg{color:var(--navy)}
.mat tr.total td.neg{color:#ffb4b4}
.mat .col-tot{border-left:1px solid var(--line)}
.sit{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.sit.sobe{color:var(--crit)} .sit.desce{color:var(--good)} .sit.est{color:var(--ink-2)}
.barra-in{display:inline-block;height:6px;background:var(--s1);vertical-align:middle;margin-right:6px}
.vazio{padding:40px;text-align:center;color:var(--ink-3)}

@media (max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
  .topo{padding:12px 18px}
  .bi-cab-in,.bi-corpo,.hub-centro{padding-left:18px;padding-right:18px}
  .marca small{display:none}
  .filtro{flex-wrap:wrap}
  .seg button{padding:7px 9px}
}

/* área da equipe */
.hub-acoes{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.adm-bloco{margin-top:40px}
.adm-bloco > h2{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.adm-form{margin-top:16px}
.adm-form h3{font-size:17px;font-weight:600;margin-bottom:14px}
.adm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px}
.chips-adm{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips-adm button{background:var(--surface);border:1px solid var(--line);padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.chips-adm button:hover{border-color:var(--navy)}
.chips-adm button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.soltar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:34px 20px;border:2px dashed var(--line);background:var(--bg);cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.soltar:hover,.soltar.sobre{border-color:var(--navy);background:#eaf1fb}
.soltar b{font-size:15px;color:var(--navy)}
.previa{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.previa h3{font-size:15px}
.msg{font-size:14px;margin-top:6px}
.msg.erro{color:var(--crit)}
.msg.aviso{color:#9a6b00}
.ok{color:var(--good)}
.botao.fino{background:var(--surface);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);padding:10px 16px}
.botao.fino:hover{background:var(--navy);color:#fff}
.link{background:none;border:0;color:var(--s1);font-weight:600;cursor:pointer;font-size:13px;padding:0}
.link:hover{text-decoration:underline}
table.adm td,table.adm th{text-align:left}
table.adm td a{color:var(--navy);font-weight:700}
tr.inativo td{color:var(--ink-3);text-decoration:line-through}
tr.inativo td:last-child{text-decoration:none}
.senha-box{margin-top:16px;border-left:4px solid var(--s4)}
.senha{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.senha code{font-size:20px;font-weight:700;letter-spacing:.06em;padding:8px 14px;background:var(--bg);border:1px solid var(--line)}