/* ============================================================
   ERPoint — PADRÃO VISUAL (biblioteca de componentes)
   Reaproveita os tokens de erpoint.css. Patterns extraídos das
   telas Hoje / Projetos / Estoque / Devoluções.
   ============================================================ */

.ds {
  --ds-gap: 18px;
  max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px;
}
.ds-h { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.ds-section { margin-top: 56px; }
.ds-section > h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.ds-section > p { color: var(--text-2); font-size: 14px; margin: 0 0 22px; max-width: 70ch; }
.ds-grid { display: grid; gap: var(--ds-gap); }
.ds-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ds-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }

/* ---- eyebrow / rótulo de seção (ex.: "EM FOCO AGORA", "NÃO ESQUECER") ---- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 7px; }

/* ============================================================
   CABEÇALHO DE PÁGINA
   ============================================================ */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-head-left { display: flex; align-items: center; gap: 14px; }
.page-emoji {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-2); font-size: 22px;
}
.page-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.page-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.page-head-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }

/* ============================================================
   PAINEL — container recorrente (cabeçalho ícone+título+meta)
   ============================================================ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-soft);
}
.panel-head .ico, .panel-head .ico-sm { color: var(--text-2); }
.panel-title { font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; }
.panel-title.upper { text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; }
.panel-meta { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.panel-body { padding: 14px 16px; }

/* variantes de status (faixa superior + cabeçalho tonal) */
.panel--accent  { border-top: 3px solid var(--accent); }
.panel--danger  { border-top: 3px solid var(--danger); }
.panel--warn    { border-top: 3px solid var(--warn); }
.panel--success { border-top: 3px solid var(--success); }
.panel--info    { border-top: 3px solid var(--accent); }
.panel--danger  .panel-head { background: var(--danger-soft);  color: var(--danger); }
.panel--warn    .panel-head { background: rgba(245,166,35,0.13); color: var(--warn); }
.panel--success .panel-head { background: var(--success-soft); color: var(--success); }
.panel--info    .panel-head { background: var(--accent-soft); color: var(--accent); }
.panel--danger  .panel-head .ico-sm,
.panel--warn    .panel-head .ico-sm,
.panel--success .panel-head .ico-sm,
.panel--info    .panel-head .ico-sm { color: currentColor; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-family: inherit; cursor: pointer; transition: var(--tr); white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.btn .ico-sm { color: currentColor; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px var(--accent-ring); }
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: none; border-color: transparent; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-success { color: var(--success); border-color: var(--success-soft); }
.btn-success:hover { background: var(--success-soft); border-color: var(--success); }
.btn-danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-work { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-work:hover { background: var(--accent-600); color: #fff; }
.btn-warn { color: var(--warn); border-color: rgba(245,166,35,0.25); }
.btn-warn:hover { background: rgba(245,166,35,0.13); border-color: var(--warn); }

/* ============================================================
   TAGS & BADGES
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
  background: var(--chip); color: var(--text-2); white-space: nowrap;
}
.tag .ico-sm { width: 12px; height: 12px; }
.tag--risk    { background: rgba(245,166,35,0.14); color: var(--warn); }
.tag--danger  { background: var(--danger-soft); color: var(--danger); }
.tag--success { background: var(--success-soft); color: var(--success); }
.tag--info    { background: var(--accent-soft); color: var(--accent); }
.tag--ghost   { background: none; border: 1px solid var(--border); color: var(--text-3); }

/* badge de conta (cores por conta — ex.: tuttifriti / fritinox / ajf) */
.acct {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border-radius: var(--r-xs); font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; color: #fff; text-transform: lowercase;
}
.acct--a { background: #7c5cff; }   /* tuttifriti */
.acct--b { background: #2f6fe0; }   /* fritinox */
.acct--c { background: #2bb673; }   /* ajf */

/* estrela de foco */
.star { color: var(--warn); }

/* número tabular */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   SEGMENTOS / FILTROS (pills com contagem)
   ============================================================ */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: var(--tr); font-family: inherit; text-decoration: none;
}
.seg-item:hover { border-color: var(--border-strong); color: var(--text); }
.seg-item.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg-item .n { font-variant-numeric: tabular-nums; background: var(--chip); color: var(--text-3); padding: 0 7px; border-radius: var(--r-pill); font-size: 11.5px; }
.seg-item.active .n { background: rgba(255,255,255,0.22); color: #fff; }

/* sub-navegação por abas (ex.: Estoque) */
.subtabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 24px; }
.subtab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-3);
  border: none; background: none; cursor: pointer; font-family: inherit; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--tr);
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   STAT TILES (números grandes — reconciliação)
   ============================================================ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; text-align: center;
}
.stat-num { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-top: 7px; }
.stat--accent .stat-num { color: var(--accent); }
.stat--warn .stat-num { color: var(--warn); }
.stat--success .stat-num { color: var(--success); }
.stat--muted .stat-num { color: var(--text-3); }

/* ============================================================
   PROGRESSO
   ============================================================ */
.progress { display: flex; align-items: center; gap: 10px; }
.progress-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.progress-fill.is-warn { background: var(--warn); }
.progress-fill.is-success { background: var(--success); }
.progress-pct { font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ============================================================
   SCAN / BIPAGEM (input grande)
   ============================================================ */
.scan-wrap { display: flex; gap: 10px; }
.scan {
  flex: 1; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 18px; border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.scan input { flex: 1; border: none; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 16px; }
.scan input::placeholder { color: var(--text-3); }
.scan-btn { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--accent); border: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: var(--tr); flex: none; }
.scan-btn:hover { background: var(--accent-600); }
.scan-hint { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-3); font-size: 13px; }

/* ============================================================
   LINHAS DE LISTA (tarefa / devolução / pedido)
   ============================================================ */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 16px; transition: var(--tr);
}
.row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.row--accent { border-left: 3px solid var(--accent); }
.row--danger { border-left: 3px solid var(--danger); }
.row--warn { border-left: 3px solid var(--warn); }
.row-main { min-width: 200px; flex: 1; }
.row-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.row-meta .sep { opacity: 0.4; }
.row-actions { display: flex; align-items: center; gap: 7px; flex: none; }


/* ============================================================
   CARD DE PROJETO (Projetos / Candidatos ao Foco)
   ============================================================ */
.proj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.proj-top { display: flex; align-items: center; gap: 8px; }
.proj-crumb { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.proj-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.proj-sub { font-size: 12px; color: var(--text-3); }
.proj-next {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600;
}
.proj-check { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 13px; color: var(--text-2); }
.proj-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.proj-actions { display: flex; gap: 7px; margin-top: 2px; flex-wrap: wrap; }

/* checkbox de hábito */
.habit { display: flex; align-items: center; gap: 11px; padding: 9px 4px; font-size: 13.5px; }
.habit input { accent-color: var(--success); width: 16px; height: 16px; }
.habit .time { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ============================================================
   ESTADO VAZIO (ex.: "Nenhuma tarefa em foco no momento")
   ============================================================ */
.empty {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  padding: 30px 20px; text-align: center; color: var(--text-3);
}
.empty .ico { width: 28px; height: 28px; color: var(--text-3); margin: 0 auto 10px; display: block; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--text-2); }
.empty-sub { font-size: 12.5px; margin-top: 4px; }

/* ============================================================
   CAPTURA com comandos de barra ("/agora /hoje /data")
   ============================================================ */
.capture {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); transition: var(--tr);
}
.capture:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.capture .ico-sm { color: var(--text-3); }
.capture input { flex: 1; border: none; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 14.5px; }
.capture input::placeholder { color: var(--text-3); }
.cmd-hints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cmd { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 7px; }
.cmd b { color: var(--accent); font-weight: 600; }

/* ============================================================
   FORMULÁRIOS (campos de input, labels, form-groups)
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.form-input, .form-textarea, .form-select {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px;
  color: var(--text); font-family: inherit; transition: var(--tr); width: 100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ============================================================
   DROPDOWN (menu de contexto — área, projeto, etc.)
   ============================================================ */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  min-width: 200px; background: var(--elev); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  display: none; flex-direction: column; overflow: hidden;
}
.dropdown-menu.aberto { display: flex; }
.dropdown-section { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 8px 12px 4px; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--text-2); cursor: pointer;
  background: none; border: none; font-family: inherit; text-align: left; width: 100%;
  transition: var(--tr);
}
.dropdown-item:hover { background: var(--surface-hover); color: var(--text); }
.dropdown-item.atual { color: var(--accent); font-weight: 600; }
.dropdown-divider { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0; }

/* ============================================================
   LAYOUT GRID AUXILIAR
   ============================================================ */
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.cluster { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   MENSAGENS FLASH (toasts)
   ============================================================ */
.messages-container { position: fixed; top: 18px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.message {
  padding: 12px 18px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600;
  background: var(--elev); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-md); max-width: 380px;
  animation: slideIn 0.22s var(--tr), fadeOut 0.3s 4s forwards;
  pointer-events: none;
}
.message-success { border-left: 3px solid var(--success); }
.message-error   { border-left: 3px solid var(--danger); }
.message-warning { border-left: 3px solid var(--warn); }
.message-info    { border-left: 3px solid var(--accent); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; pointer-events: none; } }

/* utilitários de acessibilidade */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   RESPONSIVO — mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .page-head { gap: 10px; margin-bottom: 18px; }
  .page-head-left { gap: 10px; }
  .page-emoji { width: 36px; height: 36px; font-size: 17px; }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 12px; }
  .page-head-actions { gap: 6px; }
  .page-head-actions .btn { padding: 6px 10px; font-size: 12px; }

  .panel { border-radius: 10px; }
  .panel-head { padding: 10px 12px; }

  .stat { min-width: 70px; padding: 10px 12px; }
  .stat-n { font-size: 22px; }

  .scan-wrap { gap: 6px; }
  .scan { padding: 0 10px; }

  .seg { flex-wrap: wrap; gap: 4px; }
  .seg-item { padding: 5px 10px; font-size: 12px; }

  .row { gap: 8px; padding: 10px 12px; }
  .row-title { font-size: 13px; }

  .btn { padding: 7px 12px; font-size: 13px; }
  .btn-sm { padding: 4px 8px; font-size: 11px; }
}

/* ============================================================
   CARD DE PROJETO (.pa-*) — o board de Projetos ativos e o do Backlog
   ============================================================
   ⚠️ MORAVA EM DOIS <style> COPIADOS, um em cada template (2026-08-10). Enquanto
   cada página tinha o seu card, dava pra viver com isso. Desde que o card virou o
   partial `_card_projeto.html`, não dá: o desenho é UM e a folha era DUAS, então a
   próxima correção chegaria numa página e não na outra — e é sempre na outra que se
   descobre semanas depois. Uma representação por conceito (R3), inclusive em CSS.

   `--fcor` é a cor da área e vem inline na coluna (`style="--fcor:..."`). */
.pa-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px;align-items:start}
/* BOARD DE DEGRAU (2026-08-12) — 2 ou 3 colunas, não 4+. Com `1fr` elas esticariam pra
   metade da tela cada e o card ficaria com 700px de largura pra mostrar um nome e duas
   tarefas. Aqui a coluna tem teto (340px) e o board encosta à esquerda: sobra branco à
   direita, que é melhor que card esticado — a largura do card é a mesma nas duas telas. */
.pa-board.degraus{grid-template-columns:repeat(auto-fill,minmax(260px,340px));justify-content:start}
.pa-col{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px}
.pa-col-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pa-dot{width:9px;height:9px;border-radius:50%;background:var(--fcor);flex-shrink:0}
.pa-col-title{font-size:13px;font-weight:600}
.pa-col-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--fcor);border:1px solid var(--fcor);padding:0 8px;border-radius:999px;line-height:18px}

.pa-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px;transition:border-color .12s}
.pa-card:last-child{margin-bottom:0}
.pa-card:hover{border-color:var(--fcor)}
.pa-card-top{display:flex;align-items:baseline;gap:6px}
/* O NOME é o link — alvo único de navegação. Antes o card inteiro navegava por JS e
   ainda havia um botão "abrir" pro mesmo destino: três alvos, dois destinos, e um POST
   que muda o sistema dividindo a mesma superfície. */
.pa-card-name{font-size:14px;font-weight:600;color:var(--text-1);text-decoration:none}
.pa-card-name:hover{color:var(--fcor);text-decoration:underline}
.pa-meta{margin:5px 0 7px;font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pa-abertas{font-size:17px;font-weight:700;color:var(--fcor)}
.pa-tasks{list-style:none;margin:0 0 8px;padding:0;font-size:12px;color:var(--text-2);line-height:1.55}
.pa-tasks li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-mais,.pa-vazio{color:var(--text-3)}
.pa-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pa-actions form{display:inline}
.pa-actions .btn{font-size:11px;padding:3px 7px}

/* SEGMENTOS — execução × fila (catálogo) e as sub-etapas (reservatório). */
.pa-seg{font-size:10px;letter-spacing:.5px;color:var(--text-3);margin:2px 0 7px;display:flex;align-items:center;gap:6px}
.pa-seg:not(:first-child){margin-top:14px;padding-top:10px;border-top:1px solid var(--border-soft)}
.pa-seg b{color:var(--text-2);font-weight:600}

/* MARCA — o que já foi escolhido. A queixa era que escolher não deixava marca. */
.pa-card.exec{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pa-chip{font-size:10px;padding:1px 8px;border-radius:999px;white-space:nowrap}
.pa-chip-exec{background:var(--accent);color:#fff}
.pa-chip-semana{background:var(--accent-soft);color:var(--accent)}
.pa-chip-sem{background:var(--bg-warning);color:var(--text-warning)}

/* ETIQUETA DE ÁREA (2026-08-12) — a área saiu da coluna e desceu pro card, junto com
   a cor. `--fcor` agora vem inline no PRÓPRIO card (`style="--fcor:..."`), e não mais
   da coluna: a coluna virou o degrau do funil, que não tem cor de área pra emprestar. */
.pa-tag{font-size:10px;padding:1px 8px;border-radius:999px;white-space:nowrap;color:var(--fcor);border:1px solid var(--fcor);background:transparent}

/* DESCRIÇÃO DO PROJETO (.proj-desc) — vivia só dentro do <textarea> do form de edição.
   `max-height` + scroll porque descrição de projeto aqui chega a 5 mil caracteres e
   empurraria o progresso e as tarefas pra fora da primeira tela. */
.proj-desc{margin:-8px 0 20px;padding:12px 14px;background:var(--surface-2);
  border-left:3px solid var(--border-strong);border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:13.5px;line-height:1.55;color:var(--text-2);
  max-height:300px;overflow:auto;overflow-wrap:anywhere}

/* OBSERVAÇÕES DA TAREFA (.tk-obs) — o partial `tarefas/_obs_tarefa.html`.
   O campo era escrito por três caminhos e lido por nenhuma tela até 2026-08-12.
   Fechado por padrão: o selo diz que EXISTE, abrir é escolha de quem lê. */
.tk-obs{margin-top:5px;font-size:12px}
.tk-obs>summary{cursor:pointer;color:var(--text-3);list-style:none;display:inline-flex;
  align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--border-soft);
  border-radius:999px;font-size:11px;user-select:none}
.tk-obs>summary::-webkit-details-marker{display:none}
.tk-obs>summary:hover{color:var(--text-1);border-color:var(--border-strong)}
.tk-obs[open]>summary{color:var(--text-2);margin-bottom:5px}
.tk-obs-txt{white-space:normal;color:var(--text-2);line-height:1.5;font-size:12.5px;
  border-left:2px solid var(--border-strong);padding:2px 0 2px 10px;
  max-height:340px;overflow:auto;overflow-wrap:anywhere}

/* FILTRO POR ÁREA (.pa-filtro) — a outra metade da mesma mudança. Segmentar por área
   dentro de cada degrau seria 12 grupos pra 17 projetos; aqui a área escolhe o recorte
   sem gastar coluna. Área com zero continua na barra, com o zero escrito (R23). */
.pa-filtro{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.pa-filtro-rot{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3)}
.pa-fchip{font-size:12px;line-height:18px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);text-decoration:none;transition:border-color .12s,color .12s}
.pa-fchip:hover{border-color:var(--fcor);color:var(--fcor)}
.pa-fchip.on{border-color:var(--fcor);color:var(--fcor);background:var(--surface-2);font-weight:600}
.pa-fchip .n{font-size:11px;opacity:.65;margin-left:5px;font-variant-numeric:tabular-nums}
.pa-fchip.vazia{opacity:.5}
.pa-filtro-nota{font-size:11px;color:var(--text-3);margin-left:4px}
.pa-filtro-nota a{color:var(--accent)}

/* CONTROLE DE FUNIL (.fn-*) — move o projeto por fase/sub-etapa/desfecho.
   Aparece no detalhe do projeto e em cada card das listas. Compacto de propósito:
   o uso é reclassificar dezenas de projetos em série, não admirar o formulário. */
.fn-form{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fn-form select{font-size:11px;padding:3px 4px;max-width:120px;min-width:0}
.fn-form .btn{font-size:11px;padding:3px 9px}
.pa-funil{border-top:1px solid var(--border-soft);margin-top:8px;padding-top:2px}

/* ============================================================
   IDENTIFICADOR DE REGISTRO (#123) — o componente
   ------------------------------------------------------------
   UMA peca para todas as telas. Antes eram TRES classes para a
   mesma coisa: .row-id (detalhe do projeto), .pa-id (card de
   projeto) e .bs-id (busca). A .bs-id nao estava em arquivo CSS
   nenhum — estava num <style> DENTRO do proprio buscar.html, que
   e uma QUARTA camada de CSS neste projeto, alem dos 5 arquivos.
   (17 templates tem <style> proprio. Isso e o que torna "qual CSS
   manda" mais dificil do que a lista de arquivos deixa parecer.)
   As tres foram desligadas na mesma leva em que esta nasceu (R3).

   CLICAR COPIA, e o motivo e pratico: o ID e o ENDERECO do
   registro — existe para ser passado adiante (conversa, mensagem,
   outra tarefa). Ler e digitar "#822" a mao erra digito; clicar
   nao erra. Varios deles vivem DENTRO de um <a>, entao o clique
   precisa parar ali e nao navegar junto (ver erpoint.js).

   ⚠️ Feedback so aparece se a copia der certo de verdade. Se
   falhar, o estado e OUTRO (.falhou) — dizer "copiado" sem ter
   copiado e a tela mentindo, e e o defeito que a casa persegue.
   ============================================================ */
.id-tag {
  position: relative;
  display: inline-block;
  flex: none;                        /* dentro de linha flex, nao encolher (vinha da .bs-id) */
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums; /* numeros alinham entre linhas (vinha da .bs-id) */
  line-height: 1.45;
  color: var(--text-3);
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: color var(--tr), background var(--tr);
}
.id-tag:hover { color: var(--text-2); background: var(--surface-2); }
.id-tag:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

/* empurra para a direita — era o `margin-left:auto` que a .pa-id carregava */
.id-tag.is-right { margin-left: auto; }

.id-tag.copiado { color: var(--success); background: var(--success-soft); }
.id-tag.falhou  { color: var(--danger);  background: var(--danger-soft); }

.id-tag.copiado::after,
.id-tag.falhou::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.id-tag.copiado::after { content: "copiado"; color: var(--success); }
.id-tag.falhou::after  { content: "nao consegui copiar"; color: var(--danger); }

/* ============================================================
   TELAS DE ENTRADA (entrar · sair · cadastrar senha)
   ------------------------------------------------------------
   Nasceram em 25/08 das decisões do Renan sobre os 3 desenhos.
   Estas telas são o LABORATÓRIO do projeto #90 (identidade
   visual): é aqui que as decisões de marca e cor são testadas
   antes de se espalharem pelo sistema. Por isso duas coisas:

   1. O `base_auth.html` NÃO carrega mais o CSS legado. Estas são
      as primeiras telas do ERPoint livres dos 1.863 seletores e
      dos 38 `!important` do `style.css`.
   2. O dourado da marca é a cor de ação AQUI, com escopo em
      `.aut`. ⚠️ NÃO é global — repintar o sistema inteiro é
      decisão do #90, não linha de CSS colada numa tela (a regra
      que o próprio Renan pediu para registrar em 25/08).
   ============================================================ */

.aut {
  /* --- a marca manda na cor de ação, com escopo --- */
  --marca-navy:        #3A4660;
  --marca-navy-escuro: #2C3247;
  --marca-ouro:        #F4BE0C;
  --marca-ceu:         #86B8E6;

  /* ⚠️ letra ESCURA sobre o dourado, nunca branca: medido em
     25/08 — branco sobre #F4BE0C dá 1,72 (ilegível); navy escuro
     dá 7,39. É por isso que `--sobre-acao` existe como token e
     não como um `#fff` digitado no meio da regra. */
  --acao:        var(--marca-ouro);
  --acao-forte:  #D9A806;
  --sobre-acao:  var(--marca-navy-escuro);
  --acao-halo:   rgba(244, 190, 12, 0.30);

  --alt-campo:   56px;   /* alvo de toque no desktop */
  --alt-campo-m: 60px;   /* no celular — a expedição bipa com a outra mão ocupada */
}

/* No tema claro o dourado sobre fundo claro perde contraste, e o
   texto de apoio precisa do navy. O botão continua dourado com
   letra escura — esse par funciona nos dois temas (7,39). */
[data-theme="light"] .aut { --acao-halo: rgba(58, 70, 96, 0.22); }

/* ---------- estrutura ---------- */
.aut {
  min-height: 100vh;
  min-height: 100dvh;          /* no celular, desconta a barra do navegador */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 32px 20px 44px;
  background: var(--bg-grad);
  font-family: var(--font);
  color: var(--text);
}

/* ---------- a marca tem lugar próprio (decisão dele: "ganha lugar sim") ---------- */
.aut-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aut-marca svg { height: 46px; width: auto; display: block; }
.aut-marca-linha {
  font-size: 13px; letter-spacing: 0.02em; color: var(--text-2);
  margin: 0; text-align: center;
}

/* ---------- o cartão ---------- */
.aut-cartao {
  width: 100%; max-width: 452px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 30px 34px;
}
.aut-cartao h1 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0; color: var(--text);
}
.aut-sub { margin: 6px 0 22px; font-size: 15px; color: var(--text-2); }

/* ---------- aviso (erro / sucesso) ---------- */
.aut-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.45;
  border-left: 3px solid var(--danger);
  background: var(--danger-soft); color: var(--text);
}
.aut-aviso.ok { border-left-color: var(--success); background: var(--success-soft); }
.aut-aviso b { font-weight: 600; }

/* ---------- campos ---------- */
.aut-campo { margin: 0 0 18px; }
.aut-rotulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 0 7px;
}
.aut-rotulo label { font-size: 14px; font-weight: 600; color: var(--text); }
.aut-dica { font-size: 12.5px; color: var(--text-2); }

.aut-campo input[type="text"],
.aut-campo input[type="tel"],
.aut-campo input[type="email"],
.aut-campo input[type="password"] {
  width: 100%; height: var(--alt-campo);
  padding: 0 14px;
  font-family: var(--font); font-size: 16px;   /* 16px evita o zoom automático do iOS */
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.aut-campo input::placeholder { color: var(--text-3); }
.aut-campo input:focus {
  outline: none;
  border-color: var(--acao);
  box-shadow: 0 0 0 3px var(--acao-halo);
}
.aut-campo.erro input { border-color: var(--danger); }
.aut-campo-erro { margin: 7px 0 0; font-size: 13.5px; color: var(--danger); }

/* documento com números: monoespaçada ajuda a conferir dígito */
.aut-campo input.num { font-family: var(--mono); letter-spacing: 0.02em; }

/* ---------- senha com o botão "mostrar" ---------- */
.aut-senha { position: relative; }
.aut-senha input { padding-right: 92px; }
.aut-mostrar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: var(--r-xs);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer;
}
.aut-mostrar:hover { color: var(--text); background: var(--surface-hover); }
.aut-mostrar:focus-visible { outline: 2px solid var(--acao); outline-offset: 1px; }

/* ---------- o botão de escolher CPF ou CNPJ ---------- */
/* Decisão dele, 25/08: "vem pré-definido CPF, com um toggle pra mudar caso
   deseje cadastrar um CNPJ — aí o campo segue o padrão da escolha do toggle." */
.aut-tipo {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.aut-tipo button {
  min-height: 34px; padding: 0 16px;
  background: none; border: 0; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.aut-tipo button[aria-pressed="true"] { background: var(--acao); color: var(--sobre-acao); }
.aut-tipo button:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

/* ---------- os requisitos da senha, ANTES de a pessoa errar ---------- */
/* Decisão dele, 25/08: "ao invés de deixar só 'as duas têm que ser iguais',
   colocar os requisitos que uma senha deve ter para dar certo." */
.aut-requisitos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.aut-requisitos li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.5px; color: var(--text-2);
}
.aut-requisitos li::before {
  content: "○"; flex: none; width: 14px; color: var(--text-3);
  font-size: 12px; line-height: 1.5;
}
.aut-requisitos li.ok { color: var(--success); }
.aut-requisitos li.ok::before { content: "●"; color: var(--success); }

/* ---------- o botão principal ---------- */
.aut-botao {
  width: 100%; height: var(--alt-campo);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acao); color: var(--sobre-acao);
  border: 0; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; cursor: pointer;
  transition: background var(--tr), transform var(--tr);
}
.aut-botao:hover { background: var(--acao-forte); }
.aut-botao:active { transform: translateY(1px); }
.aut-botao:focus-visible { outline: 3px solid var(--acao-halo); outline-offset: 2px; }
.aut-botao[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- o pé do cartão ---------- */
.aut-pe {
  margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--border-soft);
  text-align: center; font-size: 14px; color: var(--text-2);
}
.aut-pe a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--acao); padding-bottom: 1px; }
.aut-pe a:hover { color: var(--acao); }

/* ---------- contador de passos ---------- */
/* Decisão dele, 25/08: "quero manter sim, e pode acrescentar o passo 3 pro
   sistema não mentir" — o primeiro acesso tem 3 passos, não 2. */
.aut-passos {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; font-family: var(--mono); font-size: 12px; color: var(--text-3);
}
.aut-passos .barra { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.aut-passos .barra i { display: block; height: 100%; background: var(--acao); }

/* ---------- celular: alvo grande, letra grande (o desenho C) ---------- */
@media (max-width: 560px) {
  .aut { justify-content: flex-start; padding-top: 40px; gap: 22px; }
  .aut-marca svg { height: 38px; }
  .aut-cartao {
    padding: 24px 20px 28px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
  }
  .aut-cartao h1 { font-size: 24px; }
  .aut { --alt-campo: var(--alt-campo-m); }
  .aut-campo input[type="text"],
  .aut-campo input[type="tel"],
  .aut-campo input[type="email"],
  .aut-campo input[type="password"] { font-size: 17px; }
  .aut-botao { font-size: 17px; }
  .aut-tipo button { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
  .aut-senha input { padding-right: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .aut-botao, .aut-campo input, .aut-tipo button { transition: none; }
  .aut-botao:active { transform: none; }
}