/* Telas da Senior — estilo da aba.
 *
 * Porte do desenho aprovado no Claude Design ("Acessos Senior.dc.html", 16/09/2026).
 * O desenho veio com hex literal em estilo inline; aqui a paleta vira token local
 * `--acs-*` no escopo da aba, para nao vazar para o resto do portal e para o ajuste
 * ficar num lugar so.
 *
 * Duas escolhas do desenho que sao semanticas, nao decorativas:
 *   - INDIGO  = objeto do ERP (codigo de tela, direito concedido, roteamento).
 *   - AMBAR   = concessao individual e menu-pai faltando, ou seja, o que precisa de
 *               atencao. Verde e o acesso herdado por grupo, que e o padrao desejado.
 *
 * Hover segue a regra global do portal: camada de estado relativa (brilho/realce da
 * propria cor), nunca slate fixo.
 */

.acessos-view {
  /* Os tokens locais sao um APELIDO dos tokens do portal (tokens.css), nao uma
     paleta paralela. A primeira versao declarava hex proprio e ate outra fonte
     mono ('JetBrains Mono', enquanto o portal inteiro usa IBM Plex Mono), e por
     isso a aba parecia de outro sistema: nao acompanhava o tema, nao acompanhava
     o modo escuro e destoava lado a lado com Compras e Requisicao.

     Sobreviveu um unico valor proprio, o INDIGO, porque carrega significado que
     nenhum token global cobre: objeto do ERP (codigo de tela, direito concedido,
     roteamento do pedido). Verde, ambar e vermelho passam a sair de --success-500,
     --warning-500 e --danger-500, como em .req-alm-seal. */
  --acs-surface: var(--bg-surface);
  --acs-bg-soft: var(--bg-muted);
  --acs-ink: var(--text-primary);
  --acs-ink-2: var(--text-secondary);
  /* Tres degraus de cinza a partir de UM token: o portal so publica dois, e a
     tabela densa precisa separar dado, apoio e ruido. */
  --acs-ink-3: color-mix(in srgb, var(--text-secondary) 82%, var(--bg-surface));
  --acs-ink-4: color-mix(in srgb, var(--text-secondary) 58%, var(--bg-surface));
  --acs-line: var(--line-soft);
  --acs-line-2: color-mix(in srgb, var(--line-strong) 34%, transparent);
  --acs-line-3: color-mix(in srgb, var(--line-strong) 22%, transparent);
  --acs-brand: var(--brand-500);
  --acs-brand-2: var(--brand-600);
  --acs-obj: #6366f1;
  --acs-obj-ink: #3730a3;
  --acs-obj-bg: rgba(99, 102, 241, 0.1);
  --acs-obj-line: rgba(99, 102, 241, 0.3);
  --acs-ok: var(--success-500);
  --acs-ok-ink: color-mix(in srgb, var(--success-500) 72%, #000);
  --acs-ok-bg: color-mix(in srgb, var(--success-500) 12%, var(--bg-surface));
  --acs-warn: var(--warning-500);
  --acs-warn-ink: color-mix(in srgb, var(--warning-500) 82%, #000);
  --acs-warn-strong: color-mix(in srgb, var(--warning-500) 78%, #000);
  --acs-warn-bg: color-mix(in srgb, var(--warning-500) 14%, var(--bg-surface));
  --acs-warn-line: color-mix(in srgb, var(--warning-500) 38%, transparent);
  --acs-err: var(--danger-500);
  --acs-err-line: color-mix(in srgb, var(--danger-500) 45%, transparent);
  --acs-mono: var(--font-mono);
  --acs-radius: var(--radius-md);
  --acs-shadow: var(--shadow-1);

  color: var(--acs-ink);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;

  /* ITEM DE GRID COM min-width AUTO CRESCE ATE O CONTEUDO. `.workspace-main` e um
     grid, e sem esta linha a secao inteira do modulo assumia a largura de conteudo
     do filho mais largo: medido em 762px dentro de uma janela de 375, com o
     excedente cortado pelo `overflow-x: clip` do body e inalcancavel, porque quem
     rolava era um ancestral que nao rola. No desktop nao aparecia, ja que a largura
     disponivel sempre cobria o conteudo. */
  min-width: 0;
}

.acessos-view * { box-sizing: border-box; }

/* ── cabeçalho e navegação por tela ───────────────────────────────────────── */

.acs-top {
  background: var(--acs-surface);
  border: 1px solid var(--acs-line);
  border-radius: var(--acs-radius);
  box-shadow: var(--acs-shadow);
  padding: 14px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acs-top-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.acs-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acs-ink-3);
}

.acs-title {
  margin: 3px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.acs-top-facts {
  font-size: 0.8125rem;
  color: var(--acs-ink-3);
  margin-top: 3px;
}

.acs-top-facts strong { color: var(--acs-warn-strong); font-weight: 600; }

.acs-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--acs-line-2);
  border-radius: 999px;
  background: var(--acs-bg-soft);
  font-size: 0.75rem;
  color: var(--acs-ink-2);
}

.acs-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 46%, var(--bg-surface));
  color: var(--acs-ink-2);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.acs-avatar--lg { width: 44px; height: 44px; font-size: 0.9rem; }
.acs-avatar--md { width: 34px; height: 34px; font-size: 0.75rem; }
.acs-avatar--sm { width: 26px; height: 26px; font-size: 0.62rem; }

/* Tile do modulo, como .req-head-icon: da a aba um rosto e alinha com Compras
   e Requisicao, onde o titulo nunca aparece solto. */
.acs-top-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--acs-bg-soft);
  color: var(--acs-brand);
}

.acs-top-icon svg { width: 24px; height: 24px; }

/* NAVEGACAO PRINCIPAL em capsula (molde de .req-queue): ativa = preenchida.
   A aba INTERNA (.acs-tab, Pendentes/Decididos, Telas/Historico) continua
   sublinhada de proposito. Sao dois niveis de navegacao, e com o mesmo desenho
   nos dois o usuario perde de vista qual esta trocando. */
.acs-tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 14px; }

.acs-nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--acs-line-2);
  background: var(--acs-surface);
  color: var(--acs-ink-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.acs-nav-tab:hover:not(.is-active) { border-color: var(--acs-brand); color: var(--acs-brand); }

.acs-nav-tab.is-active {
  background: var(--acs-brand);
  border-color: var(--acs-brand);
  color: #fff;
}

.acs-nav-ic { display: inline-flex; width: 16px; height: 16px; }
.acs-nav-ic svg { width: 16px; height: 16px; }
.acs-nav-tab.is-active .acs-tab-badge { background: rgba(255, 255, 255, 0.26); color: #fff; }

.acs-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--acs-ink-3);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease;
}

.acs-tab:hover { color: var(--acs-ink); }
.acs-tab.is-active { color: var(--acs-ink); font-weight: 700; border-bottom-color: var(--acs-brand); }

.acs-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--acs-obj);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: var(--acs-mono);
}

/* ── painéis ──────────────────────────────────────────────────────────────── */

.acs-panel { padding: 16px 0 8px; }
.acs-panel[hidden] { display: none; }

.acs-grid-split {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.acs-grid-split--wide { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }

.acs-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.acs-card {
  background: var(--acs-surface);
  border: 1px solid var(--acs-line);
  border-radius: var(--acs-radius);
  box-shadow: var(--acs-shadow);
  overflow: hidden;
}

.acs-card--pad { padding: 18px; }
.acs-card--warn { border-color: var(--acs-warn-line); }

.acs-card-head {
  padding: 12px 15px;
  border-bottom: 1px solid var(--acs-line);
  background: var(--acs-bg-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.acs-card-head--ok { background: var(--acs-ok-bg); border-bottom-color: color-mix(in srgb, var(--success-500) 30%, transparent); }
.acs-card-head--warn { background: color-mix(in srgb, var(--warning-500) 9%, var(--bg-surface)); border-bottom-color: var(--acs-warn-line); }
.acs-card-head-sub { font-size: 0.78rem; color: var(--acs-ink-2); margin-top: 2px; width: 100%; }
.acs-spacer { flex: 1; }

/* ── árvore do ERP ────────────────────────────────────────────────────────── */

.acs-tree { max-height: 560px; overflow: auto; padding: 6px 0; }

.acs-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  width: 100%;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.acs-tree-row:hover { background: var(--acs-bg-soft); }
.acs-tree-row.is-selected { background: rgba(99, 102, 241, 0.08); border-left-color: var(--acs-obj); }

.acs-tree-caret {
  width: 12px;
  flex: 0 0 12px;
  color: var(--acs-ink-4);
  display: grid;
  place-items: center;
}

/* Fechado aponta para a direita, aberto para baixo: e o mesmo chevron girando,
   nao dois glifos diferentes, entao a transicao mostra o que aconteceu. */
.acs-tree-caret svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform 140ms ease;
}

.acs-tree-caret.is-open svg { transform: none; }

/* Folha nao abre nada: um ponto marca o lugar sem prometer expansao. */
.acs-tree-caret--leaf::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.acs-tree-label {
  font-size: 0.8125rem;
  color: var(--acs-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acs-tree-row.is-branch .acs-tree-label { color: var(--acs-ink); font-weight: 500; }
.acs-tree-row.is-root .acs-tree-label { font-weight: 600; }
.acs-tree-row.is-selected .acs-tree-label { color: var(--acs-ink); font-weight: 700; }

.acs-tree-meta { font-family: var(--acs-mono); font-size: 0.68rem; color: var(--acs-ink-4); }
.acs-tree-row.is-selected .acs-tree-meta { color: var(--acs-obj-ink); }

/* ── busca ────────────────────────────────────────────────────────────────── */

.acs-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--acs-surface);
}

.acs-search:focus-within { border-color: var(--acs-brand); }

.acs-search input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--acs-ink);
  background: transparent;
}

.acs-search-count { font-family: var(--acs-mono); font-size: 0.72rem; color: var(--acs-ink-4); }

.acs-chips { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.acs-chip {
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--acs-line-2);
  background: var(--acs-bg-soft);
  font: inherit;
  font-size: 0.75rem;
  color: var(--acs-ink-2);
  cursor: pointer;
}

.acs-chip:hover { color: var(--acs-ink); border-color: rgba(15, 23, 42, 0.16); }

/* ── busca com lista ancorada (combobox) ──────────────────────────────────────
 *
 * Mesmo contrato dos comboboxes que o portal ja usa (`frota/combo.js`,
 * `.search-chip-dropdown` do admin-users, `.prd-combo-option` das consultas): a
 * lista abre ANCORADA no campo, com `role="listbox"`, item destacado por teclado
 * e vazio explicito.
 *
 * Antes o resultado da busca saia como uma fileira de `.acs-chip` solta embaixo
 * do campo. Chip e para valor JA escolhido (o filtro que voce aplicou), nunca
 * para resultado: a fileira nao tem comeco nem fim visiveis, quebra em varias
 * linhas conforme o nome, nao responde a seta nem a Enter, e mistura o resultado
 * com os atalhos de busca que ficam logo acima.
 */

.acs-combo { position: relative; }

.acs-combo-popup {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--acs-surface);
  border: 1px solid var(--acs-line-2);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.acs-combo-lista {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* rolar a lista nao rola o painel atras */
}

.acs-combo-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 38px;               /* alvo de toque confortavel */
}

.acs-combo-item:hover { background: var(--acs-bg-soft); }
.acs-combo-item.is-ativo { background: var(--acs-obj-bg); }
.acs-combo-item-tt { font-size: 0.875rem; font-weight: 500; color: var(--acs-ink); }

/* Terceiro slot: a PROCEDENCIA do item (caminho da tela, tipo da entidade), nunca
   a descricao. Encosta na direita para o olho varrer a lista por uma coluna so. */
.acs-combo-item-sub {
  font-size: 0.78rem;
  color: var(--acs-ink-3);
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52%;
}

.acs-combo-vazio {
  padding: 14px 10px;
  font-size: 0.8125rem;
  color: var(--acs-ink-3);
  text-align: center;
}

/* Lupa em SVG. O '⌕' que estava aqui e caractere de texto: muda de tamanho, de
   peso e de linha de base conforme a fonte que o sistema resolve. */
.acs-search-ic { flex: none; width: 16px; height: 16px; color: var(--acs-ink-4); }

/* Cartao que so hospeda o campo de busca. */
.acs-card--search { padding: 16px; }
.acs-mirror-search { margin-top: auto; padding-top: 9px; }

/* .acs-card corta o proprio conteudo para arredondar a ultima linha da lista, e
   isso engolia a lista do combobox inteira. Onde existe combobox o corte sai; o
   cartao de busca nao tem linha encostando na borda, entao nao perde nada. */
.acs-card:has(.acs-combo) { overflow: visible; }

/* ── estados vazios e esqueleto ───────────────────────────────────────────── */

.acs-empty {
  background: var(--acs-surface);
  border: 1px dashed var(--acs-line-2);
  border-radius: var(--acs-radius);
  padding: 44px 32px;
  text-align: center;
}

.acs-empty--tight { border-style: solid; border-color: var(--acs-line); padding: 36px 28px; }
.acs-empty-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.acs-empty-body {
  font-size: 0.875rem;
  color: var(--acs-ink-2);
  max-width: 520px;
  margin: 6px auto 0;
  line-height: 1.5;
}

.acs-skel-row {
  padding: 13px 16px;
  border-bottom: 1px solid var(--acs-line-3);
  display: flex;
  gap: 14px;
  align-items: center;
  animation: acs-shimmer 1.2s ease-in-out infinite;
}

.acs-skel { height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--line-strong) 46%, var(--bg-surface)); }
.acs-skel--soft { background: color-mix(in srgb, var(--line-strong) 26%, var(--bg-surface)); }
.acs-skel--faint { background: color-mix(in srgb, var(--line-strong) 16%, var(--bg-surface)); height: 10px; width: 120px; }

@keyframes acs-shimmer {
  0% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .acs-skel-row { animation: none; }
}

/* ── entrada escalonada ─────────────────────────────────────────────────────
 * Emprestado de .req-seg-pessoa.is-entrando: a lista entra em cascata, e isso diz
 * "isto chegou agora" sem nenhum custo de JS por linha.
 *
 * O sinal e .is-fresco no painel, ligado so quando um CARREGAMENTO termina. Sem
 * esse cuidado a animacao reiniciaria a cada tecla, porque esta view redesenha o
 * painel inteiro por innerHTML a cada mudanca de estado, e lista que pisca
 * enquanto se digita e pior que lista nenhuma.
 *
 * O atraso vem de :nth-child e nao de style="animation-delay" inline (como na
 * Requisicao): la o indice sai do JS que ja monta a linha; aqui o arquivo acabou
 * de sair de 100 atributos style= para 2, e o atraso e constante de desenho, nao
 * dado.
 *
 * `both` segura o quadro inicial, e o `to` do keyframe deixa tudo visivel: se a
 * animacao nao rodar, nada fica escondido.
 */
@keyframes acsEntra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.is-fresco .acs-result,
.is-fresco .acs-queue-row,
.is-fresco .acs-trow,
.is-fresco .acs-kpi,
.is-fresco .acs-count,
.is-fresco .acs-chain-item,
.is-fresco .acs-side-item { animation: acsEntra 240ms ease-out both; }

/* So os 6 primeiros escalonam. Abaixo disso o atraso nao se percebe, e numa
   tabela de 180 telas esperar a ultima linha seria pior que nao animar. */
.is-fresco .acs-result:nth-child(2),
.is-fresco .acs-queue-row:nth-child(2),
.is-fresco .acs-trow:nth-child(2),
.is-fresco .acs-kpi:nth-child(2),
.is-fresco .acs-chain-item:nth-child(2),
.is-fresco .acs-side-item:nth-child(2) { animation-delay: 45ms; }
.is-fresco .acs-result:nth-child(3),
.is-fresco .acs-queue-row:nth-child(3),
.is-fresco .acs-trow:nth-child(3),
.is-fresco .acs-kpi:nth-child(3),
.is-fresco .acs-chain-item:nth-child(3),
.is-fresco .acs-side-item:nth-child(3) { animation-delay: 90ms; }
.is-fresco .acs-result:nth-child(4),
.is-fresco .acs-queue-row:nth-child(4),
.is-fresco .acs-trow:nth-child(4),
.is-fresco .acs-kpi:nth-child(4),
.is-fresco .acs-chain-item:nth-child(4),
.is-fresco .acs-side-item:nth-child(4) { animation-delay: 135ms; }
.is-fresco .acs-result:nth-child(5),
.is-fresco .acs-queue-row:nth-child(5),
.is-fresco .acs-trow:nth-child(5),
.is-fresco .acs-kpi:nth-child(5),
.is-fresco .acs-chain-item:nth-child(5),
.is-fresco .acs-side-item:nth-child(5) { animation-delay: 180ms; }
.is-fresco .acs-result:nth-child(6),
.is-fresco .acs-queue-row:nth-child(6),
.is-fresco .acs-trow:nth-child(6),
.is-fresco .acs-kpi:nth-child(6),
.is-fresco .acs-chain-item:nth-child(6),
.is-fresco .acs-side-item:nth-child(6) { animation-delay: 225ms; }
.is-fresco .acs-result:nth-child(7),
.is-fresco .acs-queue-row:nth-child(7),
.is-fresco .acs-trow:nth-child(7),
.is-fresco .acs-kpi:nth-child(7),
.is-fresco .acs-chain-item:nth-child(7),
.is-fresco .acs-side-item:nth-child(7) { animation-delay: 270ms; }

/* Desligar tem de vir DEPOIS de ligar: @media nao soma especificidade, entao
   quem decide entre as duas regras e a ordem no arquivo. */
@media (prefers-reduced-motion: reduce) {
  .is-fresco .acs-result,
  .is-fresco .acs-queue-row,
  .is-fresco .acs-trow,
  .is-fresco .acs-kpi,
.is-fresco .acs-count,
  .is-fresco .acs-chain-item,
  .is-fresco .acs-side-item { animation: none; }
}

/* ── contadores que filtram ─────────────────────────────────────────────────
 * Molde de .req-alm-count: numero em mono, rotulo minusculo em caps, e o proprio
 * contador e o filtro. Duas diferencas deliberadas em relacao ao original:
 *
 *  1. Deitado, nao empilhado. La eles sao a barra principal da fila e ocupam a
 *     largura toda; aqui moram no cabecalho do card, ao lado do titulo.
 *  2. Aceso pinta com a COR DO ESTADO, nao com a marca. Verde, ambar e vermelho
 *     ja significam alguma coisa nesta tela (a barra da linha usa os mesmos), e
 *     preencher tudo de azul jogaria fora essa leitura.
 */
.acs-counts { display: flex; gap: 6px; flex-wrap: wrap; }

.acs-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--acs-line-2);
  background: var(--acs-surface);
  color: var(--acs-ink-3);
  font: inherit;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.acs-count b {
  font-family: var(--acs-mono);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--acs-ink);
}

.acs-count span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acs-count:hover:not(.is-on):not([disabled]) { border-color: var(--acs-ink-4); }

/* Zero nao e clicavel: filtrar para um recorte vazio e um beco, e o disabled diz
   isso antes do clique em vez de depois. */
.acs-count[disabled] { opacity: 0.5; cursor: default; }

.acs-count.is-on { color: #fff; }
.acs-count.is-on b { color: #fff; }
.acs-count.is-ok.is-on { background: var(--acs-ok); border-color: var(--acs-ok); }
.acs-count.is-warn.is-on { background: var(--acs-warn-strong); border-color: var(--acs-warn-strong); }
.acs-count.is-err.is-on { background: var(--acs-err); border-color: var(--acs-err); }

/* ── saida do estado vazio ──────────────────────────────────────────────────
 * Molde de .req-state-actions: tela vazia sem acao e um beco sem saida, e quem
 * chega num filtro que nao devolve nada nem sempre lembra qual filtro ligou. */
.acs-empty-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.acs-empty-acts .acs-btn { background: var(--acs-surface); border-color: var(--acs-line-2); color: var(--acs-ink-2); }
.acs-empty-acts .acs-btn:hover { border-color: var(--acs-brand); color: var(--acs-brand); }

/* ── resultados da busca ──────────────────────────────────────────────────── */

.acs-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--acs-line-3);
  border-left: 3px solid transparent;
  background: var(--acs-surface);
  cursor: pointer;
  font: inherit;
}

.acs-result:hover { background: var(--acs-bg-soft); }
.acs-result.is-selected { background: rgba(99, 102, 241, 0.06); border-left-color: var(--acs-obj); }

.acs-result-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.acs-code {
  font-family: var(--acs-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acs-obj-ink);
  background: var(--acs-obj-bg);
  padding: 2px 7px;
  border-radius: 6px;
}

.acs-code--lg { font-size: 0.875rem; padding: 3px 8px; }
.acs-result-name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.acs-tech { font-family: var(--acs-mono); font-size: 0.72rem; color: var(--acs-ink-4); margin-top: 5px; }

.acs-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--acs-ink-3);
}

.acs-crumbs .acs-crumb-last { color: var(--acs-ink); font-weight: 600; }

/* ── selos ────────────────────────────────────────────────────────────────── */

.acs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  /* Selo tem a largura da palavra, nao a da coluna. Como filho direto de um grid
     ele herdaria `justify-self: stretch` e viraria uma faixa de 132px para caber
     "aplicado", que le como barra de progresso em vez de etiqueta. */
  justify-self: start;
}

.acs-pill--ok { background: var(--acs-ok-bg); color: var(--acs-ok-ink); }
.acs-pill--warn { background: var(--acs-warn-bg); color: var(--acs-warn-ink); }
.acs-pill--obj { background: var(--acs-obj-bg); color: var(--acs-obj-ink); }
.acs-pill--err { background: color-mix(in srgb, var(--danger-500) 10%, var(--bg-surface)); color: var(--acs-err); }
.acs-pill--neutral { background: color-mix(in srgb, var(--line-strong) 26%, var(--bg-surface)); color: var(--acs-ink-2); }
.acs-pill--tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 7px; }
.acs-pill-count { font-family: var(--acs-mono); font-weight: 500; color: var(--acs-ok); }

/* Quadradinho de direito: C/I/A/E, apagado quando o direito não existe. */
.acs-rights { display: inline-flex; gap: 3px; }

.acs-right {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--acs-mono);
  background: var(--acs-bg-soft);
  color: var(--acs-ink-4);
  border: 1px solid var(--acs-line-2);
}

.acs-right.is-on { background: var(--acs-obj-bg); color: var(--acs-obj-ink); border-color: var(--acs-obj-line); }

/* ── formulário do pedido ─────────────────────────────────────────────────── */

.acs-sel-head {
  padding: 16px;
  border-bottom: 1px solid var(--acs-line);
  background: linear-gradient(160deg, var(--acs-surface) 0%, var(--acs-bg-soft) 100%);
}

.acs-sel-path { margin-top: 6px; font-size: 0.8125rem; color: var(--acs-ink-2); }
.acs-sel-body { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.acs-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acs-field-hint { font-size: 0.75rem; color: var(--acs-ink-3); }

.acs-right-options { display: flex; gap: 8px; flex-wrap: wrap; }

.acs-right-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: var(--acs-surface);
  cursor: pointer;
  min-width: 112px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--acs-ink-2);
}

.acs-right-option:hover { border-color: rgba(15, 23, 42, 0.28); }
.acs-right-option.is-on {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
  font-weight: 600;
  color: var(--acs-ink);
}
.acs-right-option[disabled] { opacity: 0.55; cursor: not-allowed; }

.acs-box {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 4px;
  border: 1.5px solid rgba(15, 23, 42, 0.24);
  background: var(--acs-surface);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
}

/* O visto e o mesmo SVG do degrau que decide no stepper: uma marca desenhada
   cresce junto com a caixa e nao depende da fonte instalada, ao contrario do
   caractere U+2713, que muda de peso e de altura de maquina para maquina. */
.acs-box svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acs-right-option.is-on .acs-box { border-color: var(--acs-obj); background: var(--acs-obj); }
.acs-mirror-row.is-on .acs-box { border-color: var(--acs-ok); background: var(--acs-ok); }

.acessos-view textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 10px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--acs-ink);
  outline: none;
  background: var(--acs-surface);
}

.acessos-view textarea:focus { border-color: var(--acs-brand); }

.acs-note {
  border: 1px solid var(--acs-obj-line);
  background: rgba(99, 102, 241, 0.06);
  border-radius: 12px;
  padding: 13px 15px;
}

.acs-note--warn { border-color: var(--acs-warn-line); background: color-mix(in srgb, var(--warning-500) 9%, var(--bg-surface)); }
.acs-note-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acs-obj-ink); }
.acs-note--warn .acs-note-title { color: var(--acs-warn-ink); }
.acs-note-body { font-size: 0.8125rem; color: var(--acs-ink-2); margin-top: 6px; line-height: 1.5; }

/* ── cadeia de decisão ────────────────────────────────────────────────────── */

.acs-chain { display: flex; flex-direction: column; margin-top: 10px; }
.acs-chain-item { display: flex; gap: 10px; align-items: flex-start; }
.acs-chain-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 26px; }

/* Circulo de degrau, no molde de .compras-approval-step-circle: o numero diz em
   que altura da hierarquia o pedido esta, e o visto substitui o numero em quem
   decide. Um ponto de 6px nao conseguia carregar nenhuma dessas duas coisas. */
.acs-chain-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  border: 2px solid var(--acs-line-2);
  background: var(--acs-surface);
  color: var(--acs-ink-4);
  font-family: var(--acs-mono);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.acs-chain-dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Quem decide e o destino, entao ganha o unico preenchimento solido e um halo.
   Quem foi pulado fica indigo vazado: participou do caminho, nao e falha. */
.acs-chain-item.is-decider .acs-chain-dot {
  background: var(--acs-ok);
  border-color: var(--acs-ok);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acs-ok) 18%, transparent);
}

.acs-chain-item.is-skip .acs-chain-dot { border-color: var(--acs-obj); color: var(--acs-obj-ink); }

/* Ponto de partida: circulo cheio e pequeno, sem numero. Diz "a contagem comeca
   aqui" sem disputar atencao com os degraus, que sao a informacao. */
.acs-chain-item.is-origem .acs-chain-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--acs-ink-4);
}

/* Posto sem ocupante nao e um degrau real, e sim um vazio que o pedido atravessa.
   Borda tracejada: mesma ideia da hachura da .req-alm-row, o incerto nao ganha
   traco cheio. */
.acs-chain-item.is-vago .acs-chain-dot { border-style: dashed; }

.acs-chain-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  margin: 3px 0;
  border-radius: 1px;
  background: var(--acs-line-2);
}

.acs-chain-item:last-child .acs-chain-line { background: transparent; min-height: 0; }

/* O trecho que chega em quem decide fica verde: a linha deixa de ser enfeite e
   passa a contar a historia da tela, que o pedido SOBE ate achar quem ja tem. */
.acs-chain-item:has(+ .acs-chain-item.is-decider) .acs-chain-line { background: var(--acs-ok); }
.acs-chain-body { padding-bottom: 12px; min-width: 0; }
.acs-chain-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.875rem; font-weight: 600; }
.acs-chain-role { font-size: 0.75rem; color: var(--acs-ink-3); }

.acs-chain-note {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--acs-ink-2);
  line-height: 1.45;
  border-left: 2px solid var(--acs-line-2);
  padding-left: 8px;
}

.acs-parent-line { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; padding: 7px 10px; }
.acs-parent-line + .acs-parent-line { margin-top: 4px; }
.acs-parent-line--boxed { background: color-mix(in srgb, var(--warning-500) 9%, var(--bg-surface)); border-radius: 8px; }
.acs-parent-tag { font-family: var(--acs-mono); font-size: 0.7rem; font-weight: 600; color: var(--acs-warn-ink); }
.acs-parent-level { font-size: 0.72rem; color: var(--acs-ink-3); }

/* ── botões ───────────────────────────────────────────────────────────────── */

.acs-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.acs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease;
}

.acs-btn--primary {
  background: linear-gradient(180deg, var(--acs-brand) 0%, var(--acs-brand-2) 100%);
  color: #fff;
  box-shadow: var(--acs-shadow);
}

.acs-btn--primary:hover { filter: brightness(1.06); }
.acs-btn--primary:active { transform: translateY(1px); }

.acs-btn--ghost { background: transparent; border-color: var(--acs-line); color: var(--acs-ink); }
.acs-btn--ghost:hover { background: var(--acs-bg-soft); }

.acs-btn--danger { background: var(--acs-surface); border-color: var(--acs-err-line); color: var(--acs-err); }
.acs-btn--danger:hover { background: rgba(239, 68, 68, 0.06); }

.acs-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }

.acs-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--acs-brand);
  cursor: pointer;
  justify-self: start;
}

.acs-link:hover { text-decoration: underline; }
.acs-link--danger { color: var(--acs-err); }

/* ── fila de decisão ──────────────────────────────────────────────────────── */

.acs-queue-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--acs-line-3);
  border-left: 3px solid transparent;
  background: var(--acs-surface);
  cursor: pointer;
  font: inherit;
}

.acs-queue-row:hover { background: var(--acs-bg-soft); }
.acs-queue-row.is-selected { background: rgba(99, 102, 241, 0.06); border-left-color: var(--acs-obj); }
.acs-queue-top { display: flex; align-items: center; gap: 8px; }
.acs-queue-who { font-size: 0.875rem; font-weight: 600; }
.acs-queue-age { font-size: 0.72rem; color: var(--acs-ink-4); }
.acs-queue-menu { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acs-queue-code { font-family: var(--acs-mono); font-size: 0.75rem; font-weight: 600; color: var(--acs-obj-ink); }
/* `display: block` NAO E COSMETICO: span nasce inline, e em caixa inline nem o
   `margin-top` nem o par overflow/text-overflow valem. O caminho da tela vinha
   sem reticencia e sem respiro, e num telefone ele passava 378px dentro de um
   cartao de 351, cortado pela borda do cartao no meio de uma palavra. */
.acs-queue-path {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--acs-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--acs-line-3);
}

.acs-fact-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acs-ink-2); }
.acs-fact-value { font-size: 0.875rem; font-weight: 600; margin-top: 5px; }
.acs-fact-sub { font-size: 0.78rem; color: var(--acs-ink-3); }
.acs-fact-text { font-size: 0.8125rem; color: var(--acs-ink-2); margin-top: 5px; line-height: 1.45; }

.acs-just {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--acs-bg-soft);
  border: 1px solid var(--acs-line-2);
  border-radius: 10px;
}

.acs-just-body { font-size: 0.875rem; color: var(--acs-ink); margin-top: 6px; line-height: 1.55; }

/* Motivo dentro de um card que ja e um bloco: o recuo do .acs-just inteiro
   empurraria demais numa lista de pedidos. */
.acs-just--sm { margin-top: 10px; padding: 9px 11px; }
.acs-just--sm .acs-just-body { font-size: 0.8125rem; margin-top: 4px; }

/* ── Meus pedidos ───────────────────────────────────────────────────────────
   Uma linha por pedido do proprio solicitante. Nao e tabela: o que importa nao
   sao colunas comparaveis, e sim o par "o que pedi" e "o que aconteceu". */
.acs-meu-pedido {
  padding: 12px 16px;
  border-top: 1px solid var(--acs-line-2);
}
.acs-meu-pedido:first-of-type { border-top: 0; }

.acs-meu-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 0;
}

.acs-alert-head { display: flex; align-items: center; gap: 9px; }

.acs-alert-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--acs-warn-ink);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.acs-alert-title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }

.acs-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--acs-warn-line);
  background: rgba(245, 158, 11, 0.06);
  border-radius: 12px;
  font-size: 0.8125rem;
  color: var(--acs-ink-2);
  line-height: 1.5;
}

.acs-banner--info { border-color: var(--acs-obj-line); background: rgba(99, 102, 241, 0.06); }

/* ── tabelas ──────────────────────────────────────────────────────────────── */

.acs-thead,
.acs-trow {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
}

.acs-thead {
  background: var(--acs-bg-soft);
  border-bottom: 1px solid var(--acs-line-2);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acs-ink-2);
}

.acs-trow {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 20%, transparent);
  font-size: 0.8125rem;
}

/* BARRA DE ESTADO de 4px na borda, no molde de .req-alm-row-bar. A linha inteira
   passa a ter um estado legivel de relance, sem gastar coluna: numa tabela de 180
   telas, procurar a palavra "individual" item a item e o que cansa. */
.acs-trow::before {
  content: '';
  position: absolute;
  left: 0;
  /* Recuo vertical: colada de cima a baixo, a barra de 85 linhas seguidas vira uma
     faixa unica e o olho le "borda da tabela", nao "estado desta linha". Com a
     folga cada linha ganha o proprio marcador, e a hachura do `ambos` passa a ser
     visivel, porque um traco de 4px continuo nao mostra diagonal nenhuma.
     Na Requisicao esse problema nao existe: la as linhas sao cards com gap. */
  top: 7px;
  bottom: 7px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.acs-trow.is-grupo::before { background: var(--acs-ok); }
.acs-trow.is-individual::before { background: var(--acs-warn); }
.acs-trow.is-individual { background: color-mix(in srgb, var(--warning-500) 5%, var(--bg-surface)); }

/* HACHURA = "nao da para afirmar". Copiado de .req-alm-row.is-unknown, e e a
   melhor ideia das telas de Compras e Requisicao: cor chapada afirma, e aqui
   existem dois estados em que afirmar seria mentira.
     - `ambos`: a tela chega por grupo E por concessao individual, entao a
       individual pode ser redundante, ou pode carregar direito que o grupo nao da.
     - trilha `pendente`: o SGU ainda nao respondeu, logo nao ha resultado. */
.acs-trow.is-ambos::before {
  background: repeating-linear-gradient(135deg,
    var(--acs-warn) 0 4px,
    color-mix(in srgb, var(--acs-warn) 28%, transparent) 4px 8px);
}

.acs-trow.is-aplicado::before { background: var(--acs-ok); }
.acs-trow.is-falhou::before { background: var(--acs-err); }

.acs-trow.is-pendente::before {
  background: repeating-linear-gradient(135deg,
    var(--acs-ink-4) 0 4px, transparent 4px 8px);
}
.acs-trow.is-muted { opacity: 0.72; }
.acs-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acs-mono { font-family: var(--acs-mono); font-size: 0.75rem; color: var(--acs-ink-2); }
.acs-sub { font-size: 0.68rem; color: var(--acs-ink-4); margin-top: 3px; }

/* A 1a coluna e o nommnu, e ele chega a 20 caracteres (CONCEITOSINFORMACOES).
   Largura fixa sem ellipsis fazia o codigo invadir o nome da tela. */
.acs-cols-pessoa { grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1.1fr) 170px 108px 84px; }
.acs-cols-contexto { grid-template-columns: 112px minmax(0, 1fr) 150px 108px; }
.acs-cols-espelho { grid-template-columns: 24px 118px minmax(0, 1fr) minmax(0, 1fr) 108px; }
.acs-cols-hist { grid-template-columns: 104px 132px minmax(0, 1fr); align-items: start; }
.acs-cols-trilha { grid-template-columns: 118px 132px minmax(0, 1.2fr) minmax(0, 1fr) 150px; }

/* ── estatísticas ─────────────────────────────────────────────────────────── */

.acs-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.acs-stat-value { font-family: var(--acs-mono); font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.acs-stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acs-ink-3); margin-top: 3px; }
.acs-stat-value--ok { color: var(--acs-ok); }
.acs-stat-value--warn { color: var(--acs-warn-strong); }
.acs-stat-value--obj { color: var(--acs-obj-ink); }

.acs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.acs-kpi { background: var(--acs-surface); border: 1px solid var(--acs-line); border-radius: var(--acs-radius); box-shadow: var(--acs-shadow); padding: 14px 16px; }
.acs-kpi-value { font-family: var(--acs-mono); font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin-top: 6px; }
.acs-kpi-sub { font-size: 0.78rem; color: var(--acs-ink-2); margin-top: 2px; }

/* ── espelhar ─────────────────────────────────────────────────────────────── */

.acs-mirror-heads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  gap: 14px;
  /* stretch, nao center: escolher a origem faz aquele lado crescer, e centrado o
     campo do destino subia sozinho. Os dois campos precisam ficar na mesma linha,
     porque e a comparacao lado a lado que da sentido a tela. */
  align-items: stretch;
}

.acs-mirror-side {
  border: 1px solid var(--acs-line-2);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--acs-bg-soft);
  display: flex;
  flex-direction: column;
}
.acs-mirror-side--to { border-color: var(--acs-obj-line); background: rgba(99, 102, 241, 0.06); }
.acs-mirror-arrow { display: grid; place-items: center; color: var(--acs-ink-4); }
.acs-mirror-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acs-mirror-person { display: flex; align-items: center; gap: 11px; margin-top: 9px; }
.acs-mirror-name { font-size: 1rem; font-weight: 600; }
.acs-mirror-role { font-size: 0.78rem; color: var(--acs-ink-3); }

.acs-mirror-row { cursor: pointer; background: var(--acs-surface); border: 0; width: 100%; text-align: left; font: inherit; }
.acs-mirror-row:hover { background: var(--acs-bg-soft); }
.acs-mirror-row.is-on { background: rgba(16, 185, 129, 0.04); }
.acs-mirror-row:not(.is-on) .acs-mirror-desc { color: var(--acs-ink-4); }

.acs-section-label {
  padding: 11px 16px;
  background: var(--acs-bg-soft);
  border-top: 1px solid var(--acs-line);
  border-bottom: 1px solid var(--acs-line);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acs-ink-2);
}

.acs-section-label--ok { background: var(--acs-ok-bg); color: var(--acs-ok-ink); border-top: 0; }

/* FAIXA DE AREA na lista de telas de uma pessoa. E o mesmo desenho da faixa de secao,
   mas clicavel: sem isso, um inventario de 226 telas chega como parede de texto e
   ninguem acha onde Suprimentos termina e Manufatura comeca.
   `disabled` quando a lista e pequena: ali tudo ja esta aberto, e um cabecalho que
   parece clicavel e nao faz nada e pior que um cabecalho quieto. */
.acs-area-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--acs-line);
  border-bottom: 1px solid var(--acs-line);
  background: var(--acs-bg-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acs-ink-2);
  cursor: pointer;
  text-align: left;
}

.acs-area-head:not([disabled]):hover { background: var(--acs-bg-mute, var(--acs-bg-soft)); color: var(--acs-ink); }
.acs-area-head[disabled] { cursor: default; }
.acs-area-head[disabled] .acs-tree-caret { visibility: hidden; }

.acs-area-name { letter-spacing: 0.08em; }

/* A contagem e numero, entao vai em mono e tabular: assim as areas alinham a virgula
   do olho uma debaixo da outra e da para comparar volume sem ler. */
.acs-area-count {
  font-family: var(--acs-mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--acs-ink-3);
  letter-spacing: 0;
}

/* Codigo de tela extraido do nome tecnico: e o que o chamado cita, entao ganha o
   peso da coluna. O nome inteiro continua no title. */
.acs-cod { font-weight: 700; color: var(--acs-ink); }

/* Faixa de secao que tambem carrega um controle (marcar/desmarcar todas). */
.acs-section-label--row { display: flex; align-items: center; gap: 10px; }

/* Botao de texto: e uma acao de apoio, e dar a ele a caixa de um botao de verdade
   fazia duas acoes disputarem o mesmo peso dentro da faixa. */
.acs-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--acs-brand);
  cursor: pointer;
  text-transform: uppercase;
}

.acs-linkbtn:hover { text-decoration: underline; }

/* PE DA LISTA. A acao mora onde a revisao termina: com 26 linhas de caixa de
   marcacao, um botao so no topo obriga a rolar de volta para agir sobre o que
   acabou de ser decidido embaixo. O resumo ao lado repete a contagem porque o
   numero do topo ja saiu da tela nesse ponto. */
.acs-rowfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--acs-bg-soft);
  border-bottom: 1px solid var(--acs-line-2);
}

.acs-rowfoot-sub { font-size: 0.8125rem; color: var(--acs-ink-2); }
.acs-rowfoot .acs-btn { margin-left: auto; }

/* LEGENDA das letras. Fica na barra do diff, acima das duas listas, porque as
   duas usam a mesma coluna de direitos e repetir a legenda em cada uma seria
   ruido. Os quadradinhos aqui saem sempre acesos: sao amostra, nao estado. */
.acs-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--acs-ink-3);
}

.acs-legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* A legenda encosta na borda direita do cartao quando empurrada por um spacer.
   O respiro aqui e o mesmo padding lateral das linhas da tabela, entao ela alinha
   com a coluna de direitos em vez de flutuar colada no canto. */
.acs-legend { margin-right: 16px; }
.acs-legend .acs-right { width: 18px; height: 18px; font-size: 0.6rem; }

/* Rotulo que existe so para leitor de tela: a coluna da caixa de marcacao nao
   pode ficar sem nome no cabecalho, mas escrever "MARCADA" ali encheria 24px.
   Vai SEMPRE dentro de um span vazio, nunca como filho direto do grid: sendo
   `position: absolute` ele sai do fluxo, a grade perde uma coluna e o cabecalho
   inteiro desanda uma casa para a esquerda. */
.acs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── modais (conteúdo injetado em ui.dialog.confirm) ──────────────────────── */

.acs-modal-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.acs-modal-col { border: 1px solid var(--acs-line-2); border-radius: 12px; overflow: hidden; }
.acs-modal-col--after { border-color: rgba(16, 185, 129, 0.35); }

.acs-modal-col-head {
  padding: 9px 13px;
  background: var(--acs-bg-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acs-ink-2);
  border-bottom: 1px solid var(--acs-line-2);
}

.acs-modal-col--after .acs-modal-col-head {
  background: rgba(16, 185, 129, 0.08);
  color: var(--acs-ok-ink);
  border-bottom-color: rgba(16, 185, 129, 0.25);
}

.acs-modal-line { display: flex; align-items: center; gap: 9px; padding: 7px 13px; }
.acs-modal-line--add { background: rgba(16, 185, 129, 0.06); }
.acs-modal-line--parent { background: rgba(245, 158, 11, 0.06); }
.acs-modal-line--remove { background: rgba(239, 68, 68, 0.06); }
.acs-modal-tag { font-family: var(--acs-mono); font-size: 0.7rem; color: var(--acs-ink-4); flex: 0 0 auto; }
.acs-modal-line--add .acs-modal-tag { color: var(--acs-ok-ink); font-weight: 600; }
.acs-modal-line--parent .acs-modal-tag { color: var(--acs-warn-ink); font-weight: 600; }
.acs-modal-line--remove .acs-modal-tag { color: var(--acs-err); font-weight: 600; }
.acs-modal-text { font-size: 0.8125rem; color: var(--acs-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acs-modal-line--add .acs-modal-text,
.acs-modal-line--parent .acs-modal-text { color: var(--acs-ink); font-weight: 500; }
.acs-modal-note { font-size: 0.78rem; color: var(--acs-ink-3); line-height: 1.5; }
.acs-modal-stack { display: flex; flex-direction: column; gap: 16px; text-align: left; }

/* ── responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .acs-grid-split,
  .acs-grid-split--wide { grid-template-columns: minmax(0, 1fr); }
  .acs-sel-body { grid-template-columns: minmax(0, 1fr); }
  .acs-two-col { grid-template-columns: minmax(0, 1fr); }
  .acs-tree { max-height: 320px; }
  .acs-cols-pessoa { grid-template-columns: 104px minmax(0, 1fr) 150px 108px; }
  .acs-cols-pessoa > :nth-child(3) { display: none; }
  .acs-cols-trilha { grid-template-columns: 110px 120px minmax(0, 1fr) minmax(0, 1fr); }
  .acs-cols-trilha > :nth-child(5) { display: none; }
}

@media (max-width: 820px) {
  .acs-mirror-heads { grid-template-columns: minmax(0, 1fr); }
  .acs-mirror-arrow { transform: rotate(90deg); }
  .acs-modal-diff { grid-template-columns: minmax(0, 1fr); }
  .acs-cols-espelho { grid-template-columns: 24px 90px minmax(0, 1fr) 96px; }
  .acs-cols-espelho > :nth-child(4) { display: none; }
}

/* ── telefone ───────────────────────────────────────────────────────────────
 * A view nao tinha corte abaixo de 820px, e num aparelho de 375px o cabecalho se
 * desmontava: `.acs-grow` encolhe ate zero, entao a pilula "Voce e <nome>" ficava
 * na mesma linha e o titulo saia quebrado uma palavra por linha ("Telas / da /
 * Senior"), com o nome cortado. Aqui a pilula desce para a linha dela.
 */
@media (max-width: 640px) {
  .acs-top { padding: 12px 14px 0; gap: 10px; min-width: 0; }
  .acs-top-row { gap: 12px; align-items: center; }

  /* Tile e texto dividem a primeira linha; a persona ocupa a segunda inteira, que
     e a unica largura onde um nome completo cabe sem corte. */
  .acs-top-icon { width: 38px; height: 38px; border-radius: 11px; }
  .acs-top-icon svg { width: 20px; height: 20px; }
  .acs-grow { flex: 1 1 auto; }
  .acs-persona { order: 3; flex: 1 0 100%; min-width: 0; }
  .acs-persona > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acs-title { font-size: 1.125rem; }
  .acs-kicker { font-size: 0.66rem; letter-spacing: 0.06em; }
  .acs-top-facts { font-size: 0.75rem; }

  /* FAIXA ROLAVEL EM VEZ DE TRES FILEIRAS. Cinco capsulas empilhadas comem quase
     um terco da altura util do aparelho antes de o conteudo comecar. O molde e o
     de .cht-colchips na Central de Chamados: uma linha so, rolando na horizontal,
     sangrando ate a borda do cartao para a capsula cortada avisar que ha mais. */
  .acs-tabs {
    flex-wrap: nowrap;
    /* `min-width: 0` E A LINHA QUE FAZ A FAIXA ROLAR. Sem ela o item flex mantem
       largura minima de conteudo, o `overflow-x` nunca entra em acao e quem cresce
       e o CARTAO: medido em 760px dentro de uma janela de 375, com o excedente
       cortado por um ancestral e inalcancavel pelo dedo. */
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 14px;
  }
  .acs-tabs::-webkit-scrollbar { display: none; }
  /* Altura maior que os 40px do desenho: numa faixa que rola, o dedo precisa de
     area para tocar sem arrastar a faixa junto. */
  .acs-nav-tab { flex: 0 0 auto; padding: 0 14px; min-height: 44px; }

  /* TABELA VIRA FICHA. As grades sao dimensionadas para o desktop, e num aparelho de
   * 375px a coluna flexivel fecha em ZERO: medido em .acs-cols-pessoa, as colunas
   * saiam 104px / 0px / 150px / 108px, ou seja o NOME DA TELA, que e o conteudo da
   * linha, sumia inteiro enquanto "Origem" e "Direitos" ficavam com 258px. Em
   * .acs-cols-trilha o mesmo efeito dava 26px para tela e para pessoa.
   *
   * Em vez de espremer mais, a linha deixa de ser linha: vira ficha de duas faixas,
   * identificacao em cima (codigo a esquerda, direito/estado a direita) e o texto
   * longo embaixo, na largura toda. Cabecalho de coluna nao descreve mais nada
   * nesse formato, entao sai.
   */
  .acs-thead { display: none; }

  .acs-trow {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 11px 14px;
  }

  /* Pilula e selo nao esticam: como item de grade eles seriam blocados e ocupariam
     a faixa inteira, o que le como botao. */
  .acs-trow .acs-pill { justify-self: start; }

  /* pessoa: codigo + direitos / nome da tela / origem */
  .acs-cols-pessoa > :nth-child(1) { order: 1; }
  .acs-cols-pessoa > :nth-child(5) { order: 2; justify-self: end; }
  .acs-cols-pessoa > :nth-child(2) { order: 3; grid-column: 1 / -1; }
  .acs-cols-pessoa > :nth-child(4) { order: 4; grid-column: 1 / -1; }
  /* Rotulo "individual" repetido: a propria linha de origem ja diz isso por extenso. */
  .acs-cols-pessoa > :nth-child(6) { display: none; }

  /* contexto (o que a pessoa ja enxerga, dentro do pedido) */
  .acs-cols-contexto > :nth-child(1) { order: 1; }
  .acs-cols-contexto > :nth-child(4) { order: 2; justify-self: end; }
  .acs-cols-contexto > :nth-child(2) { order: 3; grid-column: 1 / -1; }
  .acs-cols-contexto > :nth-child(3) { order: 4; grid-column: 1 / -1; }

  /* historico da pessoa: quando + origem / o que aconteceu */
  .acs-cols-hist > :nth-child(1) { order: 1; }
  .acs-cols-hist > :nth-child(2) { order: 2; justify-self: end; }
  .acs-cols-hist > :nth-child(3) { order: 3; grid-column: 1 / -1; }

  /* trilha da auditoria: quando + resultado / objeto / pessoa */
  .acs-cols-trilha > :nth-child(1) { order: 1; }
  .acs-cols-trilha > :nth-child(2) { order: 2; justify-self: end; }
  .acs-cols-trilha > :nth-child(3) { order: 3; grid-column: 1 / -1; }
  .acs-cols-trilha > :nth-child(4) { order: 4; grid-column: 1 / -1; }

  /* espelhar: a caixa de marcacao segura a primeira coluna, e o nome da tela desce
     alinhado ao codigo, nao a caixa, para a marcacao continuar sendo o primeiro
     elemento que o olho encontra. */
  .acs-cols-espelho { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .acs-cols-espelho > :nth-child(1) { order: 1; }
  .acs-cols-espelho > :nth-child(2) { order: 2; }
  .acs-cols-espelho > :nth-child(5) { order: 3; justify-self: end; }
  .acs-cols-espelho > :nth-child(3) { order: 4; grid-column: 2 / -1; }

  /* ACAO DESCE PARA A LINHA DELA. `.acs-top-row` ja quebra linha, mas `.acs-grow`
   * tem `flex: 1` com `min-width: 0`, entao ele encolhe em vez de empurrar o par
   * de botoes para baixo: medido em 117px no cartao do pedido, com o caminho da
   * tela saindo uma palavra por linha ao lado de "Aprovar" e "Recusar".
   * Na largura toda os dois botoes tambem passam a ter area de toque de verdade. */
  .acs-top-row > .acs-actions { flex: 1 0 100%; }
  .acs-top-row > .acs-actions .acs-btn { flex: 1 1 0; justify-content: center; }
}

/* Linha clicável é <button>, e botão sem classe nasce branco pelo padrão global
   do portal: cada linha precisa reafirmar a cor do texto, senão o conteúdo que
   não define cor própria (nome do solicitante, descrição da tela) some no fundo. */
.acs-result,
.acs-queue-row,
.acs-tree-row,
.acs-trow {
  color: var(--acs-ink);
}

/* O .acs-banner base ja nasce ambar (alerta). A variante danger existe so para a
   fila de aplicacao com item falho, que e o unico estado que pede acao imediata. */
.acs-banner--danger { border-color: var(--acs-err-line); background: rgba(239, 68, 68, 0.06); }

/* ── composicao: o que era style= inline ────────────────────────────────────
 * Esta view nasceu com 100 atributos style=, contra 3 em compras.js (8.029
 * linhas) e 19 em requisicoes.js (12.311). Regra nenhuma podia ser achada,
 * mudada em um lugar so, ou lida no diff. Aqui elas viram classe, como no
 * resto do portal. Sobraram inline apenas as duas genuinamente dinamicas: a
 * largura do esqueleto e o recuo por nivel da arvore.
 */
/* NUMERO NAO DANCA. Toda a view redesenha por innerHTML, entao sem `tabular-nums`
   a largura de cada digito muda de um render para o outro e a coluna treme (o "1"
   e mais estreito que o "8" na IBM Plex Mono). E o mesmo `font-variant-numeric`
   de .req-alm-row-num e .req-alm-count b. */
.acs-stat-value,
.acs-kpi-value,
.acs-code,
.acs-mono,
.acs-pill-count,
.acs-tab-badge,
.acs-chain-dot,
.acs-tree-meta { font-variant-numeric: tabular-nums; }

/* SELO COM ICONE, como .req-alm-seal: um estado curto em caps le mais rapido com
   uma forma ao lado do que so com a cor, e cor sozinha nao chega em quem nao a
   distingue. */
.acs-pill--tag svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.acs-grow { min-width: 0; flex: 1; }
.acs-cell { min-width: 0; }
.acs-flush { margin: 0; }
.acs-emph { font-weight: 500; }
.acs-ink-2 { color: var(--acs-ink-2); }
.acs-ink-4 { color: var(--acs-ink-4); }
/* texto secundario miudo: caminho da tela, autor, "Sem grupo." */
.acs-dim { font-size: 0.78rem; color: var(--acs-ink-3); }
.acs-dim--faint { color: var(--acs-ink-4); }
.acs-meta { font-size: 0.75rem; color: var(--acs-ink-3); }

.acs-skel--code { width: 74px; }
.acs-skel-note { padding: 10px 16px; font-size: 0.75rem; color: var(--acs-ink-3); }

.acs-modal-lines { padding: 6px 0; }

/* Resumo compacto do roteamento (usado no card do pedido, nao no stepper).
   Chamava-se .acs-chain e COLIDIA com o stepper de "Para quem vai este pedido":
   o `gap: 7px` daqui vencia por ordem no arquivo e abria buracos entre os
   degraus, cortando a linha que liga um degrau ao outro. */
.acs-chain-resumo { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.acs-chain-resumo-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.acs-chain-resumo-post { font-size: 0.8125rem; font-weight: 600; }

.acs-persona-name { color: var(--acs-ink); font-weight: 600; }
.acs-tree-hint { padding: 22px 16px; font-size: 0.8125rem; color: var(--acs-ink-3); line-height: 1.5; }

.acs-result-head--titulo { margin-top: 6px; }
.acs-result-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.acs-warn-strong { color: var(--acs-warn-strong); }

.acs-parent-list { margin-top: 8px; }
.acs-parent-list--lg { margin-top: 12px; }
.acs-rights-row { margin-top: 8px; }

.acs-card--sticky { position: sticky; top: 16px; }
.acs-card-head--stack { display: block; }
.acs-card-head--tabs { padding: 0; }
.acs-tab--sub { padding: 11px 15px; }

.acs-queue-name { font-size: 0.8125rem; }
.acs-queue-esc { margin-top: 7px; }

.acs-empty-box { padding: 40px 24px; text-align: center; }
.acs-empty-box--lg { padding: 48px 24px; }
.acs-empty-box--sm { padding: 36px 24px; }
.acs-empty-title--sm { font-size: 0.9375rem; }
.acs-list-empty { padding: 26px 16px; font-size: 0.8125rem; color: var(--acs-ink-3); }
.acs-list-empty--tight { padding: 18px 16px; }

.acs-facts-pills { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.acs-group-strip {
  display: flex;
  gap: 7px;
  padding: 11px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--acs-line-3);
}
.acs-group-pills { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; }

.acs-pill--fill { max-width: 100%; }
.acs-sub--err { color: var(--acs-err); }
.acs-sub--foot { padding: 11px 15px; border-top: 1px solid var(--acs-line); }
.acs-fact-sub--tight { margin-top: 3px; }
.acs-flag-err { color: var(--acs-err); font-weight: 600; }
.acs-hist-line { font-size: 0.875rem; font-weight: 500; }

.acs-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.acs-kicker--ok { color: var(--acs-ok-ink); }
.acs-kicker--warn { color: var(--acs-warn-ink); }
.acs-kicker--obj { color: var(--acs-obj-ink); }
.acs-side-item { padding: 13px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.acs-side-item--row { display: flex; align-items: center; gap: 11px; }
.acs-side-item-head { display: flex; align-items: center; gap: 10px; }
.acs-side-name { font-size: 0.875rem; font-weight: 600; }

.acs-diff-title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.acs-diff-sub { font-size: 0.8125rem; color: var(--acs-ink-2); }
.acs-row-dot { color: var(--acs-ink-4); text-align: center; }

.acs-block-gap { margin-top: 14px; }
.acs-banner-main { flex: 1; }
.acs-banner-body { margin-top: 5px; }
.acs-banner-acts { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }