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

:root{
  /* ═══════════════════════════════════════════════════════════════════════════
     PALETA DA AGÊNCIA NOVA

     Quatro cores da marca:

       #97FC56  verde limão   R151 G252 B86
       #6E50FF  violeta       R110 G80  B255
       #F7F7F7  off-white     R247 G247 B247
       #131216  quase-preto   R19  G18  B22

     ─── O que virou marca, e o que NÃO virou ────────────────────────────────

     Marca: o fundo, o texto, e as duas cores de acento — é o cromo, e é ele que
     faz o sistema parecer AGNOVA.

     NÃO virou marca: as seis cores de pessoa e departamento (--gabriel,
     --vitoria, --marcio, --jolu, --grupo, --operacao). A função delas é serem
     DISTINGUIDAS de relance no quadro de Responsabilidades, e a marca só tem
     dois acentos. Colapsar seis categorias em dois matizes faria dois
     departamentos parecerem o mesmo num card pequeno — que é exatamente o que
     aquelas cores existem pra evitar. Todas medem >= 4,85:1 no fundo novo.

     ─── Contraste medido, não estimado ─────────────────────────────────────

       limão    sobre #131216   14,54:1   ✓ serve pra texto pequeno
       off-white sobre #131216  17,41:1   ✓
       violeta  sobre #131216    3,78:1   ~ borda e acento, NÃO texto pequeno

     Por isso o violeta é acento de superfície (borda, seleção, faixa) e nunca
     cor de texto sobre o fundo escuro.
     ═══════════════════════════════════════════════════════════════════════ */
  --bg: #131216;                /* quase-preto da marca. Era #131217 — 1 dígito. */
  --panel: #1b1a21;
  --panel-line: #2b2a33;
  --text: #F7F7F7;              /* off-white da marca. Era #ECEAF0. */

  /* ─── Acentos da marca ───────────────────────────────────────────────────
     `--acento` é a ação: botão primário, item de menu ativo, guia ativa, foco.
     Era `--gabriel` (âmbar) fazendo esse papel — cor de PESSOA usada como cor
     de ação, o que amarrava o botão primário à cor da Gabriel.

     `--acento-2` é o violeta. Fica de reserva pra superfície e seleção; não
     entra em texto pelo contraste de 3,78:1 medido acima. */
  --acento: #97FC56;
  --acento-rgb: 151,252,86;
  --acento-2: #6E50FF;
  --acento-2-rgb: 110,80,255;

  /* Texto SOBRE fundo colorido. Substitui três literais tingidos à mão
     (#1a1509 no botão âmbar, #0f1a19 no check teal, #1a0b0e no chip rosa) —
     cada um ajustado ao seu fundo, e todos condenados a ficar errados quando o
     fundo mudasse. O preto da marca serve nos quatro: limão 14,54 · âmbar 8,65
     · teal 6,61 · rosa 4,85. */
  --sobre-cor: #131216;
  /* Exceção medida: sobre o violeta o preto dá 3,78:1 e reprova. */
  --sobre-acento-2: #F7F7F7;

  /* ─── Cores SEMÂNTICAS, separadas das de pessoa ──────────────────────────
     Antes, `--vitoria` era a pessoa Vitória E o número negativo E o conflito de
     agenda E o erro de login. `--gabriel` era a pessoa, a área Financeiro e os
     avisos. Trocar a cor de alguém mudava o significado de erro no sistema, sem
     ninguém pedir.

     Os tons de erro e aviso são os mesmos de antes — nada muda na tela. O
     positivo passa a ser o limão da marca, que era teal (`--marcio`). */
  --ok: #97FC56;
  --ok-rgb: 151,252,86;
  --erro: #D9556B;
  --erro-rgb: 217,85,107;
  --aviso: #E8A33D;
  --aviso-rgb: 232,163,61;
  --text-dim: #9997A3;
  --text-faint: #6b6974;

  --gabriel: #E8A33D;
  --gabriel-bg: rgba(var(--gabriel-rgb),0.10);
  --vitoria: #D9556B;
  --vitoria-bg: rgba(var(--vitoria-rgb),0.10);
  --marcio: #4FA8A0;
  --marcio-bg: rgba(var(--marcio-rgb),0.10);
  --jolu: #8B7FD6;
  --jolu-bg: rgba(var(--jolu-rgb),0.10);
  --grupo: #8A8894;
  --grupo-bg: rgba(var(--grupo-rgb),0.08);

  /* ─── Trios RGB das cores de pessoa e departamento ────────────────────────
     Existem porque rgba() precisa dos componentes soltos: não há como escrever
     rgba(var(--gabriel), 0.25). Sem eles, os 30 pontos que usam a cor com
     transparência tinham o valor digitado à mão — e uma troca de paleta passava
     batido em todos, deixando resto da cor antiga espalhado pela tela. */
  --gabriel-rgb: 232,163,61;
  --vitoria-rgb: 217,85,107;
  --marcio-rgb: 79,168,160;
  --jolu-rgb: 139,127,214;
  --grupo-rgb: 138,136,148;
  --operacao-rgb: 94,139,214;

  /* A 6ª cor de departamento. Estava inline em .setor-card.dep-operacao, com o
     comentário "o único que faltava na paleta" — agora não falta mais. */
  --operacao: #5E8BD6;

  /* Borda de hover. Estava escrita #3a3944 em 4 lugares e #3a3945 em 3 —
     diferença de 1 no canal azul, imperceptível, e claramente deriva de quem
     digitou o valor duas vezes. Unificado no primeiro. */
  --panel-line-hover: #3a3944;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}

/* ===================== SHELL COM SIDEBAR ===================== */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh;}

.sidebar{
  background:var(--panel);
  border-right:1px solid var(--panel-line);
  padding:24px 0 40px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px; font-weight:700; line-height:1;
  letter-spacing:0.4px; padding:0 22px 4px;
}
.sidebar .brand span{color:var(--text-faint); font-weight:500;}
.sidebar .brand-sub{
  font-size:10.5px; color:var(--text-faint);
  padding:0 22px; letter-spacing:0.4px; text-transform:uppercase;
}
/* A logo entra no lugar do nome escrito. `max-height` é o que impede uma
   imagem grande de empurrar o menu inteiro pra fora da tela. */
.sidebar .brand-logo{
  display:block; max-width:calc(100% - 44px); max-height:64px;
  width:auto; height:auto; object-fit:contain; margin:0 22px 8px;
}
.sidebar #logo-caixa{padding:2px 22px 0;}
.area-label{
  font-size:9.5px; text-transform:uppercase; letter-spacing:0.9px;
  font-weight:700; color:var(--text-faint);
  padding:20px 22px 7px;
}
.nav-item{
  display:flex; align-items:center; gap:9px;
  width:100%; text-align:left;
  background:none; border:none; border-left:2px solid transparent;
  color:var(--text-dim);
  font-family:'Inter',sans-serif; font-size:13.5px;
  padding:9px 22px; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.nav-item:hover{color:var(--text); background:rgba(255,255,255,0.025);}
.nav-item.active{
  color:var(--text); font-weight:600;
  background:rgba(255,255,255,0.045);
  border-left-color:var(--acento);
}
.nav-item .badge{
  margin-left:auto; font-size:10px; font-weight:600;
  padding:2px 7px; border-radius:20px;
  background:var(--gabriel-bg); color:var(--gabriel);
}
.sidebar-foot{
  margin-top:26px; padding:18px 22px 0;
  border-top:1px solid var(--panel-line);
}

.main{padding:26px 30px 80px; min-width:0;}
.topbar{
  max-width:1400px; margin:0 auto 26px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--panel-line); padding-bottom:18px;
}
.topbar h1{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:32px; letter-spacing:0.4px; line-height:1;
}
.topbar .sub{font-size:12px; color:var(--text-dim); margin-top:4px;}
.topbar-right{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;}
#filtro-edicao{min-width:250px;}
#filtro-edicao.hide{display:none;}

@media (max-width:860px){
  .shell{grid-template-columns:1fr;}
  .sidebar{
    position:static; height:auto; padding:18px 0;
    border-right:none; border-bottom:1px solid var(--panel-line);
  }
  .area-label{padding:14px 18px 5px;}
  .main{padding:20px 18px 60px;}
}

.header{
  max-width:1400px;
  margin:0 auto 36px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:16px;
  border-bottom:1px solid var(--panel-line);
  padding-bottom:24px;
}

.header h1{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:44px;
  letter-spacing:0.5px;
  line-height:1;
}
.header h1 span{color:var(--text-faint); font-weight:500;}

.header .meta{
  font-size:13px;
  color:var(--text-dim);
  text-align:right;
  line-height:1.6;
}

.legend{
  max-width:1400px;
  margin:0 auto 28px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-dim);
}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

.board{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.column{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.col-head{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--panel-line);
}

.col-head .name{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:0.3px;
  margin-bottom:2px;
}

/* O nome da coluna É o campo de edição. Sem uma dica visual ninguém descobre
   que dá pra clicar — o tracejado só aparece no hover pra não poluir. */
.col-head .col-nome{
  cursor:text; border-bottom:1px dashed transparent; transition:border-color .12s;
}
.col-head .col-nome:hover{border-bottom-color:currentColor;}
.col-head .col-nome-in{
  font:inherit; color:inherit; width:100%; max-width:190px;
  background:var(--bg); border:1px solid var(--panel-line); border-radius:4px;
  padding:1px 6px;
}
.col-head .count{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:12px;
}

.loadbar{
  height:6px;
  border-radius:3px;
  background:var(--bg);
  overflow:hidden;
  display:flex;
}
.loadbar .seg{height:100%;}

.col-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.card{
  background:var(--bg);
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:11px 13px;
  position:relative;
}

.card .area-tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:600;
  margin-bottom:5px;
  display:inline-block;
}

.card .task{
  font-size:13.5px;
  line-height:1.4;
  color:var(--text);
}

.card .note{
  font-size:11.5px;
  color:var(--text-faint);
  margin-top:5px;
  font-style:italic;
  line-height:1.4;
}

.card.split{
  border-left:2px solid var(--text-faint);
}

/* area colors */
.area-financeiro{color:var(--gabriel);}
.area-comercial{color:var(--vitoria);}
.area-operacao{color:var(--marcio);}
.area-comunicacao{color:var(--jolu);}
.area-gestao{color:var(--grupo);}

.bottom-row{
  max-width:1400px;
  margin:22px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:18px 20px;
}

.panel h2{
  font-family:'Barlow Condensed', sans-serif;
  font-size:19px;
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:0.3px;
}

.panel h2.grupo{color:var(--grupo);}
.panel h2.duvida{color:var(--aviso);}

.panel ul{list-style:none;}
.panel li{
  font-size:13.5px;
  padding:8px 0;
  border-bottom:1px solid var(--panel-line);
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.panel li:last-child{border-bottom:none;}
.panel li .tag{
  font-size:10.5px;
  color:var(--text-faint);
  white-space:nowrap;
  padding-top:2px;
}

.qa-item{
  padding:8px 0;
  border-bottom:1px solid var(--panel-line);
}
.qa-item:last-child{border-bottom:none;}
.qa-item .q{font-size:13.5px; margin-bottom:3px;}
.qa-item .src{font-size:11px; color:var(--text-faint);}

@media (max-width: 980px){
  .board{grid-template-columns:1fr 1fr;}
  .bottom-row{grid-template-columns:1fr;}
}
@media (max-width: 620px){
  .board{grid-template-columns:1fr;}
  .header{flex-direction:column; align-items:flex-start;}
  .header .meta{text-align:left;}
}

/* Tabs — controladas por JS (ver Nav no script) */
.tabs{
  max-width:1400px;
  margin:0 auto 28px;
  display:flex;
  gap:8px;
}
.tab-btn{
  background:transparent;
  border:1px solid var(--panel-line);
  color:var(--text-dim);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:600;
  padding:10px 20px;
  border-radius:7px;
  cursor:pointer;
  transition:all 0.15s ease;
  display:inline-block;
  user-select:none;
}
.tab-btn:hover{color:var(--text); border-color:var(--panel-line-hover);}
.tab-panel{display:none;}

/* Próximos Passos */
.np-group{
  max-width:1400px;
  margin:0 auto 22px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:18px 22px;
}
.np-title{
  font-family:'Barlow Condensed', sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.3px;
  margin-bottom:12px;
  color:var(--text);
}
.np-list{list-style:none;}
.np-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--panel-line);
  font-size:13.5px;
}
.np-list li:last-child{border-bottom:none;}
.np-task{flex:1; min-width:200px; color:var(--text);}
.np-owner{
  font-size:11.5px;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.owner-gabriel{background:var(--gabriel-bg); color:var(--gabriel);}
.owner-vitoria{background:var(--vitoria-bg); color:var(--vitoria);}
.owner-marcio{background:var(--marcio-bg); color:var(--marcio);}
.owner-jolu{background:var(--jolu-bg); color:var(--jolu);}
.owner-all{background:var(--grupo-bg); color:var(--grupo);}
.np-note{
  font-size:11.5px;
  font-style:italic;
  color:var(--text-faint);
  white-space:nowrap;
}
.np-status{
  font-size:10.5px;
  font-weight:600;
  color:var(--gabriel);
  background:var(--gabriel-bg);
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.np-flag{
  color:var(--gabriel);
  font-weight:700;
}
.np-legend-note{
  max-width:1400px;
  margin:0 auto;
  font-size:12px;
  color:var(--text-faint);
  font-style:italic;
}

/* ---- check de conclusão ---- */
.np-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.np-head .np-title{margin-bottom:0;}
.np-prog{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; color:var(--text-dim); white-space:nowrap;
}
.np-prog .track{width:74px; height:5px; border-radius:3px; background:var(--bg); overflow:hidden;}
.np-prog .fill{height:100%; background:var(--marcio); border-radius:3px; transition:width .25s ease;}

.np-check{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex-shrink:0; margin:0;
  border:1.5px solid var(--panel-line-hover); border-radius:5px;
  background:var(--bg); cursor:pointer; position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.np-check:hover{border-color:var(--acento);}
.np-check:focus-visible{outline:2px solid var(--acento); outline-offset:2px;}
.np-check:checked{background:var(--ok); border-color:var(--ok);}
.np-check:checked::after{
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--sobre-cor);
}

.np-list li.done .np-task{text-decoration:line-through; color:var(--text-faint);}
.np-list li.done .np-owner,
.np-list li.done .np-status{opacity:.38;}
.np-list li.done .np-note{opacity:.5;}
.np-done-meta{
  font-size:10.5px; color:var(--marcio);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

.np-resumo{
  max-width:1400px; margin:0 auto 22px;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; padding:16px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.np-resumo .big{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px; font-weight:700; line-height:1;
}
.np-resumo .track{
  flex:1; min-width:160px; height:7px; border-radius:4px;
  background:var(--bg); overflow:hidden;
}
.np-resumo .fill{height:100%; background:var(--marcio); border-radius:4px; transition:width .25s ease;}

/* ============================================================
   LOGIN  (STUB — trocar por Supabase Auth antes de dado real)
   ============================================================ */
#login-screen{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:380px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:12px;
  padding:34px 30px;
}
.login-card h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:34px; font-weight:700; line-height:1; margin-bottom:4px;
}
.login-card h1 span{color:var(--text-faint); font-weight:500;}
.login-sub{font-size:12.5px; color:var(--text-dim); margin-bottom:24px;}
.field{margin-bottom:14px;}
.field label{
  display:block; font-size:11px; font-weight:600; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;
}
.input, .select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--panel-line);
  color:var(--text);
  font-family:'Inter',sans-serif; font-size:13.5px;
  padding:10px 12px; border-radius:7px;
  outline:none;
}
.input:focus, .select:focus{border-color:var(--gabriel);}
.btn{
  width:100%;
  background:var(--acento); color:var(--sobre-cor);
  border:none; border-radius:7px;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
  padding:11px; cursor:pointer; transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.08);}
.login-warn{
  margin-top:20px; padding:11px 13px;
  background:rgba(var(--gabriel-rgb),0.07);
  border:1px solid rgba(var(--gabriel-rgb),0.25);
  border-radius:7px;
  font-size:11.5px; line-height:1.5; color:var(--text-dim);
}
.login-err{
  margin-top:12px; font-size:12px; color:var(--erro); display:none;
}

/* ===================== APP SHELL ===================== */
#app{display:none;}
.user-chip{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--text-dim);
}
.user-chip .avatar{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:var(--sobre-cor);
}
.user-chip .role{
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-faint);
}
.link-btn{
  background:none; border:none; cursor:pointer;
  color:var(--text-faint); font-family:'Inter',sans-serif;
  font-size:12px; text-decoration:underline; padding:0;
}
.link-btn:hover{color:var(--text);}

/* JS tabs */
.tabs{flex-wrap:wrap;}
.tab-btn.active{
  background:var(--panel); color:var(--text); border-color:var(--gabriel);
}
.tab-panel.active{display:block;}

/* ===================== TOOLBAR ===================== */
.toolbar{
  max-width:1400px; margin:0 auto 22px;
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.toolbar .field{margin-bottom:0; min-width:230px;}
.toolbar .spacer{flex:1;}

/* ===================== KPIs ===================== */
.kpi-row{
  max-width:1400px; margin:0 auto 22px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:14px;
}
.kpi{
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; padding:15px 17px;
}
.kpi .label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px;
  font-weight:600; color:var(--text-dim); margin-bottom:7px;
}
.kpi .value{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px; font-weight:700; line-height:1;
}
.kpi .sub{font-size:11.5px; color:var(--text-faint); margin-top:5px;}

/* ── campo editável dentro do card do projeto ───────────────────────────────
   O campo está sempre lá, mas parece texto: sem borda, sem fundo, herdando a
   fonte do lugar onde caiu. A borda só aparece no hover e no foco.

   O motivo é honestidade visual: quem só quer LER o projeto não pode encarar
   uma tela de formulário. Quem quer editar descobre no primeiro hover — e o
   cursor de texto confirma antes mesmo do clique.

   `width:100%` e `min-width:0` porque o card é grid: sem os dois, um line-up
   comprido empurra o card e desalinha a linha inteira. */
.pc-cel{
  width:100%; min-width:0; box-sizing:border-box;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit;
  line-height:inherit; padding:2px 5px; margin:-2px -5px;
  transition:border-color .12s, background .12s;
}
.pc-cel:hover{border-color:var(--panel-line); background:rgba(255,255,255,.02);}
.pc-cel:focus{
  outline:none; border-color:var(--acento);
  background:rgba(var(--ok-rgb),0.06);
}
.pc-cel:disabled{opacity:.5;}                    /* enquanto grava */
.pc-cel::placeholder{color:var(--text-faint); font-weight:400;}

/* O `select` nativo desenha uma seta e um fundo próprios em cada navegador —
   `appearance:none` é o que o faz parecer o mesmo texto dos outros cards. */
.pc-cel select, select.pc-cel{appearance:none; -webkit-appearance:none; cursor:pointer;}
select.pc-cel option{background:var(--panel); color:var(--text); font-size:13px;}

/* As três medidas dos cards: o valor grande (Status, Horário), o médio
   (Line-up, que costuma ter vários nomes) e o mini (a linha de baixo). */
.pc-grande{font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:700;}
.pc-medio {font-family:'Barlow Condensed',sans-serif; font-size:15px; line-height:1.35; font-weight:700;}
.pc-mini  {font-size:11.5px; color:var(--text-faint); display:inline-block; width:auto; min-width:60px;}
.kpi.auto{border-left:2px solid var(--marcio);}

/* ===================== TABELAS ===================== */
.table-wrap{
  max-width:1400px; margin:0 auto 22px;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; overflow:hidden;
}
.table-head{
  padding:16px 20px 14px;
  border-bottom:1px solid var(--panel-line);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap;
}
.table-head h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px; font-weight:700; letter-spacing:0.3px;
}
.table-head .hint{font-size:11.5px; color:var(--text-faint); font-style:italic;}
.scroll-x{overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:720px;}
th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px;
  font-weight:600; color:var(--text-dim); text-align:right;
  padding:11px 14px; border-bottom:1px solid var(--panel-line);
  white-space:nowrap; cursor:pointer; user-select:none;
}
th:first-child, td:first-child{text-align:left;}
th.no-sort{cursor:default;}
th:hover:not(.no-sort){color:var(--text);}
th .arrow{opacity:0.45; font-size:9px; margin-left:3px;}
td{
  font-size:13px; text-align:right; padding:11px 14px;
  border-bottom:1px solid var(--panel-line); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,0.018);}
tfoot td{
  font-weight:700; font-size:13px;
  border-top:1px solid var(--panel-line); border-bottom:none;
  background:rgba(255,255,255,0.02);
}
.num{font-variant-numeric:tabular-nums;}
.pos{color:var(--ok);}
.neg{color:var(--erro);}
.muted{color:var(--text-faint);}
.empty{padding:34px 20px; text-align:center; color:var(--text-faint); font-size:13px;}

/* barra inline de conversão */
.bar-cell{display:flex; align-items:center; gap:9px; justify-content:flex-end;}
.bar-track{width:52px; height:5px; border-radius:3px; background:var(--bg); overflow:hidden; flex-shrink:0;}
.bar-fill{height:100%; border-radius:3px;}

/* pills */
.pill{
  font-size:10.5px; font-weight:600; padding:3px 9px;
  border-radius:20px; white-space:nowrap; display:inline-block;
}
.pill-fechado{background:rgba(var(--ok-rgb),0.12); color:var(--ok);}
.pill-rascunho{background:rgba(var(--aviso-rgb),0.12); color:var(--aviso);}
.pill-pendente{background:rgba(var(--aviso-rgb),0.12); color:var(--aviso);}
.pill-rp{background:var(--vitoria-bg); color:var(--vitoria);}
.pill-promoter{background:var(--jolu-bg); color:var(--jolu);}
.pill-comissario{background:var(--marcio-bg); color:var(--marcio);}

/* ===================== VIP ===================== */
.vip-grid{
  max-width:1400px; margin:0 auto 22px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:18px;
}
.vip-split{display:flex; flex-direction:column; gap:16px; margin-top:4px;}
.vip-row .top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; margin-bottom:7px;
}
.vip-row .top .n{font-weight:600;}
.vip-row .top .n small{color:var(--text-faint); font-weight:400; margin-left:5px;}
.vip-bar{height:8px; border-radius:4px; background:var(--bg); overflow:hidden; display:flex;}
.vip-bar .fill{height:100%;}
.vip-legend{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-line);
  font-size:11.5px; color:var(--text-faint);
}
.ratio{
  display:flex; align-items:baseline; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-size:32px; font-weight:700;
}
.ratio .vs{font-size:15px; color:var(--text-faint);}
.warn-inline{
  margin-top:14px; padding:10px 12px;
  background:rgba(var(--gabriel-rgb),0.06);
  border-left:2px solid var(--gabriel);
  border-radius:0 6px 6px 0;
  font-size:11.5px; line-height:1.5; color:var(--text-dim);
}

/* ===================== IMPORTAÇÃO ===================== */
.dropzone{
  border:1px dashed var(--panel-line-hover); border-radius:9px;
  padding:26px 20px; text-align:center;
  color:var(--text-dim); font-size:13px;
  transition:all .15s ease; cursor:pointer;
}
.dropzone:hover{border-color:var(--gabriel); color:var(--text);}
.dropzone .big{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px; font-weight:700; color:var(--text); margin-bottom:4px;
}
.imp-grid{
  max-width:1400px; margin:0 auto 22px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.steps{list-style:none; counter-reset:s;}
.steps li{
  counter-increment:s; position:relative;
  padding:9px 0 9px 30px; font-size:13px; line-height:1.5;
  border-bottom:1px solid var(--panel-line);
}
.steps li:last-child{border-bottom:none;}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:9px;
  width:19px; height:19px; border-radius:50%;
  background:var(--gabriel-bg); color:var(--gabriel);
  font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps li b{color:var(--text);}

/* ===================== LOCKED ===================== */
.locked{
  max-width:560px; margin:70px auto; text-align:center;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; padding:40px 30px;
}
.locked .ico{font-size:30px; margin-bottom:12px;}
.locked h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:700; margin-bottom:8px;
}
.locked p{font-size:13px; color:var(--text-dim); line-height:1.6;}

/* ===================== PROGRAMAÇÃO ===================== */
.cal-legenda{
  max-width:1400px; margin:0 auto 20px;
  display:flex; gap:18px; flex-wrap:wrap;
  font-size:12px; color:var(--text-dim);
}
.cal-legenda .bar{width:14px; height:14px; border-radius:3px;}
.cal-legenda .item{display:flex; align-items:center; gap:7px;}

.cal-month{max-width:1400px; margin:0 auto 26px;}
.cal-month h2{
  font-family:'Barlow Condensed',sans-serif; font-size:24px;
  font-weight:700; margin-bottom:11px; letter-spacing:0.3px;
  text-transform:capitalize;
}
.cal-table{
  width:100%; border-collapse:collapse; min-width:900px;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; overflow:hidden; font-size:13px;
}
.cal-table th{
  background:#0e0d12; color:var(--text-dim);
  font-weight:600; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.5px; text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--panel-line); white-space:nowrap;
}
.cal-table td{
  padding:10px 12px; border-bottom:1px solid var(--panel-line);
  vertical-align:top; color:var(--text); text-align:left;
}
.cal-table tr:last-child td{border-bottom:none;}
.cal-week-row td{
  background:#232229; font-family:'Barlow Condensed',sans-serif;
  font-weight:600; font-size:14px; letter-spacing:0.4px;
  color:var(--text-dim); padding:8px 12px;
}
.cal-table tr.st-confirmado{border-left:3px solid var(--marcio);}
.cal-table tr.st-pendente{border-left:3px solid var(--gabriel);}
.cal-table tr.st-conflito{border-left:3px solid var(--erro);}
.cal-table tr.st-inativo td{color:var(--text-faint);}
.cal-table tr.st-bloqueio{border-left:3px solid var(--jolu);}
.cal-table tr.st-bloqueio td{color:var(--jolu);}

.status-chip{
  display:inline-block; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:20px; margin-left:6px;
  vertical-align:middle; white-space:nowrap;
}
.chip-confirmado{background:rgba(var(--ok-rgb),0.10); color:var(--ok);}
.chip-pendente{background:rgba(var(--aviso-rgb),0.10); color:var(--aviso);}
.chip-conflito{background:rgba(var(--erro-rgb),0.10); color:var(--erro);}
.chip-realizada{background:var(--grupo-bg); color:var(--grupo);}
.cal-table tr.st-realizada{border-left:3px solid var(--grupo);}
.cal-table tr.clicavel{cursor:pointer;}
.cal-table tr.clicavel:hover{background:rgba(255,255,255,0.03);}
.campo.alimenta{
  background:rgba(var(--marcio-rgb),0.08);
  border-color:rgba(var(--marcio-rgb),0.28);
  color:var(--marcio);
}
.cal-note{
  font-size:11.5px; font-style:italic; color:var(--text-faint);
  display:block; margin-top:3px; line-height:1.45;
}

/* caixa de conflitos derivados */
.conf-box{
  max-width:1400px; margin:0 auto 22px;
  background:rgba(var(--vitoria-rgb),0.06);
  border:1px solid rgba(var(--vitoria-rgb),0.28);
  border-radius:10px; padding:16px 20px;
}
.conf-box h3{
  font-family:'Barlow Condensed',sans-serif; font-size:18px;
  font-weight:700; color:var(--vitoria); margin-bottom:4px;
}
.conf-box .sub{font-size:11.5px; color:var(--text-dim); margin-bottom:12px;}
.conf-item{
  display:flex; gap:11px; padding:9px 0; font-size:13px; line-height:1.5;
  border-bottom:1px solid rgba(var(--vitoria-rgb),0.14);
}
.conf-item:last-child{border-bottom:none;}
.conf-item .d{
  font-weight:700; color:var(--vitoria); white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:44px;
}
.conf-ok{
  max-width:1400px; margin:0 auto 22px; padding:14px 20px;
  background:rgba(var(--marcio-rgb),0.06); border:1px solid rgba(var(--marcio-rgb),0.25);
  border-radius:10px; font-size:13px; color:var(--marcio);
}

/* ===================== AGENDA ===================== */
.agenda-list{max-width:920px; margin:0 auto;}
.agenda-item{
  display:flex; gap:18px; padding:16px 4px;
  border-bottom:1px solid var(--panel-line);
}
.agenda-item:last-child{border-bottom:none;}
.agenda-date{width:80px; flex-shrink:0; text-align:center;}
.agenda-date .num{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:30px; color:var(--marcio); line-height:1;
}
.agenda-date .mon{
  font-size:11px; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.5px;
}
.agenda-body{flex:1; min-width:0;}
.agenda-body .title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:19px; margin-bottom:4px;
}
.agenda-body .meta{font-size:12.5px; color:var(--text-dim); margin-bottom:2px;}
.agenda-body .meta b{color:var(--text);}
.agenda-day-tag{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.4px; color:var(--marcio); background:var(--marcio-bg);
  padding:2px 9px; border-radius:20px;
  display:inline-block; margin-bottom:6px;
}

/* ===================== LOGIN extra ===================== */
.login-ok{
  margin-top:12px; font-size:12px; color:var(--ok);
  line-height:1.5; display:none;
}
.login-alt{
  margin-top:16px; font-size:12.5px;
  color:var(--text-dim); display:flex; gap:6px; justify-content:center;
}
.login-alt.fina{margin-top:8px;}

/* ===================== PRINT / COMPROVANTE =====================
   Fica visualmente abaixo e mais apagado que o bloco do arquivo de dados. É
   deliberado: print é prova, o .csv é o que alimenta o DRE, e a hierarquia da
   tela tem que dizer isso sem precisar de legenda. */
.print-zona, .print-bloco{
  margin-top:10px; padding:11px 13px;
  border:1px dashed var(--panel-line); border-radius:9px;
  background:rgba(255,255,255,0.012);
  font-size:11.5px;
}
.print-zona{cursor:pointer; display:block; outline:none; transition:border-color .15s ease, background .15s ease;}
.print-zona:hover{border-color:var(--panel-line-hover);}
.print-zona:focus{
  border-color:var(--gabriel); border-style:solid;
  background:var(--gabriel-bg);
}
.print-chamada{font-weight:600; color:var(--text-dim); margin-bottom:3px;}
.print-nota{font-size:10.5px; color:var(--text-faint); margin-top:5px;}
.print-escolher{text-decoration:underline; cursor:pointer; color:var(--text-dim);}
.print-escolher:hover{color:var(--text);}
.print-bloco{border-style:solid;}
.print-bloco .lbl{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.7px;
  font-weight:700; color:var(--text-faint); margin-bottom:7px;
}
.print-thumb{
  display:block; width:100%; max-height:150px; object-fit:cover;
  border-radius:6px; border:1px solid var(--panel-line); background:var(--bg);
  min-height:44px;
}
.print-acoes{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px;}

/* ===================== AGENDA: cor por período =====================
   Faixa na esquerda, não fundo colorido: o texto continua legível e a leitura
   de "que tipo de evento é" acontece na periferia da visão. */
.agenda-item.per-dia,
.agenda-item.per-noite,
.agenda-item.per-misto{border-left:3px solid var(--panel-line); padding-left:14px;}
.agenda-item.per-dia  {border-left-color:var(--gabriel);}   /* dia   — âmbar  */
.agenda-item.per-noite{border-left-color:var(--jolu);}      /* noite — roxo   */
.agenda-item.per-misto{border-left-color:var(--marcio);}    /* os dois no mesmo dia */
.agenda-item.per-dia   .agenda-date .num{color:var(--gabriel);}
.agenda-item.per-noite .agenda-date .num{color:var(--jolu);}
.agenda-item.per-misto .agenda-date .num{color:var(--marcio);}

.sem-qtd{
  float:right; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--text-faint); font-size:10.5px;
}

/* ===================== CONFERÊNCIA DO FECHAMENTO ===================== */
.fech-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;
  margin-top:14px;
}
.fech-campo{
  font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  font-weight:700; color:var(--text-faint);
}
.fech-campo .input{
  margin-top:4px; text-transform:none; letter-spacing:0; font-weight:400;
  text-align:right; font-variant-numeric:tabular-nums;
}
/* conta que não fechou fica impossível de ignorar */
.conf-item.falhou{
  background:var(--vitoria-bg);
  border-left:3px solid var(--vitoria);
  padding-left:10px; margin-left:-13px; border-radius:0 6px 6px 0;
}

/* ===================== QUADRO DE RESPONSABILIDADES ===================== */
.card[draggable="true"]{cursor:grab;}
.card[draggable="true"]:active{cursor:grabbing;}
.card.arrastando{opacity:.4; transform:scale(.97);}
/* a coluna de destino se acende — o alvo tem que ser óbvio durante o arraste */
.col-body.sobre{
  background:var(--gabriel-bg);
  outline:2px dashed var(--gabriel); outline-offset:-4px; border-radius:8px;
}
.col-body{min-height:70px;}
.col-vazia{
  padding:18px 10px; text-align:center; font-size:11.5px;
  color:var(--text-faint); border:1px dashed var(--panel-line); border-radius:8px;
}
.proc-desc{
  margin-top:5px; font-size:11px; color:var(--text-faint); line-height:1.45;
}
.col-nome{cursor:text; border-bottom:1px dashed transparent; padding-bottom:1px;}
.col-nome:hover{border-bottom-color:currentColor;}
.col-nome-in{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--gabriel); border-radius:5px;
  font-family:'Barlow Condensed',sans-serif; font-size:inherit; font-weight:inherit;
  padding:2px 6px; outline:none;
}
.sem-conta{
  margin-left:6px; padding:2px 6px; border-radius:999px;
  background:var(--grupo-bg); border:1px solid var(--panel-line);
  color:var(--text-faint);
  font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}

/* ---- guia "Todos os processos": lista com ordem livre ---- */
.proc-linha{
  display:flex; align-items:center; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--panel-line);
  font-size:13px;
}
.proc-linha:last-child{border-bottom:none;}
.proc-linha.arrastando{opacity:.4;}
/* linha de destino ganha uma barra em cima: mostra onde o item vai cair */
.proc-linha.alvo{box-shadow:inset 0 2px 0 var(--gabriel); background:var(--gabriel-bg);}
.proc-alca{
  cursor:grab; color:var(--text-faint); font-size:15px;
  padding:0 2px; user-select:none;
}
.proc-linha:active .proc-alca{cursor:grabbing;}
.proc-num{
  width:26px; text-align:right; color:var(--text-faint);
  font-variant-numeric:tabular-nums; font-size:11.5px;
}
.proc-tit{color:var(--text);}

/* ===================== ACESSOS POR ÁREA ===================== */
.acessos-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px;
}
.acesso-item{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 11px; border-radius:8px; font-size:12.5px;
  background:var(--panel); border:1px solid var(--panel-line);
}
.acesso-item:hover{border-color:var(--panel-line-hover);}

/* ===================== FILTROS ===================== */
.filtros{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:18px; padding:14px 16px;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:12px;
}
.filtros label{
  font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  font-weight:700; color:var(--text-faint);
}
.filtros .input{
  margin-top:4px; min-width:150px; max-width:260px;
  text-transform:none; letter-spacing:0; font-weight:400;
}

/* barras da curva de entrada */
.hbar{display:flex; align-items:center; gap:9px; margin-bottom:6px; font-size:12px;}
.hbar-n{width:34px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.hbar-t{flex:1; height:14px; background:var(--bg); border-radius:4px; overflow:hidden;}
.hbar-f{height:100%; background:var(--gabriel); border-radius:4px;}
.hbar-v{width:42px; text-align:right; color:var(--text); font-variant-numeric:tabular-nums;}

/* ===================== MÊS RECOLHÍVEL (Projetos) ===================== */
.mes-cab{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  cursor:pointer; user-select:none; border-radius:8px;
  padding:6px 8px; margin-left:-8px;
  transition:background .12s ease;
}
.mes-cab:hover{background:rgba(255,255,255,0.03);}
.mes-seta{
  display:inline-block; width:14px;
  font-size:11px; color:var(--text-faint);
}
.mes-resumo{
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--text-faint);
}
.mes-resumo b{color:var(--gabriel); font-weight:600;}
.cal-month.fechado{margin-bottom:6px;}      /* fechado ocupa quase nada */

/* ===================== GUIAS (aba dentro da aba) ===================== */
.guias{
  display:flex; gap:4px; margin-bottom:18px;
  border-bottom:1px solid var(--panel-line);
}
.guia{
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-faint); cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  padding:9px 14px; margin-bottom:-1px;
}
.guia:hover{color:var(--text-dim);}
.guia.ativa{color:var(--acento); border-bottom-color:var(--acento);}

/* ===================== IMPORTAR COM IA =====================
   A tela de conferência é deliberadamente "não-final": fundo diferente do
   resto, cada campo num input aberto. Tem que parecer rascunho, porque é. */
.ia-caixa{
  max-width:1400px; margin:0 auto 22px; padding:20px 22px;
  background:rgba(var(--gabriel-rgb),0.04);
  border:1px solid rgba(var(--gabriel-rgb),0.25);
  border-radius:16px;
}
.ia-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.ia-head h2{
  font-family:'Barlow Condensed',sans-serif; font-size:22px;
  font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}
.ia-sub{font-size:12px; color:var(--text-dim); margin-top:5px; max-width:70ch;}
.ia-lendo{font-size:13px; color:var(--text-dim); padding:8px 0;}
.ia-falhou{font-size:13px; color:var(--vitoria); line-height:1.5;}
.ia-obs{
  margin-bottom:14px; padding:10px 13px; border-radius:9px;
  background:var(--grupo-bg); border:1px solid var(--panel-line);
  font-size:12px; color:var(--text-dim);
}
.ia-card{
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:12px; padding:14px 16px; margin-bottom:12px;
  transition:opacity .15s ease;
}
.ia-card.fora{opacity:.45;}                 /* desmarcado sai de foco, não some */
.ia-card-topo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.ia-usar{display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer;}
.ia-selo{
  font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.ia-selo.c-alta  {background:var(--marcio-bg);  color:var(--marcio);  border:1px solid rgba(var(--marcio-rgb),.35);}
.ia-selo.c-media {background:var(--gabriel-bg); color:var(--gabriel); border:1px solid rgba(var(--gabriel-rgb),.35);}
.ia-selo.c-baixa {background:var(--vitoria-bg); color:var(--vitoria); border:1px solid rgba(var(--vitoria-rgb),.35);}
.ia-selo.dup     {background:var(--grupo-bg);   color:var(--text-dim);border:1px solid var(--panel-line);}
.ia-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px;
}
.ia-grade label, .ia-nota{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  font-weight:700; color:var(--text-faint);
}
.ia-nota{display:block; margin-top:10px;}
.ia-grade .input, .ia-nota .input{margin-top:4px; text-transform:none; letter-spacing:0; font-weight:400;}
/* Quadro de colar print. Grande de propósito: é alvo de Ctrl+V, e alvo
   pequeno erra. */
.print-alvo{
  display:block; padding:28px 20px; text-align:center; cursor:pointer;
  border:2px dashed var(--panel-line); border-radius:12px;
  background:var(--panel); outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.print-alvo:hover{border-color:var(--panel-line-hover);}
.print-alvo:focus{border-color:var(--gabriel); background:var(--gabriel-bg);}
.print-alvo .print-chamada{font-size:15px; margin-bottom:6px;}
.ia-cru{
  margin-top:8px; padding:10px 12px; max-height:180px; overflow:auto;
  background:var(--bg); border:1px solid var(--panel-line); border-radius:8px;
  font-size:11px; color:var(--text-dim); white-space:pre-wrap; line-height:1.5;
}
.ia-trecho{
  margin-top:11px; padding-top:10px; border-top:1px solid var(--panel-line);
  font-size:11.5px; color:var(--text-faint); font-style:italic; line-height:1.5;
}

/* Botão destrutivo esperando o segundo clique. */
.btn-mini.armado{
  background:var(--vitoria); border-color:var(--vitoria); color:var(--sobre-cor);
  font-weight:700;
}

/* ===================== ETAPAS DO PROJETO =====================
   Dois níveis: a etapa macro é a moldura (fundo quase preto, canto bem
   arredondado) e as subetapas são os cartões claros dentro dela. O contraste
   entre os dois fundos é o que faz o agrupamento ser lido de longe — se a
   moldura tivesse a mesma cor do cartão viraria cartão dentro de cartão. */
.etapa{
  max-width:1400px;
  margin:26px auto 0;
  background:rgba(255,255,255,0.018);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:22px 24px 26px;
}
.etapa-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--panel-line);
}
.etapa-tit h2{
  font-family:'Barlow Condensed', sans-serif;
  font-size:26px; font-weight:700; letter-spacing:0.6px; line-height:1;
  text-transform:uppercase;
}
.etapa-sub{font-size:12px; color:var(--text-dim); margin-top:6px;}
.etapa-cont{
  font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  white-space:nowrap; padding:5px 11px; border-radius:999px;
  background:var(--grupo-bg); border:1px solid var(--panel-line); color:var(--text-dim);
}
.etapa-cont.ok{
  background:var(--marcio-bg); border-color:rgba(var(--marcio-rgb),0.35); color:var(--marcio);
}
.etapa-cont.alerta{
  background:var(--vitoria-bg); border-color:rgba(var(--vitoria-rgb),0.35); color:var(--vitoria);
}
.etapa-aviso{
  margin-bottom:16px; padding:11px 14px;
  background:var(--grupo-bg); border:1px solid var(--panel-line);
  border-radius:9px; font-size:12px; color:var(--text-dim);
}
/* dentro da etapa a largura já está limitada pela moldura */
.etapa-corpo .setores,
.etapa-corpo .fech-grid{max-width:none; margin-left:0; margin-right:0;}
.etapa-corpo > .barra-acoes:first-child{margin-top:0;}
.etapa-corpo > .table-head:first-child{padding-top:0;}

/* ===================== SETORES DO PROJETO =====================
   Só na tela do projeto. `.np-group` continua empilhado em Próximos Passos —
   é a mesma marcação com um modificador, não um segundo componente. */
.setores{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:16px;
  align-items:start;
  max-width:1400px;
  margin:0 auto;
}
/* Cada departamento tem cor própria. Não é enfeite: com cinco cartões iguais
   lado a lado, achar "produção" custa ler cinco títulos. Com cor, o olho vai
   direto — e a cor é a MESMA que o selo de área usa nas outras telas, então o
   que se aprende aqui vale em Próximos Passos e Minhas Tarefas. */
.setor-card{
  --dep: var(--grupo);
  max-width:none;                 /* o grid manda na largura, não o .np-group */
  margin:0;
  border-radius:16px;
  padding:0 0 8px;                /* o padding foi pros filhos, por causa da faixa */
  overflow:hidden;                /* a faixa de cima acompanha o canto arredondado */
  border-color:#33323d;
  transition:border-color .18s ease, transform .18s ease;
}
.setor-card.dep-comunicacao{--dep: var(--jolu);}
.setor-card.dep-producao   {--dep: var(--marcio);}
.setor-card.dep-comercial  {--dep: var(--vitoria);}
.setor-card.dep-financeiro {--dep: var(--gabriel);}
.setor-card.dep-operacao   {--dep: var(--operacao);}     /* azul: o único que faltava na paleta */

/* faixa superior — é o que dá pra ver de longe */
.setor-card::before{
  content:''; display:block; height:4px; background:var(--dep);
}
.setor-card:hover{border-color:var(--dep); transform:translateY(-1px);}

.setor-card .np-head{
  margin:0 0 2px; padding:16px 20px 12px;
  border-bottom:1px solid var(--panel-line);
}
.setor-card .np-title{color:var(--dep);}
.setor-card .np-prog .fill{background:var(--dep);}
.setor-card .np-list{padding:0 20px;}
.setor-card .setor-alerta{margin:12px 20px 0;}

/* linha entre tarefas mais visível — o pedido era "dividir com linhas" */
.setor-card .np-list li{
  border-bottom:1px solid var(--panel-line);
  padding:11px 0;
}
.setor-card .np-list li:last-child{border-bottom:none;}
/* área inteira fechada: recolhe pro fundo em vez de competir com as abertas */
.setor-card.completo .np-title{color:var(--text-dim);}
.setor-card.completo{opacity:.72;}
.setor-card.completo:hover{opacity:1;}
/* Departamento sem tarefa: presente mas discreto — é convite, não alarme.
   Mantém a faixa colorida (você reconhece o departamento mesmo vazio), mas
   apaga o resto pra não competir com quem tem trabalho de verdade. */
.setor-card.vazio{background:transparent; border-style:dashed;}
.setor-card.vazio::before{opacity:.45;}
.setor-card.vazio .np-title{opacity:.6;}
.setor-zero{
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap;
}
.setor-add{
  display:block; width:calc(100% - 40px); margin:10px 20px 6px;
  text-align:center; border-style:dashed; color:var(--text-dim);
}
.setor-add:hover{border-style:solid; border-color:var(--dep); color:var(--dep);}
.setor-alerta{
  align-self:flex-start; display:inline-block;
  margin:0 0 10px;
  padding:3px 9px; border-radius:999px;
  background:var(--vitoria-bg); border:1px solid rgba(var(--vitoria-rgb),0.35);
  color:var(--vitoria);
  font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
}

/* ===================== FECHAMENTO DE PROJETO ===================== */
#tbl-projetos tbody tr.sel{background:rgba(var(--gabriel-rgb),0.07);}
#tbl-projetos tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--gabriel);}

.fech-grid{
  max-width:1400px; margin:0 auto 22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.fech-card{
  background:var(--panel); border:1px solid var(--panel-line);
  border-top:3px solid var(--panel-line);
  border-radius:10px; padding:16px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.fech-card.st-conferido{border-top-color:var(--marcio);}
.fech-card.st-enviado{border-top-color:var(--gabriel);}
.fech-card.st-pendente{border-top-color:var(--vitoria);}
.fech-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.fech-head .ft{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px; font-weight:700; line-height:1.15;
}
.fech-head .fd{font-size:11.5px; color:var(--text-faint); margin-top:3px;}
.fech-campos .lbl{
  font-size:9.5px; text-transform:uppercase; letter-spacing:0.7px;
  font-weight:700; color:var(--text-faint); margin-bottom:8px;
}
.campo{
  display:inline-block; font-size:11px; color:var(--text-dim);
  background:var(--bg); border:1px solid var(--panel-line);
  padding:3px 8px; border-radius:5px; margin:0 5px 5px 0;
}
.fech-arq{
  background:var(--bg); border:1px solid var(--panel-line);
  border-radius:7px; padding:11px 13px; margin-top:auto;
}
.fech-arq code{font-size:11.5px; color:var(--marcio); word-break:break-all;}
.fech-card .dropzone{margin-top:auto;}

.fp-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.fp-grid .field{margin-bottom:0;}

@media (max-width:980px){ .fech-grid{grid-template-columns:1fr;} }

/* ===================== USUÁRIOS ===================== */
.btn-mini{
  background:none; border:1px solid var(--panel-line);
  color:var(--text-dim); font-family:'Inter',sans-serif;
  font-size:11.5px; font-weight:600; padding:5px 11px;
  border-radius:6px; cursor:pointer; margin-left:6px;
}
.btn-mini:hover{color:var(--text); border-color:var(--panel-line-hover);}
.btn-mini.ok{color:var(--ok); border-color:rgba(var(--ok-rgb),0.4);}
.btn-mini.no{color:var(--vitoria); border-color:rgba(var(--vitoria-rgb),0.4);}
/* A lixeirinha aparece em TODA linha de projeto. Com a borda e a cor de perigo
   de sempre, a tabela viraria uma parede de vermelho e o olho pararia de ler o
   que importa (nome, data, line-up). Então ela fica discreta e só se acende no
   hover da linha — sem sumir de vez, que esconder ação de destruição atrás de
   um gesto é como se erra do outro lado. */
.lixeira{
  border-color:transparent; opacity:.35; padding:3px 6px;
  font-size:13px; line-height:1; transition:opacity .12s;
}
tr:hover > td > .lixeira{opacity:1;}
.lixeira:hover{opacity:1; border-color:rgba(var(--vitoria-rgb),0.5);}
.sel-mini{
  background:var(--bg); border:1px solid var(--panel-line);
  color:var(--text); font-family:'Inter',sans-serif;
  font-size:11.5px; padding:5px 8px; border-radius:6px;
}
.pill-aprovado{background:rgba(var(--ok-rgb),0.12); color:var(--ok);}
.pill-recusado{background:rgba(var(--erro-rgb),0.12); color:var(--erro);}

/* ===================== KANBAN ===================== */
.kanban{
  max-width:1400px; margin:0 auto 22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.kb-col{
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:10px; display:flex; flex-direction:column;
  border-top:3px solid var(--panel-line);
}
.kb-head{padding:14px 16px 12px; border-bottom:1px solid var(--panel-line);}
.kb-head .t{font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700;}
.kb-head .c{font-size:11px; color:var(--text-faint);}
.kb-body{padding:12px; display:flex; flex-direction:column; gap:10px; flex:1;}
.kb-card{
  background:var(--bg); border:1px solid var(--panel-line);
  border-radius:8px; padding:11px 13px;
}
.kb-card .nm{font-size:14px; font-weight:600; margin-bottom:7px;}
.kb-card .meta{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--text-dim); margin-bottom:6px;
}
.kb-card .nota{
  font-size:11px; color:var(--text-faint);
  font-style:italic; line-height:1.45;
}
.kb-vazio{
  padding:26px 14px; text-align:center;
  font-size:11.5px; color:var(--text-faint); line-height:1.6;
}

@media (max-width:980px){
  .vip-grid, .imp-grid{grid-template-columns:1fr;}
  .kanban{grid-template-columns:1fr;}
  .cal-dia{min-height:64px; padding:4px;}
}

/* ============================================================
   Aviso de falha de rede / RLS. Uma chamada ao banco pode falhar
   e o time precisa ver — antes isso não existia porque nada saía
   do browser.
   ============================================================ */
#erro-global{
  display:none;
  position:fixed; right:18px; bottom:18px; z-index:200;
  max-width:360px;
  background:var(--panel);
  border:1px solid rgba(var(--vitoria-rgb),0.45);
  border-left:3px solid var(--vitoria);
  border-radius:8px; padding:12px 14px;
  font-size:12px; line-height:1.5; color:var(--text-dim);
  box-shadow:0 8px 26px rgba(0,0,0,0.45);
}
#erro-global b{color:var(--erro); display:block; margin-bottom:3px;}

#carregando{
  position:fixed; inset:0; z-index:150;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text-faint);
}

/* ============================================================
   EDITOR — um único formulário em gaveta serve todos os
   cadastros. A spec de campos muda; a casca, não.
   ============================================================ */
#editor-fundo{
  display:none;
  position:fixed; inset:0; z-index:180;
  background:rgba(0,0,0,0.55);
  justify-content:flex-end;
}
#editor-fundo.on{display:flex;}
.editor{
  width:100%; max-width:460px; height:100%;
  background:var(--panel);
  border-left:1px solid var(--panel-line);
  display:flex; flex-direction:column;
  box-shadow:-16px 0 40px rgba(0,0,0,0.4);
}
.editor-head{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--panel-line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.editor-head h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px; font-weight:700; line-height:1.1;
}
.editor-head .sub{font-size:11.5px; color:var(--text-dim); margin-top:3px;}
.editor-body{padding:20px 24px; overflow-y:auto; flex:1;}
.editor-foot{
  padding:16px 24px; border-top:1px solid var(--panel-line);
  display:flex; gap:10px; align-items:center;
}
.editor-foot .btn{width:auto; padding:10px 22px;}
.editor-foot .spacer{flex:1;}
.editor .dica{
  font-size:10.5px; color:var(--text-faint);
  margin-top:5px; line-height:1.45;
}
.editor .erro{
  margin-bottom:14px; padding:10px 12px;
  background:rgba(var(--vitoria-rgb),0.08);
  border:1px solid rgba(var(--vitoria-rgb),0.3);
  border-radius:7px; font-size:11.5px; color:var(--vitoria); line-height:1.5;
}
.editor textarea.input{resize:vertical; min-height:64px; font-family:'Inter',sans-serif;}
.btn-x{
  background:none; border:none; cursor:pointer;
  color:var(--text-faint); font-size:20px; line-height:1; padding:0 2px;
}
.btn-x:hover{color:var(--text);}

/* linha de ações que aparece no hover de item editável */
.acoes{display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle;}
.acoes .btn-mini{padding:2px 8px; font-size:10px;}
.np-list li .acoes, .kb-card .acoes{opacity:0; transition:opacity .12s ease;}
.np-list li:hover .acoes, .kb-card:hover .acoes{opacity:1;}
.kb-card{position:relative;}
.kb-card .acoes{position:absolute; top:8px; right:8px; margin:0;}

.barra-acoes{
  max-width:1400px; margin:0 auto 18px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.barra-acoes .spacer{flex:1;}
.selo-audit{
  font-size:10.5px; color:var(--text-faint);
  margin-top:10px; font-style:italic;
}

/* ─── Célula editável da tabela de Dados/Histórico ──────────────────────────
   Input dentro de <td>, não a `.input` inteira: aquela tem padding de 10px e
   largura 100%, o que numa tabela de 17 colunas empurraria a linha pra fora da
   tela.

   O fundo levemente diferente é o que diz "isto se edita" — o cabeçalho do
   grupo Financeiro anuncia, mas quem chega na décima linha já esqueceu. Sem
   nenhuma pista visual, a única forma de descobrir é clicar por acaso. */
.fd-cel{
  width:100%; max-width:96px;
  background:rgba(var(--marcio-rgb),0.07);         /* --marcio, o tom do grupo Financeiro */
  border:1px solid transparent;
  border-radius:5px;
  color:var(--text);
  font-family:'Inter',sans-serif; font-size:12.5px;
  text-align:right;
  padding:4px 6px;
  outline:none;
}
.fd-cel:hover{ border-color:var(--panel-line); }
.fd-cel:focus{
  border-color:var(--marcio);
  background:var(--bg);
}
/* Enquanto grava, o campo trava — e precisa parecer travado. */
.fd-cel:disabled{ opacity:.45; cursor:wait; }