/* =====================================================================
   GESTÃO DE PROJETOS — styles.css (tema CLARO)
   "Painel de Faixa" re-renderizado na linguagem do terminal financeiro:
   papel claro, cartões brancos estilo .panel, acento verde-limão,
   topo/login pretos, tipografia Gabarito (títulos) + IBM Plex Sans
   (corpo) + IBM Plex Mono (dados). Todas as cores derivam de
   tokens.css / design-system.css.

   Carregar nesta ordem: fonte Google → design-system.css → tokens.css →
   styles.css. Este arquivo tem a última palavra sobre as classes do gestor.

   IMPORTANTE: todos os seletores/estados do tema escuro original foram
   preservados (.st-travado, .ativa, .aberto, .concluido, .toast-erro/-ok,
   .pp-linha.*, .fi-*, .kpi-*, [hidden] etc.). Só a aparência mudou.
   ===================================================================== */

/* ---------- Reset leve ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* O atributo HTML `hidden` precisa SEMPRE vencer as regras de `display`. */
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(820px 420px at 92% -80px, rgba(229,255,81,.12), transparent 65%),
    radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.4px),
    var(--ground);
  background-size: auto, 26px 26px, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--brand); color: var(--ink); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* títulos sempre em Gabarito */
.cabecalho-titulo, .login-titulo, .faixa-titulo, .modal-titulo,
.vazio-titulo, .config-titulo, .contador-num, .kpi-num {
  font-family: var(--font-display);
}

/* ---------- Eyebrow (mono-caps, como os labels técnicos do design system) ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

/* =====================================================================
   CABEÇALHO — superfície escura (espelha a sidebar preta)
   ===================================================================== */
.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  background:
    linear-gradient(180deg, rgba(229,255,81,.06), transparent 90px),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-dark);
  border: 1px solid var(--ink);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-card);
}

.cabecalho-marca {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.cabecalho-textos { display: flex; flex-direction: column; gap: 4px; }

.cabecalho .eyebrow { color: var(--brand); }

.cabecalho-titulo {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: #fff;
}

/* mini-pórtico de 4 lâmpadas — "sinal iluminado" sobre o preto */
.portico {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: var(--sp-2);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
}
.lampada {
  width: 9px; height: 9px; border-radius: 50%;
  display: block;
}
.lampada-verde   { background: var(--st-concluido); box-shadow: 0 0 7px rgba(67,140,45,.85); }
.lampada-ambar   { background: var(--st-andamento); box-shadow: 0 0 7px rgba(181,124,58,.85); }
.lampada-vermelha{ background: var(--st-travado);   box-shadow: 0 0 7px rgba(232,74,76,.85); }
.lampada-cinza   { background: rgba(255,255,255,.30); }

/* =====================================================================
   BOTÕES (pílula, estilo .btn do design-system)
   ===================================================================== */
.btn {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
  background: var(--card);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--muted, #ECECED); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* primário = verde-limão da marca, texto escuro (alto contraste WCAG) */
.btn-primario {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.btn-primario:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--brand-glow);
}
.btn-primario:active { background: var(--accent-press); border-color: var(--accent-press); transform: translateY(1px); }

/* secundário = cartão branco com borda (estilo .btn-secondary do DS) */
.btn-secundario {
  background: var(--card);
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-secundario:hover { background: var(--muted, #ECECED); color: var(--text); }

/* ghost = contorno discreto */
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
}
.btn-ghost:hover { background: var(--muted, #ECECED); color: var(--text); border-color: var(--border-strong); }

.btn-perigo { color: var(--neg); }
.btn-perigo:hover { background: var(--neg-bg); border-color: var(--st-travado-edge); color: var(--neg); }

/* ghost dentro do cabeçalho preto (botão Sair) */
.cabecalho .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.30);
  background: transparent;
}
.cabecalho .btn-ghost:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: rgba(229,255,81,.08);
}

/* botões de ícone (na linha do processo) */
.btn-icone {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-icone:hover { background: var(--muted, #ECECED); color: var(--text); }
.btn-icone:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-icone:disabled { opacity: 0.30; cursor: default; background: transparent; }
.btn-icone.btn-perigo:hover { color: var(--neg); background: var(--neg-bg); }

/* =====================================================================
   FAIXA DE RESUMO (contadores em mono, estilo painel)
   ===================================================================== */
.resumo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.resumo-contadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-card);
}

.contador {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
  position: relative;
  padding-left: var(--sp-3);
}
/* régua verde-limão à esquerda de cada contador — assinatura visual (.kpi::before) */
.contador::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 3px; background: var(--brand);
}
.contador.c-travado::before   { background: var(--st-travado); }
.contador.c-andamento::before { background: var(--st-andamento); }
.contador.c-concluido::before { background: var(--st-concluido); }
.contador.c-comecar::before   { background: var(--st-comecar); }

.contador-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text);
}
.contador-rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.contador.c-travado   .contador-num { color: var(--st-travado); }
.contador.c-andamento .contador-num { color: var(--st-andamento); }
.contador.c-concluido .contador-num { color: var(--st-concluido); }
.contador.c-comecar   .contador-num { color: var(--text-muted); }

/* alerta de travado puxado para o topo */
.alerta-travado {
  background: var(--st-travado-bg);
  border: 1px solid var(--st-travado-edge);
  border-left: 3px solid var(--st-travado);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.alerta-travado-titulo {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--st-travado);
  font-size: var(--fs-body);
  display: flex; align-items: center; gap: var(--sp-2);
}
.alerta-travado-item {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-caption);
}
.alerta-travado-item strong { color: var(--st-travado); }

/* =====================================================================
   LISTA DE PROJETOS (cards-faixa / accordion estilo .panel)
   ===================================================================== */
.lista-projetos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.faixa {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* barra-sinal de 3px na borda esquerda — assinatura */
  border-left: 3px solid var(--border-strong);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

/* barra-sinal por status */
.faixa.st-travado    { border-left-color: var(--st-travado); }
.faixa.st-andamento  { border-left-color: var(--st-andamento); }
.faixa.st-concluido  { border-left-color: var(--st-concluido); }
.faixa.st-comecar    { border-left-color: var(--st-comecar); }
.faixa.st-manual     { border-left-color: var(--st-aguardando); }

/* destaque forte quando travado */
.faixa.st-travado {
  border-color: var(--st-travado-edge);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--st-travado-edge);
}

.faixa-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.faixa-cabecalho:hover { background: var(--surface-2); }
.faixa-cabecalho:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }

.faixa-chevron {
  font-size: var(--fs-h2);
  color: var(--text-dim);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
  flex: 0 0 auto;
}
.faixa-cabecalho:hover .faixa-chevron { color: var(--text); }
.faixa.aberto .faixa-chevron { transform: rotate(90deg); }

.faixa-titulo-bloco { flex: 1 1 auto; min-width: 0; }
.faixa-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}
.faixa-descricao {
  margin: 2px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.faixa-descricao:empty { display: none; }

.faixa-status-bloco {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.faixa-progresso-texto {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.faixa-progresso-texto:empty { display: none; }

/* =====================================================================
   PILL DE STATUS — estilo .status-pill: mono-caps + dot
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  white-space: nowrap;
}
.pill-lampada {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* cores por status (mapeadas pelo JS via classe na faixa) */
.faixa.st-travado   .pill { color: var(--st-travado);   background: var(--st-travado-bg);   border-color: var(--st-travado-edge); }
.faixa.st-andamento .pill { color: var(--st-andamento); background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); }
.faixa.st-concluido .pill { color: var(--st-concluido); background: var(--st-concluido-bg); border-color: var(--st-concluido-edge); }
.faixa.st-comecar   .pill { color: var(--st-comecar);   background: var(--st-comecar-bg);   border-color: var(--st-comecar-edge); }
.faixa.st-manual    .pill { color: var(--st-aguardando); background: var(--st-aguardando-bg); border-color: var(--st-aguardando-edge); }

/* =====================================================================
   BARRA DE PROGRESSO
   ===================================================================== */
.barra-trilho {
  height: 6px;
  background: var(--surface-sunken);
  margin: 0 var(--sp-5) var(--sp-4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.barra-preenchimento {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease);
}

/* =====================================================================
   BLOCO DE BLOQUEIO (motivos visíveis)
   ===================================================================== */
.bloqueio-bloco {
  margin: 0 var(--sp-5) var(--sp-4);
  background: var(--st-travado-bg);
  border: 1px solid var(--st-travado-edge);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.bloqueio-titulo {
  margin: 0 0 var(--sp-1);
  color: var(--st-travado);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.bloqueio-lista { display: flex; flex-direction: column; gap: 4px; }
.bloqueio-lista li {
  font-size: var(--fs-caption);
  color: var(--text);
  line-height: var(--lh-snug);
}

/* =====================================================================
   CONTEÚDO EXPANSÍVEL + PROCESSOS
   ===================================================================== */
.faixa-conteudo {
  border-top: 1px solid var(--border-hair);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: #FCFCFB;
}

.lista-processos {
  display: flex;
  flex-direction: column;
}

.processo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  margin: 0 calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border-hair);
  transition: background var(--dur-fast) var(--ease);
}
.processo:hover { background: var(--surface-2); }
.processo:last-child { border-bottom: none; }

/* checkbox customizado — marcado = verde-limão */
.processo-check {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  cursor: pointer;
  margin-top: 2px;
}
.chk-processo {
  position: absolute;
  opacity: 0;
  width: 20px; height: 20px;
  margin: 0;
  cursor: pointer;
}
.check-visual {
  width: 20px; height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check-visual::after {
  content: "";
  width: 5px; height: 9px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease);
  margin-bottom: 2px;
}
.chk-processo:checked + .check-visual {
  background: var(--accent);
  border-color: var(--accent-hover);
}
.chk-processo:checked + .check-visual::after { transform: rotate(45deg) scale(1); }
.chk-processo:focus-visible + .check-visual { box-shadow: var(--focus-ring); }

.processo-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.processo-nome {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: var(--lh-snug);
  word-break: break-word;
}
.processo.concluido .processo-nome {
  text-decoration: line-through;
  color: var(--text-dim);
}

.tag-travado {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-bold);
  color: var(--st-travado);
  background: var(--st-travado-bg);
  border: 1px solid var(--st-travado-edge);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.processo-motivo {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--st-travado);
  line-height: var(--lh-snug);
}

.processo-botoes {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.faixa-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.form-novo-processo {
  display: flex;
  gap: var(--sp-2);
}
.form-novo-processo .input { flex: 1 1 auto; }

.faixa-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* =====================================================================
   INPUTS (campo branco, foco com anel verde-limão como o DS)
   ===================================================================== */
.input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--text-dim); }
.input:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(229,255,81,.30);
}

textarea.input { resize: vertical; min-height: 80px; line-height: var(--lh-body); }

/* =====================================================================
   ESTADO VAZIO / RODAPÉ
   ===================================================================== */
.vazio {
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--text-muted);
  background: var(--card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.vazio-titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); color: var(--text); font-weight: var(--fw-bold); }
.vazio-texto { margin: 0; font-size: var(--fs-body); }

.rodape {
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-caption);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-hair);
}
.rodape p { margin: 0; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 14, 16, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  z-index: 50;
  animation: fade var(--dur-base) var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 460px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.modal-titulo { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); }
#modal-form { display: flex; flex-direction: column; gap: var(--sp-4); }
#modal-campos { display: flex; flex-direction: column; gap: var(--sp-3); }

.campo-label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

.campo-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--text);
  cursor: pointer;
}
.campo-check input { width: 18px; height: 18px; accent-color: var(--accent-hover); }

.modal-dica {
  font-size: var(--fs-caption);
  color: var(--warn);
  margin: 0;
}

.modal-erro {
  margin: 0;
  color: var(--neg);
  font-size: var(--fs-caption);
  background: var(--st-travado-bg);
  border: 1px solid var(--st-travado-edge);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* =====================================================================
   TOAST
   ===================================================================== */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-pop);
  z-index: 60;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  max-width: 90vw;
}
.toast.toast-erro { border-color: var(--st-travado-edge); color: var(--st-travado); background: var(--st-travado-bg); }
.toast.toast-ok   { border-color: var(--st-concluido-edge); color: var(--st-concluido); background: var(--st-concluido-bg); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 600px) {
  .faixa-status-bloco { flex-direction: column; align-items: flex-end; gap: 4px; }
  .faixa-cabecalho { padding: var(--sp-3) var(--sp-4); }
  .cabecalho { flex-direction: column; align-items: stretch; padding: var(--sp-4); }
  .cabecalho-titulo { font-size: var(--fs-h2); }
  .cabecalho-acoes { justify-content: space-between; }
  .btn-primario { width: 100%; justify-content: center; }
}

/* =====================================================================
   MULTIUSUÁRIO: visibilidade por papel
   ===================================================================== */
/* Ancorado no que É admin, não no que é operador — assim vale para qualquer papel novo. */
body:not(.papel-admin) .admin-only { display: none !important; }
.papel-admin .vazio-operador, .papel-admin .vazio-solicitante { display: none; }
.papel-operador .vazio-admin, .papel-operador .vazio-solicitante { display: none; }
.papel-solicitante .vazio-admin, .papel-solicitante .vazio-operador { display: none; }

/* =====================================================================
   TELA DE LOGIN / PORTA DE ACESSO — superfície escura (cara do produto)
   ===================================================================== */
.login-tela {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(229,255,81,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.02) 31px 32px),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-2);
  color: var(--on-dark);
}
.login-card .portico { margin-bottom: var(--sp-2); }
.login-card .eyebrow { color: var(--brand); }
.login-titulo { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: #fff; }
.login-sub { margin: var(--sp-3) 0 var(--sp-1); color: rgba(255,255,255,.70); font-size: var(--fs-body); }

/* input do gate, sobre fundo escuro */
.login-card .input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.login-card .input::placeholder { color: rgba(255,255,255,.45); }
.login-card .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(229,255,81,.28); }

.login-usuarios { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.login-usuario {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: #fff;
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.login-usuario:hover { background: rgba(229,255,81,.10); border-color: var(--brand); }
.login-usuario:active { transform: translateY(1px); }
.login-usuario:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--brand); }
.login-usuario-nome { text-align: left; }
.login-aviso { margin: var(--sp-4) 0 0; font-size: var(--fs-caption); color: rgba(255,255,255,.50); }

/* =====================================================================
   BARRA DE USUÁRIO + ABAS
   ===================================================================== */
.cabecalho-acoes { display: flex; align-items: center; gap: var(--sp-3); }
.usuario-chip { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.15; }
.usuario-nome { font-weight: var(--fw-semibold); font-size: var(--fs-body); color: #fff; }

.pill-papel {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-bold);
  border-radius: var(--r-pill); padding: 1px 8px;
  border: 1px solid rgba(255,255,255,.18);
}
.pill-papel.pp-admin { color: var(--ink); background: var(--brand); border-color: var(--brand); }
.pill-papel.pp-operador { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.pill-papel.pp-solicitante { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.usuario-papel { border: none; padding: 0; background: none; }

.abas { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); }
.aba {
  background: transparent; border: none;
  color: var(--text-muted); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.aba:hover { color: var(--text); }
.aba.ativa { color: var(--text); border-bottom-color: var(--accent-hover); }
.aba:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.acoes-topo { display: flex; justify-content: flex-end; }
.vista { display: flex; flex-direction: column; gap: var(--sp-6); }

/* =====================================================================
   PAINEL (KPIs estilo .kpi: régua verde-limão + mono)
   ===================================================================== */
.painel { display: flex; flex-direction: column; gap: var(--sp-8); }
.painel-carregando, .painel-vazio { color: var(--text-muted); font-size: var(--fs-body); margin: 0; }
.painel-secao { display: flex; flex-direction: column; gap: var(--sp-4); }
.painel-secao-titulo {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); font-weight: var(--fw-bold);
}

.kpi-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.kpi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px; background: var(--brand); opacity: .9;
}
.kpi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 1; color: var(--text); }
.kpi-rotulo { font-size: var(--fs-body); color: var(--text); font-weight: var(--fw-semibold); }
.kpi-sub { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.kpi-verde   .kpi-num { color: var(--st-concluido); } .kpi-verde::before   { background: var(--st-concluido); }
.kpi-azul    .kpi-num { color: var(--accent-ink); }   .kpi-azul::before    { background: var(--brand); }
.kpi-amarelo .kpi-num { color: var(--st-andamento); } .kpi-amarelo::before { background: var(--st-andamento); }
.kpi-vermelho .kpi-num { color: var(--st-travado); }  .kpi-vermelho::before { background: var(--st-travado); }
.kpi-cinza   .kpi-num { color: var(--text); }         .kpi-cinza::before   { background: var(--st-comecar); }

/* gráfico de barras (entregas por mês) */
.grafico-barras {
  display: flex; align-items: flex-end; gap: var(--sp-3);
  height: 180px; padding: var(--sp-4) var(--sp-2) 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.gb-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: var(--sp-2); }
.gb-barra {
  width: 70%; max-width: 48px; min-height: 2px;
  background: var(--muted, #ECECED); border-radius: var(--r-sm) var(--r-sm) 0 0;
  position: relative; display: flex; justify-content: center;
  transition: height var(--dur-slow) var(--ease);
}
.gb-barra.gb-atual { background: var(--accent); }
.gb-valor { position: absolute; top: -18px; font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
.gb-rotulo { font-size: var(--fs-caption); color: var(--text-dim); text-transform: capitalize; }

/* ranking de entregas por pessoa */
.rank { display: flex; flex-direction: column; gap: var(--sp-3); }
.rank-linha { display: flex; align-items: center; gap: var(--sp-3); }
.rank-nome { flex: 0 0 130px; font-size: var(--fs-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-trilho { flex: 1 1 auto; height: 10px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.rank-fill { height: 100%; background: var(--st-concluido); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }
.rank-num { flex: 0 0 auto; color: var(--text); font-weight: var(--fw-bold); font-family: var(--font-mono); min-width: 24px; text-align: right; }

/* progresso por projeto */
.proj-prog { display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-linha {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  box-shadow: var(--shadow-card);
}
.pp-linha.st-travado { border-left-color: var(--st-travado); }
.pp-linha.st-andamento { border-left-color: var(--st-andamento); }
.pp-linha.st-concluido { border-left-color: var(--st-concluido); }
.pp-linha.st-comecar { border-left-color: var(--st-comecar); }
.pp-linha.st-manual { border-left-color: var(--st-aguardando); }
.pp-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pp-nome { font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-trilho { height: 8px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.pp-fill { height: 100%; background: var(--st-comecar); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }
.pp-linha.st-andamento .pp-fill { background: var(--st-andamento); }
.pp-linha.st-concluido .pp-fill { background: var(--st-concluido); }
.pp-linha.st-travado .pp-fill { background: var(--st-travado); }
.pp-meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-dim); }
.pp-linha .pill { align-self: flex-start; }
.pp-linha.st-travado .pill { color: var(--st-travado); background: var(--st-travado-bg); border-color: var(--st-travado-edge); }
.pp-linha.st-andamento .pill { color: var(--st-andamento); background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); }
.pp-linha.st-concluido .pill { color: var(--st-concluido); background: var(--st-concluido-bg); border-color: var(--st-concluido-edge); }
.pp-linha.st-comecar .pill { color: var(--st-comecar); background: var(--st-comecar-bg); border-color: var(--st-comecar-edge); }
.pp-linha.st-manual .pill { color: var(--st-aguardando); background: var(--st-aguardando-bg); border-color: var(--st-aguardando-edge); }

/* atividade recente */
.feed { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.feed-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-hair); }
.feed-item:last-child { border-bottom: none; }
.feed-icone {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); background: var(--muted, #ECECED); color: var(--text-muted);
}
.fi-verde { color: var(--st-concluido); background: var(--st-concluido-bg); }
.fi-azul { color: var(--accent-ink); background: var(--accent-bg); }
.fi-vermelho { color: var(--st-travado); background: var(--st-travado-bg); }
.fi-amarelo { color: var(--st-andamento); background: var(--st-andamento-bg); }
.fi-cinza { color: var(--text-muted); background: var(--muted, #ECECED); }
.feed-corpo { flex: 1 1 auto; min-width: 0; }
.feed-texto { margin: 0; font-size: var(--fs-body); color: var(--text); line-height: var(--lh-snug); }
.feed-meta { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-dim); }

/* processo: quem concluiu */
.processo-meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-dim); }

/* =====================================================================
   GESTÃO DE USUÁRIOS
   ===================================================================== */
.usuarios-lista { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.usuario-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-card);
}
.usuario-info { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.usuario-linha-nome { font-weight: var(--fw-semibold); color: var(--text); }
.tag-voce { color: var(--text-dim); font-weight: var(--fw-regular); font-size: var(--fs-caption); }
.usuario-acoes { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

select.input { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* porta de acesso (código) */
.gate-form { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }

/* card de configuração do código (aba Usuários, admin) */
.config-card {
  margin-top: var(--sp-6);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.config-titulo { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); }
.config-status { margin: 0; font-size: var(--fs-body); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.config-dica { margin: 0; font-size: var(--fs-caption); color: var(--text-dim); }
.config-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.config-form .input { flex: 1 1 220px; }
.config-card .btn-perigo { align-self: flex-start; }

@media (max-width: 600px) {
  .rank-nome { flex-basis: 90px; }
  .usuario-chip { display: none; }
}

/* =====================================================================
   ENTRADA SUAVE (stagger leve, como o .reveal do design-system)
   Movimento deliberado: só um fade+rise nas faixas/KPIs ao montar.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .lista-projetos .faixa,
  .kpi-grade .kpi {
    opacity: 0;
    transform: translateY(8px);
    animation: rise var(--dur-slow) var(--ease) forwards;
  }
  .lista-projetos .faixa:nth-child(1), .kpi-grade .kpi:nth-child(1) { animation-delay: .02s; }
  .lista-projetos .faixa:nth-child(2), .kpi-grade .kpi:nth-child(2) { animation-delay: .07s; }
  .lista-projetos .faixa:nth-child(3), .kpi-grade .kpi:nth-child(3) { animation-delay: .12s; }
  .lista-projetos .faixa:nth-child(4), .kpi-grade .kpi:nth-child(4) { animation-delay: .17s; }
  .lista-projetos .faixa:nth-child(n+5), .kpi-grade .kpi:nth-child(n+5) { animation-delay: .20s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* =====================================================================
   LAYOUT COM SIDEBAR (usa .app-shell / .sidebar / .content do design-system.css)
   ===================================================================== */
/* conteúdo "enquadrado": ocupa a largura, com um teto confortável de leitura */
.content-inner { width: 100%; max-width: 1480px; margin: 0 auto; }

/* cabeçalho da área de conteúdo (título da seção + ação) */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.page-head .eyebrow { color: var(--text-muted); }
.page-title {
  margin: 3px 0 0; font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--text);
}

/* ícones (emoji) dos itens da nav herdam .sidebar .nav a do design-system */
.sidebar .nav a i { font-style: normal; }

/* marca: só o texto "Gestão de Projetos" — a logomarca saiu de propósito (o public/ é
   servido sem autenticação, então imagem aqui é imagem pública) */
.sidebar .side-top { align-items: flex-start; }
.sidebar .brand { flex-direction: column; align-items: flex-start; gap: 8px; }
.sidebar .brand .word { font-size: 18px; }

/* botão Sair com ícone + texto (o texto some quando o menu está recolhido) */
#btn-sair { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#btn-sair i { font-style: normal; }

/* modo recolhido (só ícones) — apenas no desktop */
@media (min-width: 993px) {
  .sidebar.collapsed .brand { align-items: center; }
  .sidebar.collapsed .side-user { display: none; }
  .sidebar.collapsed #btn-sair { padding-left: 0; padding-right: 0; }
}

/* usuário no rodapé da sidebar (sobre o preto) */
.side-user { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 12px; }
.side-user .usuario-nome { color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.side-user .usuario-papel { align-self: flex-start; }

/* botão Sair: ocupa a largura e fundo transparente (o .btn branco não vale aqui) */
#btn-sair { width: 100%; text-align: center; background: transparent; }

/* carimbo de versão no rodapé do menu (diagnóstico de deploy) */
.side-versao { display: block; margin-top: 8px; padding: 0 4px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.32); }
.sidebar.collapsed .side-versao { display: none; }

/* no mobile: mostrar usuário + Sair quando o menu (hambúrguer) abre */
@media (max-width: 992px) {
  .sidebar.nav-open .side-foot { display: flex; flex-direction: column; }
  .content-inner { max-width: none; }
}

/* =====================================================================
   CAMADA SAAS — topbar (busca), filtros, faixa de stats, alerta amigável,
   selos dos cards, Kanban e Calendário. Tudo derivado dos mesmos tokens.
   ===================================================================== */

/* ---- cabeçalho: título + subtítulo + busca + ação ---- */
.page-head-txt { display: flex; flex-direction: column; gap: 4px; }
.page-sub { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.page-head-acoes { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.busca {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0 var(--sp-4);
  height: 40px; min-width: 240px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.busca:focus-within { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-bg); }
.busca-ic { color: var(--text-muted); font-size: 14px; }
.busca-input {
  border: none; background: transparent; outline: none; flex: 1;
  font: inherit; font-size: var(--fs-body); color: var(--text); min-width: 0;
}

/* ---- barra de filtros (segmented control) ---- */
.lista-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0;
}
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ground-2); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.seg-btn {
  border: none; background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  padding: 6px 16px; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.ativa { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.check-ocultar {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-muted); cursor: pointer; user-select: none;
}
.lista-topo-filtros { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filtro-pri {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); user-select: none;
}
.seletor-pri {
  font: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 12px; cursor: pointer;
}
.seletor-pri:hover { border-color: var(--border-strong); }
.seletor-pri:focus-visible { outline: none; border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-bg); }

/* ---- faixa de stats (substitui os contadores) ---- */
.stats {
  display: flex; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden;
}
.stat {
  flex: 1 1 0; min-width: 120px; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-5) var(--sp-5);
}
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: var(--sp-5); bottom: var(--sp-5);
  width: 1px; background: var(--border-hair);
}
.stat-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 2rem; font-weight: var(--fw-bold); line-height: 1; color: var(--text);
}
.stat-k {
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); font-weight: var(--fw-semibold);
}
.stat.r .stat-v { color: var(--st-travado); }
.stat.a .stat-v { color: var(--st-andamento); }
.stat.g .stat-v { color: var(--st-concluido); }

/* ---- alerta amigável de travados ---- */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--st-travado-bg); border: 1px solid var(--st-travado-edge);
  border-left: 4px solid var(--st-travado); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}
.alert-ic { font-size: 18px; line-height: 1.4; }
.alert-corpo { display: flex; flex-direction: column; gap: 3px; }
.alert-titulo { margin: 0; font-weight: var(--fw-bold); color: var(--st-travado); font-size: var(--fs-body); }
.alert-item { margin: 0; font-size: var(--fs-caption); color: var(--text); }
.alert-item strong { color: var(--text); font-weight: var(--fw-semibold); }

/* lista filtrada vazia */
.lista-vazia {
  list-style: none; margin: 0; padding: var(--sp-8);
  text-align: center; color: var(--text-muted); font-size: var(--fs-body);
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--r-lg);
}

/* ---- selos (badges) nos cards ---- */
.faixa-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); }
.badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1.3;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text-muted);
}
.badge-trava       { background: var(--st-travado-bg);   border-color: var(--st-travado-edge);   color: var(--st-travado); }
.badge-resp        { background: var(--ground-2);        border-color: var(--border);            color: var(--text); }
.badge-pri.pri-alta  { background: var(--st-travado-bg);   border-color: var(--st-travado-edge);   color: var(--st-travado); }
.badge-pri.pri-media { background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); color: var(--st-andamento); }
.badge-pri.pri-baixa { background: var(--ground-2);        border-color: var(--border);            color: var(--text-muted); }
.badge-prazo.due-late { background: var(--st-travado-bg);   border-color: var(--st-travado-edge);   color: var(--st-travado); }
.badge-prazo.due-soon { background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); color: var(--st-andamento); }
.badge-prazo.due-ok   { background: var(--accent-bg);       border-color: var(--border);            color: var(--text); }
.badge-feito          { background: var(--st-concluido-bg); border-color: var(--st-concluido-edge); color: var(--st-concluido); }

/* ---- meta do processo: prazo + responsável + carimbo ---- */
.processo-meta { display: flex; flex-wrap: wrap; gap: 3px var(--sp-3); align-items: center; }
.pmeta-prazo { font-weight: var(--fw-semibold); }
.pmeta-prazo.due-late { color: var(--st-travado); }
.pmeta-prazo.due-soon { color: var(--st-andamento); }
.pmeta-prazo.due-ok   { color: var(--text-muted); }
.pmeta-upd  { color: var(--text-dim); }

/* =====================================================================
   KANBAN
   ===================================================================== */
.kanban {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4); align-items: start;
}
.kanban-col {
  background: var(--ground-2); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong); border-radius: var(--r-lg);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3);
}
.kanban-col.k-comecar   { border-top-color: var(--st-comecar); }
.kanban-col.k-andamento { border-top-color: var(--st-andamento); }
.kanban-col.k-travado   { border-top-color: var(--st-travado); }
.kanban-col.k-concluido { border-top-color: var(--st-concluido); }
.kanban-col-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 2px 4px; }
.kanban-col-titulo { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--text); }
.kanban-col-num {
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 9px;
}
.kanban-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.kanban-vazio { margin: 2px 4px; font-size: var(--fs-caption); color: var(--text-dim); }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kcard:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kcard-nome { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--text); }
.kcard-prog { display: flex; align-items: center; gap: var(--sp-2); }
.kcard-trilho { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.kcard-fill { height: 100%; background: var(--st-andamento); border-radius: 3px; }
.kcard-prog-txt { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.kcard-selos { display: flex; flex-wrap: wrap; gap: 4px; }

/* =====================================================================
   CALENDÁRIO
   ===================================================================== */
.cal { display: flex; flex-direction: column; gap: var(--sp-4); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cal-nav-grupo { display: flex; align-items: center; gap: var(--sp-3); }
.cal-nav {
  width: 34px; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 18px; line-height: 1; cursor: pointer; color: var(--text);
}
.cal-nav:hover { border-color: var(--border-strong); }
.cal-titulo {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  min-width: 180px; text-align: center; text-transform: capitalize; color: var(--text);
}
.cal-hoje {
  padding: 7px 16px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-caption); color: var(--text);
}
.cal-hoje:hover { border-color: var(--border-strong); }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd {
  text-align: center; font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); font-weight: var(--fw-semibold); padding: 4px 0;
}
.cal-dia {
  min-height: 100px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-fora { background: transparent; border: 1px dashed var(--border-hair); }
.cal-hoje-cel { border-color: var(--accent-ring); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.cal-num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-semibold); }
.cal-hoje-cel .cal-num { color: var(--accent-ink); }
.cal-ev {
  text-align: left; font-size: 11px; line-height: 1.25; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cal-ev.due-late { background: var(--st-travado-bg);   border-color: var(--st-travado-edge);   color: var(--st-travado); }
.cal-ev.due-soon { background: var(--st-andamento-bg); border-color: var(--st-andamento-edge); color: var(--st-andamento); }
.cal-ev.due-ok   { background: var(--accent-bg);       border-color: var(--border);            color: var(--text); }

/* ---- responsivo: Kanban e Calendário no mobile ---- */
@media (max-width: 992px) {
  .kanban {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2);
  }
  .kanban-col { scroll-snap-align: start; }
  .cal-grade { gap: 3px; }
  .cal-dia { min-height: 62px; padding: 4px; }
  .cal-ev { font-size: 10px; padding: 2px 4px; }
  .cal-titulo { font-size: var(--fs-h3); min-width: 120px; }
  .busca { min-width: 0; flex: 1; }
}

/* =====================================================================
   PAINEL — GRÁFICOS (donuts de status/tarefas + atenção)
   ===================================================================== */
.panorama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.donut-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card); padding: var(--sp-5);
}
.donut-titulo {
  margin: 0 0 var(--sp-4); font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text);
}
.donut-linha { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.donut { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.donut-svg { width: 100%; height: 100%; transform: rotate(0deg); }
.donut-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: none;
}
.donut-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1; color: var(--text);
}
.donut-rot { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-width: 150px; }
.donut-leg-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); }
.donut-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut-leg-rot { color: var(--text); flex: 1; }
.donut-leg-num { color: var(--text); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.atencao-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.atencao-card {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5);
}
.atencao-card.at-travado { border-left-color: var(--st-travado); }
.atencao-card.at-atraso  { border-left-color: var(--st-andamento); }
.atencao-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.atencao-titulo { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text); }
.atencao-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: 1;
}
.at-travado .atencao-num { color: var(--st-travado); }
.at-atraso  .atencao-num { color: var(--st-andamento); }
.atencao-vazio { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.atencao-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.atencao-item { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-hair); }
.atencao-item:last-child { border-bottom: none; padding-bottom: 0; }
.atencao-item-nome { font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--text); }
.atencao-item-info { font-size: var(--fs-caption); color: var(--text-muted); }
.atencao-mais { margin: var(--sp-2) 0 0; font-size: var(--fs-caption); color: var(--text-muted); }

@media (max-width: 760px) {
  .panorama, .atencao-grid { grid-template-columns: none; }
}

/* telefone (WhatsApp) na lista de usuarios */
.usuario-tel { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* =====================================================================
   PAINEL — controles + gráfico temporal interativo (incluídos × finalizados)
   ===================================================================== */
.pnl-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pnl-topo .painel-secao-titulo { margin: 0; }

/* seletor de mês */
.pnl-mes { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; box-shadow: var(--shadow-card); }
.pnl-nav { width: 30px; height: 30px; border: none; background: transparent; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; color: var(--text); }
.pnl-nav:hover { background: var(--ground-2); }
.pnl-mes-lbl { min-width: 130px; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-caption); text-transform: capitalize; }

/* controles do gráfico (chips de série + botão barras/linha) */
.pnl-ctrl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pnl-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; user-select: none; color: var(--text-muted); }
.pnl-chip .pnl-dot { width: 10px; height: 10px; border-radius: 3px; }
.pnl-chip.incl .pnl-dot { background: #3D7BD6; }
.pnl-chip.fin  .pnl-dot { background: #3E9C46; }
.pnl-chip.on { color: var(--text); }
.pnl-chip.off { opacity: .45; text-decoration: line-through; }
.pnl-tipo { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; color: var(--text); }
.pnl-tipo:hover { border-color: var(--border-strong); }

/* área do gráfico */
.pnl-plot { position: relative; }
.pnl-colswrap { position: relative; }
.pnl-cols { display: flex; align-items: flex-end; gap: 8px; padding: 0 2px; }
.pnl-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; padding: 6px 2px 0; transition: background var(--dur-fast) var(--ease); }
.pnl-col:hover { background: var(--surface-2); }
.pnl-col.sel { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.pnl-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 150px; }
.pnl-bar { width: 15px; border-radius: 5px 5px 0 0; min-height: 3px; transition: height var(--dur-base) var(--ease); }
.pnl-bar.incl { background: #3D7BD6; }
.pnl-bar.fin  { background: #3E9C46; }
.pnl-x { font-size: var(--fs-eyebrow); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: capitalize; }
.pnl-col.sel .pnl-x { color: var(--accent-ink); }
.pnl-svg { position: absolute; top: 0; left: 0; width: 100%; height: 150px; pointer-events: none; }
.pnl-hint { margin: 10px 0 0; text-align: center; font-size: var(--fs-caption); color: var(--text-dim); }

/* tooltip / mini-card */
.pnl-tip { position: absolute; pointer-events: none; background: var(--ink, #16181C); color: #fff; border-radius: 10px; padding: 9px 11px; font-size: var(--fs-caption); box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast), transform var(--dur-fast); white-space: nowrap; z-index: 6; }
.pnl-tip.show { opacity: 1; transform: translateY(0); }
.pnl-tip-t { font-weight: var(--fw-bold); margin-bottom: 6px; text-transform: capitalize; }
.pnl-tip-r { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.pnl-tip-r .pnl-dot { width: 9px; height: 9px; border-radius: 2px; }
.pnl-tip-r .pnl-dot.incl { background: #3D7BD6; }
.pnl-tip-r .pnl-dot.fin  { background: #3E9C46; }
.pnl-tip-r b { margin-left: auto; padding-left: 16px; }

/* "por responsável": meta abaixo de cada barra do rank */
.rank-meta { margin: -2px 0 8px; font-size: var(--fs-caption); color: var(--text-muted); }

/* recolher/expandir (atividade recente + grupos de progresso) */
.feed-oculto { display: none; }

/* cabeçalho de seção clicável com "+" no início */
.secao-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 0 0 var(--sp-3); cursor: pointer; text-align: left; }
.secao-toggle .painel-secao-titulo { margin: 0; }
.secao-mais, .grp-mais {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px; line-height: 20px; text-align: center;
}
.secao-toggle:hover .secao-mais, .grp-head:hover .grp-mais { border-color: var(--accent-ring); }
.secao-num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); background: var(--ground-2); border-radius: var(--r-pill); padding: 1px 9px; }

/* grupos de progresso por status */
.grp { margin-bottom: var(--sp-3); }
.grp-head {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; text-align: left; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md); padding: 12px 14px;
}
.grp-head:hover { border-color: var(--border-strong); background: var(--surface-2); }
.grp.st-andamento .grp-head { border-left-color: var(--st-andamento); }
.grp.st-travado   .grp-head { border-left-color: var(--st-travado); }
.grp.st-concluido .grp-head { border-left-color: var(--st-concluido); }
.grp.st-comecar   .grp-head { border-left-color: var(--st-comecar); }
.grp.st-manual    .grp-head { border-left-color: var(--st-aguardando); }
.grp-titulo { font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--text); }
.grp-num { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); background: var(--ground-2); border-radius: var(--r-pill); padding: 1px 10px; }
.grp-corpo { margin-top: var(--sp-2); }

@media (max-width: 720px) {
  .pnl-bar { width: 10px; }
  .pnl-cols { gap: 4px; }
}