/* ============================================================
   PMO · Escritório de Projetos Informaction
   Folha de estilo principal — layout moderno com sidebar retrátil
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* marca */
  --brand-50:#eef4fb; --brand-100:#d8e6f6; --brand-200:#b3cbe9;
  --brand-400:#4d82c2; --brand-500:#2f6aad; --brand-600:#245789;
  --brand-700:#1c4269; --brand-900:#12293f;

  /* neutros (cinza levemente frio) */
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f8fa; --n-100:#eef1f5;
  --n-200:#e2e7ee; --n-300:#cdd5e0; --n-400:#9aa5b5;
  --n-500:#6b7688; --n-600:#4d5769; --n-700:#374050; --n-900:#1b2230;

  /* superfícies */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-25);
  --sidebar-bg:var(--n-0);
  --topbar-bg:rgba(255,255,255,.85);

  /* texto */
  --txt:var(--n-900);
  --txt-2:var(--n-600);
  --txt-3:var(--n-500);
  --txt-brand:var(--brand-600);

  /* bordas */
  --bd:var(--n-200);
  --bd-2:var(--n-300);

  /* status */
  --ok-bg:#e7f5ec; --ok-tx:#1a6b3a; --ok-bd:#b9e0c8;
  --err-bg:#fdeaea; --err-tx:#9b2222; --err-bd:#f4c3c3;
  --warn-bg:#fff5e0; --warn-tx:#7d5606; --warn-bd:#f3dca6;
  --info-bg:var(--brand-50); --info-tx:var(--brand-600); --info-bd:var(--brand-100);

  /* forma e ritmo */
  --r-sm:6px; --r:9px; --r-lg:14px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sh-1:0 1px 2px rgba(20,30,50,.05);
  --sh-2:0 1px 3px rgba(20,30,50,.07), 0 4px 12px rgba(20,30,50,.05);
  --sh-3:0 8px 28px rgba(20,30,50,.14);
  --sidebar-w:236px;
  --sidebar-w-min:64px;
  --topbar-h:56px;
  --t:.16s cubic-bezier(.4,0,.2,1);
  --fonte:"Inter","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;

  /* apelidos legados — vários templates ainda usam estes nomes; sem eles a
     propriedade fica inválida e a borda/cor simplesmente some. Como apontam
     para os tokens novos, o modo escuro acompanha sozinho. */
  --borda:var(--bd);
  --azul:var(--brand-600);
  --azul2:var(--brand-400);
  --cinza:var(--n-100);
}

/* ---------- 2. Modo escuro ---------- */
html[data-tema="escuro"]{
  --brand-50:#152a41;
  --brand-100:#1d3c5c;
  --brand-200:#2a5885;
  --brand-400:#5f9adb;
  --brand-500:#78acea;
  --brand-600:#9cc3f2;
  --brand-700:#c2dbf7;

  --n-0:#151a23; --n-25:#181e28; --n-50:#11151c; --n-100:#1e2530;
  --n-200:#2a3341; --n-300:#3a4553; --n-400:#6c7889;
  --n-500:#8d99aa; --n-600:#b3bdcb; --n-700:#d2dae4; --n-900:#eef2f7;

  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-25);
  --sidebar-bg:var(--n-0);
  --topbar-bg:rgba(21,26,35,.85);

  --ok-bg:#12301f; --ok-tx:#7fd6a1; --ok-bd:#1e4a31;
  --err-bg:#3a1717; --err-tx:#f0a3a3; --err-bd:#5a2525;
  --warn-bg:#382b0d; --warn-tx:#efc767; --warn-bd:#54401a;
  --info-bg:#152a41; --info-tx:#9cc3f2; --info-bd:#22405f;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --sh-3:0 8px 28px rgba(0,0,0,.55);
}

/* ---------- 3. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fonte);font-size:14px;line-height:1.55;
  background:var(--bg);color:var(--txt);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--txt-brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--txt);margin:0 0 var(--sp-4)}
h2{font-size:16px;font-weight:600;color:var(--txt);margin:0 0 var(--sp-3)}
h3{font-size:14px;font-weight:600;color:var(--txt);margin:0 0 var(--sp-2)}
small{color:var(--txt-3)}
hr{border:0;border-top:1px solid var(--bd);margin:var(--sp-4) 0}

/* ---------- 4. Estrutura ---------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--sidebar-bg);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:40;
  transition:width var(--t),flex-basis var(--t);
}
.sidebar__marca{
  display:flex;align-items:center;gap:10px;
  height:var(--topbar-h);padding:0 14px;border-bottom:1px solid var(--bd);
  overflow:hidden;white-space:nowrap;
}
.sidebar__marca img{max-height:28px;border-radius:var(--r-sm);flex:0 0 auto}
.sidebar__marca .sigla{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  background:var(--brand-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
.sidebar__marca .txt{line-height:1.15;min-width:0}
.sidebar__marca .txt b{display:block;font-size:13.5px;font-weight:600}
.sidebar__marca .txt span{display:block;font-size:11px;color:var(--txt-3)}

.sidebar__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 18px}
.sidebar__nav::-webkit-scrollbar{width:8px}
.sidebar__nav::-webkit-scrollbar-thumb{background:var(--n-200);border-radius:8px}

.nav-titulo{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-3);padding:14px 10px 5px;white-space:nowrap;
}
.nav-grupo{margin-bottom:1px}
.nav-link{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r);border:0;background:none;
  font:inherit;font-size:13.5px;color:var(--txt-2);cursor:pointer;
  text-align:left;white-space:nowrap;transition:background var(--t),color var(--t);
}
.nav-link:hover{background:var(--n-100);color:var(--txt);text-decoration:none}
.nav-link.ativo{background:var(--info-bg);color:var(--txt-brand);font-weight:600}
.nav-link .ic{flex:0 0 18px;width:18px;text-align:center;font-size:15px;opacity:.85}
.nav-link .rot{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-link .seta{font-size:10px;opacity:.55;transition:transform var(--t)}
.nav-grupo.aberto>.nav-link .seta{transform:rotate(180deg)}
.nav-grupo.aberto>.nav-link{color:var(--txt)}

.nav-sub{display:none;padding:2px 0 6px 0;margin-left:23px;
  border-left:1px solid var(--bd);}
.nav-grupo.aberto>.nav-sub{display:block}
.nav-sub a{
  display:block;padding:6px 10px;margin-left:6px;border-radius:var(--r-sm);
  font-size:13px;color:var(--txt-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.nav-sub a:hover{background:var(--n-100);color:var(--txt);text-decoration:none}
.nav-sub a.ativo{color:var(--txt-brand);font-weight:600}
.nav-sub .sep{border-top:1px solid var(--bd);margin:5px 12px}

/* ---------- 5. Sidebar retraída ---------- */
body.retraido .sidebar{width:var(--sidebar-w-min);flex-basis:var(--sidebar-w-min)}
body.retraido .sidebar__marca{justify-content:center;padding:0}
body.retraido .sidebar__marca .txt,
body.retraido .nav-link .rot,
body.retraido .nav-link .seta,
body.retraido .nav-titulo{display:none}
body.retraido .nav-link{justify-content:center;padding:9px 0}
body.retraido .nav-sub{display:none !important}
body.retraido .nav-titulo{padding:8px 0 0}
/* dica flutuante ao passar o mouse quando retraído */
body.retraido .nav-link{position:relative}
body.retraido .nav-link[data-dica]:hover::after{
  content:attr(data-dica);position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%);background:var(--n-900);color:var(--n-0);
  font-size:12px;padding:5px 9px;border-radius:var(--r-sm);white-space:nowrap;
  z-index:60;box-shadow:var(--sh-2);
}

/* ---------- 6. Área principal ---------- */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-3);
  padding:0 var(--sp-5);border-bottom:1px solid var(--bd);
  background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(8px);
  position:sticky;top:0;z-index:30;
}
.topbar__titulo{font-size:14.5px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icone-btn{
  width:34px;height:34px;flex:0 0 34px;border:0;background:none;border-radius:var(--r);
  color:var(--txt-2);font-size:16px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background var(--t);
}
.icone-btn:hover{background:var(--n-100);color:var(--txt)}

.perfil{position:relative}
.perfil__botao{
  display:flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--txt);padding:4px 6px;border-radius:var(--r);
}
.perfil__botao:hover{background:var(--n-100)}
.avatar{
  width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-full);
  background:var(--info-bg);color:var(--txt-brand);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;
}
.perfil__menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:200px;
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:6px;z-index:70;
}
.perfil.aberto .perfil__menu{display:block}
.perfil__menu .nome{padding:8px 10px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.perfil__menu .nome b{display:block;font-size:13.5px}
.perfil__menu .nome span{font-size:11.5px;color:var(--txt-3)}
.perfil__menu a{display:block;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--txt-2)}
.perfil__menu a:hover{background:var(--n-100);color:var(--txt);text-decoration:none}

/* ---- sino de avisos (lembretes de pendência) ---- */
.sino{position:relative}
.sino .icone-btn{position:relative;font-size:15px}
.sino__bolha{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:#c0392b;color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
.sino__menu{min-width:320px;max-width:min(380px,92vw);max-height:70vh;overflow:auto}
.sino__item{display:block;padding:8px 10px;border-radius:var(--r-sm);
  border-bottom:1px solid var(--bd)}
.sino__item:last-of-type{border-bottom:0}
.sino__item b{display:block;font-size:13px;color:var(--txt);line-height:1.3}
.sino__item span{display:block;font-size:11.5px;color:var(--txt-3);line-height:1.35;
  margin-top:2px}
.sino__item small{display:block;font-size:10.5px;color:var(--txt-3);margin-top:3px}


main{flex:1;padding:var(--sp-5);max-width:1360px;width:100%;margin:0 auto}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:var(--sp-4);box-shadow:var(--sh-1);
}
.card>h1:first-child,.card>h2:first-child,.card>h3:first-child{margin-top:0}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
.metrica{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-1)}
.metrica .rotulo{font-size:12px;color:var(--txt-3)}
.metrica .valor{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}

/* ---------- 8. Formulários ---------- */
label{display:block;margin:12px 0 5px;font-weight:600;font-size:12.5px;color:var(--txt-2)}
input[type=text],input[type=date],input[type=url],input[type=email],
input[type=number],input[type=password],select,textarea{
  width:100%;padding:8px 11px;font:inherit;font-size:13.5px;
  color:var(--txt);background:var(--surface);
  border:1px solid var(--bd-2);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t);
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--brand-400);
  box-shadow:0 0 0 3px var(--info-bg);
}
input::placeholder,textarea::placeholder{color:var(--n-400)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-500);width:15px;height:15px}
textarea{min-height:90px;resize:vertical}
.linha{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.linha>div{flex:1;min-width:180px}

/* busca da topbar */
.busca{flex:1;max-width:380px;position:relative}
.busca input{padding-left:32px;background:var(--surface-2)}
.busca::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--txt-3);font-size:16px;pointer-events:none}

/* ---------- 9. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  background:var(--brand-600);color:#fff;border:1px solid var(--brand-600);
  padding:8px 15px;border-radius:var(--r);cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;text-decoration:none;
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
  white-space:nowrap;
}
.btn:hover{background:var(--brand-700);border-color:var(--brand-700);text-decoration:none;color:#fff}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--info-bg)}
.btn.sec{background:var(--surface);color:var(--txt-2);border-color:var(--bd-2)}
.btn.sec:hover{background:var(--n-100);color:var(--txt);border-color:var(--bd-2)}
.btn.perigo{background:#b23b3b;border-color:#b23b3b}
.btn.perigo:hover{background:#963030;border-color:#963030}
.btn.pequeno{padding:5px 11px;font-size:12.5px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
button.btn{line-height:1.4}

/* ---------- 10. Tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  padding:9px 12px;text-align:left;font-weight:600;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);
  border-bottom:1px solid var(--bd);background:var(--surface-2);
}
th:first-child{border-top-left-radius:var(--r-sm)}
th:last-child{border-top-right-radius:var(--r-sm)}
td{padding:10px 12px;border-bottom:1px solid var(--bd);vertical-align:middle}
tbody tr:hover>td,table tr:hover>td{background:var(--surface-2)}
tr:last-child td{border-bottom:0}
.tabela-rolagem{overflow-x:auto;margin:0 -6px;padding:0 6px}

/* ---------- 11. Avisos (flash) ---------- */
.flash{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;border-radius:var(--r);margin-bottom:var(--sp-3);
  font-size:13.5px;border:1px solid transparent;
}
.flash.ok{background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd)}
.flash.erro{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-bd)}
.flash.aviso{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd)}
.flash.info{background:var(--info-bg);color:var(--info-tx);border-color:var(--info-bd)}

/* ---------- 12. Tags e selos ---------- */
.tag{
  display:inline-block;background:var(--info-bg);color:var(--txt-brand);
  border-radius:var(--r-full);padding:2px 9px;font-size:11.5px;font-weight:500;
  margin-left:6px;
}
.selo{display:inline-block;border-radius:var(--r-full);padding:2px 10px;
  font-size:11.5px;font-weight:500;border:1px solid transparent}
.selo.ok{background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd)}
.selo.aviso{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd)}
.selo.erro{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-bd)}
.selo.neutro{background:var(--n-100);color:var(--txt-2);border-color:var(--bd)}

/* ---------- 13. Módulos / fases (telas PMO) ---------- */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-2)}
.mods label{font-weight:400;margin:0;display:flex;gap:8px;align-items:center;
  font-size:13.5px;color:var(--txt);padding:5px 8px;border-radius:var(--r-sm)}
.mods label:hover{background:var(--n-100)}

.fase{border:1px solid var(--bd);border-radius:var(--r-lg);
  margin-bottom:var(--sp-3);overflow:hidden;background:var(--surface)}
.fase>h3{margin:0;background:var(--surface-2);color:var(--txt);
  padding:11px 16px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--bd)}
.fase .doc{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-3);padding:11px 16px;border-top:1px solid var(--bd)}
.fase .doc:first-of-type{border-top:0}
.fase .doc:hover{background:var(--surface-2)}

/* ---------- 14. Arrastar linhas ---------- */
.drag{cursor:grab;user-select:none;padding:0 8px;font-size:15px;color:var(--n-400)}
tr.mv:hover .drag{color:var(--brand-500)}
tr.arrastando{opacity:.4}

/* ---------- 15. Login ---------- */
body.tela-login{background:var(--bg)}
.login-caixa{
  max-width:400px;margin:8vh auto;background:var(--surface);
  border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:32px 30px;box-shadow:var(--sh-2);
}
.login-marca{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-bottom:var(--sp-5);text-align:center}
.login-marca img{max-height:44px}
.login-marca .sigla{width:46px;height:46px;border-radius:12px;background:var(--brand-600);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:600}
.login-marca b{font-size:15px}
.login-marca span{font-size:12.5px;color:var(--txt-3)}
.login-caixa.larga{max-width:520px}
.login-caixa h1{font-size:18px;text-align:center;margin-bottom:var(--sp-4)}
.login-caixa .btn{width:100%;margin-top:var(--sp-4);padding:10px}
.login-rodape{text-align:center;margin-top:var(--sp-4);font-size:13px}

/* ---------- 15b. Painel de Gestão ---------- */
.painel-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.painel-grid .larga{grid-column:1/-1}

.metrica.destaque{border:1px solid var(--info-bd);background:var(--info-bg)}
.metrica.alerta{border:1px solid var(--err-bd);background:var(--err-bg)}
.metrica.alerta .valor,.metrica.alerta .rotulo{color:var(--err-tx)}
.metrica.aviso{border:1px solid var(--warn-bd);background:var(--warn-bg)}
.metrica.aviso .valor,.metrica.aviso .rotulo{color:var(--warn-tx)}
.metrica .nota{font-size:11.5px;color:var(--txt-3);margin-top:2px}

.barra{height:6px;border-radius:var(--r-full);background:var(--n-200);overflow:hidden}
.barra > i{display:block;height:100%;background:var(--brand-500);border-radius:var(--r-full)}
.barra.ok > i{background:var(--ok-tx)}
.barra.aviso > i{background:var(--warn-tx)}
.barra.erro > i{background:var(--err-tx)}

/* funil */
.funil{display:flex;flex-direction:column;gap:7px}
.funil .etapa{display:grid;grid-template-columns:150px 1fr auto;gap:12px;
  align-items:center;font-size:13px}
.funil .trilho{height:26px;border-radius:var(--r-sm);background:var(--n-100);
  position:relative;overflow:hidden}
.funil .trilho > i{display:block;height:100%;background:var(--brand-400);
  border-radius:var(--r-sm);min-width:2px}
.funil .etapa.ok .trilho > i{background:var(--ok-tx)}
.funil .etapa.erro .trilho > i{background:var(--err-tx)}
.funil .etapa.aviso .trilho > i{background:#d8a12a}
.funil .etapa.neutro .trilho > i{background:var(--n-400)}
.funil .trilho span{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:11.5px;font-weight:500;color:var(--txt);white-space:nowrap}
.funil .valor{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}

.lista-simples{list-style:none;margin:0;padding:0}
.lista-simples li{display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-top:1px solid var(--bd)}
.lista-simples li:first-child{border-top:0}
.lista-simples .txt{flex:1;min-width:0}
.lista-simples .txt b{display:block;font-weight:500;font-size:13.5px}
.lista-simples .txt span{font-size:12px;color:var(--txt-3)}
.vazio{text-align:center;color:var(--txt-3);padding:22px 10px;font-size:13.5px}

/* ---------- 15c. Kanban de pendências ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));
  gap:var(--sp-3);align-items:start;overflow-x:auto;padding-bottom:6px}
.kb-col{background:var(--surface-1);border:1px solid var(--bd);
  border-radius:var(--r-lg);display:flex;flex-direction:column;min-height:140px}
.kb-col__topo{display:flex;align-items:center;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--bd)}
.kb-col__topo b{font-size:13px;font-weight:600;flex:1}
.kb-col__topo .qtd{background:var(--n-100);color:var(--txt-2);
  border-radius:var(--r-full);padding:1px 8px;font-size:11.5px;font-weight:500}
.kb-col__topo .ponto{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.kb-col[data-coluna=aberta]    .ponto{background:var(--n-400)}
.kb-col[data-coluna=andamento] .ponto{background:var(--brand-500)}
.kb-col[data-coluna=bloqueada] .ponto{background:var(--err-tx)}
.kb-col[data-coluna=concluida] .ponto{background:var(--ok-tx)}
.kb-lista{flex:1;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:70px}
.kb-lista.sobre{background:var(--info-bg);border-radius:0 0 var(--r-lg) var(--r-lg)}

.kb-card{background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r);padding:11px 12px;cursor:grab;box-shadow:var(--sh-1);
  transition:box-shadow var(--t),border-color var(--t)}
.kb-card:hover{box-shadow:var(--sh-2);border-color:var(--bd-2)}
.kb-card.arrastando{opacity:.45;cursor:grabbing}
.kb-card__topo{display:flex;align-items:flex-start;gap:8px;margin-bottom:5px}
.kb-card__titulo{flex:1;font-size:13.5px;font-weight:500;line-height:1.35;
  word-break:break-word}
.kb-card__meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  font-size:11.5px;color:var(--txt-3);margin-top:7px}
.kb-card .projeto{display:block;font-size:11.5px;color:var(--txt-3);
  margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-card.concluida .kb-card__titulo{text-decoration:line-through;color:var(--txt-3)}

/* ---- sinalizador de vencimento no cartão do quadro ---- */
.kb-hoje{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:6px;
  font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:2px 7px;border-radius:var(--r-full);
  background:var(--warn-bg);color:var(--warn-tx);border:1px solid var(--warn-bd);
}
.kb-hoje.atrasada{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-bd)}
.kb-card.vence-hoje{border-color:var(--warn-bd);box-shadow:inset 0 0 0 1px var(--warn-bd)}
.kb-card.vencida{border-color:var(--err-bd)}
.kb-card.concluida .kb-hoje{display:none}
.metrica.hoje.alerta-hoje{border:1px solid var(--warn-bd);background:var(--warn-bg)}
.metrica.hoje.alerta-hoje .valor,
.metrica.hoje.alerta-hoje .rotulo{color:var(--warn-tx)}


.pri{border-radius:var(--r-full);padding:1px 8px;font-size:11px;font-weight:500;
  border:1px solid transparent;white-space:nowrap}
.pri.critica{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-bd)}
.pri.alta{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd)}
.pri.media{background:var(--info-bg);color:var(--info-tx);border-color:var(--info-bd)}
.pri.baixa{background:var(--n-100);color:var(--txt-2);border-color:var(--bd)}

.prazo{border-radius:var(--r-full);padding:1px 8px;font-size:11px;white-space:nowrap}
.prazo.atrasada{background:var(--err-bg);color:var(--err-tx);font-weight:500}
.prazo.hoje{background:var(--warn-bg);color:var(--warn-tx);font-weight:500}
.prazo.proxima{background:var(--info-bg);color:var(--info-tx)}
.prazo.ok,.prazo.concluida{background:var(--n-100);color:var(--txt-3)}

.mini-avatar{width:21px;height:21px;flex:0 0 21px;border-radius:var(--r-full);
  background:var(--info-bg);color:var(--txt-brand);display:flex;
  align-items:center;justify-content:center;font-size:9.5px;font-weight:600}

/* janela de edição do cartão */
.janela{display:none;position:fixed;inset:0;z-index:80;
  background:rgba(15,22,35,.5);padding:20px;overflow-y:auto}
.janela.aberta{display:flex;align-items:flex-start;justify-content:center}
.janela__caixa{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);width:100%;max-width:520px;margin:5vh auto;
  padding:22px 24px;border:1px solid var(--bd)}
.janela__topo{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-3)}
.janela__topo h2{margin:0}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  margin-bottom:var(--sp-4)}
.filtros label{margin:0 0 4px}
.filtros > div{min-width:150px}

@media(max-width:1100px){.kanban{grid-template-columns:repeat(4,minmax(210px,1fr))}}
@media(max-width:860px){
  .kanban{grid-template-columns:1fr}
  .funil .etapa{grid-template-columns:110px 1fr;grid-template-rows:auto auto}
  .funil .valor{grid-column:1/-1;text-align:right}
}

/* ---------- 15d. Cartão de pendência e telas do módulo ---------- */
.cartao-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:var(--sp-4);align-items:start;margin-top:var(--sp-4)}
@media(max-width:1050px){.cartao-grid{grid-template-columns:minmax(0,1fr)}}

/* faixa colorida da categoria no cartão do kanban */
.kb-card{position:relative;overflow:hidden}
.kb-faixa{position:absolute;left:0;top:0;bottom:0;width:3px}
.kb-card .kb-card__titulo{color:var(--txt);text-decoration:none}
.kb-card .kb-card__titulo:hover{color:var(--txt-brand);text-decoration:underline}
.kb-impedimento{font-size:11.5px;color:var(--warn-tx);background:var(--warn-bg);
  border-radius:var(--r-sm);padding:3px 7px;margin:6px 0 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-progresso{display:flex;align-items:center;gap:7px;margin-top:8px}
.kb-progresso .barra{flex:1;height:4px}
.kb-progresso small{font-size:10.5px;color:var(--txt-3);white-space:nowrap}

/* checklist */
.chk-lista{list-style:none;margin:0;padding:0}
.chk-lista li{display:flex;align-items:center;gap:9px;padding:7px 0;
  border-top:1px solid var(--bd)}
.chk-lista li:first-child{border-top:0}
.chk-caixa{width:19px;height:19px;flex:0 0 19px;border:1.5px solid var(--bd-2);
  border-radius:5px;background:var(--surface);cursor:pointer;padding:0;
  font-size:12px;line-height:1;color:#fff;display:flex;
  align-items:center;justify-content:center;transition:all var(--t)}
.chk-caixa:hover{border-color:var(--brand-400)}
.chk-lista li.feito .chk-caixa{background:var(--brand-600);border-color:var(--brand-600)}
.chk-texto{flex:1;font-size:13.5px;word-break:break-word}
.chk-lista li.feito .chk-texto{text-decoration:line-through;color:var(--txt-3)}

/* comentários */
.conversa{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.fala{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--bd)}
.fala:first-child{border-top:0}
.fala > div{flex:1;min-width:0}
.fala-topo{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.fala-topo strong{font-size:13px;font-weight:500}
.fala-txt{font-size:13.5px;white-space:pre-wrap;word-break:break-word;
  color:var(--txt-2)}

/* trilha de histórico */
.trilha{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.trilha li{padding:8px 0;border-top:1px solid var(--bd)}
.trilha li:first-child{border-top:0}
.trilha-topo{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.trilha-topo strong{font-size:12.5px;font-weight:500}
.trilha-txt{font-size:12.5px;color:var(--txt-2);word-break:break-word}
.trilha-txt .antes{color:var(--txt-3);text-decoration:line-through}
.trilha-txt .depois{color:var(--txt)}

/* abas de visão e ordenação da lista */
.abas-visao{display:flex;gap:4px;background:var(--n-100);border-radius:var(--r);
  padding:3px;flex:0 0 auto;align-self:flex-end;margin-bottom:0}
.abas-visao a{font-size:12.5px;padding:5px 14px;border-radius:var(--r-sm);
  color:var(--txt-2);text-decoration:none}
.abas-visao a:hover{color:var(--txt);text-decoration:none}
.abas-visao a.on{background:var(--surface);color:var(--txt-brand);
  font-weight:500;box-shadow:var(--sh-1)}

th .ord{color:inherit;text-decoration:none;display:inline-flex;
  align-items:center;gap:3px}
th .ord:hover{color:var(--txt-brand);text-decoration:none}
th .ord.on{color:var(--txt-brand)}
th .ord.on::after{content:" ↓";font-size:10px}

/* abas genéricas (parâmetros) */
.abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.abas a{font-size:13px;padding:7px 15px;border-radius:var(--r-full);
  background:var(--n-100);color:var(--txt-2);text-decoration:none}
.abas a:hover{background:var(--n-200);color:var(--txt);text-decoration:none}
.abas a.on{background:var(--brand-600);color:#fff}

kbd{background:var(--n-100);border:1px solid var(--bd-2);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;font-size:11.5px;font-family:monospace}
code{background:var(--n-100);border-radius:4px;padding:1px 5px;
  font-size:12.5px;font-family:monospace}

/* ---------- 15f. Pendências: filtro rápido e edição na própria linha ------ */

/* cartões de resumo viram atalho de filtro */
a.metrica.atalho-filtro{display:block;text-decoration:none;color:inherit;
  transition:border-color var(--t),box-shadow var(--t)}
a.metrica.atalho-filtro:hover{border-color:var(--brand-400);
  box-shadow:var(--sh-2);text-decoration:none}
a.metrica.atalho-filtro.on{border-color:var(--brand-500);
  box-shadow:0 0 0 2px var(--info-bg)}
a.metrica.atalho-filtro.on .rotulo{color:var(--txt-brand);font-weight:600}

/* controles compactos editáveis na própria linha / no cartão */
.rapido{padding:4px 6px;font-size:12.5px;height:auto;min-height:0;width:100%;
  border-radius:var(--r-sm);background:var(--surface);border:1px solid transparent;
  color:var(--txt-2);transition:border-color var(--t),background var(--t)}
.rapido:hover{border-color:var(--bd-2);background:var(--surface-2)}
.rapido:focus{border-color:var(--brand-400);background:var(--surface);
  color:var(--txt);outline:0;box-shadow:0 0 0 2px var(--info-bg)}
select.rapido{cursor:pointer}
input[type=date].rapido{min-width:112px}

/* a prioridade tinge o próprio seletor */
select.rapido.pri-critica{color:var(--err-tx);font-weight:600}
select.rapido.pri-alta{color:var(--warn-tx);font-weight:600}
select.rapido.pri-media{color:var(--info-tx)}
select.rapido.pri-baixa{color:var(--txt-3)}

/* caixa do vencimento: a cor vem da situação, igual à pílula .prazo */
.prazo-rapido{display:inline-flex;align-items:center;gap:2px;
  border-radius:var(--r-sm);padding:1px}
.prazo-rapido.atrasada{background:var(--err-bg)}
.prazo-rapido.atrasada .rapido{color:var(--err-tx);font-weight:600}
.prazo-rapido.hoje{background:var(--warn-bg)}
.prazo-rapido.hoje .rapido{color:var(--warn-tx);font-weight:600}
.prazo-rapido.proxima{background:var(--info-bg)}
.prazo-rapido .rapido{background:transparent}
.icone-btn.adiar{width:auto;height:22px;padding:0 6px;font-size:10.5px;
  font-weight:600;flex:none;border-radius:var(--r-sm)}

/* estados de gravação */
.rapido.salvando,.icone-btn.salvando{opacity:.55;pointer-events:none}
.rapido.salvo,.icone-btn.salvo{border-color:var(--ok-bd);background:var(--ok-bg);
  color:var(--ok-tx)}
tr.linha-concluida td:nth-child(2) strong{text-decoration:line-through;
  color:var(--txt-3)}
.tbl-pend td{vertical-align:top;padding-top:8px;padding-bottom:8px}
.tbl-pend td small[data-atraso]:empty{display:none}

/* menu de ajuste rápido no cartão do quadro */
.kb-card.com-menu{cursor:default;border-color:var(--brand-400);
  box-shadow:var(--sh-2)}
.kb-rapido{margin-top:9px;padding-top:9px;border-top:1px dashed var(--bd-2);
  display:grid;gap:7px}
/* precisa ser explícito: [hidden] do navegador tem a mesma força da classe
   acima e perderia por vir antes na cascata */
.kb-rapido[hidden]{display:none}
.kb-rapido label{font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3);display:grid;gap:3px;margin:0}
.kb-rapido .rapido{border-color:var(--bd)}

/* aviso curto de confirmação */
.aviso-flutuante{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
  background:var(--n-900);color:var(--n-0);padding:9px 16px;border-radius:var(--r-full);
  font-size:13px;box-shadow:var(--sh-3);opacity:0;pointer-events:none;z-index:120;
  transition:opacity var(--t),transform var(--t)}
.aviso-flutuante.visivel{opacity:1;transform:translate(-50%,0)}
.aviso-flutuante.erro{background:#b23b3b;color:#fff}

@media(max-width:900px){
  .tbl-pend{min-width:900px}
}

/* ---------- 15e. Atalhos, documentos e barras de ação ---------- */

/* volta padrão, logo abaixo do título das telas internas do projeto */
.voltar{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--txt-3);text-decoration:none;margin:-10px 0 16px}
.voltar:hover{color:var(--txt-brand);text-decoration:none}

/* cards de atalho (tela do projeto, PSOffice) */
.atalhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px}
.atalho{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;
  text-decoration:none;border:1px solid var(--bd);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t)}
.atalho:hover{border-color:var(--brand-400);box-shadow:var(--sh-2);
  text-decoration:none}
.atalho .ic{font-size:19px;line-height:1.15;flex:none}
.atalho b{display:block;font-size:13.5px;color:var(--txt);font-weight:600;
  margin-bottom:1px}
.atalho .desc{display:block;font-size:11.5px;color:var(--txt-3);line-height:1.35}
.atalho.on{border-color:var(--brand-500);background:var(--info-bg)}
.atalho.on b{color:var(--txt-brand)}

/* ---- barra única de navegação do projeto (_projeto_nav.html) ---- */
.nav-etapa{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-3);margin:4px 0 8px;
}
.proj-barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:8px 10px;margin-bottom:var(--sp-4);box-shadow:var(--sh-1);
}
.proj-btn{
  font-size:12.5px;padding:5px 11px;border-radius:var(--r-full);
  color:var(--txt-2);white-space:nowrap;border:1px solid transparent;
}
.proj-btn:hover{background:var(--n-100);color:var(--txt);text-decoration:none}
.proj-btn.on{background:var(--info-bg);color:var(--txt-brand);
  border-color:var(--info-bd);font-weight:600}
.proj-btn.voltar{font-weight:600;color:var(--txt);background:var(--n-100)}
.proj-sep{width:1px;height:18px;background:var(--bd);margin:0 3px;flex:none}
.proj-sep:first-of-type{display:none}


/* documentos: lista à esquerda, formulário à direita */
.doclay{display:grid;grid-template-columns:285px minmax(0,1fr);gap:0}
.doclista{border-right:1px solid var(--bd);padding-right:14px}
.fase-rot{font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-3);margin:16px 0 5px;padding-left:10px}
.doclista .fase-rot:first-child{margin-top:0}
.doc-item{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:var(--r);text-decoration:none;color:var(--txt-2);
  font-size:13.5px;margin-bottom:2px;cursor:pointer;width:100%;
  background:none;border:0;font-family:inherit;text-align:left}
.doc-item:hover{background:var(--surface-2);color:var(--txt);text-decoration:none}
.doc-item.at{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.doc-item .num{font-size:11px;font-weight:700;color:var(--txt-3);
  background:var(--n-100);border-radius:var(--r-sm);padding:1px 5px;
  min-width:24px;text-align:center;flex:none}
.doc-item.at .num{background:var(--brand-100);color:var(--brand-700)}
.doc-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.docconteudo{padding-left:22px;min-width:0}

/* barra de ações no rodapé de um formulário */
.acoes-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:var(--sp-4);padding-top:14px;border-top:1px solid var(--bd)}
.acoes-form .dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* seletor em pílulas — escolha, não ação (produtos, filtros) */
.seletor{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.seletor .op{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  font-size:13.5px;font-weight:500;border:1px solid var(--bd-2);
  border-radius:var(--r-full);background:var(--surface);color:var(--txt-2);
  text-decoration:none;
  transition:background var(--t),border-color var(--t),color var(--t)}
.seletor .op:hover{background:var(--surface-2);color:var(--txt);
  text-decoration:none}
.seletor .op.at{background:var(--brand-50);border-color:var(--brand-200);
  color:var(--brand-700);font-weight:600}
.rot-grupo{font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-3);margin-right:4px}

@media(max-width:900px){
  .doclay{grid-template-columns:1fr}
  .doclista{border-right:0;border-bottom:1px solid var(--bd);
    padding-right:0;padding-bottom:12px}
  .docconteudo{padding-left:0;padding-top:16px}
}

/* ---------- 16. Utilitários ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.flex{display:flex}.entre{justify-content:space-between}
.centro{align-items:center}.gap{gap:var(--sp-3)}
.direita{text-align:right}.meio{text-align:center}
.acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.mudo{color:var(--txt-3)}
.overlay{display:none;position:fixed;inset:0;background:rgba(15,22,35,.45);z-index:35}

/* ---------- 17. Responsivo ---------- */
@media(max-width:980px){
  .busca{display:none}
  main{padding:var(--sp-4)}
}
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);
    box-shadow:var(--sh-3);transition:transform var(--t)}
  body.menu-aberto .sidebar{transform:translateX(0);width:var(--sidebar-w);
    flex-basis:var(--sidebar-w)}
  body.menu-aberto .overlay{display:block}
  body.retraido .sidebar{width:var(--sidebar-w);flex-basis:var(--sidebar-w)}
  body.retraido .nav-link .rot,body.retraido .nav-link .seta,
  body.retraido .nav-titulo,body.retraido .sidebar__marca .txt{display:revert}
  body.retraido .nav-link{justify-content:flex-start;padding:8px 10px}
  body.retraido .nav-sub{display:revert}
  body.retraido .nav-grupo:not(.aberto)>.nav-sub{display:none !important}
  .linha{flex-direction:column}
  .linha>div{min-width:0}
}

/* ---------- 18. Impressão ---------- */
@media print{
  .sidebar,.topbar,.overlay,.acoes,.btn{display:none !important}
  .app{display:block}
  main{padding:0;max-width:none}
  .card{border:0;box-shadow:none;padding:0}
  body{background:#fff}
}