/* ============================================================================
   Gestão 360 — estilos da aba do lado gestor (Cris)
   Usa os tokens do painel (--gold, --g2, --w45…), então segue os 2 temas.
   ========================================================================== */

/* ---- sub-abas ---- */
.g3-subs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.g3-sub{background:var(--g2);border:1px solid var(--line);color:var(--w70);
  font:600 12px/1 var(--sans);letter-spacing:.02em;padding:9px 14px;border-radius:100px;
  cursor:pointer;transition:.25s var(--ease);white-space:nowrap}
.g3-sub:hover{border-color:rgba(200,168,107,.4);color:var(--white)}
.g3-sub.on{background:linear-gradient(135deg,var(--gold),var(--gold-l));border-color:transparent;color:var(--ongold)}

/* ---- seletor de período ---- */
.g3-per{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.g3-pb{background:transparent;border:1px solid var(--line);color:var(--w45);
  font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;
  padding:7px 12px;border-radius:8px;cursor:pointer;transition:.25s var(--ease)}
.g3-pb:hover{color:var(--white);border-color:rgba(200,168,107,.35)}
.g3-pb.on{color:var(--gold);border-color:rgba(200,168,107,.55);background:var(--gold-soft)}
.g3-nav{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--w70)}
.g3-nav b{min-width:130px;text-align:center;color:var(--white);font-size:12.5px}

/* ---- KPIs ---- */
.g3-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.g3-kpi{background:var(--g1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  position:relative;overflow:hidden;transition:.3s var(--ease)}
.g3-kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45}
.g3-kpi:hover{border-color:rgba(200,168,107,.3);transform:translateY(-2px)}
.g3-kr{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--w45);
  font-weight:600;display:flex;align-items:center;gap:6px}
.g3-kv{font-family:var(--disp);font-weight:900;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.1;margin:6px 0 2px;letter-spacing:-.01em}
.g3-ks{font-size:11px;color:var(--w45)}

/* ---- gráfico de barras entrou x saiu ---- */
.g3-chart{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:12px;
  padding:0 2px 22px;position:relative}
.g3-chart::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;background:var(--line)}
.g3-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;position:relative;min-width:0}
.g3-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.g3-bars i{width:44%;max-width:26px;border-radius:4px 4px 0 0;display:block;min-height:2px;
  transition:height .7s var(--ease)}
.g3-bars i.in{background:linear-gradient(180deg,#8fd6ae,#4e8f6c)}
.g3-bars i.out{background:linear-gradient(180deg,#e79b8a,#a4523f)}
.g3-col:hover .g3-bars i{filter:brightness(1.15)}
/* o rótulo mora na faixa de padding ABAIXO do eixo — sem isso ele sobe e a
   barra passa por cima do texto */
.g3-rot{position:absolute;bottom:-18px;font-size:10px;color:var(--w45);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---- barras horizontais (top categorias) ---- */
.g3-bar{margin-bottom:9px}
.g3-bt{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:4px}
.g3-bt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g3-bt b{color:var(--white);white-space:nowrap}
.g3-bb{height:7px;border-radius:5px;background:var(--g2);overflow:hidden}
.g3-bb i{display:block;height:100%;border-radius:5px;transition:width .8s var(--ease)}

/* ---- 2 colunas ---- */
.g3-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.g3-2col{grid-template-columns:1fr}}

/* ---- tabelas ---- */
.g3-tab{overflow-x:auto;margin-top:6px;-webkit-overflow-scrolling:touch}
.g3-tab table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.g3-tab th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--w45);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.g3-tab td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:top}
.g3-tab tr:last-child td{border-bottom:0}
.g3-tab tbody tr:hover{background:var(--w07)}
.g3-tab .r{text-align:right;white-space:nowrap}
.g3-tab .small{font-size:11px;color:var(--w45);margin-top:2px}
.g3-det td{background:var(--g2);border-bottom:1px solid var(--line)}
.g3-li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--line2);font-size:12.5px}
.g3-li:last-child{border-bottom:0}

/* ---- nº do contrato: a chave que organiza o documento da turma ---- */
.g3-num{display:inline-block;min-width:92px;text-align:center;font-weight:700;font-size:12.5px;
  letter-spacing:.03em;color:var(--ongold);background:linear-gradient(135deg,var(--gold),var(--gold-l));
  padding:5px 10px;border-radius:8px;white-space:nowrap}
.g3-num.vazio{background:transparent;color:var(--w45);border:1px dashed var(--line);font-weight:600}

/* ---- selos ---- */
.g3-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;border:1px solid var(--line);color:var(--w45)}
.g3-tag.ok{color:var(--v-ok);border-color:rgba(123,214,154,.4);background:rgba(123,214,154,.08)}

/* ---- área de importação ---- */
.g3-drop{border:1.5px dashed rgba(200,168,107,.4);border-radius:16px;padding:30px 20px;
  text-align:center;cursor:pointer;transition:.3s var(--ease);background:var(--w07);
  display:flex;flex-direction:column;align-items:center;gap:6px}
.g3-drop:hover,.g3-drop.on{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-2px)}

.hide{display:none!important}