/* Consultas — folha única. Tokens de papel, trocados em um lugar só no escuro. */

:root {
  color-scheme: light;
  --plano: #f9f9f7;
  --superficie: #fcfcfb;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --mudo: #737169;
  --borda: rgba(11, 11, 11, 0.10);
  --grade: #e1e0d9;
  --eixo: #c3c2b7;
  --serie-1: #2a78d6;
  --serie-1-trilho: #cde2fb;
  --marca: #2a78d6;
  --marca-texto: #ffffff;
  --bom: #006300;
  --atencao-fundo: #fff4db;
  --atencao-borda: #eda100;
  --critico: #b42323;
  --critico-fundo: #fdecec;
  --medidor-alerta: #eda100;
  --medidor-critico: #d03b3b;
  --marca-fraca: #eaf2fd;
  --raio: 16px;
  --raio-sm: 10px;
  --sombra: 0 1px 2px rgba(11, 11, 11, 0.04), 0 6px 16px rgba(11, 11, 11, 0.05);
  --sombra-flut: 0 10px 28px rgba(11, 11, 11, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano: #0d0d0d;
    --superficie: #1a1a19;
    --texto: #ffffff;
    --texto-2: #c3c2b7;
    --mudo: #9c9a92;
    --borda: rgba(255, 255, 255, 0.10);
    --grade: #2c2c2a;
    --eixo: #383835;
    --serie-1: #3987e5;
    --serie-1-trilho: #184f95;
    --marca: #3987e5;
    --marca-texto: #ffffff;
    --bom: #0ca30c;
    --atencao-fundo: #3a2e10;
    --atencao-borda: #c98500;
    --critico: #f08a8a;
    --critico-fundo: #3a1818;
    --marca-fraca: rgba(57, 135, 229, 0.16);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
    --sombra-flut: 0 12px 30px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0d0d0d;
  --superficie: #1a1a19;
  --texto: #ffffff;
  --texto-2: #c3c2b7;
  --mudo: #9c9a92;
  --borda: rgba(255, 255, 255, 0.10);
  --grade: #2c2c2a;
  --eixo: #383835;
  --serie-1: #3987e5;
  --serie-1-trilho: #184f95;
  --marca: #3987e5;
  --marca-texto: #ffffff;
  --bom: #0ca30c;
  --atencao-fundo: #3a2e10;
  --atencao-borda: #c98500;
  --critico: #f08a8a;
  --critico-fundo: #3a1818;
  --marca-fraca: rgba(57, 135, 229, 0.16);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  --sombra-flut: 0 12px 30px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--plano);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Coluna que ocupa a altura da janela: é o que permite ao rodapé ser empurrado
   para o fim da página (`margin-top: auto`) sem virar barra flutuante. Barra
   fixa cobriria a última linha da tabela de consumo justamente em quem está com
   a janela baixa, que é quando a última linha importa. */
.pagina {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) clamp(14px, 4vw, 28px) 32px;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 650; }
p { margin: 0; }
a { color: var(--marca); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.carregando { color: var(--texto-2); padding: 48px 0; text-align: center; }

/* ------------------------------------------------------------ controles -- */
button, .botao {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 16px;
  min-height: 42px;
  cursor: pointer;
  background: var(--marca);
  color: var(--marca-texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
}
button:disabled { opacity: 0.6; cursor: progress; }
button:not(:disabled):hover, .botao:hover { filter: brightness(1.06); box-shadow: var(--sombra); }
button:not(:disabled):active, .botao:active { transform: translateY(1px); }
button.secundario, .botao.secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda);
}
button.secundario:hover, .botao.secundario:hover { border-color: var(--marca); filter: none; }
button.perigo { background: var(--superficie); color: var(--critico); border-color: var(--borda); }
button.perigo:hover { border-color: var(--critico); filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

input, select {
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--eixo);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 42px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus { border-color: var(--marca); }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------------- marca -- */
/* O logo é imagem pronta: nada de fundo, borda ou cor por baixo dele — pintar
   embaixo do SVG só produziria uma moldura em volta da marca. */
.logo { display: block; flex: none; }

/* No cartão de entrada a marca é a primeira coisa da tela, e a única que diz de
   quem é o painel antes de alguém entrar. */
.entrada .marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* No painel ela é a sobrancelha do cabeçalho, acima do nome do cliente. */
.marca-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--texto-2);
  font-size: 12.5px;
  font-weight: 600;
}
.marca-topo span { color: var(--texto); font-weight: 700; }

/* O rodapé responde duas perguntas que a tela não respondia em lugar nenhum:
   de quem é este produto, e para onde escrever quando algo não funciona. */
.rodape-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* `auto` come a sobra da coluna: com pouca coisa na tela ele desce até o fim,
     e com muita ele fica logo depois do conteúdo, como qualquer rodapé. */
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: 13px;
}
.rodape-marca .ponto { color: var(--eixo); }
/* Embaixo do cartão de entrada ele acompanha a largura do cartão: em 1120px,
   uma linha atravessando a página inteira sob uma caixa de 340px vira um
   sublinhado solto no meio do nada. */
.entrada + .rodape-marca {
  width: min(380px, 100%);
  /* Só o eixo horizontal: `margin` inteiro apagaria o `auto` de cima, e o
     rodapé voltaria a ficar colado no cartão, no meio da página. */
  margin-inline: auto;
  margin-bottom: 0;
  padding-top: 24px;
  border-top: 0;
  justify-content: center;
}

/* -------------------------------------------------------------- entrada -- */
.entrada {
  width: min(380px, 100%);
  margin: min(8vh, 56px) auto 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 28px 26px;
  box-shadow: var(--sombra);
  display: grid;
  gap: 14px;
}
/* Marca, título e a frase de apoio são o cabeçalho do cartão e ficam
   centralizados; os campos, esses, continuam alinhados à esquerda, que é por
   onde o olho desce ao preencher. */
.entrada h1, .entrada .sub { text-align: center; }
.entrada h1 { font-size: 20px; }
.entrada .sub { color: var(--texto-2); font-size: 14px; }

/* Ponteiro fino é mouse: o cartão nasceu com as medidas do DEDO — campos e
   botão de 42px, recheio de 32px e a largura do celular —, e no desktop isso
   vira uma caixa grande demais para o que ela pede, que são duas linhas e um
   botão. O alvo só encolhe onde não existe dedo: no toque nada muda, porque lá
   o tamanho é o que faz a tela ser usável. */
@media (pointer: fine) {
  .entrada { width: min(340px, 100%); padding: 24px 22px; gap: 12px; }
  .entrada h1 { font-size: 19px; }
  .entrada .sub { font-size: 13px; }
  .entrada label { font-size: 13px; gap: 5px; }
  .entrada input { min-height: 38px; padding: 7px 11px; }
  .entrada button[type="submit"] { min-height: 38px; padding: 7px 14px; }
}

.erro {
  color: var(--critico);
  background: var(--critico-fundo);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.aviso-ok {
  color: var(--bom);
  background: var(--atencao-fundo);
  border-left: 4px solid var(--bom);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

/* ---------------------------------------------------------------- casca -- */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}
.topo .quem { color: var(--texto-2); font-size: 14px; margin-top: 2px; }
.topo .acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.faixa {
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--atencao-fundo);
  border-left: 4px solid var(--atencao-borda);
  font-size: 14px;
}

.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.filtros label { width: auto; min-width: min(220px, 100%); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 20px 22px;
  box-shadow: var(--sombra);
  margin-bottom: 16px;
  position: relative;
}
.cartao > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--grade); }
.cartao .nota { color: var(--texto-2); font-size: 13.5px; }

.recarregando { opacity: 0.55; transition: opacity 0.15s; }

/* ------------------------------------------------------------ indicadores -- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.indicador {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 18px;
  box-shadow: var(--sombra);
  transition: box-shadow 0.18s, transform 0.18s;
}
.indicador:hover { box-shadow: var(--sombra-flut); transform: translateY(-2px); }
.indicador .rotulo { color: var(--texto-2); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.indicador .valor { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 6px; letter-spacing: -0.01em; }
.indicador .detalhe { color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.indicador.heroi { background: var(--marca-fraca); border-color: transparent; }
.indicador.heroi .valor { font-size: 42px; color: var(--marca); }

.medidor { margin-top: 10px; }
.medidor .trilho { height: 8px; border-radius: 4px; background: var(--serie-1-trilho); overflow: hidden; }
.medidor .preenchido { height: 100%; border-radius: 4px; background: var(--serie-1); }
.medidor.alerta .preenchido { background: var(--medidor-alerta); }
.medidor.critico .preenchido { background: var(--medidor-critico); }
.medidor .legenda { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--texto-2); margin-top: 6px; }

/* --------------------------------------------------------------- gráfico -- */
.grafico { width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .base { stroke: var(--eixo); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .tique { fill: var(--mudo); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .rotulo-valor { fill: var(--texto-2); font-size: 11px; font-weight: 600; }
.grafico .coluna { fill: var(--serie-1); }
.grafico .alvo { fill: transparent; cursor: default; outline: none; }
.grafico .alvo:hover + .coluna, .grafico .alvo:focus + .coluna { opacity: 0.8; }
.grafico .alvo:focus-visible { stroke: var(--marca); stroke-width: 1; }

.dica {
  position: absolute;
  pointer-events: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  z-index: 2;
}
.dica strong { display: block; font-size: 15px; }
.dica span { color: var(--texto-2); }

details.tabela-dias { margin-top: 12px; }
details.tabela-dias summary { cursor: pointer; color: var(--texto-2); font-size: 14px; }

/* ---------------------------------------------------------------- tabelas -- */
.tabela-caixa { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--grade); vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 650; border-bottom: none; }
.sub { color: var(--texto-2); font-size: 13px; }
.revogada td { color: var(--mudo); }

.selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto-2); }
.selo.bom { color: var(--bom); }

.aviso-sem-preco { margin-top: 10px; font-size: 14px; color: var(--critico); }

.retornos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.retornos li { display: flex; gap: 10px; align-items: baseline; }
.retornos .marca { width: 18px; flex: none; font-weight: 700; }
.retornos .fora { color: var(--mudo); }

.nova-chave { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 14px; }
.nova-chave label { flex: 1 1 240px; }
.nova-chave label:has(select[name="uf"]), .editar-cidade label:has(select[name="uf"]) { flex: 0 0 90px; }
.nova-chave label.cidade { flex: 1 1 220px; }
.editar-cidade { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.editar-cidade label { flex: 1 1 160px; }
.selo.atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--texto); margin-right: 6px; }
button.pequeno { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.chave-criada {
  margin-top: 14px;
  border: 1px solid var(--atencao-borda);
  background: var(--atencao-fundo);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.chave-criada code { word-break: break-all; font-size: 14px; background: var(--superficie); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borda); }

/* ---------------------------------------------------------------- modal -- */
/* `<dialog>` já vem com display:none até abrir e com o ::backdrop próprio; o
   que falta é a caixa de dentro, porque o elemento em si é só o recorte. */
.modal {
  border: 0;
  background: none;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  /* O padrão do navegador centraliza na horizontal, não na vertical. */
  margin: auto;
}
.modal::backdrop { background: rgba(11, 11, 11, 0.45); }
.modal-caixa {
  width: min(460px, calc(100vw - 32px));
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flut);
  padding: 22px;
  display: grid;
  gap: 12px;
}
.modal-caixa h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
/* O botão que fecha fica à direita e sozinho: ele é a única saída, e no meio do
   conteúdo pareceria mais uma ação entre outras. */
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
/* Dentro do modal a caixa da chave não precisa da moldura de aviso: o modal
   inteiro já é o aviso, e duas molduras uma dentro da outra só tiram a atenção
   do que tem de ser copiado. */
.modal-caixa .chave-criada { margin-top: 0; }

/* ----------------------------------------------------------- documentação -- */
.doc { display: grid; gap: 16px; }
.doc section { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 18px; }
.doc section > * + * { margin-top: 10px; }
.doc pre { background: var(--plano); border: 1px solid var(--borda); border-radius: 8px; padding: 12px; overflow-x: auto; margin: 10px 0 0; }
.doc ul { margin: 8px 0 0; padding-left: 20px; }
.doc li + li { margin-top: 4px; }
.doc h3 { font-size: 15px; margin-top: 16px; }

/* ---------------------------------------------------------------- pacotes -- */
.faixa-alerta { background: var(--critico-fundo); border-left-color: var(--critico); }

.pacotes-caixa > .sub { margin: 0 0 12px; }

.grade-pacotes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.card-pacote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 16px;
  background: var(--plano);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.card-pacote:hover { box-shadow: var(--sombra-flut); transform: translateY(-2px); border-color: var(--marca); }
.card-pacote .nome-pacote { font-size: 15px; }
.card-pacote .valor-pacote { font-size: 20px; font-weight: 700; color: var(--marca); }
.card-pacote button { margin-top: 8px; }

.pedido-aguardando {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--atencao-borda);
  border-radius: 10px;
  padding: 14px;
  background: var(--atencao-fundo);
}
.selo-aguardando {
  align-self: start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--atencao-borda);
}
.pix { display: flex; flex-direction: column; gap: 8px; }
.pix-codigo {
  display: block;
  word-break: break-all;
  font-size: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px;
  max-height: 120px;
  overflow: auto;
}
.acoes-pedido { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ abas -- */
/* Segmented control: um trilho com pastilhas; a ativa preenche com a marca. No
   celular rola de lado sem quebrar a fileira. */
.abas {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  background: transparent;
  color: var(--texto-2);
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  min-height: 40px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}
.aba:hover { color: var(--texto); background: var(--marca-fraca); }
.aba[aria-selected="true"] {
  color: var(--marca-texto);
  background: var(--marca);
}
.aba:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.aba-painel { min-height: 40vh; animation: aba-entra 0.2s ease; }
@keyframes aba-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .aba-painel { animation: none; }
}

/* --------------------------------------------------------------- consulta -- */
.lgpd {
  background: var(--marca-fraca);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.lgpd strong { display: block; margin-bottom: 4px; }
.lgpd p { color: var(--texto-2); }

.form-consulta { display: grid; gap: 16px; }
.grade-consulta {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.pesquisas { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px 14px; margin: 0; display: grid; gap: 8px; }
.pesquisas legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.escolha-retorno {
  display: flex; gap: 10px; align-items: start; font-weight: 400; cursor: pointer;
}
.escolha-retorno input { width: auto; min-height: 0; margin-top: 3px; flex: none; }
.escolha-retorno strong { display: block; font-weight: 600; }
/* O preço fica à direita e não encolhe: com `flex: none` ele nunca é espremido
   pela descrição, que é o texto que pode crescer. `margin-left: auto` empurra;
   `tabular-nums` alinha os centavos de uma linha para a outra. */
.escolha-retorno .preco-item {
  margin-left: auto; flex: none; align-self: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.escolha-retorno .sem-preco { color: var(--critico); }
.pesquisas hr { border: 0; border-top: 1px solid var(--grade); margin: 2px 0; }
.linha-consent { display: flex; gap: 10px; align-items: start; font-weight: 400; font-size: 14px; }
.linha-consent input { width: auto; min-height: 0; margin-top: 2px; flex: none; }
.form-consulta > button { justify-self: start; }

.resultado-consulta:not(:empty) { margin-top: 20px; }
.consulta-andamento {
  display: flex; align-items: center; gap: 10px;
  color: var(--texto-2); font-size: 14px;
  background: var(--plano); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 14px 16px;
}
.girando {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--borda); border-top-color: var(--marca);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

.res-bloco { display: grid; gap: 12px; }
.res-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--grade); }
.res-topo strong { font-size: 16px; }
.res-item { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px 14px; background: var(--plano); }
.res-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Dados pessoais: rótulo e valor em duas colunas, e uma só no celular — em
   360px o par lado a lado quebra o nome da mãe em quatro linhas. */
.res-campos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--grade); font-size: 14px; }
/* O teto existe por causa do rótulo do contato, que carrega a ressalva de não
   ser resultado da pesquisa: sem ele, `max-content` daria a coluna inteira a um
   rótulo e espremeria TODOS os valores ao lado. Com o teto, aquele rótulo quebra
   em duas linhas e o resto da lista fica como estava. */
.res-campos dt { color: var(--texto-2); max-width: 24ch; }
.res-campos dd { margin: 0; }
@media (max-width: 480px) {
  .res-campos { grid-template-columns: 1fr; gap: 0 0; }
  .res-campos dd { margin-bottom: 6px; }
}

.ocorrencia { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--grade); font-size: 14px; }
.ocorrencia p { color: var(--texto-2); margin-top: 2px; white-space: pre-wrap; }
.res-rodape { margin-top: 4px; }
/* O mandado de prisão é o único achado que muda o que se faz agora: ele é dito
   por extenso, em vermelho, e não só por um selo igual aos outros. */
.alerta-mandado {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--critico);
  border-left: 4px solid var(--critico);
  border-radius: var(--raio-sm);
  /* As duas cores são declaradas em claro E em escuro no topo do arquivo: o
     vermelho do modo claro sobre o fundo escuro fica ilegível justamente no
     aviso que ninguém pode deixar de ler. */
  background: var(--critico-fundo);
  color: var(--critico);
  font-weight: 700;
  line-height: 1.35;
}
.ocorrencia a { color: var(--marca); }
/* O caminho para o portal quando a fonte não manda o endereço da peça. Fica
   colado no alerta vermelho, e não com a cara dele: ele é o que fazer a
   seguir, não mais um aviso. */
.sem-documento { margin-top: 6px; font-size: 14px; color: var(--texto-2); }
.sem-documento a { color: var(--marca); font-weight: 600; }
/* O PDF do mandado é o que se abre DEPOIS de ler o alerta: destacado, mas sem a
   cor do alerta — ele não é mais um aviso, é o que fazer a seguir. */
.doc-mandado { font-weight: 600; }

/* "Selecionar todas" é a primeira linha do bloco de pesquisas e não é uma
   pesquisa: sem o destaque ela se perde no meio dos dezesseis itens. */
.todas-pesquisas { font-size: 14px; }
.todas-pesquisas strong { font-weight: 650; }

.legenda-res { border-top: 1px dashed var(--grade); padding-top: 10px; font-size: 14px; }
.legenda-res summary { cursor: pointer; color: var(--texto-2); }
.legenda-res .res-campos { border-top: 0; margin-top: 6px; padding-top: 0; }
.legenda-res dt { color: var(--texto); font-weight: 600; }

.selo.ok { color: var(--bom); }
.selo.atencao { color: var(--atencao-borda); border-color: var(--atencao-borda); }
.selo.mudo, .selo.neutro { color: var(--mudo); }
.escolha-retorno.indisponivel { opacity: 0.6; cursor: not-allowed; }
.escolha-retorno .nao-contratado { color: var(--mudo); display: block; }

/* Valor da consulta avulsa (aba Consulta) */
.resumo-avulsa {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  background: var(--marca-fraca);
}
.resumo-titulo { font-weight: 700; margin-bottom: 6px; }
.linha-resumo { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
/* Sem a lista de itens em cima, o total é a única linha do cartão: a borda
   superior que o separava dela não tem mais o que separar. */
.linha-resumo.total { font-size: 16px; font-variant-numeric: tabular-nums; }

/* Avaliação do pacote (aba Consumo diário) */
.avaliacao { font-size: 14px; border-radius: var(--raio-sm); padding: 12px 14px; border-left: 4px solid var(--eixo); background: var(--plano); }
.avaliacao.ok { border-left-color: var(--bom); }
.avaliacao.alerta { background: var(--atencao-fundo); border-left-color: var(--atencao-borda); }
.avaliacao.neutro { border-left-color: var(--eixo); }

/* ------------------------------------------------- saldo do pacote (aba Pacotes) */
.saldo-pacote { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grade); display: grid; gap: 10px; }
.saldo-pacote h3 { font-size: 16px; margin: 0; }
/* `min(160px, 100%)` e não 160px seco: em 320px úteis a coluna fixa faz a
   PÁGINA rolar de lado, que é o pior defeito de um painel no celular. */
.grade-saldo { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.num-saldo { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; background: var(--plano); }
.num-saldo strong { display: block; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.num-saldo.zerado strong { color: var(--critico); }
.barra-saldo { height: 10px; border-radius: 999px; background: var(--serie-1-trilho); overflow: hidden; }
.barra-preenchida { height: 100%; background: var(--serie-1); }
/* A frase do teste fica com a cor da marca, não com a de alerta: é uma
   informação boa (o cliente está gastando cortesia), e em âmbar ela seria lida
   como problema. */
.aviso-cortesia { color: var(--marca); font-weight: 600; }
.aviso-consumo { display: grid; gap: 6px; border-top: 1px dashed var(--grade); padding-top: 10px; }
.aviso-consumo label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.aviso-consumo select { width: auto; min-width: 120px; }
.push-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------------------------------------- sem zoom e sem rolagem horizontal --
   O pedido é que a página nunca ande de lado. São três coisas, e as três
   precisam existir:

   1. `overflow-x: clip` no html E no body — só no body não basta, porque o
      elemento raiz é quem rola no iOS;
   2. `max-width: 100%` na raiz, para nada poder ser mais largo que a tela;
   3. `min-width: 0` no que é filho de grid ou flex: o padrão é `auto`, e um
      conteúdo indivisível (uma tabela, uma linha longa) empurra a coluna para
      além da tela SEM que nenhuma largura declarada apareça errada. É o motivo
      real da rolagem lateral em quase todo painel.

   O que PODE rolar de lado é a caixa da tabela (`.tabela-caixa`), que é uma
   ilha com rolagem própria: tirar dela a rolagem não faria a tabela caber,
   faria o conteúdo ser cortado. */
html, body { max-width: 100%; overflow-x: clip; }
.pagina, .cartao, .res-bloco, .res-item, .pacotes-caixa, form, section, header, main { min-width: 0; }
.pagina *, .cartao * { max-width: 100%; }
/* Palavra sem espaço (um e-mail, um token, uma URL) é o que estoura a largura
   quando tudo o mais já está certo. */
.res-item, .ocorrencia, .res-campos dd, .num-saldo, td, th { overflow-wrap: anywhere; }
/* `touch-action: manipulation` desliga o zoom do toque duplo sem tirar a
   rolagem — o `user-scalable=no` da meta tag sozinho é ignorado pelo Safari. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

/* ------------------------------------------------------------- pagamentos */
.qr-pix { margin: 12px 0; max-width: 240px; }
.qr-pix svg { width: 100%; height: auto; display: block; border-radius: var(--raio-sm); }
.copia-cola { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.titulo-pag { font-size: 16px; margin: 18px 0 8px; }

/* Botão com cara de link: "Esqueci minha senha" e "Voltar para entrar". */
button.link-simples { background: none; border: 0; color: var(--marca); min-height: 0; padding: 4px 0; font-weight: 500; text-decoration: underline; justify-self: start; }
button.link-simples:hover { box-shadow: none; filter: none; }