/* ===========================================================================
   hub-auth — componentes
   ===========================================================================
   Consome só os tokens de marca (tokens.css) e a camada de UI do design system
   (§26 estados, §22 acessibilidade, §28 anti-padrões).

   O que este arquivo deliberadamente NÃO faz, conforme o design.md:
     · nada de glassmorphism nem gradiente decorativo (§28);
     · nada de pílula em todo controle — raio contido (§5);
     · nada de sombra pesada — borda e contraste resolvem (§5);
     · nenhuma cor sozinha comunica estado: sempre cor + texto (§22);
     · nenhum JavaScript — a CSP é `script-src 'none'`.
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* O `<fieldset>` traz DOIS presentes do navegador que atrapalham aqui:
   uma borda `groove` QUADRADA (a "borda feia") e `min-width: min-content`, que
   impede o elemento de encolher — causa clássica de estouro lateral em tela
   estreita. Resetar os dois é o que faz o bloco de login caber e ficar redondo. */
fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
legend { padding: 0; }

body {
  margin: 0;
  background: var(--surface-warm);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* Nada de palavra longa empurrando o layout: URL, e-mail e código de serviço
     são comuns aqui e não têm onde quebrar sozinhos. */
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: var(--leading-tight); color: var(--ink-900); margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }
p  { margin: 0 0 var(--space-4); }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-800); }

/* Foco sempre visível — requisito de acessibilidade, não enfeite (§22). */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   2. Estrutura da página
   -------------------------------------------------------------------------- */
.dg-shell { display: flex; flex-direction: column; min-height: 100vh; }

.dg-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dg-main { flex: 1; padding-block: var(--space-12); }

/* --- Cabeçalho: claro e preciso, ~72px (§7) -------------------------------- */
.dg-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 72px;
  display: flex;
  align-items: center;
}

.dg-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 72px;
  flex-wrap: wrap;
}

.dg-logo { display: block; height: 54px; width: auto; }
.dg-logo--rodape { height: 40px; }
.dg-logo--marca { height: 80px; }

/* Rótulo sobre fundo escuro: a cor de marca não tem contraste ali. */
.dg-label--claro { color: var(--brand-500); }

/* O logo oficial é azul-petróleo: sobre fundo escuro ele desaparece. Resolve-se
   em CSS, jamais editando o arquivo (§2 do design.md). */
.dg-logo--claro { filter: brightness(0) invert(1); }

.dg-nav { display: flex; gap: var(--space-6); align-items: center; margin-inline-start: auto; flex-wrap: wrap; }

.dg-nav a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-hover) var(--ease), border-color var(--motion-hover) var(--ease);
}
.dg-nav a:hover { color: var(--brand-800); border-bottom-color: var(--brand-500); }
.dg-nav a[aria-current="page"] { color: var(--brand-800); border-bottom-color: var(--brand-800); }

.dg-usuario { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-s); color: var(--ink-700); }
.dg-usuario strong { color: var(--ink-900); font-weight: var(--weight-semibold); }

/* --- Rodapé: petróleo escuro (§18) ---------------------------------------- */
.dg-footer {
  background: var(--brand-900);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--space-8);
  font-size: var(--text-body-s);
  margin-top: var(--space-16);
}
.dg-footer a { color: rgba(255, 255, 255, 0.88); }
.dg-footer__linha { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   3. Tipografia auxiliar
   -------------------------------------------------------------------------- */
.dg-label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.dg-muted { color: var(--ink-500); font-size: var(--text-body-s); }
.dg-titulo-secao { margin-bottom: var(--space-2); }
.dg-subtitulo { color: var(--ink-700); margin-bottom: var(--space-8); max-width: 62ch; }

.dg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Botões — estados default/hover/focus/active/disabled (§26)
   -------------------------------------------------------------------------- */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--alvo-minimo);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-micro) var(--ease),
              border-color var(--motion-micro) var(--ease),
              color var(--motion-micro) var(--ease);
}

.dg-btn--primario { background: var(--brand-800); color: #fff; }
.dg-btn--primario:hover { background: var(--brand-900); color: #fff; }
.dg-btn--primario:active { background: var(--brand-900); }

.dg-btn--secundario { background: var(--surface); color: var(--brand-800); border-color: var(--border); }
.dg-btn--secundario:hover { border-color: var(--brand-500); background: var(--surface-soft); }

.dg-btn--discreto { background: transparent; color: var(--ink-700); padding-inline: var(--space-4); }
.dg-btn--discreto:hover { background: var(--brand-tint); color: var(--brand-800); }

.dg-btn--perigo { background: var(--surface); color: var(--error); border-color: var(--border); }
.dg-btn--perigo:hover { background: var(--error-tint); border-color: var(--error); }

.dg-btn[disabled], .dg-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

.dg-btn--bloco { width: 100%; }
.dg-btn--pequeno { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-body-s); }

/* --------------------------------------------------------------------------
   5. Formulários
   -------------------------------------------------------------------------- */
.dg-campo { margin-bottom: var(--space-6); }

/* O `legend` dentro de um `fieldset` não é `label`, então não herda o estilo de
   rótulo acima — e o reset do fieldset tirou o visual padrão dele. Sem esta
   classe, o título do grupo some. */
/* Lista curta de apoio (quem tem o papel, ordem das regras). Sem marcador: o
   conteúdo aqui é referência, não sequência de passos. */
.dg-lista { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.dg-lista li { margin-bottom: var(--space-2); }
.dg-lista li:last-child { margin-bottom: 0; }

/* Formulário que vive dentro de uma linha de ações (o botão "Apagar" ao lado de
   "Baixar"): sem isto, a quebra de linha do form desalinha os botões. */
.dg-form-inline { display: inline; margin: 0; }

/* Select dentro de uma linha de acoes (a matriz de acesso). Sem isto ele herda
   `width: 100%` e empurra motivo e botoes para linhas separadas. */
.dg-select--pequeno {
  width: auto;
  min-width: 11rem;
  min-height: var(--alvo-minimo);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-s);
}

.dg-campo label {
  display: block;
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
  margin-bottom: var(--space-2);
}

.dg-input, .dg-select, .dg-textarea {
  width: 100%;
  min-height: var(--alvo-minimo);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-micro) var(--ease), box-shadow var(--motion-micro) var(--ease);
}
.dg-textarea { min-height: 96px; resize: vertical; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-body-s); }

.dg-input:hover, .dg-select:hover, .dg-textarea:hover { border-color: var(--brand-500); }
.dg-input:focus, .dg-select:focus, .dg-textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--shadow-foco);
}
.dg-input[aria-invalid="true"] { border-color: var(--error); }

.dg-dica { display: block; margin-top: var(--space-2); font-size: var(--text-label); color: var(--ink-500); }

.dg-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--alvo-minimo); font-size: var(--text-body-s); }
.dg-check input { width: 18px; height: 18px; accent-color: var(--brand-800); }


/* --- Bloco de entrada: as abas ABRAÇAM os campos --------------------------
   Visualmente são abas; **semanticamente é um grupo de rádio**. Deliberado:
   `role="tablist"` promete navegação por setas e foco gerenciado, que exigem
   JavaScript — e aqui não há nenhum. O grupo de rádio já vem com teclado e
   leitura de tela corretos do próprio navegador.

   A troca de cor é feita por uma variável (`--cor-modo`) definida no contêiner
   com `:has()` — também sem JavaScript. Onde `:has()` não existir, a cor não
   muda e todo o resto continua funcionando.
   ------------------------------------------------------------------------- */
.dg-login__bloco {
  --cor-modo: var(--brand-800);
  --tint-modo: var(--brand-tint);
  --cor-acento: var(--brand-500);
  --anel-modo: rgba(1, 70, 101, 0.25);

  background: var(--surface);
  border: 2px solid var(--cor-modo);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: border-color var(--motion-hover) var(--ease);
}

/* Modo Winthor: azul #025ca4 na borda, no foco e no botão; laranja #c95400
   como indicador da aba.

   O laranja NÃO vai em texto pequeno: sobre branco ele dá 4,39:1, abaixo do
   4,5:1 que o WCAG AA exige para texto normal. Como elemento gráfico o mínimo
   é 3:1, e ele passa com folga. Usar a cor da marca sem checar isso é como se
   cria texto que o usuário não lê — e a verificação calcula o número. */
.dg-login__bloco:has(#aba-winthor:checked) {
  --cor-modo: #c95400;
  --tint-modo: rgba(2, 92, 164, 0.08);
  --cor-acento: #c95400;
  --anel-modo: rgba(2, 92, 164, 0.30);
}

.dg-abas { margin-bottom: var(--space-6); }

.dg-abas__campo {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dg-abas__lista {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}

.dg-aba {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: var(--alvo-minimo);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: border-color var(--motion-hover) var(--ease),
              background-color var(--motion-hover) var(--ease);
}
.dg-aba strong { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--ink-700); }
.dg-aba span { font-size: var(--text-label); color: var(--ink-500); }
.dg-aba:hover { background: var(--brand-tint); }
.dg-aba:hover strong { color: var(--brand-800); }

/* Aba ativa: fundo tingido, indicador na cor de acento e texto em peso forte.
   O estado não depende só da cor — o indicador e o peso mudam junto. */
#aba-direto:checked ~ .dg-abas__lista label[for="aba-direto"],
#aba-winthor:checked ~ .dg-abas__lista label[for="aba-winthor"] {
  border-color: var(--border);
  border-bottom-color: var(--cor-acento);
  background: var(--tint-modo);
}
#aba-direto:checked ~ .dg-abas__lista label[for="aba-direto"] strong,
#aba-winthor:checked ~ .dg-abas__lista label[for="aba-winthor"] strong {
  color: var(--cor-modo);
  font-weight: var(--weight-bold);
}

/* O foco precisa aparecer no rótulo, já que o rádio está escondido. */
#aba-direto:focus-visible ~ .dg-abas__lista label[for="aba-direto"],
#aba-winthor:focus-visible ~ .dg-abas__lista label[for="aba-winthor"] {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.dg-abas__painel { display: none; }
#aba-direto:checked ~ .dg-abas__painel--direto,
#aba-winthor:checked ~ .dg-abas__painel--winthor { display: block; }

.dg-abas__painel p { margin-bottom: var(--space-3); font-size: var(--text-body-s); color: var(--ink-700); }
.dg-abas__painel p:last-child { margin-bottom: 0; }

/* Marca lateral no painel do modo ativo. No Winthor ela fica LARANJA — é o
   segundo sinal de que a conferência vai acontecer no ERP, e não aqui. */
.dg-abas__painel {
  border-left: 3px solid var(--cor-acento);
  padding-left: var(--space-4);
}

/* --- Os campos seguem a cor do modo escolhido ----------------------------- */
.dg-login__bloco .dg-input:focus,
.dg-login__bloco .dg-input:focus-visible {
  border-color: var(--cor-modo);
  box-shadow: 0 0 0 3px var(--anel-modo);
}
.dg-login__bloco .dg-input:hover { border-color: var(--cor-modo); }
.dg-login__bloco .dg-campo label { color: var(--ink-700); }
.dg-login__bloco .dg-btn--primario { background: var(--cor-modo); }
.dg-login__bloco .dg-btn--primario:hover { filter: brightness(0.88); }

/* --------------------------------------------------------------------------
   6. Cartões
   -------------------------------------------------------------------------- */
.dg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.dg-card--justo { padding: 0; overflow: hidden; }
.dg-card__cabecalho { padding: var(--space-6); border-bottom: 1px solid var(--border); }
.dg-card__corpo { padding: var(--space-6); }

/* Tabela dentro de cartão COM padding: sem este contêiner, uma tabela larga
   (auditoria, matriz de acesso) não encolhe abaixo do próprio `min-content` e o
   conteúdo esbarra — ou passa — na borda do cartão. Rolagem horizontal é o
   comportamento correto: o dado continua acessível e a página não estoura. */
.dg-tabela-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* Grade única — serve para conteúdo E para os cartões de serviço. O mínimo é
   generoso de propósito: aqui dentro cabem tabelas, e tabela espremida em 280px
   vira ilegível. O `min(100%, ...)` impede a coluna de passar da largura
   disponível, então em tela estreita ela colapsa sozinha, sem media query. */
.dg-grade {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
.dg-grade--larga {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
}

/* --------------------------------------------------------------------------
   7. Avisos — cor + texto, nunca só cor (§22)
   -------------------------------------------------------------------------- */
.dg-aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-6);
  font-size: var(--text-body-s);
}
.dg-aviso strong { display: block; font-weight: var(--weight-semibold); }
.dg-aviso--sucesso { background: var(--success-tint); border-color: var(--success); color: #0d5c33; }
.dg-aviso--erro    { background: var(--error-tint);   border-color: var(--error);   color: #7d2626; }
.dg-aviso--atencao { background: var(--warning-tint); border-color: var(--warning); color: #7a5310; }
.dg-aviso--info    { background: var(--surface-soft); border-color: var(--border);  color: var(--ink-700); }

/* --------------------------------------------------------------------------
   8. Etiquetas / chips
   -------------------------------------------------------------------------- */
.dg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--brand-800);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-chip--neutro { color: var(--ink-700); }
.dg-chip--mfa    { color: var(--success); border-color: var(--success); }
.dg-chip--erro   { color: var(--error); border-color: var(--error); background: var(--error-tint); }
.dg-chip--off    { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   9. Portal de serviços
   -------------------------------------------------------------------------- */
.dg-servico {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-hover) var(--ease), box-shadow var(--motion-hover) var(--ease);
}
.dg-servico:hover { border-color: var(--brand-500); box-shadow: 0 10px 32px rgba(0, 48, 70, 0.07); }

/* Marca do serviço: logotipo quando existe, ícone quando não, iniciais como
   último recurso. Nunca fica um buraco branco na tela. */
.dg-servico__topo { display: flex; align-items: center; gap: var(--space-4); }
.dg-servico__marca {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 100px; height: 75px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--brand-800);
  font-size: var(--text-body-l);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}
.dg-servico__marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dg-servico__marca .dg-icon { width: 1.75em; height: 1.75em; }

/* Prévia do logotipo no painel: fundo claro e contorno, para o admin ver imagem
   de fundo transparente sem precisar abrir o arquivo. */
.dg-logo-preview {
  display: block;
  max-width: 100%;
  max-height: 120px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  object-fit: contain;
}

/* Campo de arquivo: o controle nativo não segue os tokens, então damos a ele o
   mesmo contorno dos outros campos e um botão com a cara do sistema. */
.dg-input--arquivo { padding: var(--space-2) var(--space-3); }
.dg-input--arquivo::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--brand-800);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.dg-input--arquivo::file-selector-button:hover { border-color: var(--brand-500); }

.dg-servico__nome { font-size: var(--text-body-l); font-weight: var(--weight-semibold); color: var(--brand-800); }
.dg-servico__desc { color: var(--ink-700); font-size: var(--text-body-s); margin: 0; }
.dg-servico__url { font-size: var(--text-label); color: var(--ink-500); word-break: break-all; }
.dg-servico__cta { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2);
                   font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--brand-700); }
.dg-servico:hover .dg-servico__cta { gap: var(--space-3); }

/* Cabeçalho do portal: quem é o usuário e o que ele pode abrir. */
.dg-portal__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.dg-portal__topo h1 { margin-bottom: var(--space-2); }

/* Estado vazio (§26) — com ação de saída, nunca um beco sem saída. */
.dg-vazio {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dg-vazio h2 { font-size: var(--text-h3); }
.dg-vazio p { color: var(--ink-500); max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   10. Tela de login — composição editorial contida (§16, sem exagero)
   -------------------------------------------------------------------------- */
.dg-login { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }

.dg-login__marca {
  background: var(--brand-900);
  color: #fff;
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
}
.dg-login__marca h1 { color: #fff; font-size: var(--text-display); font-weight: var(--weight-bold); max-width: 18ch; }
.dg-login__marca p { color: rgba(255, 255, 255, 0.72); max-width: 42ch; }
.dg-login__regua { width: 64px; height: 3px; background: var(--brand-500); border: 0; margin: 0 0 var(--space-8); }
.dg-login__rodape { font-size: var(--text-label); color: rgba(255, 255, 255, 0.55); }

.dg-login__form { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); }
.dg-login__cartao { width: 100%; max-width: 460px; }
.dg-login__nota { margin-top: var(--space-6); font-size: var(--text-body-s); }
.dg-login__cartao .dg-logo { height: 40px; margin-bottom: var(--space-8); }
.dg-login__voltar { display: inline-block; margin-bottom: var(--space-4); font-size: var(--text-body-s); }

/* --------------------------------------------------------------------------
   11. Tabelas
   -------------------------------------------------------------------------- */
.dg-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-body-s); }
/* A legenda é o cabeçalho da tabela — e por isso precisa do MESMO recuo lateral
   das células, senão ela encosta na borda da tabela enquanto o conteúdo da
   primeira coluna está 16px para dentro. O recuo é `--space-4` nos dois lugares
   de propósito: é o que os alinha, e um valor "quase igual" (15px, por exemplo)
   deixaria a legenda 1px fora do lugar.

   O recuo SUPERIOR também importa: as tabelas ficam em cartões sem padding
   (`.dg-card--justo`), então sem ele a legenda cola na borda do cartão. */
.dg-tabela caption {
  text-align: left;
  color: var(--ink-500);
  font-size: var(--text-label);
  padding: var(--space-3) var(--space-4);
}
.dg-tabela th, .dg-tabela td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dg-tabela th { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); font-weight: var(--weight-semibold); background: var(--surface-soft); }
.dg-tabela tbody tr:hover { background: var(--brand-tint); }
.dg-tabela td.num { font-variant-numeric: tabular-nums; }
.dg-tabela .acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   12. Métricas do painel
   -------------------------------------------------------------------------- */
.dg-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.dg-metrica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.dg-metrica__valor { font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--brand-800); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dg-metrica__rotulo { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); margin-top: var(--space-2); }
.dg-metrica--alerta .dg-metrica__valor { color: var(--error); }

/* --------------------------------------------------------------------------
   13. Administração — navegação lateral discreta
   -------------------------------------------------------------------------- */
.dg-admin { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-12); align-items: start; }
.dg-admin__nav { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.dg-admin__nav a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--alvo-minimo);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-700); text-decoration: none;
  font-size: var(--text-body-s); font-weight: var(--weight-medium);
  border-left: 2px solid transparent;
  transition: background-color var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.dg-admin__nav a:hover { background: var(--brand-tint); color: var(--brand-800); }
.dg-admin__nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-800); border-left-color: var(--brand-800); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   14. Ícones (§25 — uma família só, 1.5–2px, sem emoji)
   -------------------------------------------------------------------------- */
.dg-icon { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -0.15em; flex: none; }

/* O sprite é embutido em toda página: são 40 <symbol>, que nunca renderizam por
   si — mas o <svg> que os embrulha teria 300x150 se não fosse escondido.
   Escondido por CLASSE, e não por `style=""`, porque a CSP é `style-src 'self'`
   e atributo de estilo inline é bloqueado por ela. */
.dg-sprite { display: none; }

/* --------------------------------------------------------------------------
   15. Blocos auxiliares
   -------------------------------------------------------------------------- */
.dg-pilha { display: flex; flex-direction: column; gap: var(--space-4); }
.dg-linha { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: 3px; }
.dg-linha--fim { justify-content: flex-end; }
.dg-separador { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-8); }

.dg-segredo {
  display: block;
  padding: var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-body-s);
  letter-spacing: 0.08em;
  word-break: break-all;
  color: var(--ink-900);
}
.dg-codigos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.dg-codigos li { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); text-align: center; letter-spacing: 0.08em; }

.dg-qr { display: block; width: 208px; height: 208px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }

/* --- Campo de senha com botão de mostrar --------------------------------
   O botão fica DENTRO do campo, à direita, com a altura inteira do campo: é o
   que dá o alvo de toque de 44px sem aumentar a altura do formulário, e é onde
   o usuário já procura o controle (é ali que o Edge põe o dele).

   O botão nativo do Edge é escondido logo abaixo — dois controles no mesmo
   lugar seria exatamente o descuido visual a evitar. */
.dg-campo-senha { position: relative; }

.dg-campo-senha .dg-input { padding-right: 92px; }

/* Edge (Chromium e legado) desenha o próprio botão de revelar. */
.dg-campo-senha input::-ms-reveal,
.dg-campo-senha input::-ms-clear { display: none; }

.dg-ver-senha {
  position: absolute;
  inset: 0 0 0 auto;
  width: 88px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: transparent;
  color: var(--brand-700);
  font-family: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--motion-micro) var(--ease),
              color var(--motion-micro) var(--ease);
}
.dg-ver-senha:hover { background: var(--brand-tint); color: var(--brand-800); }
.dg-ver-senha:active { background: var(--brand-tint-forte); }

/* O campo ganha a borda de foco; o botão apenas acompanha, sem competir. */
.dg-ver-senha:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

/* Estado "mostrando": o botão fica marcado, porque o rótulo sozinho pode passar
   batido se o usuário desviar o olhar do campo. */
.dg-ver-senha[aria-pressed="true"] { color: var(--brand-800); background: var(--brand-tint); }

/* O campo com senha visível ganha um leve destaque, para não restar dúvida de
   que o que está na tela é a senha. */
.dg-campo-senha input[type="text"] {
  border-color: var(--brand-500);
  background: var(--surface-soft);
}

/* --------------------------------------------------------------------------
   16. Responsivo (§21) — recompor, não encolher
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dg-login { grid-template-columns: 1fr; min-height: 0; }
  .dg-login__marca { padding: var(--space-12) var(--space-6); gap: var(--space-8); }
  .dg-login__marca h1 { font-size: var(--text-h1); }
  .dg-admin { grid-template-columns: 1fr; gap: var(--space-6); }
  .dg-admin__nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .dg-main { padding-block: var(--space-8); }
  .dg-header__inner { gap: var(--space-4); }
  .dg-nav { margin-inline-start: 0; width: 100%; }
  h1 { font-size: var(--text-h2); }
}