:root{
  --bg:#EEF0E9;
  --surface:#FBFBF7;
  --surface-alt:#E3E7DC;
  --ink:#1C2321;
  --ink-soft:#4B564C;
  --ink-faint:#7B8578;
  --accent:#4B4A82;
  --accent-ink:#38356B;
  --accent-soft:#ECEBF6;
  --amber:#A8681F;
  --amber-soft:#F3E4CC;
  --success:#276B45;
  --success-soft:#E1EEE4;
  --critical:#A3392F;
  --critical-soft:#F5E1DE;
  --border:#D6DACB;
  --shadow: 0 1px 2px rgba(28,35,33,0.06), 0 8px 24px -12px rgba(28,35,33,0.16);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:'Source Serif 4', Georgia, serif; margin:0; color:var(--ink);}
.eyebrow{
  font-family:'Public Sans', sans-serif;
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-ink);
}
.lede{color:var(--ink-soft); max-width:44ch; margin:10px 0 0;}
.lede-pequena{color:var(--ink-faint); font-size:0.9rem; max-width:60ch; margin:2px 0 16px;}

.oculto{display:none !important;}
.tela{min-height:100vh;}

/* ---------- LOGIN ---------- */
#tela-login{
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:40px 36px;
  width:100%;
  max-width:380px;
}
.login-card h1{font-size:2.2rem; margin-top:8px;}
#form-login{display:flex; flex-direction:column; gap:14px; margin-top:26px;}
label{display:flex; flex-direction:column; gap:6px; font-size:0.86rem; color:var(--ink-soft); font-weight:600;}
input, select, textarea{
  font-family:'Public Sans', sans-serif;
  font-size:0.95rem;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px;
}
button{font-family:'Public Sans', sans-serif; cursor:pointer; border:none;}
.btn-primario{
  background:var(--accent); color:#fff;
  padding:11px 18px; border-radius:8px; font-weight:600; font-size:0.92rem;
}
.btn-primario:hover{background:var(--accent-ink);}
.btn-fantasma{
  background:transparent; color:var(--ink-soft);
  padding:11px 16px; border-radius:8px; font-weight:600; font-size:0.9rem;
  border:1px solid var(--border);
}
.btn-fantasma:hover{background:var(--surface-alt);}
.erro{color:var(--critical); font-size:0.85rem; margin:0; min-height:1.2em;}

.login-testes{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.chip{
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  padding:8px 12px; border-radius:6px; text-align:left; margin-top:6px;
}
.chip:hover{filter:brightness(0.96);}

/* ---------- TOPO / DASHBOARD SHELL ---------- */
.topo{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:18px 32px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
.topo-id h1{font-size:1.3rem; margin-top:2px;}
.topo-acoes{display:flex; gap:10px;}

.abas{display:flex; gap:4px; background:var(--surface-alt); padding:4px; border-radius:10px;}
.aba{
  padding:8px 14px; border-radius:7px; font-size:0.86rem; font-weight:600;
  color:var(--ink-faint); background:transparent;
}
.aba:hover{color:var(--ink);}
.aba.ativa{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow);}

.painel{display:none;}
.painel.ativo{display:block;}
.painel-topo{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:22px 32px 4px;
}
.busca{
  flex:1; max-width:420px;
  padding:10px 14px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); font-size:0.92rem;
}
.lede-pequena{padding:0 32px; color:var(--ink-faint); font-size:0.85rem; margin:8px 0 0;}

.legenda-conceitos{
  margin:10px 32px 0; padding:10px 14px; background:var(--surface-alt); border-radius:8px;
  font-size:0.8rem; color:var(--ink-soft); line-height:1.5; max-width:76ch;
}
.legenda-conceitos strong{color:var(--ink);}

/* ---------- KANBAN BOARD ---------- */
.board{
  display:grid;
  grid-template-columns:repeat(3, minmax(260px, 1fr));
  gap:18px;
  padding:26px 32px;
  align-items:start;
}
@media (max-width:820px){
  .board{grid-template-columns:1fr;}
}
.coluna{
  background:var(--surface-alt);
  border-radius:12px;
  padding:14px;
  min-height:120px;
}
.coluna-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:6px;
  padding:4px 6px 12px;
}
/* "Selecionar tudo" de uma coluna cai pra linha de baixo, ocupando a largura toda — vira um
   botão de verdade "em cima" da pilha de cards, em vez de um linkzinho espremido do lado do
   título (que quebrava feio em coluna estreita). Ver .sel-tudo-coluna mais abaixo. */
.coluna-head .sel-tudo-coluna{flex:1 0 100%; text-align:center;}
.coluna-head h2{font-size:0.95rem; font-weight:600; font-family:'Public Sans', sans-serif;}
.contagem{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-faint);
  background:var(--surface); border-radius:20px; padding:2px 9px;
}
.coluna-corpo{
  display:flex; flex-direction:column; gap:10px; min-height:60px;
}
.coluna-corpo.arrastando-sobre{
  outline:2px dashed var(--accent); outline-offset:4px; border-radius:8px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px 14px;
  box-shadow:var(--shadow);
  cursor:grab;
  display:flex; flex-direction:column; gap:8px;
  user-select:none; touch-action:none;
}
.card:active{cursor:grabbing;}
.card.arrastando{opacity:0.35;}
.card-fantasma{
  position:fixed; z-index:50; pointer-events:none;
  transform:rotate(2deg);
  box-shadow:0 12px 28px -8px rgba(28,35,33,0.35);
}
.card-fantasma-numero{
  width:auto !important; padding:8px 16px; display:inline-block;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1rem;
  background:var(--accent); color:#fff; border:none;
}
/* overflow-wrap: bug real — título longo sem espaço pra quebrar (ex.: "(Federal/Estadual/
   Amigo/Adicional)", só barras, sem espaço) estourava a largura fixa do .card-inbox (240px)
   e atravessava o card em vez de quebrar linha. */
.card-titulo{font-weight:600; font-size:0.94rem; line-height:1.35; overflow-wrap:break-word;}
.card-desc{font-size:0.83rem; color:var(--ink-soft); line-height:1.4;}
.card-rodape{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pill{
  font-size:0.72rem; font-weight:600; padding:3px 9px; border-radius:20px;
  font-family:'Public Sans', sans-serif;
}
.pill.baixa{background:var(--success-soft); color:var(--success);}
.pill.normal{background:var(--accent-soft); color:var(--accent-ink);}
.pill.urgente{background:var(--critical-soft); color:var(--critical);}
.prazo{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-faint);}
.prazo.atrasado{color:var(--critical); font-weight:600;}

/* ---------- ADMIN ---------- */
.admin-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:14px; padding:26px 32px 6px;
}
.admin-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:18px; box-shadow:var(--shadow);
}
.admin-tile .num{font-family:'Source Serif 4', serif; font-size:2.1rem; font-weight:700;}
.admin-tile .rotulo{font-size:0.82rem; color:var(--ink-faint); margin-top:2px;}
.admin-tile.alerta .num{color:var(--critical);}

.admin-secao{padding:20px 32px 40px;}
.admin-secao h2{font-size:1.1rem; margin-bottom:4px;}
.tabela-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
.tabela-equipe{width:100%; border-collapse:collapse; background:var(--surface); font-size:0.88rem; min-width:520px;}
.tabela-equipe th{
  text-align:left; font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-faint); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-alt);
}
.tabela-equipe td{padding:10px 14px; border-bottom:1px solid var(--border);}
.tabela-equipe tr:last-child td{border-bottom:none;}
.tabela-equipe td.usuario{font-family:'IBM Plex Mono', monospace; color:var(--accent-ink);}
.link-acao{background:none; color:var(--accent-ink); font-weight:600; font-size:0.84rem; padding:0;}
.link-acao:hover{text-decoration:underline;}

/* ---------- CADASTRO GERAL ---------- */
.tabela-cadastro{width:100%; border-collapse:collapse; background:var(--surface); font-size:0.88rem;}
.tabela-cadastro th{
  text-align:left; font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-faint); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-alt);
}
.tabela-cadastro td{padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
.tabela-cadastro tr:last-child td{border-bottom:none;}
.tabela-cadastro tr:hover{background:var(--accent-soft);}
.tabela-cadastro td.numero{font-family:'IBM Plex Mono', monospace; color:var(--ink-faint);}
.tabela-cadastro td.pend{font-size:0.82rem; color:var(--ink-faint);}

.situacao{
  font-size:0.72rem; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.situacao.arquivado{background:var(--surface-alt); color:var(--ink-faint);}
.situacao.solicitacao{background:var(--amber-soft); color:var(--amber);}
.situacao.matriculado{background:var(--success-soft); color:var(--success);}
.situacao.pendencia{background:var(--critical-soft); color:var(--critical);}

.pendencias-secao{border-top:1px dashed var(--border); margin-top:4px; padding-top:14px;}
.pendencias-chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px;}
.pendencias-add{display:flex; gap:8px;}
.pendencias-add select{flex:1;}
.pendencias-grupo-rotulo{
  display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* Barra de ações do Cadastro: junta botões próximos, de um lado só, em vez de espalhados —
   reaproveitada tanto pra "Pegar este processo pra mim" quanto pro par "Somente atender" /
   "Lançar nova atividade" lá embaixo. */
.cadastro-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:2px 0 4px;}
.cadastro-toolbar .modal-acoes{margin-top:0;}

/* "Alça de escolha igual planilha": lista vertical de linhas cheias (não pilulas lado a lado),
   cada linha é uma célula clicável com o nome à esquerda e os pontos à direita. */
.planilha-lista{
  display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px;
  overflow:hidden; margin-top:6px; width:100%;
}
.planilha-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  width:100%; text-align:left; background:var(--surface); border:none;
  border-bottom:1px solid var(--border); padding:10px 12px; font-size:0.88rem; font-weight:600; color:var(--ink);
  border-radius:0;
}
.planilha-item:last-child{border-bottom:none;}
.planilha-item:hover{background:var(--accent-soft); color:var(--accent-ink);}
.planilha-item .planilha-pts{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.78rem;
  color:var(--amber); background:var(--amber-soft); padding:2px 8px; border-radius:20px; flex-shrink:0;
}

.tipo-novo-inline{margin:-10px 0 14px;}
.tipo-novo-form{display:flex; gap:8px; margin-top:8px;}
.tipo-novo-form input{flex:1; margin:0;}

#lista-turmas{padding:10px 32px 32px;}
.turma-add{position:relative; margin-top:10px;}
.turma-add input{width:100%; margin:0;}
.turma-add .duplicatas{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;}
.turma-lancar{margin-top:12px;}
.linha-pendente td:first-child{color:var(--amber);}
.linha-pendente td:nth-child(2){color:var(--amber); font-weight:600;}

.duplicatas{
  background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius:8px; padding:12px 14px; margin-bottom:16px; font-size:0.85rem;
}
.duplicatas .eyebrow{color:var(--amber); display:block; margin-bottom:6px;}
.duplicatas button{
  display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:8px 10px; margin-top:6px; font-size:0.85rem; color:var(--ink);
}
.duplicatas button:hover{background:var(--accent-soft);}
.modal-larga{max-width:520px;}
.modal-extra-larga{max-width:min(90vw, 960px);}

.tabela-lista-bloco{width:100%; border-collapse:collapse; background:var(--surface); font-size:0.84rem;}
.tabela-lista-bloco th{
  text-align:center; font-size:0.72rem; letter-spacing:0.01em; font-weight:600;
  color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--border); background:var(--surface-alt);
  white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis;
}
.tabela-lista-bloco th:first-child{text-align:left; max-width:none;}
.tabela-lista-bloco td{padding:8px 10px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle;}
.tabela-lista-bloco td.numero{text-align:left; font-family:'IBM Plex Mono', monospace; color:var(--ink); white-space:nowrap;}
.tabela-lista-bloco tr:hover{background:var(--accent-soft);}
.tabela-lista-bloco input[type="checkbox"]{margin:0; accent-color:var(--accent); width:16px; height:16px;}

/* ---------- CAIXAS DE TRABALHO ---------- */
.abas-secundarias{background:transparent; padding:0; gap:8px;}
.abas-secundarias .aba{background:var(--surface); border:1px solid var(--border);}
.abas-secundarias .aba.ativa{background:var(--accent); color:#fff; box-shadow:none;}

.board-caixa{
  grid-template-columns:none;
  display:flex; gap:14px; padding:12px 32px 32px;
  overflow-x:auto;
}
.board-caixa .coluna{min-width:200px; flex:0 0 200px;}

.card-numero{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.05rem; color:var(--ink);
}
.card-minimo{padding:11px 13px; gap:6px;}
.card-minimo .card-tipo{font-size:0.78rem; color:var(--ink-soft);}
.card-minimo .mini-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--amber);
  background:var(--amber-soft); padding:2px 8px; border-radius:20px; display:inline-block; width:fit-content;
}
.card-minimo .card-nome{
  font-size:0.78rem; color:var(--ink-faint); border-top:1px dashed var(--border);
  margin-top:4px; padding-top:6px; display:none;
}
.card-minimo.expandido .card-nome{display:block;}
.card-checklist{display:none; flex-direction:column; gap:4px; margin-top:6px;}
.card-minimo.expandido .card-checklist{display:flex;}
.movimentacao-card .card-checklist{display:flex;}
.board-movimentacao.checklists-recolhidos .card-checklist,
#board-servidor.checklists-recolhidos .card-checklist{display:none;}
/* Clicar num card individual reabre só o dele, mesmo com "recolher todos" ativo. */
.board-movimentacao.checklists-recolhidos .movimentacao-card.expandido .card-checklist,
#board-servidor.checklists-recolhidos .movimentacao-card.expandido .card-checklist{display:flex;}
.check-linha{display:flex; align-items:center; gap:7px; font-size:0.76rem; color:var(--ink-soft); cursor:pointer;}
.check-linha input[type="checkbox"]{margin:0; accent-color:var(--accent);}
.check-linha span:not(.check-remover){flex:1;}
.check-remover{
  opacity:0; font-size:0.72rem; color:var(--critical); cursor:pointer; padding:0 2px;
  transition:opacity 0.15s;
}
.check-linha:hover .check-remover{opacity:0.7;}
.check-remover:hover{opacity:1 !important;}
.check-add{cursor:default;}
/* "Concluir" — marca todos os passos restantes do checklist de uma vez (pedido do Cleiton, pra
   facilitar a finalização sem clicar caixinha por caixinha). Menor que o botão padrão, cabe bem
   dentro do checklist junto com o resto dos itens. */
.mov-concluir-tudo{
  display:block; width:100%; margin-top:6px; padding:6px 10px; font-size:0.8rem;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent; border-radius:8px;
}
.mov-concluir-tudo:hover{background:var(--accent); color:#fff;}
.check-add input[type="text"]{
  border:none; background:transparent; font-size:0.76rem; color:var(--ink-soft);
  width:100%; padding:2px 0; font-family:'Public Sans',sans-serif;
}
.check-add input[type="text"]:focus{outline:none; color:var(--ink);}
.check-add input[type="text"]::placeholder{color:var(--ink-faint);}

/* ---------- IMPORTAÇÃO DE PDF ---------- */
.pdf-importar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:0 32px 16px;
}
.btn-arquivo{display:inline-block; cursor:pointer;}
.lista-pdf .tabela-wrap{margin:0 32px 32px;}
.situacao.associado{background:var(--success-soft); color:var(--success);}
.situacao.nao_encontrado{background:var(--critical-soft); color:var(--critical);}

/* ---------- MODAL ---------- */
.modal-fundo{
  position:fixed; inset:0; background:rgba(28,35,33,0.45);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:10;
}
.modal-caixa{
  background:var(--surface); border-radius:14px; padding:28px 26px;
  width:100%; max-width:420px; box-shadow:var(--shadow);
}
.modal-caixa h2{font-size:1.2rem; margin-bottom:16px;}
#form-tarefa, #form-servidor, #form-atividade, #form-tipo, #form-bloco{display:flex; flex-direction:column; gap:14px;}
.modal-linha{display:flex; gap:12px;}
/* min-width:0 — bug real: item flex sem isso recusa encolher abaixo da largura intrínseca do
   input, então em modal estreito o campo (ex.: Telefone) estourava a borda em vez de encolher. */
.modal-linha label{flex:1; min-width:0;}

/* ---------- INBOX (GTD — chefe lançou, ninguém pegou) ---------- */
.inbox-secao{padding:0 32px 20px;}
.inbox-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.inbox-head h2{font-size:1rem; font-family:'Public Sans',sans-serif; font-weight:600;}
.inbox-lista{display:flex; gap:12px; flex-wrap:wrap;}
.card-inbox{
  background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius:10px; padding:12px 14px; width:240px; display:flex; flex-direction:column; gap:8px;
}
.btn-pegar{font-size:0.82rem; padding:8px 12px;}
.card-inbox{cursor:grab;}
.card-inbox.arrastando{opacity:0.4;}

.admin-atribuir-rapido{margin:2px 0 14px; padding:10px 12px; background:var(--surface-alt); border-radius:10px;}
.admin-atribuir-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.chip-atribuir{
  min-height:auto; padding:8px 14px; border-radius:20px; background:var(--surface);
  border:1px dashed var(--border); font-size:0.82rem; font-weight:600; color:var(--ink-soft);
}
.chip-atribuir.arrastando-sobre{outline:2px dashed var(--accent); outline-offset:2px; background:var(--accent-soft); color:var(--accent-ink);}

/* ---------- CARD: seleção em lote, pontos, repassar ---------- */
.card-topo{display:flex; align-items:flex-start; gap:8px;}
.card-select{margin-top:3px; accent-color:var(--accent);}
.mini-tag.pontos{background:var(--amber-soft); color:var(--amber); font-family:'IBM Plex Mono',monospace;}
.card-repassar{
  display:none; align-items:center; gap:8px; margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--border); font-size:0.78rem; color:var(--ink-soft);
}
.card.expandido .card-repassar{display:flex;}
.card-repassar select{font-size:0.78rem; padding:4px 6px;}
.card-repassar .btn-repassar{font-size:0.76rem; padding:4px 8px;}

.buscar-processo{position:relative; flex:1; max-width:360px;}
.buscar-processo .duplicatas{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;}
.processo-linha{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:6px;
}
.processo-linha:hover{background:var(--accent-soft);}
.processo-linha b{display:block; font-size:0.85rem;}

.lote-barra{
  display:flex; align-items:center; gap:10px; background:var(--accent-soft); color:var(--accent-ink);
  padding:8px 14px; border-radius:8px; font-size:0.85rem;
}
.lote-barra select{padding:6px 8px;}

/* ---------- ADMIN: seções com ação no cabeçalho ---------- */
.secao-head-acao{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.secao-head-acao h2{font-size:1.1rem;}

/* ---------- MODAL: modo avulsa/bloco/lote ---------- */
.modo-atividade{margin-bottom:6px;}
.modo-secao{display:flex; flex-direction:column; gap:14px;}

/* ---------- ADMIN: blocos de atividades ---------- */
.bloco-card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:10px;
}
.bloco-card-head{display:flex; align-items:center; gap:8px;}
.bloco-card-head h3{flex:1;}
.bloco-card-head h3{font-family:'Public Sans',sans-serif; font-size:0.95rem; font-weight:600;}
.bloco-subtarefas-preview{font-size:0.82rem; color:var(--ink-faint); margin-top:4px;}
.subtarefa-linha{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.subtarefa-linha .sub-titulo{flex:1;}

/* ---------- MOVIMENTAÇÃO — card mínimo: número + checklist em repouso, resto no hover ---------- */
.movimentacao-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; margin-bottom:12px;
  cursor:grab; user-select:none; touch-action:none;
}
.movimentacao-card:active{cursor:grabbing;}
/* Bug real corrigido (2026-08-20): opacity no CARD INTEIRO compunha TUDO por dentro, inclusive o
   balão `.mov-info-hover` (que é filho dele) — o balão nascia meio transparente e deixava o card
   de baixo vazar através, reportado como "a visualização do quadro de informações... ficou
   transparente". `.mov-info-hover` não tem essa classe `.mov-conteudo` de propósito — sobra de
   fora e sempre renderiza sólido/opaco, mesmo dentro de um card concluído. */
.movimentacao-card.concluida .mov-conteudo{opacity:0.72;}
.mov-card-topo{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.mov-numero{font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.92rem; color:var(--ink);}

/* Balão de detalhes — interativo (o nome é editável ali dentro), some por padrão. Pedido do
   Cleiton: só aparece passando o mouse EXATAMENTE no número (`.mov-numero`), não no card
   inteiro — mais preciso, evita abrir sem querer arrastando/clicando perto. Continua aberto se o
   mouse for pro balão em si (pra dar tempo de clicar "Pegar pra mim"/editar o nome) ou se algum
   campo dele estiver focado (:focus-within evita sumir no meio de uma edição). */
.mov-info-hover{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:15;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transition:opacity 0.12s;
}
.movimentacao-card:has(.mov-numero:hover) .mov-info-hover,
.movimentacao-card:has(.mov-info-hover:hover) .mov-info-hover,
.movimentacao-card:focus-within .mov-info-hover{
  opacity:1; pointer-events:auto;
}
.mov-nome-editavel{
  font-family:'Public Sans',sans-serif; font-size:0.95rem; font-weight:600;
  outline:none; border-radius:4px; padding:2px 4px; margin:2px -4px 4px;
}
.mov-nome-editavel:focus{background:var(--accent-soft);}
.mov-aluno{margin-top:2px;}
.mov-barra{
  height:6px; background:var(--surface-alt); border-radius:20px; margin:10px 0 6px; overflow:hidden;
}
.mov-barra-preenchida{height:100%; background:var(--success); border-radius:20px; transition:width 0.3s;}
.mov-atual{color:var(--accent-ink); margin-top:2px;}
.mov-tempo{
  font-family:'Public Sans',sans-serif; font-size:0.78rem; color:var(--ink-faint);
  margin:2px 0 0;
}
.mov-tempo-alerta{color:var(--critical); font-weight:600;}
.movimentacao-card .card-checklist{margin-top:8px;}

.celebracao-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:10px;
  font-family:'Public Sans',sans-serif; font-size:0.9rem; font-weight:600;
  box-shadow:var(--shadow); z-index:50; opacity:1; transition:opacity 0.6s, transform 0.6s;
}
.celebracao-toast.saindo{opacity:0; transform:translateX(-50%) translateY(10px);}
.board-movimentacao{grid-template-columns:repeat(3, minmax(240px, 1fr));}
.movimentacao-card.arrastando{opacity:0.4;}

/* Mesas rolam pro lado, nunca quebram linha — arrastar pra baixo de uma segunda fileira é
   ruim pro técnico (é exatamente a reclamação: "lá em baixo fica difícil de arrastar"). */
.board-mesas{
  display:flex; gap:18px; padding:26px 32px; align-items:flex-start;
  overflow-x:auto; overflow-y:visible;
}
.board-mesas .coluna{flex:0 0 190px; width:190px;}

.mesa-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; cursor:grab; user-select:none; touch-action:none;
}
.mesa-card:active{cursor:grabbing;}
.mesa-card.arrastando{opacity:0.4;}
.mesa-card.concluida{opacity:0.6;}
.mesa-card-topo{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.mesa-card-numero{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.92rem; color:var(--ink);
}
.mesa-card-tecnico{
  font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.02em;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:20px; padding:2px 7px;
  white-space:nowrap;
}
.mesa-card .mesa-pegar{font-size:0.76rem; margin-top:4px;}

/* Balão de detalhes — some por padrão, aparece ao passar o mouse. pointer-events:none deixa o
   arraste do card por baixo funcionar normalmente mesmo com o balão visível por cima. */
.mesa-card-info{
  position:absolute; top:0; left:calc(100% + 8px); z-index:15; width:220px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px;
  opacity:0; pointer-events:none; transition:opacity 0.12s;
}
.mesa-card:hover .mesa-card-info{opacity:1;}
.mesa-card-info .mesa-aluno{font-size:0.85rem; font-family:'Public Sans',sans-serif;}
.mesa-card-info .mesa-nome-bloco{font-size:0.78rem; color:var(--ink-soft);}
.mesa-card-info .mesa-progresso{font-size:0.78rem; color:var(--ink-faint);}

.mesa-card .card-checklist{display:none; margin-top:8px;}
.mesa-card.expandido .card-checklist{display:flex;}
.mesa-checklist .check-linha{cursor:default; font-size:0.78rem;}
.modal-acoes{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}

/* ---------- FICHA IMPRESSÍVEL DE EXPEDIÇÃO ----------
   Fica escondida na tela normal; só existe pra ser impressa (window.print()), disparada ao
   clicar um dos 4 botões de Expedição no Cadastro Geral. Reproduz em papel A4 o requerimento +
   protocolo de atendimento que a Secretaria já preenche à mão — preto no branco, sem cores do
   app, porque é isso que sai na impressora. */
#ficha-impressao{display:none;}
@media print{
  body > *:not(#ficha-impressao){display:none !important;}
  #ficha-impressao{
    display:block !important; color:#000; background:#fff;
    font-family:'Source Serif 4', Georgia, serif; font-size:12.5pt; line-height:1.5;
    padding:14mm 16mm; max-width:100%;
  }
}
.ficha-titulo{text-align:center; font-weight:700; margin:0 0 4px; font-size:1em;}
.ficha-titulo-grande{font-size:1.3em; letter-spacing:0.02em; margin-bottom:16px;}
.ficha-linha{margin:10px 0;}
.ficha-rotulo{font-weight:700;}
.ficha-preenchido{
  display:inline-block; min-width:120px; border-bottom:1px solid #000;
  padding:0 4px 1px; font-weight:600;
}
.ficha-preenchido-largo{min-width:320px;}
.ficha-checks{display:flex; flex-wrap:wrap; gap:6px 22px; margin:14px 0; font-weight:600;}
.ficha-checks b{font-weight:900;}
.ficha-data{text-align:right; margin:22px 0 6px;}
.ficha-assinaturas{display:flex; justify-content:space-between; gap:40px; margin-top:46px; text-align:center;}
.ficha-assinaturas > div{flex:1;}
.ficha-linha-assinatura{display:block; border-top:1px solid #000; margin-bottom:6px;}
.ficha-legenda{font-size:0.9em;}
.ficha-corte{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin:28px 0; font-size:0.8em; font-style:italic;
  border-top:1px dashed #000; padding-top:4px;
}

/* ---------- MODO SELECIONAR — "retirar todas as informações da atividade com exceção do
   número" (pedido do Cleiton). O card vira só um chip compacto: checkbox + número, colados à
   ESQUERDA (padrão do app inteiro — nunca centralizado). Aplicado por `aplicarModoSelecao()` em
   js/app.js, que reescreve o innerHTML do card na ordem checkbox-depois-número — essas classes
   só cuidam da aparência do resultado. */
.card-modo-selecao{
  /* bug real: `.card` base já tem flex-direction:column (título embaixo do checklist etc.) —
     sem sobrescrever aqui, checkbox e número empilhavam verticais e centralizados em vez de
     lado a lado à esquerda, mesmo com justify-content:flex-start no eixo errado. */
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:8px;
  padding:9px 12px !important; min-height:0 !important; cursor:pointer; text-align:left;
  /* Linha de lista, não card flutuante — "agrupar melhor... alinhado e uniforme" (pedido do
     Cleiton: os cards individuais com sombra+cantos arredondados+espaço entre si pareciam soltos
     demais). O agrupamento visual vem do container em .coluna-corpo:has(...) logo abaixo; aqui só
     um traço fino separando uma linha da próxima. */
  border-radius:0 !important; box-shadow:none !important; border:none !important;
  border-bottom:1px solid var(--border) !important;
  /* .movimentacao-card (base de cards de movimentação) tem margin-bottom:12px próprio — sem
     zerar aqui, as linhas de movimentação ficavam mais espaçadas que as de tarefa (.card, sem
     margem, só o gap do flex) e a lista saía desalinhada/desigual. */
  margin:0 !important;
}
/* Atividade sem pasta (numeroParaSelecao devolve o título nesse caso) precisa caber numa linha
   só — trunca com "…" em vez de esticar o card ou quebrar linha. Preta sempre (--ink), nunca
   cinza/fraca, mesmo truncada — só o card bloqueado (.card-modo-selecao-bloqueado) escurece via
   opacity no card inteiro. */
.card-modo-selecao-numero{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.85rem; text-align:left;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;
}
.card-modo-selecao input[type="checkbox"]{width:17px; height:17px; accent-color:var(--accent); flex-shrink:0; margin:0;}
/* Sem checkbox = não elegível ou grupo travado por outra seleção — escurece pra ficar óbvio de
   longe o que dá e o que não dá pra marcar ("o que não pode selecionar ficasse escuro"). */
.card-modo-selecao-bloqueado{opacity:0.4; cursor:not-allowed;}
.card-modo-selecao-bloqueado .card-modo-selecao-numero{padding-left:25px;} /* alinha com o texto dos elegíveis, que têm checkbox de 17px + gap de 8px antes */
/* Todas as linhas viram UM bloco só (borda + cantos arredondados no container, não em cada
   linha) — sem gap entre elas, só o traço fino de .card-modo-selecao acima separando. A última
   linha não precisa de traço embaixo (já é a borda do bloco). */
.coluna-corpo:has(.card-modo-selecao){
  gap:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.coluna-corpo .card-modo-selecao:last-child{border-bottom:none !important;}

/* "Selecionar tudo"/"Desmarcar tudo" de uma coluna/mesa — botão de verdade, não linkzinho de
   texto cru (pedido: "mais estético, como um botão em cima"). Cai pra linha de baixo do cabeçalho
   via .coluna-head .sel-tudo-coluna acima, sentando por cima da pilha de cards sem cortar nada. */
.sel-tudo-coluna{
  padding:5px 12px !important; border-radius:20px; font-size:0.78rem; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent; white-space:nowrap;
}
.sel-tudo-coluna:hover{background:var(--accent); color:#fff; text-decoration:none;}

/* Barra de seleção em lote — sem select+botão "Mover selecionadas" (não funcionava de forma
   confiável e o Cleiton pediu drag-and-drop puro: "quero pegar e arrastar os selecionados").
   Só resta a contagem, uma dica de como mover, "Juntar num bloco" (só em Tarefas) e "Limpar". */
.lote-dica{font-size:0.82rem; color:var(--accent-ink); font-style:italic;}