/* ============================================================================
   Arena 44 Despachante — sala de controle

   O operador olha esta tela o dia inteiro procurando o que mudou. Por isso:
   superfície calma, densidade alta, e o laranja da marca reservado para
   SINAL — estado ativo, ação primária, dado que exige decisão. Laranja como
   preenchimento de bloco largo gasta o único acento vivo que temos e some
   junto com o resto.

   Hierarquia vem de peso e superfície. Cor só quando significa alguma coisa.
   ========================================================================== */

/* IBM Plex Sans e JetBrains Mono, servidos localmente: o painel roda em
   localhost e nao pode depender da rede para desenhar a propria interface.

   Plex e uma face de interface tecnica — desenhada para painel de operacao,
   com numerais largos e distintos (o 1 tem base, o 0 nao se confunde com O).
   Num sistema onde CPF, protocolo e numero SIGMA sao lidos o dia inteiro, isso
   e funcao, nao gosto. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-500.woff2') format('woff2');
  font-weight: 500 550;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-600.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

:root {
  /* -- marca ------------------------------------------------------------ */
  --accent: #ff7d24;
  --accent-hi: #ff9750;
  --accent-lo: #e5620a;
  --accent-ink: #150c04;          /* texto sobre laranja cheio */
  --accent-wash: color-mix(in oklab, var(--accent) 13%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 42%, transparent);

  /* -- superfícies (frias, quatro degraus reais) ------------------------- */
  --bg: #0b0c0f;
  --surface: #131519;
  --surface-2: #191c22;
  --surface-3: #212630;
  --border: #23262e;
  --border-strong: #323844;

  /* -- texto ------------------------------------------------------------- */
  --text: #e9ebef;
  --text-muted: #9aa1ad;          /* 7.0:1 sobre --surface */
  --text-faint: #7c8494;          /* 4.6:1 sobre --surface */

  /* -- estados ----------------------------------------------------------- */
  --success: #3fcf7a;
  --success-bg: #0f2419;
  --warn: #f5a623;
  --warn-bg: #2a1f0d;
  --danger: #ff6058;
  --danger-bg: #2d1414;
  --info: #5aa2ff;
  --info-bg: #111d2e;

  /* -- forma ------------------------------------------------------------- */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 5px;
  /* Sombra com deslocamento E desfoque: um halo sem offset é decoração, não
     profundidade — a luz vem de cima. */
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px -2px rgb(0 0 0 / 30%);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 70%), 0 2px 10px -2px rgb(0 0 0 / 45%);

  /* -- métrica ----------------------------------------------------------- */
  --sidebar-w: 230px;
  --topbar-h: 52px;
  --execbar-h: 0px;               /* barra de execução; 36px quando acesa */
  --content-max: 1400px;
  --ease: cubic-bezier(.2, .8, .3, 1);

  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* Variante clara: mesmo esqueleto, papel em vez de vidro. */
:root[data-theme='light'] {
  --accent: #d95d00;
  --accent-hi: #f07011;
  --accent-lo: #b84c00;
  --accent-ink: #fffaf5;
  --bg: #f4f4f6;
  --surface: #ffffff;
  --surface-2: #f6f6f8;
  --surface-3: #eceef1;
  --border: #e2e3e8;
  --border-strong: #cbcdd5;
  --text: #14161a;
  --text-muted: #5b6270;
  --text-faint: #767d8b;
  --success: #12833f;
  --success-bg: #e7f6ec;
  --warn: #9a5b06;
  --warn-bg: #fdf2e0;
  --danger: #c62828;
  --danger-bg: #fdeceb;
  --info: #1f5fd0;
  --info-bg: #e9f0fd;
  --shadow: 0 1px 2px rgb(20 22 26 / 7%), 0 2px 6px -2px rgb(20 22 26 / 6%);
  --shadow-lg: 0 16px 40px -12px rgb(20 22 26 / 18%), 0 2px 10px -2px rgb(20 22 26 / 10%);
}

* { box-sizing: border-box; }

/* Regras de classe (.login { display: grid }) vencem o [hidden] do UA
   stylesheet por especificidade — sem isto o card de login fica por cima
   do app depois do login. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 20px; }
h2 { font-size: 14px; }
h3 { font-size: 13.5px; }
a { color: var(--accent); }
p { text-wrap: pretty; }

/* ============================== LOGIN ============================== */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(760px 420px at 50% -8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
.login-card {
  width: min(372px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 14px;
}
.login-brand { font-size: 21px; font-weight: 620; letter-spacing: -0.025em; }
.login-brand span { color: var(--accent); }
.login-sub { margin: -10px 0 6px; color: var(--text-muted); font-size: 13px; }
.login-error { margin: 0; color: var(--danger); font-size: 12.5px; }

/* ============================== SHELL ============================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  /* Solida: com vidro, o conteudo rolando por tras continuava legivel e
     disputava a atencao com a marca e o estado da extensao. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.brand { font-size: 15px; font-weight: 620; letter-spacing: -0.02em; }
.brand span { color: var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* O menu recolhe em qualquer largura: na mesa de processos os 230px que ele
   ocupa são a diferença entre ler a tabela inteira e arrastá-la para o lado. */
.topbar-toggle { display: grid; }

/* Estado da extensão: informação viva, não botão — ponto + rótulo, sem borda
   que a faça competir com os controles ao lado. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.status-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 20%, transparent);
}
.status-chip.off { color: var(--danger); }
.status-chip.off .dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

.avatar {
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-hi), var(--accent-lo));
  color: var(--accent-ink);
  font: inherit; font-weight: 650; font-size: 11.5px;
  letter-spacing: .02em;
  cursor: pointer;
}

.shell { display: flex; align-items: flex-start; }

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--execbar-h));
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: calc(100dvh - var(--topbar-h) - var(--execbar-h));
  overflow-y: auto;
  padding: 12px 10px 24px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* Recolhida no desktop: sai do fluxo de vez. `width: 0` deixaria a borda e o
   padding para trás, e a tabela ganharia 218 dos 230px — o suficiente para
   continuar faltando espaço. */
.nav-oculto .sidebar { display: none; }

/* Rótulo de grupo do menu: separa operação diária de cadastro e de sistema,
   para o olho não varrer sete itens iguais toda vez. */
.nav-group {
  padding: 14px 10px 5px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-group:first-child { padding-top: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 1px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
/* Ativo por peso, cor e superfície — não por um bloco laranja cheio. Um item
   de menu selecionado não é uma chamada para ação. */
.nav-item.active {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
}
.nav-item.active svg { color: var(--accent); opacity: 1; }
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 72px;
}
/* Largura máxima: a 1600px uma tabela de seis colunas vira uma linha
   telegráfica que o olho não consegue seguir da esquerda para a direita. */
.main > * { max-width: var(--content-max); }

/* ============================== BLOCOS ============================== */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h1 { font-size: 20px; line-height: 1.25; }
.page-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.page-head .spacer { margin-left: auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
/* Dentro de um grid o espaçamento vem do gap; a regra de irmão acima
   empurraria a segunda coluna para baixo. */
.grid .card + .card { margin-top: 0; }
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 13.5px; font-weight: 600; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 16px; }
.card-sub { color: var(--text-muted); font-size: 12.5px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* -- métricas -------------------------------------------------------------
   Contagem por situação é o conteúdo de um painel de despachante, não
   ornamento: o número manda, o rótulo explica, e o ícone some. Ícone colorido
   em caixa dava oito acentos disputando a mesma tela. */
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.stat.clickable { cursor: pointer; }
.stat.clickable:hover { background: var(--surface-2); border-color: var(--border-strong); }
.stat.selected { border-color: var(--accent-line); background: var(--accent-wash); }
.stat-ico { display: none; }
.stat-label {
  order: -1;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
}
.stat-value {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-note { color: var(--text-faint); font-size: 11px; }

.tone-orange { background: var(--accent-wash); color: var(--accent); }
.tone-success { background: var(--success-bg); color: var(--success); }
.tone-warn { background: var(--warn-bg); color: var(--warn); }
.tone-danger { background: var(--danger-bg); color: var(--danger); }
.tone-info { background: var(--info-bg); color: var(--info); }
.tone-muted { background: var(--surface-3); color: var(--text-muted); }

/* ============================== CONTROLES ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease), opacity .16s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 78%, #000);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-success { background: var(--success); border-color: var(--success); color: #06170d; font-weight: 600; }
.btn-success:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #2a0806; font-weight: 600; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { border-color: transparent; background: none; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-block { width: 100%; }

.field { display: grid; gap: 4px; }
.field > span {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--text-muted);
  letter-spacing: .01em;
}
input, select, textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input[type='checkbox'] { width: auto; accent-color: var(--accent); }
input[type='file'] { padding: 5px 8px; font-size: 12px; }
input[type='date'] { min-height: 30px; }
textarea { min-height: 80px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.filters .actions { display: flex; gap: 6px; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .spacer { margin-left: auto; }

/* ============================== TABELA ============================== */
/* A mesa reage ao espaço que TEM, não ao tamanho da janela.

   As regras de mesa eram `@media`, e por isso mediam a coisa errada. O caso
   real deste escritório: monitor grande com o painel lateral da extensão aberto
   à direita (~450px) e a barra de navegação à esquerda (230px). A janela diz
   1600px e sobram ~900px para a mesa — que continuava em `table-layout: fixed`
   com nove colunas, dando ~90px por coluna, com o CPF sobrepondo o nome do
   processo. E o inverso também: recolher a barra de navegação devolvia 230px
   que a mesa não usava, porque a janela não tinha mudado de tamanho.

   `container-type: inline-size` faz as regras abaixo medirem esta caixa.

   O preço: ele liga `contain: layout`, e um descendente `position: fixed` passa
   a se posicionar em relação a ESTA caixa, não à janela. Hoje nenhuma mesa tem
   `.combo-painel` dentro (conferido nas nove telas que usam `.table-wrap`), e é
   o único `fixed` que nasce dentro de conteúdo — os toasts e os modais vivem no
   `body`. Se um dia entrar um combo numa célula, ele abre no lugar errado, e a
   saída é mover o painel para o `body` em vez de tirar o container daqui. */
.table-wrap { overflow-x: auto; container-type: inline-size; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 14px; text-align: left; white-space: nowrap; }
th {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: 0; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
td.wrap { white-space: normal; min-width: 200px; }

/* ---- a mesa de processos cabe na tela ------------------------------------
   Nove colunas com `white-space: nowrap` e largura automática só têm um
   desfecho: a soma passa da janela e nasce uma barra de rolagem horizontal.
   Rolar para o lado numa tabela é o pior jeito de ler uma — some o cabeçalho
   de referência, e comparar duas linhas vira exercício de memória.

   `table-layout: fixed` inverte quem manda: a largura é decidida aqui e o
   conteúdo se acomoda. As percentagens somam 100% do que sobra depois das duas
   colunas fixas (caixa e ações), então a tabela nunca passa do container. */
table.mesa { table-layout: fixed; }
table.mesa th, table.mesa td {
  padding: 9px 10px;
  white-space: normal;
  /* Rede de segurança: nome sem espaço, modelo comprido ou URL não empurram a
     coluna — quebram dentro dela. */
  overflow-wrap: anywhere;
  vertical-align: top;
}
table.mesa .col-caixa { width: 34px; padding-right: 0; }
table.mesa th:nth-child(2), table.mesa td:nth-child(2) { width: 19%; }  /* cliente   */
table.mesa th:nth-child(3), table.mesa td:nth-child(3) { width: 19%; }  /* processo  */
table.mesa th:nth-child(4), table.mesa td:nth-child(4) { width: 20%; }  /* arma      */
table.mesa th:nth-child(5), table.mesa td:nth-child(5) { width: 14%; }  /* protocolo */
/* A mais larga da mesa, e agora com dois motivos: "Aguardando Pag. GRU" é a
   etiqueta mais comprida, e é aqui que o boleto passou a morar quando há o que
   pagar — a coluna GRU saiu (ver `gruEmAberto`, public/js/ui.js). */
table.mesa th:nth-child(6), table.mesa td:nth-child(6) { width: 18%; }  /* situação  */
table.mesa th:nth-child(7), table.mesa td:nth-child(7) { width: 10%; }  /* consultado*/
/* Ações: selo de PDF + três botões, todos em linha. Medido, não chutado — com
   menos que isto o conteúdo vaza da célula e ressuscita a rolagem horizontal
   por dois pixels. */
table.mesa th:last-child, table.mesa td:last-child { width: 176px; }

/* Cabeçalho não quebra: "Consultado" em duas linhas desalinha a régua de todas
   as outras colunas. */
table.mesa th { white-space: nowrap; }
/* Data partida ("08/09/202" + "6") não é data. Todo número tabular desta mesa
   vale inteiro ou não vale. */
table.mesa .tnum { white-space: nowrap; }

/* O protocolo são 14 dígitos que só significam alguma coisa inteiros: partido
   ao meio ninguém confere contra o site da PF. É a única célula que não quebra. */
table.mesa code { white-space: nowrap; font-size: 12px; }
/* Os botões de ação ficam lado a lado até o fim: quebrar a coluna de ações
   esticaria a altura da linha inteira por causa de três ícones. (As etiquetas
   já não quebram — `.badge` é nowrap desde sempre; aqui a célula é que quebra
   ENTRE elas.) */
table.mesa td:last-child { white-space: nowrap; }
table.mesa td:last-child .badge { margin-right: 4px; }

/* Tela estreita: "Aguardando Pag. GRU" é mais larga que a coluna e encostava na
   vizinha. Só ESTA etiqueta passa a quebrar — vira uma pílula de duas linhas,
   que é feio bem menos vezes do que texto invadindo a coluna do lado. */
@container (max-width: 1100px) {
  table.mesa td:nth-child(6) .badge { white-space: normal; }
}

/* Abaixo de 900px de CAIXA (não de janela) a largura fixa deixa de ajudar e
   passa a atrapalhar: oito colunas em ~750px dão ~90px cada, e aí o CPF se
   sobrepõe ao nome do processo. Texto ilegível é pior que rolagem, então aqui a
   mesa volta ao comportamento automático e o container rola.

   Isto vale tanto para um celular quanto para o monitor grande com o painel
   lateral da extensão aberto — o segundo caso é o de todo dia, e com `@media`
   ele nunca era alcançado. */
@container (max-width: 900px) {
  table.mesa { table-layout: auto; }
  table.mesa th, table.mesa td { white-space: nowrap; width: auto; }
  table.mesa td.wrap { white-space: normal; min-width: 200px; }
  table.mesa td:nth-child(6) .badge { white-space: nowrap; }
}
.empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  max-width: 62ch;
  margin-inline: auto;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
}
.pager .spacer { margin-left: auto; }

/* SVG sem width/height explicito estica ate o container. Todo icone solto em
   texto/label ganha o tamanho da linha. */
.field > span svg,
.row > svg,
legend svg,
.banner svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* Campo com botao ao lado (senha com "mostrar"): o input ocupa o resto. */
.input-with-action { display: flex; gap: 6px; align-items: center; }
.input-with-action > input { flex: 1; min-width: 0; }

.mono, code { font-family: var(--mono); font-size: 12px; letter-spacing: -.01em; }
.muted { color: var(--text-muted); }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============================== BANNERS ============================== */
/* Faixa lateral colorida saiu: o tom já vem do fundo e da borda inteira, e a
   barra grossa de um lado só é o tique visual mais previsível que existe. */
.banner {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-wash);
}
.banner h3 { font-size: 13px; margin-bottom: 2px; color: var(--accent); }
.banner p { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; max-width: 74ch; }
.banner.warn { border-color: color-mix(in oklab, var(--warn) 38%, transparent); background: var(--warn-bg); }
.banner.warn h3 { color: var(--warn); }
.banner.danger { border-color: color-mix(in oklab, var(--danger) 38%, transparent); background: var(--danger-bg); }
.banner.danger h3 { color: var(--danger); }
.banner.success { border-color: color-mix(in oklab, var(--success) 38%, transparent); background: var(--success-bg); }
.banner.success h3 { color: var(--success); }
/* Constatacao, nao aviso. O banner padrao e laranja; um fato neutro
   ("este processo nao exige documentos") pintado de laranja vira alarme, e
   alarme que nao pede acao ensina a ignorar os que pedem. */
.banner.neutro { border-color: var(--border); background: var(--surface-2); }
.banner.neutro h3 { color: var(--text); }

/* ============================== MODAL ============================== */
dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgb(6 7 10 / 62%); backdrop-filter: blur(2px); }
.modal-head {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 14.5px; }
.modal-head .spacer { margin-left: auto; }
/* 210px de margem reservada eram exagero: num formulario de guia o conteudo
   media 769px e so 679 cabiam, escondendo 90px atras da rolagem numa tela que
   ainda tinha 96px livres. 130px cobrem cabecalho, rodape e respiro. */
.modal-body { padding: 18px 20px; overflow-y: auto; max-height: calc(100dvh - 175px); }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 11px 11px;
}
/* align-items: start — sem isto a celula mais alta da linha (ex.: o bloco do
   2FA com texto de apoio) estica os inputs vizinhos. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.form-grid .full { grid-column: 1 / -1; }
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 12px;
}
legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================== TOASTS ============================== */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  font-size: 12.5px;
  line-height: 1.5;
  animation: toast-in .26s var(--ease) both;
}
/* Ponto de estado em vez de barra lateral: mesma leitura, um traço a menos. */
.toast::before {
  content: '';
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.toast.error::before { background: var(--danger); }
.toast.success::before { background: var(--success); }
.toast.warn::before { background: var(--warn); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ============================== GRAFICOS ============================== */
.chart { width: 100%; height: 150px; display: block; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .bar { fill: var(--accent); }
.chart .bar.alt { fill: var(--info); }
.chart .label { fill: var(--text-faint); font-size: 10px; }
.chart-empty { display: grid; place-items: center; height: 180px; color: var(--text-muted); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.bar-list { display: grid; gap: 10px; }
.bar-row { display: grid; gap: 4px; }
.bar-row .row { justify-content: space-between; font-size: 12.5px; }
.bar-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }

.progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); }

/* ============================================================================
   Superfícies do navegador
   O que não desenhamos também carrega o design: seleção, caret, scrollbar,
   anel de foco e os numerais de tabela vêm com padrão de navegador, que não
   pertence a sistema de design nenhum.
   ========================================================================== */

::selection {
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--text);
}

:root {
  color-scheme: dark;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
  accent-color: var(--accent);
  caret-color: var(--accent);
}
:root[data-theme='light'] { color-scheme: light; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Número em coluna alinha por dígito: CPF, protocolo e data param de dançar. */
.tnum, .data td, .data th, table td, table th, code, .stat-value {
  font-variant-numeric: tabular-nums;
}

a.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .16s var(--ease), text-decoration-color .16s var(--ease);
}
a.link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ============================================================================
   Abas, chips e filtros
   ========================================================================== */

/* Trilho em vez de caixa: a aba ativa se marca pelo sublinhado laranja, e as
   inativas não precisam de moldura para serem clicáveis. */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.tab.is-active .tab-count { background: var(--accent); color: var(--accent-ink); }

.tab-count {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.filtros { display: grid; gap: 10px; margin: 0 0 14px; }
.filtros-busca input { width: min(320px, 100%); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* A segunda fila — os processos do grupo escolhido — é subordinada à primeira,
   e precisa parecer. Sem o recuo e o traço, as duas filas lêem como uma lista
   só de doze pílulas, que é justamente o que se queria desfazer. */
.chips-filhos {
  padding-left: 12px;
  border-left: 2px solid var(--border);
  margin-left: 2px;
}
.chips-filhos .chip { font-size: 11.5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
  font-weight: 550;
}
.chip-count { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chip.is-active .chip-count { color: var(--accent); }
.chip-clear { border-style: dashed; }

/* ============================================================================
   Densidade de tabela e sinais de linha
   ========================================================================== */

.data td { vertical-align: top; }
.data .nota { margin-top: 3px; line-height: 1.45; }

/* ---- mesa separada por tipo de processo -----------------------------------
   Treinamento, competição e aquisição são fluxos diferentes e vinham
   empilhados na mesma lista, distinguíveis só pela segunda coluna de cada
   linha. A faixa dá ao olho onde se apoiar sem esconder nada — quem quiser um
   tipo só continua tendo o chip. */
.data tbody.grupo + tbody.grupo .grupo-head > td { border-top: 1px solid var(--border); }
.data tbody.grupo.is-fechado > tr:not(.grupo-head) { display: none; }

.grupo-head > td {
  padding: 5px 10px 5px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--accent);
}
.grupo.is-fechado .grupo-head > td { box-shadow: inset 3px 0 0 var(--border-strong); }
.grupo-head + tr > td { padding-top: 11px; }

/* A ação fica COLADA no título, não empurrada para a direita: a tabela é mais
   larga que a tela e um `margin-left:auto` jogava o botão para fora da área
   visível — só aparecia depois de rolar a lista na horizontal. */
.grupo-faixa { display: flex; align-items: center; gap: 4px; }
.grupo-faixa .btn { flex: none; }
/* A caixa da faixa fica na mesma coluna das caixas das linhas: a faixa é um td
   com colspan e não herda o recuo da coluna estreita. */
.grupo-faixa > input[type='checkbox'] { flex: none; margin: 0 0 0 14px; }

.grupo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 6px 4px 11px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.grupo-toggle svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--text-faint);
  transform: rotate(90deg);
  transition: transform .16s var(--ease), color .16s var(--ease);
}
.grupo-toggle:hover svg { color: var(--accent); }
.is-fechado .grupo-toggle svg { transform: none; }

.grupo-nome { font-weight: 600; letter-spacing: -.01em; }
.grupo-conta {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.grupo-nota { color: var(--text-faint); font-size: 11.5px; font-weight: 450; }
.grupo-nota.is-alerta { color: var(--danger); }

/* ---- seleção em massa ----------------------------------------------------
   A barra só aparece com algo marcado: vazia, seria uma faixa permanente
   dizendo "0 selecionados" acima de toda tabela. */
.col-caixa { width: 34px; padding-right: 0 !important; text-align: center; }
.col-caixa input { margin: 0; cursor: pointer; }

.selecao-barra {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--accent-wash);
}
.selecao-barra.is-ativa { display: flex; }
.selecao-conta { margin-right: auto; font-size: 12.5px; font-weight: 550; }

/* Aviso da exclusão em massa: o que vai sumir, listado antes de sumir. */
.lista-seca {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.linha-caixa {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  font-size: 12.5px;
  cursor: pointer;
}
.linha-caixa input { margin-top: 2px; flex: none; }
.linha-caixa .muted { margin-top: 3px; line-height: 1.5; }

/* Calibre: terceira linha da coluna Arma, abaixo de marca e modelo. Mais fraco
   que o modelo de propósito — é qualificação, não identificação. */
.calibre { margin-top: 1px; color: var(--text-faint); font-size: 11.5px; }

/* Rótulo de finalidade: é o que distingue uma guia da outra. */
.finalidade {
  margin-top: 2px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
}

/* Impedimento que o operador precisa ver antes de clicar. */
.alerta {
  margin-top: 3px;
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Motivo escrito pela PF: texto corrido dentro de uma celula estreita. */
.nota {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 44ch;
}

/* Linha que sairia incompleta: visivel sem virar alarme. */
.linha-atencao > td { background: color-mix(in oklab, var(--warn) 8%, transparent); }
.linha-atencao:hover > td { background: color-mix(in oklab, var(--warn) 13%, transparent); }

/* ============================================================================
   Ficha do cliente em abas
   As secoes do <form> continuam no DOM, so escondidas: o Salvar enxerga tudo,
   inclusive o que esta em outra aba.
   ========================================================================== */
.panes > .pane[hidden] { display: none; }
.pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: pane-in .2s var(--ease) both;
}
.pane > form { display: contents; }
.form-actions {
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@keyframes pane-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Upload inline: tarefa curta demais para merecer um modal. */
.upload-box {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.upload-inline {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.upload-inline .field { display: flex; flex-direction: column; gap: 5px; }
.upload-inline .field > span { font-size: 11.5px; color: var(--text-muted); }
.upload-inline small { font-size: 11px; line-height: 1.45; }

/* ============================== RESPONSIVO ============================== */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--topbar-h) + var(--execbar-h));
    z-index: 25;
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  /* Aqui a barra não sai do fluxo — ela já está fora dele, sobre o conteúdo.
     Recolhida vira gaveta fechada, que desliza; `display: none` mataria a
     animação e faria a barra piscar na tela. */
  .nav-oculto .sidebar { display: block; transform: translateX(-100%); }
  .main { padding: 16px 14px 64px; }
  .page-head h1 { font-size: 18px; }
  .status-chip span:last-child { display: none; }
}

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

/* ============================================================================
   Seletor de período e painel de situação
   ========================================================================== */

/* Escolher "Mês atual" nao e uma acao primaria: era um botao laranja cheio
   competindo com o unico laranja que devia significar "clique aqui". */
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.segmented button {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.segmented button:hover { color: var(--text); }
.segmented button.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* Tres numeros grandes que respondem "de quem e a bola agora". */
.fases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.fase {
  padding: 14px 16px 12px;
  border-left: 1px solid var(--border);
}
.fase:first-child { border-left: 0; }
.fase-rotulo {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 550;
}
.fase-valor {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.fase-nota { color: var(--text-faint); font-size: 11.5px; }
.fase.destaque .fase-valor { color: var(--accent); }
.fase-valor.zerado { color: var(--text-faint); }

/* Detalhe por situação: dentro da própria fase, para o número de cima e a
   lista de baixo serem obviamente a mesma coisa. */
.situacoes { display: grid; margin-top: 10px; }
.situacao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 6px 6px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: color .16s var(--ease);
}
.situacao:hover { color: var(--text); }
.situacao:hover .situacao-n { color: var(--accent); }
.situacao-n {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  transition: color .16s var(--ease);
}
.situacao.vazia { color: var(--text-faint); }
.situacao.vazia .situacao-n { color: var(--text-faint); font-weight: 500; }

/* Celula de uma linha so: o texto inteiro fica no title, e a linha da tabela
   para de crescer por causa de um cliente com tres atividades no CR. */
.trunc {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Busca + chips dentro do cabecalho do card: eram controles soltos boiando
   entre as abas e a tabela, sem nada dizendo a que pertenciam. */
.card-head .filtros { margin: 0; width: 100%; }
.card-head .filtros-busca input { width: min(280px, 100%); }

/* Texto de apoio abaixo de um campo (a senha gov.br explica onde e usada). */
.field small,
.form-grid small {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
  max-width: 40ch;
}

/* Checkbox com rotulo ao lado: o alvo de clique e a linha inteira. */
.form-grid label:has(> input[type='checkbox']),
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
input[type='checkbox'] {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* Cabecalho de card que so carrega controles nao precisa de moldura dupla. */
.card-head:has(> .filtros) { padding: 12px 16px; }

/* O seletor de periodo tem cinco opcoes: em 390px ele estoura o cabecalho da
   pagina. Rola dentro de si mesmo em vez de empurrar a linha inteira. */
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.page-head .row { min-width: 0; max-width: 100%; }

/* Busca à esquerda, o menu de processo à direita, numa linha.

   Era `auto 1fr` numa linha só: a busca ficava com o que sobrasse — 200px num
   monitor grande — e o placeholder "Cliente, CPF ou protocolo…" aparecia
   cortado no meio. Agora ela tem coluna própria de largura fixa e não cede. */
@media (min-width: 720px) {
  .card-head > .filtros {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
  }
  .card-head > .filtros > .filtros-busca input { width: 100%; }
}
/* O menu único de processo (grupos como <optgroup>). */
.filtros-menu { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filtros-menu .filtro-processo { width: min(420px, 100%); min-width: 0; }

/* Ritmo vertical unico da pagina.
   Cada tela empilhava blocos com a margem que achava melhor — o cabecalho com
   20px, o banner com 16, a grade de metricas com nenhuma. O `gap` decide uma
   vez para todas, e os blocos param de precisar saber quem vem depois. */
.main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.main > * { width: 100%; }
.main > .card + .card { margin-top: 0; }
.page-head { margin-bottom: 0; }
.banner { margin-bottom: 0; }
.tabs { margin-bottom: 0; }

/* Aba Documentos: dois cartoes (emitidos e cofre) com o mesmo respiro do resto. */
.pane-docs { display: flex; flex-direction: column; gap: 14px; }
.pane-docs .card + .card { margin-top: 0; }

/* ============================================================================
   Resumo da importação — as quatro frentes de uma consulta só
   Um login no gov.br volta com cadastro, acervo, processos e documentos. A
   tela contava só processos, e uma conta sem solicitação parecia falha.
   ========================================================================== */
.frentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.frente { padding: 10px 12px; background: var(--surface); }
.frente-rotulo { color: var(--text-muted); font-size: 11.5px; font-weight: 550; }
.frente-valor {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.frente-valor.ok { color: var(--text); }
.frente-nota { color: var(--text-faint); font-size: 11px; line-height: 1.4; }

/* Documentos emitidos agrupados por tipo: CR, CRAF, guias. Uma lista corrida
   obrigava a ler linha a linha para achar o CR. */
.grupo-doc + .grupo-doc { border-top: 1px solid var(--border); }
.grupo-doc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.grupo-doc-titulo { font-size: 12.5px; font-weight: 600; }
.grupo-doc-n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Filtros do histórico: tipo, situação e período numa linha só. */
.filtros-historico {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: end;
  margin: 12px 0 14px;
}
/* O nome do processo é o mais longo; os outros pedem só o que precisam. */
.filtros-historico > .field:first-child { flex: 1 1 220px; min-width: 0; }
.filtros-historico > .field { flex: 0 1 auto; }
.filtros-historico input[type='date'] { width: auto; min-width: 140px; }
@media (max-width: 820px) {
  .filtros-historico { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Dossiê do cliente — grade de cartões
   O vazio carrega informação: um "+" diz o que ainda falta pedir ao cliente.
   ========================================================================== */
.dossie-grupo + .dossie-grupo { margin-top: 20px; }
.dossie-titulo {
  margin-bottom: 8px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dossie-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.dossie-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 104px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: var(--text);
}
.dossie-card.vazio {
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.dossie-card.vazio:hover {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
}
.dossie-card.cheio { background: var(--surface-2); border-color: var(--border-strong); }
.dossie-card.vencido { border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.dossie-nome { font-size: 13px; font-weight: 600; }
.dossie-card.vazio .dossie-nome { font-weight: 500; }
.dossie-mais { font-size: 22px; line-height: 1; font-weight: 300; }
.dossie-linha { font-size: 11.5px; color: var(--text-muted); }
.dossie-linha strong { color: var(--text); font-weight: 550; }
.dossie-card.vencido .dossie-linha strong { color: var(--danger); }
.dossie-acoes { display: flex; gap: 4px; margin-top: auto; padding-top: 8px; }

/* GRU na linha do processo: valor, situação e o código pronto para copiar. */
.gru { display: grid; justify-items: start; gap: 4px; font-size: 12px; }
.gru-codigo {
  display: block;
  max-width: 30ch;
  overflow-wrap: anywhere;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Destino da guia: o que separa duas guias iguais do mesmo cliente. */
.destino {
  margin-top: 2px;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11px;
}

/* Exigências do processo: contagem fechada, lista aberta sob demanda. */
.docs > summary { cursor: pointer; list-style: none; }
.docs > summary::-webkit-details-marker { display: none; }
.docs-lista {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.docs-lista li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.docs-lista li.ok { color: var(--text); }
.docs-lista li.falta .docs-marca { color: var(--warn); }
.docs-lista li.ok .docs-marca { color: var(--success); }
.docs-marca { width: 10px; flex: 0 0 10px; text-align: center; }

/* Detalhes da solicitação: rótulo à esquerda, valor livre à direita. */
.detalhe-lista { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.detalhe-linha { display: flex; gap: 12px; padding: 7px 12px; background: var(--surface); font-size: 12.5px; }
.detalhe-rotulo { flex: 0 0 148px; color: var(--text-muted); }

/* Botão que age como link (abre modal em vez de navegar). */
button.como-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }

/* Seletor de local de destino: combo largo, botão de cadastro ao lado. */
.seletor-local { display: flex; gap: 8px; align-items: center; }
.seletor-local select { flex: 1; min-width: 0; }
.seletor-local .btn { flex: 0 0 auto; }

/* Aviso do seletor de local: o que falta para a guia sair. */
.aviso-local { margin-top: 6px; font-size: 12px; min-height: 18px; }
.aviso-local .badge { flex: 0 0 auto; }

/* Frente da importação que parou no meio — o número está certo mas incompleto. */
.frente-valor.alerta { color: var(--warn); }

/* O que o documento anexado disse de si mesmo, no modal do dossiê. */
.lido-do-doc { margin-top: 8px; font-size: 12px; min-height: 18px; }
.lido-linha { padding: 2px 0; overflow-wrap: anywhere; }
.lido-linha strong { font-weight: 600; }

/* O que um documento do dossiê resolve nos processos. */
.dossie-serve { display: block; margin-top: 3px; font-size: 10.5px; color: var(--accent); line-height: 1.3; }

/* O que fazer diante do erro, abaixo da mensagem crua. */
.erro-ajuda { margin-top: 3px; font-size: 11px; color: var(--warn); line-height: 1.35; }

/* --------------------------------------------------- seletor com busca ----
   O seletor de processos tinha 36 opções numa lista corrida, 22 delas
   começando com "Guia - ". Achar uma exigia ler linha por linha.

   Os grupos vêm de `processes.group_name`, que já existia no banco. */
.combo {
  position: relative;
}

.combo-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.combo-botao:hover:not(:disabled) { border-color: var(--accent-line); }
.combo-botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.combo-botao:disabled { opacity: 0.55; cursor: not-allowed; }

.combo-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-rotulo.vazio { color: var(--text-faint); }
.combo-seta { color: var(--text-faint); flex: none; }

/* `fixed`, nao `absolute`: o corpo do modal tem overflow-y e recortava a lista
   em quatro linhas. Posicao e largura vem do JS, medidas do botao. */
.combo-painel {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
  overflow: hidden;
}

.combo-busca {
  flex: none;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.combo-busca:focus { outline: none; }

/* `overflow-x: hidden`: sem isto um nome longo empurrava a largura e nascia uma
   barra de rolagem horizontal no rodape da lista. */
.combo-lista { overflow-y: auto; overflow-x: hidden; padding: 4px; }

.combo-grupo {
  padding: 8px 10px 4px;
  color: var(--text-faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Duas linhas por item: os rotulos reais nao cabem numa. A arma mais longa tem
   100 caracteres e o local, 171 — contra ~55 que uma linha aguenta. Cortar com
   reticencias perdia justamente o fim, onde ficam calibre, categoria e os
   avisos de campo faltando. */
.combo-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.combo-item:hover,
.combo-item.marcado { background: var(--surface-3); }

/* O escolhido continua reconhecível mesmo com o teclado noutro item. */
.combo-item[aria-selected='true'] { color: var(--accent); font-weight: 600; }

.combo-vazio { padding: 16px 12px; color: var(--text-faint); text-align: center; }

/* ----------------------------------------- formulario de novo processo ----
   O modal alargou para 1080px e, com `minmax(240px, 1fr)`, os quatro campos
   couberam numa linha só — o popup ficou 1080x352 numa janela de 889px de
   altura, com 538px sobrando. Largo e raso: os campos ficaram estreitos e o
   espaço vertical foi desperdiçado.

   Colunas maiores dão três por linha em vez de quatro: cada campo respira e o
   modal volta a ter altura. Vale só aqui, para não mexer nos outros
   formulários do sistema. */
.form-processo .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px 20px;
}

.form-processo fieldset { padding: 16px 18px; margin-bottom: 16px; }

.form-processo textarea { min-height: 96px; }

/* Um pouco mais de ar em volta: o corpo do modal tinha o mesmo padding de uma
   caixa pequena. */
.form-processo { padding: 2px; }

/* O formulário nasce com a altura que vai ter.
   
   Os campos de destino, arma e documentos só existem depois de escolher o
   processo, então o modal abria com 449px e pulava para 825px — a caixa
   crescia por baixo do cursor e os botões saíam do lugar no meio do
   preenchimento.

   Reservar a altura desde o início troca o salto por uma área estável. É
   `min-height`, não `height`: um processo com muitos campos continua podendo
   passar disso, até o teto do `.modal-body`. */
.form-processo {
  display: flex;
  flex-direction: column;
  min-height: min(780px, 78dvh);
}

/* Empurra o aviso de documentos e os blocos dinâmicos para o fim, em vez de
   deixar o espaço reservado como um buraco no meio do formulário. */
/* (o empurrao para o rodape saiu: a lista de exigencias ocupa o espaco) */

/* A lista de exigências ocupa o espaço reservado do formulário com informação,
   em vez de deixá-lo vazio. */
.exigencias { margin-top: 14px; }

.exigencias-titulo {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exigencias-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px 18px;
}

.exigencias-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.exigencias-item:last-child { border-bottom: 0; }

/* A primeira linha identifica; a segunda qualifica. */
.combo-item-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-item-sub {
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.25;
  /* Duas linhas no máximo: um aviso longo não empurra a lista inteira. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.combo-item.marcado .combo-item-sub,
.combo-item:hover .combo-item-sub { color: var(--text-muted); }

/* ---- busca no catálogo oficial de clubes (modal de local) ---- */
.busca-pf-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.busca-pf-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer;
}
.busca-pf-item:hover { background: var(--surface-3); border-color: var(--accent); }
.busca-pf-item .muted { font-size: 12px; }
.busca-pf { margin-top: 8px; }
.busca-pf-campo {
  width: 100%; padding: 8px 10px; border: 1px dashed var(--border);
  border-radius: 8px; background: transparent; color: var(--text); font: inherit;
}
.busca-pf-campo:focus { outline: none; border-style: solid; border-color: var(--accent); }

/* ============================== FILA ==============================
   Quem é o próximo, na ordem em que vai rodar.

   A fila existia só como número no cartão ("Jobs pendentes: 3"), e três é a
   mesma coisa que nada quando o operador quer saber se o cliente que ele acabou
   de mandar é o próximo ou o último. */
.fila { list-style: none; margin: 0; padding: 0; }
.fila-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
}
.fila-item:first-child { border-top: 0; }
.fila-pos {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: center;
}
/* O que está rodando agora não é "o número 1 da fila": é outra coisa, e a
   diferença tem de saltar sem precisar ler. */
.fila-item.is-voando { background: var(--accent-wash); }
.fila-item.is-voando .fila-pos { color: var(--accent); }
.fila-clientes { overflow-wrap: anywhere; }
.fila-item.is-voando .fila-clientes { font-weight: 550; }
.fila-quem .muted { font-size: 12px; }

/* ======================== HISTÓRICO DO CLIENTE ========================
   Uma linha por processo, sem rolar para o lado.

   A mesa não tinha classe e herdava o `nowrap` padrão: cada célula ocupava a
   largura do seu texto mais longo, e a GRU sozinha (valor, selo, vencimento e
   o botão de copiar) empurrava a tabela para além da tela. O operador via uma
   barra de rolagem horizontal em toda ficha de cliente.

   Mesma receita da mesa de Processos: `table-layout: fixed`, larguras por
   coluna somando 100%, e o texto quebra DENTRO da célula. A coluna Documentos
   saiu — o botão "Baixar Documento" desceu para a célula de ações. */
table.mesa-historico { table-layout: fixed; width: 100%; }
table.mesa-historico th,
table.mesa-historico td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  padding: 9px 10px;
}
table.mesa-historico th:nth-child(1), table.mesa-historico td:nth-child(1) { width: 19%; } /* processo  */
table.mesa-historico th:nth-child(2), table.mesa-historico td:nth-child(2) { width: 13%; } /* protocolo */
table.mesa-historico th:nth-child(3), table.mesa-historico td:nth-child(3) { width: 11%; } /* situação  */
table.mesa-historico th:nth-child(4), table.mesa-historico td:nth-child(4) { width: 9%; }  /* entrada   */
table.mesa-historico th:nth-child(5), table.mesa-historico td:nth-child(5) { width: 17%; } /* GRU       */
table.mesa-historico th:nth-child(6), table.mesa-historico td:nth-child(6) { width: 14%; } /* validade  */
table.mesa-historico th:nth-child(7), table.mesa-historico td:nth-child(7) { width: 17%; } /* ações     */
/* O cabeçalho não quebra: "Protocolo" em duas linhas desalinha a régua. */
table.mesa-historico th { white-space: nowrap; }
/* Os botões da célula de ações encolhem com ela em vez de vazar. */
table.mesa-historico td:nth-child(7) .btn { max-width: 100%; }

/* Abaixo de 820px de CAIXA a largura fixa passa a espremer demais — sete
   colunas em ~700px dão ~100px cada, e a GRU vira uma pilha ilegível. Aí volta
   ao automático e a caixa rola, que é o certo para tela de celular. Medido pela
   caixa (container da .table-wrap), não pela janela: o caso de todo dia é o
   monitor grande com o painel lateral da extensão aberto. */
@container (max-width: 820px) {
  table.mesa-historico { table-layout: auto; }
  table.mesa-historico th, table.mesa-historico td { white-space: nowrap; width: auto; }
}

/* ============================================================================
   Aviso de acesso ao gov.br — senha trocada pelo cliente ou código de
   verificação ativo. Maior que o banner comum de propósito: é o que para a
   automação até alguém agir, na lista de clientes e na ficha.
   ========================================================================= */
.banner.aviso-gov {
  padding: 16px 18px;
  border-left: 4px solid var(--danger);
  align-items: flex-start;
}
.banner.aviso-gov > svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--danger); margin-top: 1px; }
.banner.aviso-gov > div { flex: 1; min-width: 0; }
.banner.aviso-gov > .btn { flex: 0 0 auto; margin: -4px -6px 0 0; }
/* "Senha nova, falta conferir": nada a fazer além de esperar um login. */
.banner.warn.aviso-gov { border-left-color: var(--warn); }
.banner.warn.aviso-gov > svg { color: var(--warn); }
.banner.aviso-gov h3 { font-size: 15.5px; font-weight: 650; margin-bottom: 4px; }
.banner.aviso-gov p { color: var(--text); font-size: 13.5px; }
.banner.aviso-gov > div > div + div { margin-top: 12px; }
.aviso-gov-lista { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.85; }

/* ============================================================================
   Barra de execução — o que a extensão está fazendo agora, de ponta a ponta sob
   o cabeçalho. Laranja enquanto roda; verde por 3 s no fim; vermelha no erro.
   Acesa, `html.exec-on` empurra a barra lateral para baixo dela.
   ========================================================================= */
html.exec-on { --execbar-h: 36px; }
.exec-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 29;
  height: var(--execbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  border-bottom: 1px solid var(--accent-line);
  transition: background .25s var(--ease);
}
.exec-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Texto do verbo na cor do texto: laranja sobre o fundo laranja-lavado ficava
   abaixo de 4.5:1 no tema claro. A cor do estado vem do ponto e da faixa. */
.exec-bar .exec-acao { flex-shrink: 0; font-weight: 650; color: var(--text); }
.exec-bar .exec-parte::before { content: '·'; margin-right: 8px; color: var(--text-faint); }
.exec-dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: exec-pulso 1.2s ease-in-out infinite;
}
@keyframes exec-pulso { 50% { opacity: .3; } }
/* Faixa que corre na base: prova de vida quando um passo demora. */
.exec-bar.rodando::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30%; height: 2px;
  background: var(--accent);
  animation: exec-corre 1.6s var(--ease) infinite;
}
@keyframes exec-corre { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.exec-bar.ok { background: var(--success-bg); border-bottom-color: color-mix(in oklab, var(--success) 45%, transparent); }
.exec-bar.ok .exec-acao { color: var(--success); }
.exec-bar.ok .exec-dot { background: var(--success); animation: none; }
.exec-bar.erro { background: var(--danger-bg); border-bottom-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.exec-bar.erro .exec-acao { color: var(--danger); }
.exec-bar.erro .exec-dot { background: var(--danger); animation: none; }
@media (max-width: 900px) {
  .exec-bar { padding: 0 12px; font-size: 12.5px; }
}
/* O reset global de movimento reduzido encurta a duração mas mantém o
   `infinite`: o pulso e a faixa viravam um pisca-pisca. Aqui eles param. */
@media (prefers-reduced-motion: reduce) {
  .exec-dot, .exec-bar.rodando::after { animation: none !important; }
}

/* Período do dashboard: um menu, não cinco botões. */
.filtro-periodo { width: auto; min-width: 170px; }

/* Chip da extensão desatualizada: vira o botão que recarrega. */
.status-chip.clicavel { cursor: pointer; }

/* Tipo deduzido na importacao: selo + seletor entre os processos irmaos. */
.troca-tipo-linha { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.troca-tipo-linha .troca-tipo { width: auto; max-width: 100%; padding: 2px 6px; font-size: 12px; }

/* "Ver relatorio" na barra do fim do lote. */
.exec-bar .exec-relatorio {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.exec-bar.ok .exec-relatorio { color: var(--success); }
.exec-bar.erro .exec-relatorio { color: var(--danger); }
.exec-bar .exec-relatorio:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
/* Relatorio do lote */
.relatorio-resumo { display: flex; flex-wrap: wrap; gap: 10px; }
.relatorio-resumo > div { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font-size: 12.5px; }
.relatorio-resumo b { display: block; font-size: 20px; color: var(--text); }
table.relatorio tr.is-deferida > td:first-child { box-shadow: inset 3px 0 0 var(--success); }

/* Laudo sem validade informada: o dossie pede conferencia. */
.dossie-card.conferir { border-color: color-mix(in oklab, var(--warn) 45%, transparent); }

/* X do fim de lote: fecha o aviso (o relatorio continua em Relatorios). */
.exec-bar .exec-fechar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-left: 4px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.exec-bar .exec-fechar:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
/* Com o X, o "Ver relatorio" continua empurrado para a direita. */
.exec-bar.rodando .exec-relatorio { color: var(--accent); }

/* ============================================================================
   REDESIGN — dashboard fiel ao mock (claro + escuro), 11/09/2026
   Novos elementos (marca na sidebar, busca no topo, ícones nos cards) e a
   virada dos cards de fase para blocos separados. Vem por último: sobrepõe o
   estritamente necessário, mantendo o resto do sistema.
   ========================================================================== */

/* -- acentos do modo claro puxados para o laranja vivo do mock ------------- */
:root[data-theme='light'] {
  --accent: #ee6a15;
  --accent-hi: #f6822f;
  --accent-lo: #c9540a;
  --bg: #f5f5f7;
  --accent-wash: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* -- ícones novos: tamanho, senão o SVG ocupa a tela ---------------------- */
.topbar-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-faint); }
.select-wrap svg { width: 15px; height: 15px; }
.btn-icon svg { width: 15px; height: 15px; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark.sm svg { width: 15px; height: 15px; }
.fase-ico svg { width: 20px; height: 20px; }
.card-ico svg { width: 15px; height: 15px; }
.time-ico svg { width: 26px; height: 26px; }
.avatar-btn .chev { width: 15px; height: 15px; color: var(--text-faint); }

/* -- topbar: busca no lugar da marca -------------------------------------- */
.topbar { gap: 12px; padding: 0 16px; }
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 440px;
  padding: 0 12px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.topbar-search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); }
.topbar-search input { border: 0; background: none; padding: 0; height: 100%; font-size: 13px; box-shadow: none; }
.topbar-search input:focus { box-shadow: none; }
.status-chip { background: var(--success-bg); color: var(--success); font-weight: 550; }
.avatar-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 4px 2px 2px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  transition: background .16s var(--ease);
}
.avatar-btn:hover { background: var(--surface-2); }

/* -- sidebar: marca no topo, rodapé com versão --------------------------- */
.sidebar { padding: 0 12px 20px; display: flex; flex-direction: column; }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); margin: 0 -12px 6px; padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 9px;
  background: var(--accent-wash); color: var(--accent);
}
.brand-text { font-size: 14.5px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.05; }
.brand-text span { color: var(--accent); display: block; font-weight: 600; }
.sidebar-foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; gap: 9px;
  color: var(--text-faint); font-size: 11.5px; line-height: 1.3;
  border-top: 1px solid var(--border);
}
.sidebar-foot small { color: var(--text-faint); opacity: .8; }
.sidebar-foot .brand-mark.sm { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; }

/* -- nav ativo: lavado de laranja, como o mock --------------------------- */
.nav-item.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.nav-item.active svg { color: var(--accent); opacity: 1; }

/* -- título da página maior --------------------------------------------- */
.page-head { align-items: center; margin-bottom: 20px; }
.page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.page-head p { margin-top: 4px; font-size: 13.5px; }
.select-wrap {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
  box-shadow: var(--shadow);
}
.select-wrap.sm { height: 30px; box-shadow: none; background: var(--surface-2); }
.select-wrap select { border: 0; background: none; padding: 0; padding-right: 14px; box-shadow: none; width: auto; color: var(--text); font-weight: 550; }
.select-wrap select:focus { box-shadow: none; }
.btn-icon { width: 36px; padding: 0; display: grid; place-items: center; }

/* -- filtros lado a lado ------------------------------------------------- */
.filtros-historico {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}

/* -- cards de fase: três blocos separados, ícone no topo ----------------- */
.fases {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.fase {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  row-gap: 1px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.fase:first-child { border-left: 1px solid var(--border); }
.fase-ico {
  grid-row: 1; grid-column: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
}
.fase-rotulo { grid-row: 1; grid-column: 2; align-self: center; font-size: 12.5px; font-weight: 600; color: var(--text); }
.fase-valor { grid-column: 1 / -1; margin-top: 8px; font-size: 30px; }
.fase-nota { grid-column: 1 / -1; margin-top: 0; }
.situacoes { grid-column: 1 / -1; }
.fase.destaque .fase-valor { color: var(--accent); }
.fase-valor.zerado { color: var(--text); }
.situacoes { margin-top: 12px; }
.situacao { font-size: 12.5px; padding: 7px 0; }
.situacao:first-child { border-top: 1px solid var(--border); }

/* -- cabeçalho de card com ícone ---------------------------------------- */
.card-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
}
.card-head h2 { font-size: 14px; }

/* -- gráfico: barras mais cheias ---------------------------------------- */
.chart { height: 200px; }
.chart .bar { fill: var(--accent); rx: 3; }

/* -- tempo interno: número + relógio ------------------------------------ */
.time-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.time-card .stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.time-ico {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent); flex: 0 0 56px;
}
.tnum { font-variant-numeric: tabular-nums; font-weight: 600; }

/* -- barras de volume mais visíveis ------------------------------------- */
.bar-track { height: 8px; }
.bar-row .row { font-size: 13px; }

/* chip do período no cabeçalho do gráfico (estático; o período muda no topo) */
.head-chip {
  padding: 4px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; font-weight: 550;
  white-space: nowrap;
}