/* Painel de custos (spec 007), na identidade autodoc-ui e no molde do painel web/ do api_colaborador_autodoc. Todo
   valor visual sai do tokens.css; as únicas cores escritas aqui ficam neste :root, com os literais que a identidade
   define fora dos tokens: as sombras e a borda da lista. */
:root {
  /* A casca: a barra de 44 px e as sombras do GD4, medidas no painel de catracas (25/09/2026). */
  --altura-topbar: 44px;
  --largura-sider: 202px;
  --largura-sider-recolhido: 52px;
  --sombra-barra: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
  --sombra-cabecalho: rgba(0, 0, 0, 0.06) 0px 1px 1px 0px;
  /* A lista do NewSelect no relevo da lista da Conta do GD4, como todo dropdown do painel de catracas. */
  --sombra-dropdown: rgba(0, 0, 0, 0.176) 0px 6px 12px 0px;
  --borda-dropdown: rgba(0, 0, 0, 0.15);
  /* A sombra tripla da variante branca do Tooltip (Tooltip.css.ts:25-26). */
  --sombra-dica: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.20);
  /* O véu e a sombra do Modal (modal.css.ts:72 e :31), na confirmação de excluir um alerta (spec 017). */
  --veu-modal: rgba(0, 0, 0, 0.6);
  --sombra-modal: 0px 10px 17px -5px rgba(0, 0, 0, 0.52);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--ad-color-bg-accent-gray-subtlest);
  color: var(--ad-color-text);
  font-family: var(--ad-font-family-02);
  font-size: var(--ad-font-size-14);
  line-height: var(--ad-font-line-height-medium);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: 2px; }
.icone { flex: none; display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* A casca (fichas TopBar e Sider): barra e menu brancos sobre o cinza da página, sem contorno, e a barra uma camada
   acima do menu, para a sombra dela cair sobre ele (o degrau do GD4). */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 11; background: var(--ad-color-surface); box-shadow: var(--sombra-barra); }
.topbar-conteudo { height: var(--altura-topbar); padding: 0 var(--ad-spacing-md); display: flex; align-items: center; gap: var(--ad-spacing-sm); }
.topbar-esq { display: flex; align-items: center; align-self: stretch; gap: var(--ad-spacing-sm); min-width: 0; }
/* O ≡ e a marca ocupam a largura do menu lateral: o nome do produto começa na linha do conteúdo da tela. */
.topbar-marca {
  display: flex; align-items: center; gap: var(--ad-spacing-md); flex: none;
  width: calc(var(--largura-sider) + var(--ad-spacing-lg) - var(--ad-spacing-md) - 2 * var(--ad-spacing-sm) - 1px);
}
.topbar-logo { display: flex; align-items: center; height: 32px; padding: 0 var(--ad-spacing-xs); color: var(--ad-color-text); border-radius: var(--ad-border-radius-xs); }
/* O ≡ do painel de catracas: o botão fantasma de 32 px que recolhe o menu lateral. */
.botao-menu {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--ad-border-radius-xs); background: transparent; color: var(--ad-color-text); cursor: pointer;
}
.botao-menu:hover { background: var(--ad-color-surface-hovered); }
.marca-autodoc { display: block; height: 14px; width: auto; }
.divisor-v { align-self: stretch; width: 1px; margin: var(--ad-spacing-xs) 0; background: var(--ad-color-bg-accent-gray-subtle); }
.topbar-produto { font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); white-space: nowrap; }

.sider { position: fixed; top: var(--altura-topbar); left: 0; bottom: 0; z-index: 10; width: var(--largura-sider); background: var(--ad-color-surface); display: flex; flex-direction: column; transition: width 0.3s ease; }
.sider-menu { flex: 1; overflow-y: auto; padding: var(--ad-spacing-sm); display: flex; flex-direction: column; gap: var(--ad-spacing-xs); }
.sider-item {
  display: flex; align-items: center; gap: calc(var(--ad-spacing-xs) + var(--ad-spacing-xxs));
  height: 36px; padding: 0 var(--ad-spacing-sm) 0 calc(var(--ad-spacing-sm) + var(--ad-spacing-xxs));
  border-radius: var(--ad-border-radius-xs); color: var(--ad-color-text); text-decoration: none; white-space: nowrap;
}
.sider-item .icone { color: var(--ad-color-icon); }
.sider-item:hover, .sider-item.ativo { background: var(--ad-color-surface-hovered); }
.sider-item.ativo { font-weight: var(--ad-font-weight-semi-bold); }
.sider-item .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Quem rola é o conteúdo, não o documento: a barra de rolagem começa embaixo da barra de cima, como no GD4. */
main.tela {
  position: fixed; top: var(--altura-topbar); right: 0; bottom: 0; left: var(--largura-sider); overflow-y: auto;
  padding: var(--ad-spacing-lg) var(--ad-spacing-lg) var(--ad-spacing-xl);
  display: flex; flex-direction: column; gap: var(--ad-spacing-lg);
  transition: left 0.3s ease;
}
/* O menu recolhido pelo ≡ (ficha Sider: 52 px, só os ícones, centralizados): o nome do item vira a dica, e o conteúdo
   acompanha a largura. */
body[data-sider="recolhido"] .sider { width: var(--largura-sider-recolhido); }
body[data-sider="recolhido"] .sider-item { justify-content: center; padding: 0; }
body[data-sider="recolhido"] .sider-item .rotulo { display: none; }
body[data-sider="recolhido"] main.tela { left: var(--largura-sider-recolhido); }

/* O cabeçalho de tela do GD4 (.gd4-view-title): 40 px, o fio azul de 8 px à esquerda e o título em label large. */
.cabecalho-tela {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ad-spacing-lg);
  height: 40px; min-width: 0; padding: 0 var(--ad-spacing-md) 0 calc(8px + var(--ad-spacing-md));
  background: var(--ad-color-surface); border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-cabecalho);
}
.cabecalho-tela::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  border-radius: var(--ad-border-radius-xs) 0 0 var(--ad-border-radius-xs); background: var(--ad-color-border-info);
}
.cabecalho-tela h1 { min-width: 0; font-size: var(--ad-font-size-18); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtitulo { color: var(--ad-color-text-subtle); }
/* A faixa de aviso da tela sem coleta automática (a Autodesk, spec 016), nas cores de aviso do autodoc-ui. */
.faixa-aviso {
  margin-top: var(--ad-spacing-sm); padding: var(--ad-spacing-md) var(--ad-spacing-lg); color: var(--ad-color-text-warning);
  background: var(--ad-color-bg-warning); border: 1px solid var(--ad-color-border-warning); border-radius: var(--ad-border-radius-xs);
}

/* O NewSelect (ficha NewSelect): o gatilho de 32 px, a borda que escurece no hover, no foco e aberto, e a seta que
   gira; a lista no relevo da Conta do GD4, com as opções de 32 px da ficha Option. */
.seletor { display: flex; align-items: center; gap: var(--ad-spacing-sm); flex: none; }
/* Os seletores de uma tela com mais de um filtro (a conta da AWS, spec 012), lado a lado com o do mês. */
.filtros-tela { display: flex; align-items: center; gap: var(--ad-spacing-lg); flex: none; }
.seletor-rotulo { font-weight: var(--ad-font-weight-semi-bold); }
.seletor-caixa { position: relative; }
.seletor-gatilho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ad-spacing-sm);
  width: 200px; height: var(--ad-spacing-xxl); padding: 0 var(--ad-spacing-md) 0 var(--ad-spacing-lg);
  border: 1px solid var(--ad-color-border-input); border-radius: var(--ad-border-radius-xs);
  background: var(--ad-color-bg-input); color: var(--ad-color-text); font-size: var(--ad-font-size-14);
  text-align: left; cursor: pointer; transition: border-color 0.2s ease;
}
.seletor-gatilho:hover, .seletor-gatilho:focus-visible, .seletor-gatilho[aria-expanded="true"] { border-color: var(--ad-color-border-brand); outline: none; }
.seletor-valor { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-gatilho > .icone { color: var(--ad-color-icon-subtle); transition: transform 0.2s ease; }
.seletor-gatilho[aria-expanded="true"] > .icone { transform: rotate(180deg); }
.seletor-lista {
  position: absolute; top: calc(100% + var(--ad-spacing-xs)); left: 0; right: 0; z-index: 1000;
  margin: 0; padding: 6px 0; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--ad-color-surface-overlay); border: 1px solid var(--borda-dropdown);
  border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-dropdown);
}
.seletor-opcao { display: flex; align-items: center; min-height: var(--ad-spacing-xxl); padding: var(--ad-spacing-xs) var(--ad-spacing-lg); line-height: normal; white-space: nowrap; cursor: pointer; }
.seletor-opcao[aria-selected="true"] { background: var(--ad-color-bg-selected); }
.seletor-opcao.ativa { background: var(--ad-color-bg-input-hovered); }
.seletor-opcao:focus { outline: none; }
.seletor-opcao:focus-visible { outline: 1px solid var(--ad-color-border-focused); outline-offset: -1px; }

/* números do topo */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ad-spacing-lg); }
/* os tokens da Autodesk (spec 016), logo abaixo do valor */
.kpi-tokens { color: var(--ad-color-text-subtle); font-weight: var(--ad-font-weight-semi-bold); }
.kpi { background: var(--ad-color-surface); border-radius: var(--ad-border-radius-xs); padding: var(--ad-spacing-md) var(--ad-spacing-lg); display: flex; flex-direction: column; gap: var(--ad-spacing-xs); min-width: 0; }
.kpi-rotulo { font-size: var(--ad-font-size-12); font-weight: var(--ad-font-weight-semi-bold); color: var(--ad-color-text-subtle); }
.kpi-valor { font-size: var(--ad-font-size-28); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); font-variant-numeric: tabular-nums; }
.kpi-pe { display: flex; align-items: center; gap: var(--ad-spacing-xs); flex-wrap: wrap; font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtlest); }
/* A projeção do período abre, no mouse e no foco, a conta de onde sai o valor (spec 009; dono, 21/10/2026: "coloca a
   explicação de por que tem esse valor"): o ícone de informação avisa, e a frase da dica quebra em 360 px. */
.kpi[data-dica-projecao] { cursor: help; }
.kpi-rotulo .icone { margin-left: var(--ad-spacing-xxs); color: var(--ad-color-icon-subtle); }
.dica-texto { max-width: 360px; }
.variacao { display: inline-flex; align-items: center; font-weight: var(--ad-font-weight-semi-bold); font-variant-numeric: tabular-nums; }
.variacao.sobe { color: var(--ad-color-text-danger); }
.variacao.desce { color: var(--ad-color-text-success); }
.variacao.sem { color: var(--ad-color-text-subtlest); }

/* cartões: o Card da identidade, superfície branca sem contorno e cabeçalho de 64 px (ficha Card) */
.cartao { background: var(--ad-color-surface); border-radius: var(--ad-border-radius-xs); min-width: 0; }
.cartao-cabecalho { display: flex; flex-direction: column; justify-content: center; gap: var(--ad-spacing-xxs); min-height: var(--ad-spacing-6xl); padding: var(--ad-spacing-sm) var(--ad-spacing-lg); border-bottom: 1px solid var(--ad-color-bg-accent-gray-subtler); }
.cartao-cabecalho h2 { font-size: var(--ad-font-size-16); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); }
.cartao-descricao { font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtle); }
.cartao-corpo { padding: var(--ad-spacing-lg); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ad-spacing-lg); }
.vazio { padding: var(--ad-spacing-lg) 0; color: var(--ad-color-text-subtle); }
.nota { color: var(--ad-color-text-subtle); font-size: var(--ad-font-size-12); }

/* cor de categoria: só os acentos da identidade, nos graus fortes (subtle, bold, bolder; pastel não entra), e
   separadas também para quem tem daltonismo: num mesmo gráfico, a menor distância OKLab entre duas cores fica em 8
   ou mais em protanopia, deuteranopia e tritanopia, e em 15 ou mais sem daltonismo (spec 007) */
.c-azul { --cor: var(--ad-color-bg-accent-blue-subtle); }
.c-azul-forte { --cor: var(--ad-color-bg-accent-blue-bold); }
.c-laranja { --cor: var(--ad-color-bg-accent-orange-subtle); }
.c-verde-forte { --cor: var(--ad-color-bg-accent-green-bolder); }
.c-violeta-forte { --cor: var(--ad-color-bg-accent-violet-bold); }
.c-amarelo { --cor: var(--ad-color-bg-accent-yellow-subtle); }
.c-cinza { --cor: var(--ad-color-bg-accent-gray-bolder); }
.c-cinza-claro { --cor: var(--ad-color-bg-accent-gray-subtle); }

/* legenda */
.legenda { display: flex; flex-wrap: wrap; gap: var(--ad-spacing-lg); margin-bottom: var(--ad-spacing-sm); font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtle); }
.legenda-item { display: inline-flex; align-items: center; gap: var(--ad-spacing-xs); }
.legenda-marca { display: inline-block; width: 10px; height: 10px; border-radius: var(--ad-border-radius-xs); background: var(--cor); }
.legenda-marca.tracejado { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--cor); width: 16px; }

/* gráficos em SVG */
.grafico { display: block; width: 100%; }
.grafico .grade { stroke: var(--ad-color-bg-accent-gray-subtler); stroke-width: 1; }
.grafico .eixo { fill: var(--ad-color-text-subtlest); font-size: var(--ad-font-size-12); }
.grafico .barra { fill: var(--cor); }
.grafico .linha { fill: none; stroke: var(--cor); stroke-width: 2; stroke-linejoin: round; }
.grafico .linha.tracejada { stroke-dasharray: 6 5; }
.grafico .ponto { fill: var(--cor); stroke: var(--ad-color-surface); stroke-width: 2; }
.grafico .rotulo { fill: var(--ad-color-text-subtle); font-size: var(--ad-font-size-12); font-weight: var(--ad-font-weight-semi-bold); }
.grafico .guia { stroke: var(--ad-color-text-subtlest); stroke-width: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover { fill: var(--ad-color-bg-accent-gray-subtlest); fill-opacity: 0.6; }
.grafico .alvo.clicavel { cursor: pointer; }
.grafico .apagada { opacity: 0.45; }

/* barras horizontais: Por projeto e Maiores clusters */
.barras { display: flex; flex-direction: column; }
.barra-linha {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px 80px; align-items: center; gap: var(--ad-spacing-md);
  width: 100%; height: 36px; padding: 0 var(--ad-spacing-sm);
  border: 0; border-radius: var(--ad-border-radius-xs); background: none; color: inherit; text-align: left; cursor: pointer;
}
/* no período (spec 009) não há comparação, e a coluna da variação sai */
.barras.sem-variacao .barra-linha { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px; }
.barra-linha:hover { background: var(--ad-color-bg-input-hovered); }
.barra-linha:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: -2px; }
.barra-linha[aria-pressed="true"] { background: var(--ad-color-bg-neutral-subtle-pressed); }
.barras.com-selecao .barra-linha[aria-pressed="false"] { opacity: 0.45; }
.barra-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { display: block; height: 12px; background: var(--ad-color-bg-accent-gray-subtler); border-radius: var(--ad-border-radius-xs); }
.barra-preenchida { display: block; height: 100%; background: var(--cor); border-radius: var(--ad-border-radius-xs); }
.barra-valor, .barra-variacao { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a coluna dos tokens da Autodesk (spec 016), ao lado do valor */
.barras.com-tokens .barra-linha { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px 96px 80px; }
.barras.com-tokens.sem-variacao .barra-linha { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 96px 96px; }
.barra-tokens { color: var(--ad-color-text-subtle); }

/* o selo do filtro do clique: a Tag em pílula, com o X (ficha Tag: default, phill, closable) */
.filtro-ativo { display: flex; align-items: center; margin-bottom: var(--ad-spacing-sm); }
.selo-filtro {
  display: inline-flex; align-items: center; gap: var(--ad-spacing-xxs); max-width: 100%;
  padding: var(--ad-spacing-xs) var(--ad-spacing-sm);
  border: 1px solid var(--ad-color-border-input); border-radius: var(--ad-border-radius-5xl);
  background: var(--ad-color-surface); color: var(--ad-color-text-subtle);
  font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight);
}
.selo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo-filtro button { display: inline-flex; padding: 0; border: 0; border-radius: var(--ad-border-radius-5xl); background: none; color: var(--ad-color-icon-subtle); cursor: pointer; }
.selo-filtro button:hover { color: var(--ad-color-icon); background: var(--ad-color-bg-input-hovered); }

/* as tabelas dia a dia (ficha Table): o mesmo componente, Dia e Total presos à esquerda, e a rolagem fina da ficha */
/* A tabela dia a dia rola dentro do cartão, nos dois sentidos, com o cabeçalho e o Total presos (ficha Table: o corpo com
   altura máxima): a barra de ir para a direita fica à vista, e não no pé de 31 dias, 800 px abaixo do cabeçalho (dono,
   19/10/2026: "cadê a barrinha para ir para a direita"). */
/* A barra com contraste (dono, 19/10/2026: "tem 3 que não aparecem essa barra"): o cinza claro da ficha sobre o branco
   dava 1,20:1, e a barra curta da tabela por recurso sumia; o cinza text-subtlest dá 3,69:1, e o trilho marca a faixa. */
.tabela-rolagem { max-height: 70vh; overflow: auto; scrollbar-color: var(--ad-color-text-subtlest) var(--ad-color-bg-accent-gray-subtler); }
.tabela-dia { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tabela-dia th, .tabela-dia td {
  height: 40px; min-width: 120px; padding: 0 var(--ad-spacing-sm);
  text-align: left; white-space: nowrap; background: var(--ad-color-surface);
  border-bottom: 1px solid var(--ad-color-bg-accent-gray-subtler);
}
.tabela-dia th { background: var(--ad-color-bg-accent-gray-subtlest); font-weight: var(--ad-font-weight-semi-bold); border-bottom-color: var(--ad-color-bg-accent-gray-subtle); }
.tabela-dia .fixa-1 { position: sticky; left: 0; z-index: 1; width: 80px; min-width: 80px; }
.tabela-dia .fixa-2 { position: sticky; left: 80px; z-index: 1; border-right: 1px solid var(--ad-color-bg-accent-gray-subtle); }
.tabela-dia thead th { position: sticky; top: 0; z-index: 2; }
.tabela-dia tfoot td { position: sticky; bottom: 0; z-index: 2; }
.tabela-dia thead .fixa-1, .tabela-dia thead .fixa-2, .tabela-dia tfoot .fixa-1, .tabela-dia tfoot .fixa-2 { z-index: 3; }
.tabela-dia .total { font-weight: var(--ad-font-weight-semi-bold); }
.tabela-dia tbody tr:hover td { background: var(--ad-color-bg-input-hovered); }
.tabela-dia tfoot td { font-weight: var(--ad-font-weight-semi-bold); background: var(--ad-color-bg-accent-gray-subtlest); border-bottom: 0; }

/* A dica do mouse: a variante branca do Tooltip (ficha Tooltip). A largura passa dos 300 px da ficha porque a lista
   de Outros cabe sem corte, um item por linha (critério 9 da 007): 520 px é o nome mais largo do Databricks, o de
   setembro/2026, com 518 px (spec 008). */
.dica-grafico {
  position: fixed; z-index: 999; max-width: 520px; padding: var(--ad-spacing-sm) var(--ad-spacing-md);
  background: var(--ad-color-surface-overlay); color: var(--ad-color-text);
  border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-dica);
  font-size: var(--ad-font-size-14); line-height: normal; pointer-events: none;
}
.dica-titulo { font-weight: var(--ad-font-weight-semi-bold); margin-bottom: var(--ad-spacing-xs); }
.dica-linha { display: flex; justify-content: space-between; gap: var(--ad-spacing-lg); line-height: var(--ad-font-line-height-spaced); white-space: nowrap; }
.dica-linha > span:last-child { font-variant-numeric: tabular-nums; }
.dica-linha .marca { display: inline-block; width: 8px; height: 8px; margin-right: var(--ad-spacing-xs); border-radius: var(--ad-border-radius-xs); background: var(--cor); }
.dica-sep { margin: var(--ad-spacing-xs) 0; border-top: 1px solid var(--ad-color-bg-accent-gray-subtler); }
.dica-sub { color: var(--ad-color-text-subtle); }

/* erro de bloco e carregamento */
.faixa-erro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ad-spacing-md);
  padding: var(--ad-spacing-md) var(--ad-spacing-lg); color: var(--ad-color-text-danger);
  background: var(--ad-color-bg-danger); border: 1px solid var(--ad-color-border-danger); border-radius: var(--ad-border-radius-xs);
}
.btn-sec {
  height: var(--ad-spacing-xxl); padding: 0 var(--ad-spacing-lg); cursor: pointer;
  border: 1px solid var(--ad-color-border); border-radius: var(--ad-border-radius-xs);
  background: var(--ad-color-surface); color: var(--ad-color-text); font-weight: var(--ad-font-weight-semi-bold);
}
.btn-sec:hover { background: var(--ad-color-bg-input-hovered); }
.esqueleto { flex: none; height: 120px; background: var(--ad-color-bg-accent-gray-subtler); border-radius: var(--ad-border-radius-xs); animation: brilho 2s ease-in-out infinite; }
@keyframes brilho { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* "Ver detalhes" da frase do topo do MongoDB (dono, 19/10/2026): o botão de texto do "Ver mais" do painel modelo, e o
   bloco que abre logo abaixo da frase, na superfície dos cartões. */
.ver-mais {
  display: inline; height: auto; min-height: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-weight: var(--ad-font-weight-semi-bold); text-decoration: underline; cursor: pointer;
}
.ver-mais:hover { background: none; }
.detalhes-conta {
  background: var(--ad-color-surface); border-radius: var(--ad-border-radius-xs); padding: var(--ad-spacing-md) var(--ad-spacing-lg);
  color: var(--ad-color-text); display: flex; flex-direction: column; gap: var(--ad-spacing-xs);
}
.detalhes-conta p { margin: 0; }

/* A entrada por e-mail (spec 011). Antes da resposta do /api/acesso/eu e fora da sessão, a casca não aparece: só a
   entrada, que ocupa a página. */
body:not([data-acesso="dentro"]) > .topbar,
body:not([data-acesso="dentro"]) > .sider,
body:not([data-acesso="dentro"]) > main.tela { display: none; }
/* A API fora do ar na hora de perguntar a sessão: a faixa de erro, com o Tentar de novo. */
#entrada > .faixa-erro { margin: var(--ad-spacing-lg); }

/* A moldura de entrada da API de catracas (o bloco Entrada do web/assets/styles.css de lá): duas colunas, a marca à
   esquerda sobre o cinza da página e o formulário à direita sobre o branco, com até 400 px. Aqui a marca é a palavra
   AUTODOC da casca e o símbolo dela, grande, no canto, no lugar do logo e do ícone do GD4. */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 560px; }
.entrada-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--ad-spacing-4xl);
  padding: var(--ad-spacing-6xl);
  background: var(--ad-color-bg-accent-gray-subtlest);
}
.entrada-marca .marca-autodoc { height: 24px; color: var(--ad-color-text); align-self: flex-start; }
.entrada-produto {
  font-family: var(--ad-font-family-01); font-size: var(--ad-font-size-52); font-weight: var(--ad-font-weight-semi-bold);
  line-height: var(--ad-font-line-height-tight); color: var(--ad-color-text);
}
.entrada-simbolo {
  position: absolute; right: calc(-1 * var(--ad-spacing-6xl)); bottom: calc(-1 * var(--ad-spacing-6xl));
  width: min(440px, 60%); height: auto; color: var(--ad-color-bg-accent-gray-subtler); pointer-events: none;
}
.entrada-painel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--ad-spacing-6xl) var(--ad-spacing-4xl);
  background: var(--ad-color-surface);
}
.entrada-conteudo { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--ad-spacing-xl); }
.entrada-cabecalho { display: flex; flex-direction: column; gap: var(--ad-spacing-xs); }
.entrada-titulo { font-size: var(--ad-font-size-20); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); }
.entrada-cabecalho .ajuda strong { font-weight: var(--ad-font-weight-semi-bold); color: var(--ad-color-text); }
.pilha { display: flex; flex-direction: column; gap: var(--ad-spacing-lg); }
.entrada-acoes { display: flex; align-items: center; gap: var(--ad-spacing-xl); }
/* Abaixo de 1080 px a marca vira uma faixa no topo, e o símbolo grande sai (o mesmo da API de catracas). */
@media (max-width: 1080px) {
  .entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .entrada-marca { padding: var(--ad-spacing-xl); gap: var(--ad-spacing-lg); }
  .entrada-produto { font-size: var(--ad-font-size-36); }
  .entrada-simbolo { display: none; }
}

/* Button (ficha Button), só pela classe: o botão sem classe daqui é o da linha de barra, o do selo e o do menu, cada um
   com o seu desenho, e uma regra para todo button passaria a eles o que eles não declaram (spec 011). */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ad-spacing-sm);
  height: 32px; padding: 0 var(--ad-spacing-lg); border: 1px solid transparent; border-radius: var(--ad-border-radius-xs);
  background: var(--ad-color-bg-brand-bold); color: var(--ad-color-text-primary-button);
  font-family: var(--ad-font-family-02); font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold);
  line-height: var(--ad-font-line-height-tight); white-space: nowrap; cursor: pointer; transition: all 0.2s ease;
}
.btn:hover { background: var(--ad-color-bg-brand-bold-hovered); }
.btn:active { background: var(--ad-color-bg-brand-bold-pressed); }
.btn:focus-visible { outline: none; }
.btn:focus-visible::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 1;
  border: 2px solid var(--ad-color-border-focused); border-radius: var(--ad-border-radius-xs);
}
.btn:disabled { background: var(--ad-color-bg-disabled); color: var(--ad-color-text-disabled); cursor: not-allowed; pointer-events: none; }
.btn-lg { height: 48px; font-size: var(--ad-font-size-16); }
.btn-bloco { width: 100%; }
.carregando-pontos { display: inline-flex; gap: 2px; }
.carregando-pontos span { animation: piscar 1s infinite; }
.carregando-pontos span:nth-child(2) { animation-delay: 250ms; }
.carregando-pontos span:nth-child(3) { animation-delay: 500ms; }
@keyframes piscar { 50% { color: transparent; } }
.ver-mais:disabled { color: var(--ad-color-text-disabled); text-decoration: none; cursor: not-allowed; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Input large (ficha Input): 48 px, a borda que realça no hover e escurece no foco, e a vermelha no erro, com a frase
   embaixo. O <input> da biblioteca não recebe fonte: aqui, font: inherit. */
.campo { display: flex; flex-direction: column; gap: var(--ad-spacing-xs); min-width: 0; }
.campo > label { font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); }
.ajuda { font-size: var(--ad-font-size-14); color: var(--ad-color-text-subtle); line-height: var(--ad-font-line-height-tight); }
.ajuda.erro { color: var(--ad-color-text-danger); }
.campo input {
  width: 100%; height: 48px; padding: var(--ad-spacing-sm) var(--ad-spacing-lg);
  border: 1px solid var(--ad-color-border); border-radius: var(--ad-border-radius-xs);
  background: var(--ad-color-bg-input); color: var(--ad-color-text);
  font: inherit; font-size: var(--ad-font-size-16); line-height: var(--ad-font-line-height-tight);
}
.campo input:hover { border-color: var(--ad-color-border-brand); }
.campo input:focus { outline: none; border-color: var(--ad-color-border-selected); }
.campo input[aria-invalid="true"] { border-color: var(--ad-color-border-danger); }
.campo .campo-codigo { font-size: var(--ad-font-size-20); font-variant-numeric: tabular-nums; }
/* O Input de senha (ficha Input, type password; spec 018): o olho no fim mostra e esconde a senha. Na biblioteca o
   olho é um span sem foco (a ficha aponta); aqui é um botão, com o nome e o estado para o leitor de tela. O campo
   guarda à direita os 64 px da ficha para o ícone. */
.campo-com-olho { position: relative; display: block; }
.campo-com-olho input { padding-right: 64px; }
.olho-senha {
  position: absolute; top: 50%; right: var(--ad-spacing-sm); transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--ad-border-radius-xs); background: none; color: var(--ad-color-text-subtle); cursor: pointer;
}
.olho-senha:hover { color: var(--ad-color-text); }
.olho-senha:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: 0; }

/* A caixa do e-mail na barra (spec 011): o menu do perfil da API de catracas, só com o Sair, colado na barra e alinhado
   à esquerda do e-mail, no relevo da lista do NewSelect. */
.topbar-dir { margin-left: auto; position: relative; display: flex; align-items: center; }
.usuario-gatilho {
  display: inline-flex; align-items: center; gap: var(--ad-spacing-sm); height: 36px;
  padding: 0 var(--ad-spacing-sm) 0 var(--ad-spacing-xxs); border: 0; border-radius: var(--ad-border-radius-xs);
  background: transparent; color: var(--ad-color-text); font-weight: var(--ad-font-weight-semi-bold); cursor: pointer;
}
.usuario-gatilho:hover, .usuario-gatilho[aria-expanded="true"] { background: var(--ad-color-surface-hovered); }
.usuario-gatilho .icone { color: var(--ad-color-icon-subtle); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--ad-border-radius-3xl); background: var(--ad-color-bg-accent-gray-subtler);
  color: var(--ad-color-text-subtle); font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold);
}
.menu-usuario {
  position: absolute; top: 100%; left: 0; min-width: 100%; z-index: 1000; margin: 0; padding: 6px 0;
  background: var(--ad-color-surface-overlay); border: 1px solid var(--borda-dropdown);
  border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-dropdown);
}
.menu-item {
  display: flex; align-items: center; gap: var(--ad-spacing-sm); width: 100%; min-height: var(--ad-spacing-xxl);
  padding: var(--ad-spacing-xs) var(--ad-spacing-lg); border: 0; background: none; color: var(--ad-color-text);
  text-align: left; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--ad-color-bg-input-hovered); outline: none; }

/* ---- Os alertas de custo (spec 017), nas fichas do autodoc-ui --------------------------------------------------- */
/* O formulário no molde do Cadastrar catraca e das telas de log da API de colaboradores (dono, 05/11/2026: "usa o
   exemplo da api colaborador, as telas de log tem a formatação certinha, inclusive com o botão de limpar"): um cartão sem
   título, os campos numa grade de quatro colunas iguais, com o rótulo em cima, e no rodapé a frase à esquerda e o par
   Limpar e Salvar à direita. A grade alinha pelo topo: a frase de erro sob um campo não o sobe acima dos vizinhos. */
.grade-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ad-spacing-lg); align-items: start; }
.cartao-rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--ad-spacing-sm);
  padding: var(--ad-spacing-sm) var(--ad-spacing-lg); border-top: 1px solid var(--ad-color-bg-accent-gray-subtler);
}
.cartao-rodape > .ajuda { flex: 1 1 auto; min-width: 0; }
/* O Button outlined (ficha Button): o Limpar e o Cancelar do rodapé. Travado por aria-disabled (nada para limpar), com a
   cara do disabled da ficha, e continua focável, com a dica do motivo. */
.btn-contorno { background: transparent; color: var(--ad-color-text); border-color: var(--ad-color-border-input); }
.btn-contorno:hover { background: var(--ad-color-bg-input-hovered); }
.btn-contorno:active { background: var(--ad-color-bg-input-pressed); }
.btn-contorno[aria-disabled="true"], .btn-contorno[aria-disabled="true"]:hover, .btn-contorno[aria-disabled="true"]:active {
  background: transparent; color: var(--ad-color-text-disabled); border-color: var(--ad-color-border-disable); cursor: not-allowed;
}
/* A faixa de estado no topo do cartão (a do Cadastrar catraca): verde com o alerta salvo, azul com o alerta em mudança e a
   vermelha da .faixa-erro, sempre com o texto na cor do texto e o ícone na do estado. */
.faixa-estado {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--ad-spacing-md);
  padding: var(--ad-spacing-md) var(--ad-spacing-lg); border-width: 1px; border-style: solid;
  border-radius: var(--ad-border-radius-xs); color: var(--ad-color-text);
}
.faixa-estado > .icone { margin-top: 2px; }
.faixa-ok { background: var(--ad-color-bg-success); border-color: var(--ad-color-border-success); }
.faixa-ok > .icone { color: var(--ad-color-icon-success); }
.faixa-info { background: var(--ad-color-bg-information); border-color: var(--ad-color-border-info); }
.faixa-info > .icone { color: var(--ad-color-icon-info); }
.faixa-estado.faixa-erro > .icone { color: var(--ad-color-icon-danger); }
/* O NewSelect com o rótulo em cima, como o dos campos, na largura do campo; sem escolha, o placeholder da ficha. */
.seletor.empilhado { flex-direction: column; align-items: stretch; gap: var(--ad-spacing-xs); }
.seletor.empilhado .seletor-rotulo { font-size: var(--ad-font-size-14); line-height: var(--ad-font-line-height-tight); }
.seletor.empilhado .seletor-gatilho { width: 100%; }
.seletor-valor.vazio { color: var(--ad-color-text-subtlest); }
/* O Input small (ficha Input: 32 px, o padrão real da biblioteca); o da entrada é o large, de 48 px. */
.campo.pequeno input { height: 32px; font-size: var(--ad-font-size-14); }
.campo > .rotulo-campo { font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); }
/* O valor com a moeda à esquerda (o leftAddon da ficha Input), numa caixa com a borda e os estados do campo. */
.campo-moeda {
  display: flex; align-items: center; height: 32px; min-width: 0;
  border: 1px solid var(--ad-color-border); border-radius: var(--ad-border-radius-xs); background: var(--ad-color-bg-input);
}
.campo-moeda:hover { border-color: var(--ad-color-border-brand); }
.campo-moeda:focus-within { border-color: var(--ad-color-border-selected); }
.campo-moeda:has(input[aria-invalid="true"]) { border-color: var(--ad-color-border-danger); }
.campo-prefixo { flex: none; padding-left: var(--ad-spacing-lg); color: var(--ad-color-text-subtle); font-weight: var(--ad-font-weight-semi-bold); }
.campo .campo-moeda input { height: 30px; min-width: 0; padding: 0 var(--ad-spacing-lg) 0 var(--ad-spacing-xs); border: 0; background: transparent; }
/* Button ghost e danger (ficha Button): o ghost sem fundo nem borda, com o cinza no hover; o solid danger em vermelho,
   com o hover a 80%; o ghost danger só com o texto vermelho. */
.btn-fantasma { background: transparent; color: var(--ad-color-text); }
.btn-fantasma:hover { background: var(--ad-color-bg-input-hovered); }
.btn-fantasma:active { background: var(--ad-color-bg-input-pressed); }
.btn-perigo { background: var(--ad-color-bg-danger-bold); border-color: var(--ad-color-border-danger); color: var(--ad-color-text-inverse); }
.btn-perigo:hover, .btn-perigo:active { background: var(--ad-color-bg-danger-bold); opacity: 0.8; }
.btn-fantasma.btn-perigo { background: transparent; border-color: transparent; color: var(--ad-color-text-danger); }
.btn-fantasma.btn-perigo:hover { background: var(--ad-color-bg-input-hovered); opacity: 1; }
.btn-fantasma.btn-perigo:active { background: var(--ad-color-bg-input-pressed); opacity: 1; }
.btn-icone { width: 32px; padding: 0; }
.btn-fantasma:disabled { background: transparent; }
/* A lista (ficha Table): o cabeçalho cinza em 600, as linhas de 40 px e tudo à esquerda. */
.tabela-alertas { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tabela-alertas th, .tabela-alertas td {
  height: 40px; padding: 0 var(--ad-spacing-sm); text-align: left; white-space: nowrap;
  background: var(--ad-color-surface); border-bottom: 1px solid var(--ad-color-bg-accent-gray-subtler);
}
.tabela-alertas th { background: var(--ad-color-bg-accent-gray-subtlest); font-weight: var(--ad-font-weight-semi-bold); border-bottom-color: var(--ad-color-bg-accent-gray-subtle); }
.tabela-alertas thead th { position: sticky; top: 0; z-index: 1; }
.tabela-alertas tbody tr:hover td { background: var(--ad-color-bg-input-hovered); }
.sem-aviso { color: var(--ad-color-text-subtle); }
/* O último aviso na Tag square (ficha Tag): a cinza com o período e o custo, a vermelha com o erro do envio. A gray da
   biblioteca é hex fixo, que não troca de tema: aqui, os tokens do mesmo papel. */
.tag {
  display: inline-flex; align-items: center; gap: var(--ad-spacing-xxs); max-width: 100%;
  padding: var(--ad-spacing-xs) var(--ad-spacing-sm); border: 1px solid transparent; border-radius: var(--ad-border-radius-xs);
  font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); white-space: nowrap;
}
.tag-cinza { background: var(--ad-color-bg-accent-gray-subtler); border-color: var(--ad-color-bg-accent-gray-subtler); color: var(--ad-color-text-subtle); }
.tag-vermelha { background: var(--ad-color-bg-danger); border-color: var(--ad-color-bg-danger); color: var(--ad-color-text-danger); }
/* A lista no molde das Catracas cadastradas da API de colaboradores (dono, 06/11/2026: "a parte debaixo não segue o
   padrão autodoc, olha a tela de /catracas"): a barra "Resultados (N)" com a contagem dos marcados e o botão do GD4 à
   direita, a caixa de marcar e o lápis em colunas estreitas no começo da linha, e a tabela de borda a borda do cartão. */
.cartao-corpo.sem-folga { padding: 0; }
.cartao-cabecalho.barra-resultados { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ad-spacing-md); }
.titulo-resultados { display: flex; align-items: baseline; gap: var(--ad-spacing-sm); min-width: 0; }
.titulo-resultados h2:focus { outline: none; }
.marcadas { font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtle); }
.barra-resultados .acoes { display: flex; align-items: center; gap: var(--ad-spacing-xs); }
.tabela-alertas th.sel, .tabela-alertas td.sel { width: 56px; padding: 0 var(--ad-spacing-xs); text-align: center; }
.tabela-alertas td.sel .marcar-celula { display: flex; align-items: center; justify-content: center; min-height: 39px; cursor: pointer; }
.tabela-alertas input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; accent-color: var(--ad-color-icon-selected); }
.tabela-alertas input[type="checkbox"]:disabled { cursor: default; }
.tabela-alertas input[type="checkbox"]:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: 2px; }
/* A ação da linha (ficha Table): o ícone num botão de 24 px, sem texto, com o cinza no hover. */
.acao-linha { width: 24px; height: 24px; padding: 0; color: var(--ad-color-icon); }
.acao-linha:hover { background: var(--ad-color-interaction-hovered); }
/* O botão do GD4, o da barra das Catracas cadastradas: contorno, 32 px, no tom de perigo, com o hover e o pressionado
   claros; travado por aria-disabled, a 40%, e continua focável, com o motivo na dica. */
.gd4-button {
  display: inline-flex; align-items: center; gap: var(--ad-spacing-xs); height: 32px; padding: 0 var(--ad-spacing-md);
  border-radius: var(--ad-border-radius-xs); font-family: var(--ad-font-family-02); cursor: pointer;
}
.gd4-button--type-outline { background: var(--ad-color-surface); border: 1px solid var(--ad-color-border-input); color: var(--ad-color-text); }
.gd4-button--type-outline.gd4-button--tone-danger { color: var(--ad-color-text-danger); border-color: var(--ad-color-border-danger); }
.gd4-button--type-outline:hover { background: var(--ad-color-bg-input-hovered); }
.gd4-button--type-outline:active { background: var(--ad-color-bg-input-pressed); }
.gd4-button[aria-disabled="true"], .gd4-button[aria-disabled="true"]:hover { opacity: 0.4; cursor: not-allowed; background: var(--ad-color-surface); }
.gd4-button:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: 2px; }
.gd4-label-small { font-size: var(--ad-font-size-14); font-weight: var(--ad-font-weight-semi-bold); line-height: 120%; }
/* O Modal (ficha Modal), no molde do core/modal.js da API de colaboradores: o véu, a caixa de 560 px (720 na
   modal-medio) com o cabeçalho e o rodapé de 64 px, o corpo que rola, e as ações à direita, com a frase do rodapé à
   esquerda; na camada 50. A modal-formulario deixa a lista do NewSelect passar da borda do corpo. */
.modal-fundo {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: var(--ad-spacing-lg); background: var(--veu-modal);
}
.modal {
  display: flex; flex-direction: column; width: 560px; max-width: 94vw; max-height: 90vh; overflow: hidden;
  background: var(--ad-color-surface); border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-modal);
}
.modal:focus { outline: none; }
.modal-medio { width: 720px; }
.modal-cabecalho {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ad-spacing-md);
  min-height: 64px; padding: 10px var(--ad-spacing-lg); border-bottom: 1px solid var(--ad-color-border-input);
}
.modal-cabecalho h2 { font-size: var(--ad-font-size-20); font-weight: var(--ad-font-weight-semi-bold); line-height: var(--ad-font-line-height-tight); }
.modal-cabecalho .rotulo-modal { display: block; margin-top: 2px; font-size: var(--ad-font-size-14); color: var(--ad-color-text-subtle); }
.modal-corpo { flex: 1; overflow: auto; padding: var(--ad-spacing-lg); display: flex; flex-direction: column; gap: var(--ad-spacing-lg); }
.modal-rodape {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--ad-spacing-sm);
  min-height: 64px; padding: 10px var(--ad-spacing-lg); border-top: 1px solid var(--ad-color-border-input);
}
.modal-rodape .ajuda { margin-right: auto; }
.modal-formulario, .modal-formulario .modal-corpo { overflow: visible; }
.texto-confirmar { display: flex; flex-direction: column; gap: var(--ad-spacing-sm); }
.lista-alvos { margin: 0; padding-left: var(--ad-spacing-lg); }
/* O aviso rápido, o das Catracas cadastradas: no pé da tela, centrado, acima de tudo; a borda da esquerda e o ícone
   na cor do estado. */
#avisos {
  position: fixed; left: 50%; bottom: var(--ad-spacing-xl); transform: translateX(-50%); z-index: 1100;
  display: flex; flex-direction: column; gap: var(--ad-spacing-sm); width: min(560px, 92vw);
}
.aviso {
  display: flex; align-items: flex-start; gap: var(--ad-spacing-md);
  padding: var(--ad-spacing-md) var(--ad-spacing-md) var(--ad-spacing-md) var(--ad-spacing-lg);
  background: var(--ad-color-surface-overlay); color: var(--ad-color-text);
  border: 1px solid var(--ad-color-border); border-left: 4px solid var(--ad-color-border-info);
  border-radius: var(--ad-border-radius-xs); box-shadow: var(--sombra-dropdown);
}
.aviso .texto { flex: 1; padding-top: 6px; }
.aviso > .icone { margin-top: 6px; color: var(--ad-color-icon-info); }
.aviso-ok { border-left-color: var(--ad-color-border-success); }
.aviso-ok > .icone { color: var(--ad-color-icon-success); }
.aviso-erro { border-left-color: var(--ad-color-border-danger); }
.aviso-erro > .icone { color: var(--ad-color-icon-danger); }

/* A busca da lista, a das Catracas cadastradas (o Search da identidade): o campo de 32 px e 320 px no cabeçalho de um
   cartão só dele, com a lupa à esquerda e o X do próprio campo. */
#cartao-busca .cartao-cabecalho { border-bottom: 0; }
.campo-busca { position: relative; display: block; width: 320px; max-width: 100%; }
.campo-busca .icone-busca { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ad-color-icon-subtle); pointer-events: none; }
.campo-busca input {
  width: 100%; height: 32px; padding: 0 var(--ad-spacing-sm) 0 40px;
  border: 1px solid var(--ad-color-border); border-radius: var(--ad-border-radius-xs);
  background: var(--ad-color-bg-input); color: var(--ad-color-text); font: inherit; font-size: var(--ad-font-size-14);
}
.campo-busca input:hover { border-color: var(--ad-color-border-brand); }
.campo-busca input:focus { outline: none; border-color: var(--ad-color-border-selected); }
.campo-busca input::placeholder { color: var(--ad-color-text-subtlest); }
/* A lista vazia, com o Limpar busca quando a busca não acha nada. */
/* A página de 25 linhas rola com a tela, e não dentro do cartão, como a lista das Catracas cadastradas. */
.tabela-rolagem:has(> .tabela-alertas) { max-height: none; }
.lista-vazia { display: flex; align-items: center; gap: var(--ad-spacing-md); padding: 0 var(--ad-spacing-lg); }
/* A paginação da Table, a das listas de lá: a contagem à esquerda e as setas com a página à direita, no pé da lista. */
.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ad-spacing-md);
  min-height: 44px; padding: var(--ad-spacing-sm) var(--ad-spacing-lg);
}
.paginacao .total { font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtlest); }
.paginacao .paginas { display: flex; align-items: center; gap: var(--ad-spacing-xs); }
.paginacao .pagina-de { font-size: var(--ad-font-size-12); color: var(--ad-color-text-subtle); }
.paginacao button {
  display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 28px; padding: 0 var(--ad-spacing-sm);
  border: 1px solid transparent; border-radius: var(--ad-border-radius-3xl); background: transparent; color: var(--ad-color-text-subtle); cursor: pointer;
}
.paginacao button:hover { border-color: var(--ad-color-text-subtle); }
.paginacao button:disabled { color: var(--ad-color-icon-disabled); border-color: transparent; cursor: default; }
.paginacao button:focus-visible { outline: 2px solid var(--ad-color-border-focused); outline-offset: 2px; }