/*
 * Console administrativo do PremiumHub — folha de estilo única.
 *
 * Escrita à mão e servida estaticamente, sem Tailwind e sem passo de build. A
 * razão é operacional: a worktree do protótipo não tem node_modules, e instalar
 * dependências pela rede exigiria autorização que esta fase não tem. Uma folha
 * de ~600 linhas cobre o que o painel precisa sem nada disso.
 *
 * Consequência a registrar: quando o painel for adotado de verdade, este
 * arquivo deve ser portado para o Tailwind já presente no projeto, para não
 * conviverem dois sistemas de estilo. A decisão está em docs/admin/README.md.
 *
 * Nenhuma fonte externa, nenhuma imagem remota, nenhum @import. A CSP do
 * console bloquearia, e a demonstração precisa funcionar sem rede.
 */

/* ------------------------------------------------------------------
 * Tokens
 *
 * Os pares claro/escuro são definidos duas vezes: uma por
 * prefers-color-scheme, que é a preferência do sistema, e outra por
 * [data-theme], que é a escolha explícita do usuário no seletor do cabeçalho.
 * A segunda precisa vencer a primeira nos dois sentidos — daí as duas regras
 * completas em vez de um override parcial.
 * ------------------------------------------------------------------ */

:root {
  --fundo: #f6f7f9;
  --fundo-elevado: #ffffff;
  --fundo-sutil: #eceef2;
  --borda: #d4d8e0;
  --borda-forte: #b3bac7;
  --texto: #1b1f27;
  --texto-suave: #5a6272;
  --texto-fraco: #79808f;

  --acento: #2b4f8f;
  --acento-suave: #e6ecf7;
  --acento-texto: #ffffff;

  --positivo: #1f6b45;
  --positivo-fundo: #e2f2e9;
  --alerta: #8a5a09;
  --alerta-fundo: #fbeeda;
  --perigo: #a32a26;
  --perigo-fundo: #fbe6e5;
  --info: #1d5a75;
  --info-fundo: #e0eff5;
  --neutro: #5a6272;
  --neutro-fundo: #eceef2;

  --leitura-fundo: #fff5d9;
  --leitura-borda: #d9b64e;
  --leitura-texto: #5b4506;

  --raio: 8px;
  --raio-pequeno: 5px;
  --sombra: 0 1px 2px rgba(20, 25, 35, 0.06), 0 2px 8px rgba(20, 25, 35, 0.04);
  --largura-menu: 250px;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12151b;
    --fundo-elevado: #1a1e26;
    --fundo-sutil: #232832;
    --borda: #333a47;
    --borda-forte: #4a5364;
    --texto: #e8eaf0;
    --texto-suave: #a8b0c0;
    --texto-fraco: #868e9f;

    --acento: #7ba3e8;
    --acento-suave: #1e2836;
    --acento-texto: #10141a;

    --positivo: #6fc99a;
    --positivo-fundo: #16281f;
    --alerta: #e0b25c;
    --alerta-fundo: #2b2216;
    --perigo: #ec8681;
    --perigo-fundo: #2d1a19;
    --info: #74bcd8;
    --info-fundo: #16262d;
    --neutro: #a8b0c0;
    --neutro-fundo: #232832;

    --leitura-fundo: #2d2612;
    --leitura-borda: #7d6520;
    --leitura-texto: #f0d68a;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="light"] {
  --fundo: #f6f7f9;
  --fundo-elevado: #ffffff;
  --fundo-sutil: #eceef2;
  --borda: #d4d8e0;
  --borda-forte: #b3bac7;
  --texto: #1b1f27;
  --texto-suave: #5a6272;
  --texto-fraco: #79808f;
  --acento: #2b4f8f;
  --acento-suave: #e6ecf7;
  --acento-texto: #ffffff;
  --positivo: #1f6b45;
  --positivo-fundo: #e2f2e9;
  --alerta: #8a5a09;
  --alerta-fundo: #fbeeda;
  --perigo: #a32a26;
  --perigo-fundo: #fbe6e5;
  --info: #1d5a75;
  --info-fundo: #e0eff5;
  --neutro: #5a6272;
  --neutro-fundo: #eceef2;
  --leitura-fundo: #fff5d9;
  --leitura-borda: #d9b64e;
  --leitura-texto: #5b4506;
  --sombra: 0 1px 2px rgba(20, 25, 35, 0.06), 0 2px 8px rgba(20, 25, 35, 0.04);
}

:root[data-theme="dark"] {
  --fundo: #12151b;
  --fundo-elevado: #1a1e26;
  --fundo-sutil: #232832;
  --borda: #333a47;
  --borda-forte: #4a5364;
  --texto: #e8eaf0;
  --texto-suave: #a8b0c0;
  --texto-fraco: #868e9f;
  --acento: #7ba3e8;
  --acento-suave: #1e2836;
  --acento-texto: #10141a;
  --positivo: #6fc99a;
  --positivo-fundo: #16281f;
  --alerta: #e0b25c;
  --alerta-fundo: #2b2216;
  --perigo: #ec8681;
  --perigo-fundo: #2d1a19;
  --info: #74bcd8;
  --info-fundo: #16262d;
  --neutro: #a8b0c0;
  --neutro-fundo: #232832;
  --leitura-fundo: #2d2612;
  --leitura-borda: #7d6520;
  --leitura-texto: #f0d68a;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sem scroll horizontal na página: conteúdo largo rola dentro do próprio
     contêiner (ver .tabela-rolagem). */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5rem;
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

p { margin: 0 0 0.75rem; }

a {
  color: var(--acento);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Foco sempre visível, e com deslocamento para não encostar na borda do
   elemento — um anel colado no controle some contra fundos escuros. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

/* Conteúdo só para leitor de tela. Não usa display:none, que o removeria da
   árvore de acessibilidade junto com a apresentação visual. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O link de pular navegação só aparece ao receber foco pelo teclado. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--acento);
  color: var(--acento-texto);
  border-radius: 0 0 var(--raio) 0;
  font-weight: 600;
}

.pular-para-conteudo:focus {
  left: 0;
}

/* ------------------------------------------------------------------
 * Faixa de modo somente leitura
 *
 * Fica no topo de todas as páginas, inclusive a de login, e é `position:
 * sticky` de propósito: a confirmação de que o ambiente é simulado precisa
 * continuar visível depois de rolar uma tabela longa. Uma faixa que some ao
 * rolar cumpre o requisito só na primeira dobra.
 * ------------------------------------------------------------------ */

.faixa-leitura {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: baseline;
  padding: 0.5rem 1.1rem;
  background: var(--leitura-fundo);
  border-bottom: 2px solid var(--leitura-borda);
  color: var(--leitura-texto);
  font-size: 0.83rem;
  font-weight: 600;
}

.faixa-leitura strong {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.faixa-leitura span {
  font-weight: 500;
}

/* ------------------------------------------------------------------
 * Estrutura
 * ------------------------------------------------------------------ */

.console {
  display: grid;
  grid-template-columns: var(--largura-menu) 1fr;
  min-height: calc(100vh - 40px);
}

.menu-lateral {
  background: var(--fundo-elevado);
  border-right: 1px solid var(--borda);
  padding: 1.1rem 0.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.marca {
  padding: 0 0.5rem;
}

.marca-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.marca-subtitulo {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menu-grupo-titulo {
  padding: 0 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-fraco);
}

.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-weight: 500;
}

.menu-item:hover {
  background: var(--fundo-sutil);
  color: var(--texto);
  text-decoration: none;
}

/* O item ativo é marcado por fundo, peso e uma barra à esquerda. Três sinais e
   não só a cor, para sobreviver ao daltonismo e ao monitor de baixo contraste;
   aria-current="page" cobre o leitor de tela. */
.menu-item[aria-current="page"] {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--acento);
}

.menu-simbolo {
  font-size: 0.8rem;
  width: 1.1em;
  text-align: center;
  flex-shrink: 0;
}

.conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0; /* deixa o grid encolher em vez de estourar a largura */
}

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.4rem;
  background: var(--fundo-elevado);
  border-bottom: 1px solid var(--borda);
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.usuario-iniciais {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.usuario-dados {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.usuario-nome { font-size: 0.85rem; font-weight: 600; }
.usuario-papel { font-size: 0.72rem; color: var(--texto-fraco); }

main {
  padding: 1.4rem;
  max-width: 1500px;
  width: 100%;
}

.pagina-cabecalho {
  margin-bottom: 1.2rem;
}

.pagina-descricao {
  color: var(--texto-suave);
  max-width: 75ch;
  margin: 0;
}

.migalhas {
  font-size: 0.8rem;
  color: var(--texto-fraco);
  margin-bottom: 0.4rem;
}

.migalhas a { color: var(--texto-suave); }

/* ------------------------------------------------------------------
 * Cartões e blocos
 * ------------------------------------------------------------------ */

.cartao {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1rem 1.1rem;
}

.cartao + .cartao { margin-top: 1rem; }

.cartao-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.cartao-titulo h2,
.cartao-titulo h3 { margin: 0; }

.secao + .secao { margin-top: 1.6rem; }

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0.9rem;
}

.metrica {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--neutro);
  border-radius: var(--raio);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: inherit;
}

a.metrica:hover {
  border-color: var(--borda-forte);
  text-decoration: none;
}

a.metrica:hover .metrica-rotulo { color: var(--texto); }

.metrica-positivo { border-left-color: var(--positivo); }
.metrica-alerta { border-left-color: var(--alerta); }
.metrica-perigo { border-left-color: var(--perigo); }
.metrica-info { border-left-color: var(--info); }
.metrica-neutro { border-left-color: var(--neutro); }

.metrica-rotulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metrica-valor {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Altura reservada mesmo sem valor, para o card não pular quando o
     conteúdo trocar. */
  min-height: 1.2em;
}

.metrica-tendencia {
  font-size: 0.78rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.metrica-dica {
  font-size: 0.78rem;
  color: var(--texto-fraco);
  margin-top: 0.15rem;
}

/* ------------------------------------------------------------------
 * Gráficos
 *
 * Duas colunas no desktop, uma no mobile. Cada card carrega título, pergunta,
 * destaque, canvas, tabela e definição — a tabela é a fonte de dados do
 * JavaScript, não um anexo de acessibilidade.
 * ------------------------------------------------------------------ */

.grade-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1rem;
}

.grafico-cartao {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0; /* deixa o grid encolher em vez de estourar a largura */
}

.grafico-cartao + .grafico-cartao { margin-top: 0; }

.grafico-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.grafico-cabecalho h3 { margin: 0; }

.grafico-pergunta {
  margin: 0.1rem 0 0;
  font-size: 0.84rem;
  color: var(--texto-suave);
  max-width: 46ch;
}

.grafico-destaque {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.grafico-destaque-valor {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.grafico-destaque-rotulo {
  font-size: 0.72rem;
  color: var(--texto-fraco);
  max-width: 20ch;
}

.grafico-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin: 0.5rem 0 0.7rem;
  font-size: 0.76rem;
  color: var(--texto-fraco);
}

/* A etiqueta de dados fictícios acompanha cada gráfico, e não só a faixa do
   topo: um card capturado isoladamente precisa carregar o aviso consigo. */
.grafico-etiqueta-ficticio {
  padding: 0.08rem 0.45rem;
  border-radius: var(--raio-pequeno);
  background: var(--leitura-fundo);
  border: 1px solid var(--leitura-borda);
  color: var(--leitura-texto);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.grafico-aplicacao {
  font-weight: 600;
  color: var(--texto-suave);
}

.grafico-recortes {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}

.grafico-recortes li {
  font-size: 0.71rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--raio-pequeno);
  background: var(--fundo-sutil);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}

/* Altura fixa reservada: sem ela, o canvas nasce com zero e o layout salta
   quando o Chart.js desenha. Com JavaScript desligado, o espaço fica vazio e a
   tabela logo abaixo continua respondendo pela informação. */
.grafico-tela {
  position: relative;
  height: 240px;
  margin-bottom: 0.8rem;
}

.grafico-tela canvas {
  max-width: 100%;
}

/* A tabela é sempre presente e nunca escondida de leitores de tela. Recebe
   altura máxima para não dominar o card quando tem doze linhas. */
.grafico-tabela {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
}

.grafico-tabela table { font-size: 0.8rem; }

.grafico-tabela caption {
  padding: 0.5rem 0.6rem 0.4rem;
  font-size: 0.76rem;
}

.grafico-tabela th,
.grafico-tabela td { padding: 0.35rem 0.6rem; }

.grafico-tabela thead th { top: 0; }

.grafico-tabela tbody th {
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

.grafico-definicao {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.grafico-definicao summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--acento);
  padding: 0.2rem 0;
}

.grafico-definicao summary:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.grafico-definicao p {
  margin: 0.4rem 0 0;
  max-width: 70ch;
}

/* ------------------------------------------------------------------
 * Indicadores de estado
 *
 * Sempre símbolo + texto. A cor é reforço, nunca o único portador da
 * informação.
 * ------------------------------------------------------------------ */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.13rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.selo-simbolo { font-size: 0.62rem; line-height: 1; }

.selo-positivo { background: var(--positivo-fundo); color: var(--positivo); border-color: var(--positivo); }
.selo-alerta   { background: var(--alerta-fundo);   color: var(--alerta);   border-color: var(--alerta); }
.selo-perigo   { background: var(--perigo-fundo);   color: var(--perigo);   border-color: var(--perigo); }
.selo-info     { background: var(--info-fundo);     color: var(--info);     border-color: var(--info); }
.selo-neutro   { background: var(--neutro-fundo);   color: var(--neutro);   border-color: var(--borda-forte); }

/* ------------------------------------------------------------------
 * Tabelas
 * ------------------------------------------------------------------ */

.tabela-rolagem {
  overflow-x: auto;
  /* Barra de rolagem alcançável por teclado precisa ser focável. */
  scrollbar-width: thin;
}

.tabela-rolagem:focus-visible { outline-offset: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

th, td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

thead th {
  background: var(--fundo-sutil);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borda-forte);
  white-space: nowrap;
  position: sticky;
  top: 40px; /* abaixo da faixa de somente leitura */
  z-index: 2;
}

tbody tr:hover { background: var(--fundo-sutil); }

tbody tr:last-child td { border-bottom: none; }

.numero { font-variant-numeric: tabular-nums; }

.mono {
  font-family: var(--fonte-mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

.celula-secundaria {
  display: block;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

/* ------------------------------------------------------------------
 * Filtros
 * ------------------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-end;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 150px;
}

.campo label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--texto-suave);
}

select,
input[type="text"],
input[type="date"],
input[type="search"] {
  font: inherit;
  font-size: 0.87rem;
  padding: 0.36rem 0.5rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-elevado);
  color: var(--texto);
  min-height: 34px;
}

.botao {
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--borda-forte);
  background: var(--fundo-elevado);
  color: var(--texto);
  cursor: pointer;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.botao:hover { background: var(--fundo-sutil); text-decoration: none; }

.botao-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.botao-primario:hover { filter: brightness(1.08); background: var(--acento); }

.botao-discreto {
  border-color: transparent;
  background: transparent;
  color: var(--texto-suave);
}

.botao-discreto:hover { background: var(--fundo-sutil); }

/* ------------------------------------------------------------------
 * Paginação, estados vazios e avisos
 * ------------------------------------------------------------------ */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.paginacao-controles { display: flex; gap: 0.5rem; }

.estado-vazio {
  text-align: center;
  padding: 2.6rem 1.2rem;
  color: var(--texto-suave);
}

.estado-vazio-simbolo {
  font-size: 1.8rem;
  color: var(--texto-fraco);
  margin-bottom: 0.4rem;
}

.estado-vazio h3 { margin-bottom: 0.3rem; }

.aviso {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem 0.95rem;
  border-radius: var(--raio);
  border: 1px solid;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

.aviso-info    { background: var(--info-fundo);    border-color: var(--info);    color: var(--info); }
.aviso-alerta  { background: var(--alerta-fundo);  border-color: var(--alerta);  color: var(--alerta); }
.aviso-perigo  { background: var(--perigo-fundo);  border-color: var(--perigo);  color: var(--perigo); }
.aviso-neutro  { background: var(--fundo-sutil);   border-color: var(--borda);   color: var(--texto-suave); }

.aviso strong { display: block; }

/* ------------------------------------------------------------------
 * Listas de definição (páginas de detalhe)
 * ------------------------------------------------------------------ */

.definicoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0;
}

.definicao dt {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  margin-bottom: 0.1rem;
}

.definicao dd {
  margin: 0;
  font-size: 0.93rem;
}

/* ------------------------------------------------------------------
 * Linha do tempo
 * ------------------------------------------------------------------ */

.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.4rem;
  position: relative;
}

.linha-tempo::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  background: var(--borda);
}

.evento {
  position: relative;
  padding-bottom: 1.1rem;
}

.evento:last-child { padding-bottom: 0; }

.evento::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.42rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--fundo-elevado);
  border: 2px solid var(--neutro);
}

.evento-positivo::before { border-color: var(--positivo); }
.evento-alerta::before   { border-color: var(--alerta); }
.evento-perigo::before   { border-color: var(--perigo); }
.evento-info::before     { border-color: var(--info); }

.evento-titulo { font-weight: 600; margin: 0; }

.evento-meta {
  font-size: 0.78rem;
  color: var(--texto-fraco);
  margin: 0 0 0.2rem;
}

.evento-descricao {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.89rem;
  max-width: 80ch;
}

/* ------------------------------------------------------------------
 * Etiquetas de campos ausentes
 *
 * Bloco que declara, na própria tela, o que o painel não mostra.
 * ------------------------------------------------------------------ */

.campos-ausentes {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.campos-ausentes li {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--raio-pequeno);
  background: var(--fundo-sutil);
  color: var(--texto-fraco);
  border: 1px dashed var(--borda-forte);
  text-decoration: line-through;
}

/* ------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------ */

.login-envolve {
  min-height: calc(100vh - 40px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.login-cartao {
  width: 100%;
  max-width: 460px;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.6rem;
}

.login-titulo { margin-bottom: 0.25rem; }

.login-subtitulo {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

.conta-opcao {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 0.6rem;
  cursor: pointer;
}

.conta-opcao:hover { background: var(--fundo-sutil); }

.conta-opcao:focus-within {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.conta-opcao input { margin-top: 0.28rem; flex-shrink: 0; }

.conta-nome { font-weight: 600; font-size: 0.92rem; }
.conta-email { font-size: 0.8rem; color: var(--texto-suave); }
.conta-papel { font-size: 0.76rem; color: var(--texto-fraco); }

.botao-google {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
  padding: 0.6rem 1rem;
  font-size: 0.93rem;
}

.login-nota {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

/* ------------------------------------------------------------------
 * Responsivo
 *
 * Um ponto de quebra só, em 900px. O painel é uma ferramenta de mesa; o alvo
 * do mobile é continuar utilizável, não replicar a densidade do desktop.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .console {
    grid-template-columns: 1fr;
  }

  .menu-lateral {
    border-right: none;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 1rem;
  }

  .menu-lista {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .menu-item { font-size: 0.85rem; padding: 0.4rem 0.6rem; }

  .menu-item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--acento); }

  main { padding: 1rem; }

  thead th { position: static; }

  /* Tabelas viram cartões empilhados: cada célula ganha o rótulo da coluna à
     esquerda, via data-rotulo. Sem isso, a leitura no celular exige rolagem
     horizontal em toda linha. */
  .tabela-cartoes thead { display: none; }

  .tabela-cartoes tbody tr {
    display: block;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.6rem;
    background: var(--fundo-elevado);
  }

  .tabela-cartoes tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: 0.6rem;
    border-bottom: 1px dashed var(--borda);
    padding: 0.42rem 0;
  }

  .tabela-cartoes tbody td:last-child { border-bottom: none; }

  .tabela-cartoes tbody td::before {
    content: attr(data-rotulo);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-fraco);
  }

  /* Uma coluna e canvas mais baixo. Doze categorias num gráfico de 320px de
     largura ficam ilegíveis, mas a tabela logo abaixo permanece exata — é a
     vantagem de ela ser a fonte, e não um complemento. */
  .grade-graficos { grid-template-columns: 1fr; }

  .grafico-tela { height: 200px; }

  .grafico-destaque {
    align-items: flex-start;
    text-align: left;
  }

  /* A tabela de dados do gráfico mantém a forma tabular no mobile: virar
     cartões empilhados destruiria a comparação entre períodos, que é
     justamente para o que ela serve. */
  .grafico-tabela { max-height: 300px; }
}

/* ------------------------------------------------------------------
 * Movimento reduzido e impressão
 * ------------------------------------------------------------------ */

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

@media print {
  .menu-lateral,
  .cabecalho-acoes,
  .filtros,
  .paginacao-controles { display: none; }

  /* A faixa de somente leitura sobrevive à impressão de propósito: uma tabela
     de dados simulados impressa e levada a uma reunião é exatamente o cenário
     em que alguém confunde fixture com número real. */
  .faixa-leitura {
    position: static;
    border: 2px solid #000;
    color: #000;
    background: #fff;
  }

  body { background: #fff; color: #000; }

  .console { display: block; }

  /* O canvas não imprime de forma confiável — muitos navegadores o entregam em
     branco. A tabela imprime sempre, então ela é o que sobra no papel, e é a
     representação completa de qualquer forma. */
  .grafico-tela { display: none; }

  .grade-graficos { display: block; }

  .grafico-tabela {
    max-height: none;
    overflow: visible;
  }

  /* A definição da métrica precisa estar aberta na impressão: um <details>
     fechado no papel esconde o cálculo de quem lê o número. */
  .grafico-definicao[open] summary,
  .grafico-definicao summary { list-style: none; }

  .grafico-definicao p { display: block !important; }
}

/* ==================================================================
 * PremiumHub Admin — visual system 2026
 * ================================================================== */

:root,
:root[data-theme="light"] {
  --fundo: #f3f6f4;
  --fundo-elevado: #ffffff;
  --fundo-sutil: #eaf0ed;
  --borda: #dce5e1;
  --borda-forte: #b9cac3;
  --texto: #14241e;
  --texto-suave: #52665e;
  --texto-fraco: #7b8c85;
  --acento: #087257;
  --acento-suave: #ddf4eb;
  --acento-texto: #ffffff;
  --positivo: #137b58;
  --positivo-fundo: #def5e9;
  --alerta: #9a6100;
  --alerta-fundo: #fff2d8;
  --perigo: #bd3a42;
  --perigo-fundo: #fde7e8;
  --info: #236b82;
  --info-fundo: #e2f2f6;
  --neutro: #61736b;
  --neutro-fundo: #edf1ef;
  --leitura-fundo: #fff8df;
  --leitura-borda: #efd47b;
  --leitura-texto: #69500a;
  --raio: 16px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(14, 41, 31, .03), 0 12px 30px rgba(14, 41, 31, .06);
  --largura-menu: 272px;
  --fonte: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --fonte-titulo: "Avenir Next", "Century Gothic", sans-serif;
  --menu-fundo: #112820;
  --menu-texto: #bed0c8;
  --menu-fraco: #779188;
  --menu-ativo: #69e3b8;
}

:root[data-theme="dark"] {
  --fundo: #0e1814;
  --fundo-elevado: #16231e;
  --fundo-sutil: #1d2d27;
  --borda: #2b4037;
  --borda-forte: #496156;
  --texto: #eef6f2;
  --texto-suave: #b0c1b9;
  --texto-fraco: #7f978d;
  --acento: #69e3b8;
  --acento-suave: #183d30;
  --acento-texto: #10271f;
  --sombra: 0 12px 30px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0e1814;
    --fundo-elevado: #16231e;
    --fundo-sutil: #1d2d27;
    --borda: #2b4037;
    --borda-forte: #496156;
    --texto: #eef6f2;
    --texto-suave: #b0c1b9;
    --texto-fraco: #7f978d;
    --acento: #69e3b8;
    --acento-suave: #183d30;
    --acento-texto: #10271f;
  }
}

body {
  background-color: var(--fundo);
  background-image:
    radial-gradient(circle at 78% 4%, rgba(105, 227, 184, .10), transparent 24rem),
    linear-gradient(135deg, transparent 0 55%, rgba(8, 114, 87, .025) 55% 56%, transparent 56%);
  letter-spacing: -.005em;
}

h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.035em; }

.faixa-leitura {
  min-height: 36px;
  justify-content: center;
  padding: .38rem 1rem;
  border-bottom-width: 1px;
  font-size: .76rem;
  backdrop-filter: blur(12px);
}

.console { min-height: calc(100vh - 36px); }

.menu-lateral {
  position: sticky;
  top: 36px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 1.5rem 1rem 1.2rem;
  gap: 1.35rem;
  border: 0;
  color: var(--menu-texto);
  background:
    radial-gradient(circle at 20% 0, rgba(105, 227, 184, .14), transparent 14rem),
    var(--menu-fundo);
}

.marca { display: flex; align-items: center; gap: .75rem; padding: 0 .45rem; }
.marca-simbolo {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--menu-ativo);
  box-shadow: 0 8px 24px rgba(105, 227, 184, .22);
}
.marca-simbolo::before,
.marca-simbolo::after,
.marca-simbolo span { content: ""; display: block; width: 17px; height: 5px; border-radius: 4px; background: #10271f; }
.marca-simbolo::before { transform: translateY(4px) rotate(45deg); }
.marca-simbolo span { transform: translateY(-1px) translateX(6px) rotate(-45deg); width: 11px; }
.marca-simbolo::after { display: none; }
.marca .marca-titulo { color: #fff; font-size: 1.05rem; letter-spacing: -.025em; }
.marca .marca-subtitulo { color: var(--menu-fraco); text-transform: none; letter-spacing: .02em; font-size: .7rem; }
.menu-fechar { display: none; margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.7rem; }

.ambiente-pill {
  width: max-content; margin: -.35rem 0 0 3.2rem; padding: .24rem .58rem;
  border: 1px solid rgba(105, 227, 184, .22); border-radius: 999px;
  color: #a9c5ba; background: rgba(105, 227, 184, .06); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.ambiente-pill span { display: inline-block; width: 6px; height: 6px; margin-right: .35rem; border-radius: 50%; background: var(--menu-ativo); box-shadow: 0 0 0 4px rgba(105,227,184,.1); }

.menu-grupo-titulo { color: var(--menu-fraco); padding: 0 .7rem; margin-bottom: .4rem; font-size: .64rem; letter-spacing: .13em; }
.menu-lista { gap: .18rem; }
.menu-item {
  position: relative; gap: .75rem; min-height: 42px; padding: .62rem .72rem;
  color: var(--menu-texto); border-radius: 11px; font-size: .84rem; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.menu-item:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; transform: translateX(2px); }
.menu-item[aria-current="page"] { color: #10271f; background: var(--menu-ativo); box-shadow: 0 8px 20px rgba(0,0,0,.14); font-weight: 700; }
.menu-item[aria-current="page"]::after { content: ""; position: absolute; right: .65rem; width: 5px; height: 5px; border-radius: 50%; background: #10271f; opacity: .55; }
.menu-simbolo { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#icone-grid path, #icone-apps path { fill: currentColor; stroke: none; }
.icone-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.menu-rodape { margin-top: auto; display: flex; gap: .7rem; align-items: center; padding: .8rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--menu-fraco); font-size: .7rem; line-height: 1.35; }
.menu-rodape svg { width: 18px; height: 18px; fill: none; stroke: var(--menu-ativo); stroke-width: 1.8; }
.menu-rodape strong { display: block; color: var(--menu-texto); font-size: .73rem; }

.cabecalho {
  position: sticky; top: 36px; z-index: 30; min-height: 70px; padding: .75rem 2rem;
  background: color-mix(in srgb, var(--fundo-elevado) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--borda) 80%, transparent);
  backdrop-filter: blur(18px);
}
.cabecalho-contexto, .cabecalho-acoes { display: flex; align-items: center; gap: .85rem; }
.cabecalho-eyebrow { display: block; color: var(--texto-fraco); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.cabecalho-titulo { margin: .05rem 0 0; font-size: 1rem; }
.botao-menu-mobile { display: none; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--borda); border-radius: 11px; background: var(--fundo-elevado); }
.botao-menu-mobile span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--texto); }
.usuario { padding: .25rem .45rem .25rem .25rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo-elevado); }
.usuario-iniciais { width: 34px; height: 34px; background: linear-gradient(135deg, var(--acento), #38aa82); color: #fff; box-shadow: 0 5px 12px rgba(8,114,87,.18); }
.usuario-dados { padding-right: .35rem; }
.botao { border-radius: 10px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.botao:hover { transform: translateY(-1px); }
.botao-sair { color: var(--texto-suave); background: transparent; border-color: transparent; }

main { max-width: 1580px; padding: 2rem clamp(1.25rem, 3vw, 3.25rem); }
.pagina-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: .4rem 0 1.5rem; }
.pagina-eyebrow, .secao-eyebrow { display: block; margin-bottom: .4rem; color: var(--acento); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.pagina-hero h2 { max-width: 720px; margin-bottom: .55rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.03; font-weight: 650; }
.pagina-hero .pagina-descricao { font-size: 1rem; }
.atualizacao-card { min-width: 210px; padding: .85rem 1rem; border: 1px solid var(--borda); border-radius: 14px; background: color-mix(in srgb, var(--fundo-elevado) 82%, transparent); box-shadow: var(--sombra); }
.atualizacao-card span, .atualizacao-card small { display: block; color: var(--texto-fraco); font-size: .68rem; }
.atualizacao-card strong { display: block; margin: .15rem 0; font-size: .88rem; }

.aviso { border-width: 1px; border-radius: 13px; box-shadow: none; }
.secao + .secao { margin-top: 2.25rem; }
.secao-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .85rem; }
.secao-cabecalho h3 { margin: 0; font-size: 1.22rem; }
.secao-cabecalho p { max-width: 36ch; margin: 0; color: var(--texto-fraco); font-size: .8rem; text-align: right; }
.secao-eyebrow { margin-bottom: .15rem; font-size: .61rem; }

.grade-metricas { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: .85rem; }
.metrica { position: relative; overflow: hidden; min-height: 138px; justify-content: center; gap: .22rem; padding: 1.15rem 1.2rem; border: 1px solid var(--borda); border-left-width: 1px; border-radius: 16px; box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.metrica::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--neutro); }
.metrica-positivo::before { background: var(--positivo); }
.metrica-alerta::before { background: var(--alerta); }
.metrica-perigo::before { background: var(--perigo); }
.metrica-info::before { background: var(--info); }
a.metrica:hover { transform: translateY(-3px); border-color: var(--borda-forte); box-shadow: 0 16px 36px rgba(14,41,31,.1); }
.metrica-rotulo { text-transform: none; letter-spacing: 0; font-size: .75rem; }
.metrica-valor { font-size: 2rem; font-weight: 650; }
.metrica-tendencia { width: max-content; padding: .18rem .45rem; border-radius: 999px; background: var(--fundo-sutil); }

.cartao, .grafico-cartao { border-color: var(--borda); border-radius: 18px; box-shadow: var(--sombra); }
.grafico-cartao { padding: 1.25rem; }
.grade-graficos { gap: 1.15rem; }
.grafico-cabecalho h3 { font-size: 1.05rem; }
.grafico-tela { height: 260px; }
.grafico-etiqueta-ficticio { border: 0; border-radius: 999px; }
.grafico-tabela { border-radius: 12px; }

.filtros { padding: 1rem 1.1rem; border-radius: 16px; box-shadow: var(--sombra); }
select, input[type="text"], input[type="date"], input[type="search"] { min-height: 40px; padding: .48rem .65rem; border-color: var(--borda); border-radius: 10px; }
thead th { background: color-mix(in srgb, var(--fundo-sutil) 72%, var(--fundo-elevado)); }
tbody tr { transition: background .15s ease; }

.contexto-detalhes { padding: 0; overflow: hidden; }
.contexto-detalhes summary { cursor: pointer; padding: 1rem 1.2rem; color: var(--texto-suave); font-size: .86rem; font-weight: 700; }
.contexto-detalhes summary:hover { background: var(--fundo-sutil); }
.contexto-conteudo { padding: 0 1.2rem 1.2rem; }
.rodape-console { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding: 1.2rem 0 .3rem; border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: .7rem; }
.rodape-console p { margin: 0; }
.menu-overlay { display: none; }

@keyframes entrada-suave {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pagina-hero, main > .aviso, main > .secao { animation: entrada-suave .42s both ease-out; }
main > .aviso { animation-delay: .05s; }
main > .secao:nth-of-type(1) { animation-delay: .08s; }
main > .secao:nth-of-type(2) { animation-delay: .12s; }
main > .secao:nth-of-type(3) { animation-delay: .16s; }

@media (max-width: 900px) {
  .console { display: block; }
  .menu-lateral { position: fixed; z-index: 80; inset: 0 auto 0 0; width: min(86vw, 310px); height: 100vh; border: 0; transform: translateX(-105%); transition: transform .25s ease; }
  .menu-aberto .menu-lateral { transform: translateX(0); }
  .menu-overlay { position: fixed; z-index: 70; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5,17,13,.58); backdrop-filter: blur(3px); }
  .menu-aberto .menu-overlay { display: block; }
  .menu-fechar, .botao-menu-mobile { display: block; cursor: pointer; }
  .menu-lista { flex-direction: column; flex-wrap: nowrap; }
  .menu-item { font-size: .84rem; padding: .62rem .72rem; }
  .menu-item[aria-current="page"] { box-shadow: 0 8px 20px rgba(0,0,0,.14); }
  .cabecalho { top: 35px; padding: .65rem 1rem; }
  .cabecalho-eyebrow { display: none; }
  .usuario-dados, .botao-texto { display: none; }
  .usuario { border: 0; padding: 0; }
  main { padding: 1.35rem 1rem; }
  .pagina-hero { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .pagina-hero h2 { font-size: 2.15rem; }
  .atualizacao-card { width: 100%; }
  .secao-cabecalho { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .secao-cabecalho p { text-align: left; }
  .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrica { min-height: 128px; padding: 1rem; }
  .metrica-valor { font-size: 1.65rem; }
  .rodape-console { flex-direction: column; }
}

@media (max-width: 540px) {
  .faixa-leitura span { display: none; }
  .grade-metricas { grid-template-columns: 1fr; }
  .cabecalho-acoes { gap: .2rem; }
  .botao-sair { padding-inline: .55rem; }
}

/* Gestão de tickets */
.pagina-cabecalho-acoes { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.grupo-acoes { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.grade-tickets { margin:1.2rem 0; }
.campo-busca { min-width:min(100%,20rem); }
.formulario-ticket { display:grid; gap:1rem; max-width:980px; }
.formulario-secao { display:grid; grid-template-columns:42px 1fr; gap:1rem; padding:1.35rem; border:1px solid var(--borda); border-radius:var(--raio); background:var(--fundo-elevado); box-shadow:var(--sombra); }
.formulario-secao h3 { margin:0 0 .25rem; }
.formulario-secao p { margin:0 0 1rem; color:var(--texto-suave); font-size:.85rem; }
.formulario-passo { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--acento); color:var(--acento-texto); font-weight:800; }
.grade-formulario { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.formulario-ticket input[type="number"],.formulario-ticket input[type="datetime-local"],.formulario-ticket textarea,.zona-perigo textarea { width:100%; min-height:40px; padding:.55rem .7rem; border:1px solid var(--borda); border-radius:10px; background:var(--fundo-elevado); color:var(--texto); }
.formulario-ticket textarea,.zona-perigo textarea { min-height:90px; resize:vertical; }
.opcao-check { display:flex; align-items:flex-start; gap:.55rem; margin:.8rem 0; font-weight:650; }
.formulario-acoes { display:flex; justify-content:flex-end; gap:.7rem; padding:1rem 0; }
.zona-perigo { margin-top:1rem; padding:1.35rem; border:1px solid color-mix(in srgb,var(--perigo) 35%,var(--borda)); border-radius:var(--raio); background:var(--perigo-fundo); }
.zona-perigo h3 { color:var(--perigo); margin-top:0; }
.botao-perigo { color:#fff; background:var(--perigo); border-color:var(--perigo); }
.emissao-confirmacao { max-width:760px; margin:2rem auto; padding:2rem; text-align:center; border:1px solid var(--borda); border-radius:24px; background:var(--fundo-elevado); box-shadow:var(--sombra); }
.emissao-icone { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 1rem; border-radius:18px; color:var(--positivo); background:var(--positivo-fundo); font-size:1.7rem; font-weight:800; }
.emissao-eyebrow { color:var(--positivo); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.codigo-ticket { margin:1rem 0; padding:1rem; text-align:left; border:1px dashed var(--borda-forte); border-radius:12px; background:var(--fundo-sutil); overflow-wrap:anywhere; }
.codigo-ticket span { display:block; margin-bottom:.35rem; color:var(--texto-fraco); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.codigo-ticket strong { font-size:1rem; }
.emissao-confirmacao .grupo-acoes { justify-content:center; margin-top:1.4rem; }
@media(max-width:720px){.pagina-cabecalho-acoes{align-items:flex-start;flex-direction:column}.grade-formulario{grid-template-columns:1fr}.formulario-secao{grid-template-columns:1fr}.formulario-acoes{flex-direction:column-reverse}.formulario-acoes .botao{justify-content:center}}