/* Painel Atendimento IA — tema escuro para projecao em reuniao.
   Sem framework, sem fonte remota. Tudo local. */

:root{
  --fundo:#0a0e13;
  --fundo2:#111823;
  --cartao:#141c28;
  --cartao2:#18212f;
  --borda:#22303f;
  --borda-forte:#31465c;
  --texto:#e8eef6;
  --texto2:#9fb2c7;
  --fraco:#64788e;
  --verde:#2ee6a8;
  --verde-esc:#0f3d31;
  --azul:#4cc9f0;
  --ambar:#ffb547;
  --vermelho:#ff5c72;
  --roxo:#a78bfa;
  --r:12px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--texto);
  font:16px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.forte{font-weight:650}
.fraco{color:var(--fraco)}
.pequeno{font-size:12px;display:block}
.centro{text-align:center}
code{font-family:var(--mono);font-size:.85em;color:var(--texto2)}

/* ---------------------------------------------------------------- topo */
.topo{
  display:flex;align-items:center;gap:28px;
  padding:12px 24px;background:var(--fundo2);
  border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:20;
}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.2px}
.marca.grande{font-size:24px;justify-content:center}
.menu{display:flex;gap:6px;flex:1}
.menu a{
  padding:8px 16px;border-radius:999px;color:var(--texto2);
  font-weight:600;font-size:15px;
}
.menu a:hover{background:var(--cartao);text-decoration:none;color:var(--texto)}
.menu a.on{background:var(--cartao2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borda-forte)}
.usuario{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--texto2)}
.usuario .ctx{
  background:var(--cartao);padding:5px 12px;border-radius:999px;
  border:1px solid var(--borda);color:var(--texto);font-weight:600;
}
.usuario .sair{color:var(--fraco)}

.conteudo{padding:22px 24px 60px;max-width:1900px;margin:0 auto}

/* --------------------------------------------------------------- barra */
.barra{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:6px 0 18px}
.barra h1{margin:0;font-size:28px;letter-spacing:-.3px;font-weight:700}
.barra-dir{display:flex;align-items:center;gap:16px}
.periodo-rot{color:var(--texto2);font-size:14px}
.voltar{color:var(--texto2)}
.tag-admin{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--roxo);color:#1a1230;padding:3px 8px;border-radius:6px;
  vertical-align:middle;font-weight:800;
}

.conexao{font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--borda)}
.conexao.ligando{color:var(--ambar)}
.conexao.ok{color:var(--verde);border-color:#1d5a48;background:rgba(46,230,168,.08)}
.conexao.ok::before{content:"●  ";animation:pulsa 1.6s infinite}
.conexao.caiu{color:var(--vermelho);border-color:#5a2130}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------------------------------------------------------------- kpis */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px}
.kpis.compacto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:1400px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:14px 18px;min-height:104px;display:flex;flex-direction:column;justify-content:center;
}
.kpi-rot{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--texto2);font-weight:700}
.kpi-val{font-size:38px;line-height:1.05;font-weight:750;margin:6px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.kpi-sub{font-size:12.5px;color:var(--fraco)}
.kpi.ok .kpi-val{color:var(--verde)}
.kpi.ruim .kpi-val{color:var(--ambar)}

/* -------------------------------------------------------------- painel */
.painel{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:16px 18px;margin-bottom:20px;
}
.painel-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.painel-topo h2{margin:0;font-size:18px;font-weight:700}
.dica{font-size:13px;color:var(--fraco)}
.secao-titulo{display:flex;align-items:baseline;gap:16px;margin:4px 0 14px}
.secao-titulo h2{margin:0;font-size:20px}
.secao-titulo p{margin:0;color:var(--fraco);font-size:14px}
.colunas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1200px){.colunas{grid-template-columns:1fr}}
.admin-bloco{border-color:#3a2f5c;background:linear-gradient(180deg,#181330,var(--cartao) 120px)}

.vazio{color:var(--fraco);padding:24px;text-align:center;font-size:15px}
.vazio.grande{padding:60px;font-size:20px}

/* ------------------------------------------------------- cartao vivo */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:18px}
.grade.uma{grid-template-columns:minmax(0,1100px)}
.grade.compacta{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}

.chamada{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;
}
.chamada.viva{border-color:#1d5a48;box-shadow:0 0 0 1px rgba(46,230,168,.12),0 12px 30px rgba(0,0,0,.35)}
.chamada.com-cliente{border-color:#2b6f9c}
.ch-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ch-fone{font-size:30px;font-weight:750;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ch-meta{font-size:12.5px;color:var(--fraco);display:flex;gap:10px}
.ch-tempo{text-align:right}
.cron{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--texto)}
.cron.correndo{color:var(--verde)}
.ch-selo{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--fraco)}
.ch-selo.vivo{color:var(--verde)}
.ch-selo.ok{color:var(--verde)}
.ch-selo.aviso{color:var(--ambar)}
.ch-selo.ruim{color:var(--vermelho)}

.ch-cliente{
  background:linear-gradient(90deg,rgba(76,201,240,.16),rgba(76,201,240,.03));
  border:1px solid #2b6f9c;border-radius:10px;padding:10px 14px;
  animation:entra .45s ease-out;
}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ci-rot{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--azul);font-weight:800}
.ci-nome{font-size:26px;font-weight:750;line-height:1.15;margin:2px 0}
.ci-extra{display:flex;gap:14px;font-size:13px;color:var(--texto2)}

/* trilha de etapas */
.trilha{list-style:none;margin:2px 0;padding:0;display:flex;gap:0;counter-reset:e}
.trilha li{
  flex:1;position:relative;padding-top:16px;text-align:center;
  font-size:11.5px;color:var(--fraco);
}
.trilha li em{font-style:normal;display:block;padding:0 2px;line-height:1.25}
.trilha li .ponto{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--borda-forte);
}
.trilha li::before{
  content:"";position:absolute;top:7px;left:0;width:50%;height:2px;background:var(--borda);
}
.trilha li::after{
  content:"";position:absolute;top:7px;left:50%;width:50%;height:2px;background:var(--borda);
}
.trilha li:first-child::before,.trilha li:last-child::after{background:transparent}
.trilha li.feito{color:var(--texto2)}
.trilha li.feito .ponto{background:var(--verde)}
.trilha li.feito::before,.trilha li.feito::after{background:var(--verde-esc)}
.trilha li.atual{color:var(--texto);font-weight:750}
.trilha li.atual .ponto{
  background:var(--verde);box-shadow:0 0 0 5px rgba(46,230,168,.18);
  animation:pulsa 1.4s infinite;
}
.trilha li.atual::before{background:var(--verde-esc)}
.trilha.larga li{font-size:13px;padding-top:20px}
.trilha.larga li .ponto{width:13px;height:13px}

.ch-metricas{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--borda);padding-top:10px}
.ch-metricas>div{display:flex;flex-direction:column}
.m-rot{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fraco);font-weight:700}
.m-val{font-size:19px;font-weight:700;font-family:var(--mono)}
.m-val.bom,.bom{color:var(--verde)}
.m-val.medio,.medio{color:var(--ambar)}
.m-val.baixo,.baixo{color:var(--vermelho)}

/* transcricao */
.ch-transcricao{
  background:var(--fundo);border:1px solid var(--borda);border-radius:10px;
  padding:10px 12px;max-height:280px;overflow-y:auto;
  display:flex;flex-direction:column;gap:7px;
}
.transcricao-cheia{
  background:var(--fundo);border:1px solid var(--borda);border-radius:10px;
  padding:12px;max-height:620px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
}
.fala{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:baseline;font-size:15px}
.fala-quem{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;
  padding:2px 0;text-align:right;
}
.de-ia .fala-quem{color:var(--verde)}
.de-cliente .fala-quem{color:var(--azul)}
.de-ia .fala-texto{color:var(--texto)}
.de-cliente .fala-texto{color:#dbe9ff;font-weight:600}
.fala-hora{font-size:11px;color:var(--fraco);white-space:nowrap}

.ch-rodape{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.alerta{color:var(--ambar);font-weight:650}

/* -------------------------------------------------------------- ficha */
.ficha{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1400px){.ficha{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.ficha{grid-template-columns:repeat(2,1fr)}}
.ficha-bloco{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);padding:12px 16px}
.ficha-bloco.destaque{border-color:var(--borda-forte);grid-column:span 2}
.ficha-bloco.destaque .fb-val{font-variant-numeric:tabular-nums}
.fb-rot{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--texto2);font-weight:700}
.fb-val{font-size:24px;font-weight:700;margin:4px 0 2px}
.fb-val.grande{font-size:27px;white-space:nowrap}
.fb-val.pequeno-val{font-size:17px}
.fb-sub{font-size:12.5px;color:var(--fraco)}

.faixa-cliente{
  background:linear-gradient(90deg,rgba(76,201,240,.18),transparent);
  border:1px solid #2b6f9c;border-radius:var(--r);padding:14px 20px;margin-bottom:18px;
}
.fc-rot{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--azul);font-weight:800}
.fc-nome{font-size:32px;font-weight:750;letter-spacing:-.4px}
.fc-extra{display:flex;gap:18px;color:var(--texto2);font-size:14px}

/* --------------------------------------------------------- linha tempo */
.linha-tempo{list-style:none;margin:0;padding:0;max-height:620px;overflow-y:auto}
.ev{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #1a2430}
.ev:last-child{border-bottom:0}
.ev-hora{font-size:12px;color:var(--fraco);display:flex;flex-direction:column}
.ev-rel{color:#3f5164;font-size:11px}
.ev-rot{font-weight:650;font-size:14px;display:flex;gap:8px;align-items:baseline}
.ev-origem{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fraco);font-weight:700}
.ev-txt{display:block;color:var(--texto2);font-size:14px;margin-top:2px}
.ev-cliente .ev-rot{color:var(--azul)}
.ev-ia .ev-rot{color:var(--verde)}
.ev-destaque .ev-rot{color:var(--roxo)}
.ev-alerta .ev-rot{color:var(--ambar)}
.ev-metrica .ev-rot{color:var(--fraco)}

/* ------------------------------------------------------------ tabelas */
.tabela-rolagem{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th,.tabela td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--borda)}
.tabela thead th{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--texto2);
  font-weight:800;border-bottom:1px solid var(--borda-forte);white-space:nowrap;
}
.tabela tbody tr:hover{background:var(--cartao2)}
.tabela .num{text-align:right}
.tabela tfoot th{font-size:15px;color:var(--texto);border-top:1px solid var(--borda-forte);border-bottom:0;padding-top:12px}
.tabela .dia{display:block;font-size:11px;color:var(--fraco)}
.tabela .acao a{font-size:13px;color:var(--texto2)}
.ok-txt{color:var(--verde)}
.ruim-txt{color:var(--ambar)}

.selo{
  display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;
  border:1px solid var(--borda-forte);color:var(--texto2);white-space:nowrap;
}
.selo.ok{color:var(--verde);border-color:#1d5a48;background:rgba(46,230,168,.08)}
.selo.aviso{color:var(--ambar);border-color:#5c4420;background:rgba(255,181,71,.08)}
.selo.ruim{color:var(--vermelho);border-color:#5a2130;background:rgba(255,92,114,.08)}
.selo.vivo{color:var(--verde);border-color:#1d5a48}

.paginacao{display:flex;gap:20px;align-items:center;justify-content:center;padding:14px;color:var(--texto2);font-size:14px}

/* ------------------------------------------------------------ filtros */
.filtros{
  display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:14px 18px;margin-bottom:18px;
}
.filtros label,.filtro-inline label{
  display:flex;flex-direction:column;gap:5px;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--texto2);font-weight:700;
}
.filtro-inline{display:flex;gap:12px;align-items:flex-end}
input,select,button{font-family:inherit;font-size:15px}
input[type=date],input[type=search],input[type=text],input[type=email],input[type=password],select{
  background:var(--fundo);border:1px solid var(--borda-forte);color:var(--texto);
  border-radius:8px;padding:8px 10px;min-width:150px;
}
input:focus,select:focus{outline:2px solid var(--azul);outline-offset:1px}
button{
  background:var(--verde);color:#062b21;border:0;border-radius:8px;
  padding:9px 20px;font-weight:750;cursor:pointer;
}
button:hover{filter:brightness(1.08)}

/* ------------------------------------------------------------- barras */
.barras{display:flex;align-items:flex-end;gap:8px;height:180px;padding-top:10px}
.barra-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.barra-num{font-size:12px;color:var(--texto2);font-family:var(--mono)}
.barra-bar{width:100%;max-width:52px;background:linear-gradient(180deg,var(--verde),#1a7a5e);border-radius:5px 5px 0 0;min-height:4px}
.barra-rot{font-size:11px;color:var(--fraco)}

/* -------------------------------------------------------------- login */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(1100px 600px at 50% -10%,#132132,var(--fundo))}
.cartao-login{
  background:var(--cartao);border:1px solid var(--borda);border-radius:16px;
  padding:32px 34px;width:min(400px,92vw);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.cartao-login .sub{margin:-6px 0 6px;text-align:center;color:var(--fraco);font-size:14px}
.cartao-login label{display:flex;flex-direction:column;gap:6px;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--texto2);font-weight:700}
.cartao-login input{width:100%}
.cartao-login button{margin-top:8px;padding:12px}
.erro{background:rgba(255,92,114,.12);border:1px solid #5a2130;color:#ffb3be;
  padding:10px 12px;border-radius:8px;font-size:14px}
.aviso{background:rgba(255,181,71,.10);border:1px solid #5c4420;color:#ffd79a;
  padding:10px 12px;border-radius:8px;font-size:14px}

/* ================================================================ ao vivo
   em LINHAS (substitui o mural de cartoes). As classes .grade/.chamada
   continuam definidas acima porque chamada.php ainda as usa. */

.tab-envolta{
  border:1px solid var(--borda);border-radius:var(--r);
  background:var(--cartao);overflow:hidden;
}
.tab-vivo{width:100%;border-collapse:collapse;font-size:14px}
.tab-vivo thead th{
  text-align:left;padding:10px 12px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fraco);background:var(--fundo2);
  border-bottom:1px solid var(--borda);white-space:nowrap;
}
.tab-vivo thead th.c-num{text-align:right}
.tab-vivo td{padding:10px 12px;border-bottom:1px solid var(--borda);vertical-align:middle}
.tab-vivo tbody tr.lin:last-of-type td{border-bottom:none}

.tab-vivo tr.lin{cursor:pointer;transition:background .12s}
.tab-vivo tr.lin:hover{background:var(--cartao2)}
.tab-vivo tr.lin:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.tab-vivo tr.lin.aberta{background:var(--cartao2)}

/* coluna 1: bolinha de estado */
.tab-vivo .c-ind{width:26px;padding-right:0}
.tab-vivo .ind{
  display:block;width:8px;height:8px;border-radius:50%;
  background:var(--fraco);
}
.tab-vivo tr.lin.viva .ind{background:var(--verde);animation:pulsa 1.6s ease-in-out infinite}
.tab-vivo tr.lin.com-alerta .ind{background:var(--ambar)}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(46,230,168,.55)}50%{box-shadow:0 0 0 6px rgba(46,230,168,0)}}

.tab-vivo .c-hora{width:62px;color:var(--texto2)}
.tab-vivo .c-fone{width:150px;font-weight:650}
.tab-vivo .c-cliente{min-width:190px}
.tab-vivo .c-cliente .pequeno{font-size:11px;margin-top:1px}
.tab-vivo .c-assunto{min-width:150px;color:var(--texto2);font-size:13px}
.tab-vivo .c-dur{width:64px;color:var(--texto2)}
.tab-vivo .c-num{width:78px;text-align:right;color:var(--texto2)}
.tab-vivo .c-num.bom{color:var(--verde)}
.tab-vivo .c-num.medio{color:var(--ambar)}
.tab-vivo .c-num.baixo{color:var(--vermelho)}
.tab-vivo .c-desf{width:118px}
.tab-vivo .c-abrir{width:30px;text-align:right;color:var(--fraco)}

.tab-vivo tr.lin.viva .c-dur{color:var(--verde);font-weight:650}
.tab-vivo tr.lin.com-cliente .c-cliente{color:var(--texto)}

/* etapa: rotulo + barrinha de progresso */
.tab-vivo .c-etapa{width:168px}
.etapa-nome{display:block;font-size:12px;color:var(--texto2);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etapa-barra{display:block;height:3px;border-radius:2px;background:var(--borda);overflow:hidden}
.etapa-barra i{display:block;height:100%;width:0;border-radius:2px;background:var(--fraco);
  transition:width .35s ease}
.etapa-barra i.viva{background:var(--verde)}
.etapa-barra i.ok{background:var(--verde)}
.etapa-barra i.aviso{background:var(--ambar)}
.etapa-barra i.ruim{background:var(--vermelho)}
.etapa-barra i.neutro{background:var(--fraco)}

/* selo de desfecho */
.tab-vivo .selo{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;
}
.selo.ok{background:rgba(46,230,168,.12);color:var(--verde);border-color:rgba(46,230,168,.3)}
.selo.aviso{background:rgba(255,181,71,.12);color:var(--ambar);border-color:rgba(255,181,71,.3)}
.selo.vivo{background:rgba(76,201,240,.12);color:var(--azul);border-color:rgba(76,201,240,.3)}
.selo.ruim{background:rgba(255,92,114,.12);color:var(--vermelho);border-color:rgba(255,92,114,.3)}
.selo.neutro{background:var(--fundo2);color:var(--texto2);border-color:var(--borda)}

/* chevron */
.chev{display:inline-block;transition:transform .18s;font-size:11px}
.chev::before{content:'\25B8'}
.tab-vivo tr.lin.aberta .chev{transform:rotate(90deg);color:var(--texto)}

/* ---- painel de detalhe (a linha que abre) */
.tab-vivo tr.det > td{
  padding:0;background:var(--fundo2);
  border-bottom:2px solid var(--borda-forte);
}
.det-corpo{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;padding:16px 18px 18px}
@media (max-width:1100px){.det-corpo{grid-template-columns:1fr}}
.det-esq{min-width:0}
.det-dir{display:flex;flex-direction:column;gap:12px}
.det-corpo .trilha{margin-bottom:14px}
.det-corpo .ch-transcricao{max-height:260px;overflow-y:auto}

.det-metricas{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0}
.det-metricas > div{margin:0}
.det-metricas dt{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--fraco);margin-bottom:2px}
.det-metricas dd{margin:0;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}

.botao-linha{
  display:inline-block;padding:8px 12px;border-radius:8px;text-align:center;
  background:var(--cartao);border:1px solid var(--borda-forte);
  font-size:13px;font-weight:600;
}
.botao-linha:hover{background:var(--cartao2);text-decoration:none}

/* ============================================================= relatorios */

.painel-cartao{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:18px 20px;margin-bottom:18px;
}
.painel-cartao h2{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.01em}
.painel-cartao h2.sub{margin-top:22px}
.duas-colunas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
@media (max-width:1000px){.duas-colunas{grid-template-columns:1fr}}

/* grafico de barras empilhadas, CSS puro */
.grafico-barras{
  display:flex;align-items:flex-end;gap:6px;height:190px;
  padding:8px 0 0;overflow-x:auto;
}
.gb-col{
  flex:1 1 0;min-width:26px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
}
.gb-n{font-size:11px;color:var(--texto2);font-variant-numeric:tabular-nums}
.gb-barra{
  width:100%;max-width:46px;border-radius:4px 4px 0 0;overflow:hidden;
  display:flex;flex-direction:column-reverse;background:var(--fundo2);
  transition:height .3s ease;
}
.gb-barra i{display:block;width:100%}
.gb-dia{font-size:10px;color:var(--fraco);font-variant-numeric:tabular-nums;white-space:nowrap}
.fa-res{background:var(--verde)}
.fa-tra{background:var(--ambar)}
.fa-per{background:#33465b}

.legenda{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--texto2);flex-wrap:wrap}
.legenda .pt{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* tabelas dos relatorios */
.tab-simples{width:100%;border-collapse:collapse;font-size:14px}
.tab-simples th{
  text-align:left;padding:7px 10px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fraco);
  border-bottom:1px solid var(--borda);
}
.tab-simples th.num,.tab-simples td.num{text-align:right;white-space:nowrap}
.tab-simples td{padding:9px 10px;border-bottom:1px solid var(--borda)}
.tab-simples tr:last-child td{border-bottom:none}
.tab-simples tr.apagada td{color:var(--fraco)}

.assunto-nome{display:block;margin-bottom:5px}
.assunto-barra{display:block;height:4px;border-radius:2px;background:var(--fundo2);max-width:260px}
.assunto-barra i{display:block;height:100%;border-radius:2px;background:var(--azul)}

.nota{margin:12px 0 0;font-size:12px;color:var(--fraco);line-height:1.5}
.barra-dir .botao-linha{margin-left:12px;padding:6px 12px}
.kpi.bom .kpi-val{color:var(--verde)}