/* Componentes das Ferramentas da Justa Pena.
 *
 * Só existe o que as duas telas usam de verdade. A marca (cor, fonte, reset)
 * vem de tokens.css; aqui mora o que é deste app.
 *
 * Duas premissas que explicam quase todas as escolhas abaixo:
 *
 * 1. Quem usa é advogado, quase sempre no celular, muitas vezes em pé no
 *    corredor do fórum. Por isso mobile primeiro, alvo de toque grande e
 *    nada que dependa de passar o mouse.
 * 2. O número sozinho não serve. A fração só vale acompanhada da lei que a
 *    sustenta, então a fundamentação tem peso visual de conteúdo, não de
 *    nota de rodapé.
 */

/* ---------- moldura ---------- */

.pagina {
  position: relative;
  z-index: 1;
  max-width: 560px;          /* leitura confortável e some a diferença entre celular e desktop */
  margin: 0 auto;
  padding: 20px 16px 64px;
}

.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 20px;
}

.topo-marca {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.topo-marca span { color: var(--acento); }

.topo-acao {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.topo-acao:hover { background: var(--hover); color: var(--text-1); }

h1 {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.subtitulo {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ---------- cartão genérico ---------- */

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 18px 16px;
  margin-bottom: 14px;
}

.cartao-titulo {
  font-family: var(--fonte-titulo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* ---------- seletor da home ---------- */

.atalhos { display: grid; gap: 12px; }

.atalho {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-g);
  text-decoration: none;
  color: inherit;
}

.atalho:hover { background: var(--hover); border-color: var(--border-forte); }

.atalho-nome {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 600;
}

.atalho-desc { color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* ---------- pergunta do consultor ---------- */

.pergunta { margin-bottom: 22px; }

.pergunta-titulo {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}

.pergunta-ajuda {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.opcoes { display: grid; gap: 8px; }

/* Alvo de 52px: dedo em pé no corredor do fórum, não mouse em mesa. */
.opcao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  color: var(--text-1);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

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

.opcao[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--hover);
}

/* Foco sempre visível: teclado e leitor de tela usam esta ferramenta também. */
.opcao:focus-visible,
.topo-acao:focus-visible,
.botao:focus-visible,
.tecla:focus-visible,
.fracao:focus-visible,
.atalho:focus-visible,
.topo-marca:focus-visible,
.detalhe summary:focus-visible,
.seletor-campo:focus-visible,
.campo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.campo {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  color: var(--text-1);
  font: inherit;
  font-size: 16px;   /* abaixo de 16px o iOS dá zoom sozinho ao focar */
}

.botao {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--raio);
  background: var(--azul);
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms var(--ease);
}

.botao:hover { filter: brightness(1.12); }
.botao[disabled] { opacity: 0.45; cursor: not-allowed; }

.botao-fantasma {
  background: transparent;
  border: 1px solid var(--border-forte);
  color: var(--text-2);
}

.botao-fantasma:hover { background: var(--hover); color: var(--text-1); }

/* ---------- resultado ---------- */

.resultado {
  /* o navy da marca ancora o momento principal; no claro o elevated ja e branco */
  background: linear-gradient(180deg, rgba(34, 51, 103, 0.4), var(--elevated) 55%);
  border: 1px solid var(--border-forte);
  border-radius: var(--raio-g);
  padding: 22px 18px;
  margin-bottom: 14px;
}

.resultado-rotulo {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.resultado-fracao {
  font-family: var(--fonte-numero);
  font-size: clamp(34px, 11vw, 52px);
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acento);
  margin-bottom: 10px;
}

.resultado-apoio { color: var(--text-2); font-size: 14px; line-height: 1.55; }

.resultado-fracao--media { font-size: clamp(22px, 6vw, 30px); }

/* A fundamentação é conteúdo, não rodapé: a fração sem a lei que a sustenta
 * é justamente o que o advogado já consegue perguntar pra uma IA qualquer. */
.fundamentacao {
  border-left: 3px solid var(--acento);
  padding: 2px 0 2px 14px;
  margin-top: 18px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.fundamentacao b { color: var(--text-1); font-weight: 600; }

.avisos { display: grid; gap: 8px; margin-top: 16px; }

.aviso {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.55;
}

.aviso-neutro {
  background: rgba(127, 178, 217, 0.07);
  border-color: var(--border-forte);
  /* era --text-2, e ai a citacao legal em negrito (13,17:1 no claro) ficava
   * mais forte que a REGRA que precisa ser lida (5,92:1). A caixa neutra ja
   * se diferencia da ambar pelo fundo e pela borda; nao precisa rebaixar o
   * texto. Com as duas na mesma cor, o negrito ainda destaca a citacao. */
  color: var(--text-1);
}

/* Os valores dos tokens de aviso moram em tokens.css, por tema. */
:root[data-tema="claro"] .aviso-neutro {
  background: rgba(34, 51, 103, 0.05);
  border-color: var(--border-forte);
}

/* ---------- calculadora ---------- */

.painel-total {
  /* sticky no TRIO (total, pendente, recado): sao a mesma unidade de feedback.
   * Sticky so no total deixava o recado, que e onde a confirmacao escreve,
   * matematicamente fora da tela no aparelho-alvo. */
  position: sticky;
  /* era 8px, e essa fresta de 8px acima do painel deixava o conteudo passar
   * POR CIMA da barra: medido, 3 a 4 elementos aparecem nela em 100% das
   * posicoes grudadas, com "= Resolver" e "Limpar tudo" fatiados no meio da
   * letra. Grudado em 0, o respiro vira padding pintado. */
  top: 0;
  z-index: 4;
  /* transparente em repouso: opaco o tempo todo, o painel recortava um
   * retangulo do gradiente do body::before, que e a profundidade da marca no
   * alto da pagina. So vira barra quando de fato gruda. */
  background: transparent;
  padding: 8px 0;
  border-radius: 0 0 var(--raio-g) var(--raio-g);
  /* A sombra sozinha nao explica a camada no tema escuro: preto sobre navy
   * media 1,059:1 contra o cartao, imperceptivel. O fio de 1px existe nos dois
   * temas (1,72:1 no escuro, 1,70:1 no claro) e e ele que faz o corte do botao
   * ler como "tem uma barra por cima", nao como recorte. */
  box-shadow: none;
  transition: background 160ms var(--ease), box-shadow 160ms var(--ease);
}

/* grudado: aí sim é uma barra, e precisa de fundo e de aresta */
.painel-total.grudou {
  background: var(--canvas);
  box-shadow:
    0 1px 0 var(--border-forte),
    0 14px 18px -14px rgba(0, 0, 0, 0.6);
}

/* o padding do painel ja da o respiro de baixo: sem isso a faixa dobra */
.painel-total .progresso-texto:last-child { margin-bottom: 0; }

/* linhas de feedback colapsam quando vazias: min-height fixo reservava 50px
 * mortos que escondiam o topo do card seguinte ao rolar */
.painel-total .progresso-texto { min-height: 18px; }
.painel-total .progresso-texto:empty { min-height: 0; }

.total {
  /* ancora do pulso: o ::after usa inset 0 e, sem position aqui, ele se
   * resolveria contra o painel sticky e emolduraria o trio inteiro */
  position: relative;
  background: linear-gradient(135deg, var(--navy), var(--azul));
  border-radius: var(--raio-g);
  padding: 18px 16px;
  margin-bottom: 6px;
  font-family: var(--fonte-numero);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  /* o fundo e navy fixo nos dois temas, entao o texto tambem e fixo: herdar
   * o --text-1 do tema claro dava 1,19:1, ilegivel */
  color: #FFFFFF;
  box-shadow: 0 6px 22px rgba(6, 79, 120, 0.3);
}

.colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

/* Cada unidade de tempo é um painel fechado. Sem essa moldura, os três
 * teclados de 3 colunas viram uma grade só de 9 e ninguém sabe qual "7"
 * pertence a qual campo. */
.coluna {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 10px 8px 8px;
}

.coluna-nome {
  font-size: 11px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 6px;
}

.visor {
  background: var(--canvas);
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 14px 12px;
  margin-bottom: 8px;
  font-family: var(--fonte-numero);
  font-size: 26px;
  font-weight: 700;
  text-align: right;
  color: var(--acento);
  min-height: 58px;
  overflow-x: auto;
}

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.tecla {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--elevated);
  color: var(--text-1);
  font-family: var(--fonte-numero);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 90ms var(--ease);
}

.tecla:hover { background: var(--hover); }
.tecla-apagar { color: var(--erro); font-size: 14px; }

.fracoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.fracao {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--fonte-numero);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fracao:hover { background: var(--hover); border-color: var(--border-forte); }
.fracao[aria-pressed="true"] { border-color: var(--acento); background: var(--hover); }

.linha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

/* ---------- rodapé ---------- */

.rodape {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.rodape a { color: var(--text-2); }

/* ---------- estados ---------- */

.erro-campo { color: var(--erro); font-size: 13px; margin-top: 8px; }

.oculto { display: none !important; }

/* ---------- faixa de aviso de vencimento próximo ---------- */
/* Linha fina no topo da página, fora de .pagina (que tem max-width e
 * padding lateral): quando visível ela ocupa a largura inteira da tela, sem
 * herdar a moldura de leitura do conteúdo abaixo dela. Nasce com .oculto
 * (nenhum espaço reservado enquanto ninguém precisa dela) e só o JS de cada
 * página (dist/assets/js/faixa-vencimento.js) decide mostrar, depois de
 * perguntar pro /api/assinatura se faltam 30 dias ou menos. Reaproveita os
 * mesmos tokens de --aviso-* já usados em .aviso/.aviso-decisao, pra não
 * inventar cor nova só pra esta faixa. */
.faixa-vencimento {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
  padding: 10px 16px;
  background: var(--aviso-fundo);
  border-bottom: 1px solid var(--aviso-borda);
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.5;
}

.faixa-vencimento a {
  color: var(--aviso-rotulo);
  font-weight: 600;
}

/* Só para leitor de tela: anuncia mudança de etapa sem ocupar espaço. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (min-width: 600px) {
  .pagina { padding-top: 40px; }
  h1 { font-size: 28px; }
}

/* Respeita quem pediu menos movimento SEM matar os eventos: a troca de etapa
 * remove o no antigo no animationend, e `animation: none` nunca dispara ele,
 * entao as perguntas empilhavam na tela. Duracao quase zero anima "instantaneo"
 * e o ciclo de vida continua inteiro. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MOVIMENTO
   ============================================================
   A linguagem vem do próprio logo da Justa Pena: uma grade de
   calculadora com uma balança dentro. Então tudo aqui é grade e
   equilíbrio: os elementos assentam na grade em sequência, e o
   resultado "acha o ponto" como uma balança parando.

   Regra técnica: só transform, opacity, filter e clip-path. Nada que
   force recálculo de layout, senão trava no celular do advogado, que
   é onde isso vai rodar.
   ============================================================ */

:root {
  --mola: cubic-bezier(0.16, 1, 0.3, 1);      /* assenta rápido e para macio */
  --saida: cubic-bezier(0.4, 0, 1, 1);
}

/* ---------- grade de fundo, o grafismo da marca ---------- */

.grade-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--linha-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha-grade) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 78%);
  animation: respira 14s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.045); opacity: 0.78; }
}

/* ---------- entrada em cascata ---------- */

/* Cada elemento assenta na grade com 60ms de diferença do anterior.
 * O atraso vem por variável, setada no HTML, pra não precisar de JS. */
.assenta {
  opacity: 0;
  transform: translateY(14px);
  animation: assentar 620ms var(--mola) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes assentar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- troca de etapa no consultor ---------- */

.etapa { will-change: transform, opacity; }

.etapa-entra-frente { animation: entraFrente 420ms var(--mola) both; }
.etapa-sai-frente   { animation: saiFrente 240ms var(--saida) both; }
.etapa-entra-tras   { animation: entraTras 420ms var(--mola) both; }
.etapa-sai-tras     { animation: saiTras 240ms var(--saida) both; }

@keyframes entraFrente { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes saiFrente   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-26px); } }
@keyframes entraTras   { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes saiTras     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(26px); } }

/* ---------- barra de progresso ---------- */

.progresso {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--anel-trilho);
  overflow: hidden;
  margin-bottom: 22px;
}

.progresso-trilho {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  transform-origin: left;
  transition: width 520ms var(--mola);
}

/* O brilho varre a barra UMA vez, quando ela avança. Perpétuo sobre barra
 * parada é vocabulário de "carregando", que não é o que está acontecendo. */
.progresso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-100%);
}

.progresso.avanca::after { animation: varrer 900ms ease-out 1; }

@keyframes varrer { to { transform: translateX(100%); } }

.progresso-texto {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* ---------- opção: ripple e barra lateral ---------- */

.opcao { position: relative; overflow: hidden; }

.opcao::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--acento);
  transform: translateY(-50%);
  transition: height 300ms var(--mola);
}

.opcao[aria-pressed="true"]::before { height: 100%; }

.onda {
  position: absolute;
  border-radius: 50%;
  background: var(--onda);
  transform: scale(0);
  animation: ondear 560ms var(--mola) forwards;
  pointer-events: none;
}

@keyframes ondear { to { transform: scale(2.4); opacity: 0; } }

/* ---------- resultado: o momento da tela ---------- */

.resultado {
  animation: revelar 700ms var(--mola) both;
}

@keyframes revelar {
  from { opacity: 0; transform: scale(0.965) translateY(10px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* O anel mostra, em desenho, que fatia da pena aquela fração representa.
 * Não é enfeite: é a informação da tela virando imagem. */
.anel { width: 108px; height: 108px; flex: none; }
.anel circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anel .trilho { stroke: var(--anel-trilho); }

.anel .arco {
  stroke: url(#gradAnel);
}

/* No escuro o inicio do gradiente (#064F78) dava 1,64:1 sobre o card e o arco
 * se dissolvia: um stop mais claro segura a leitura sem trair a paleta. */
:root:not([data-tema="claro"]) .anel stop:first-child { stop-color: #3E7FA8; }

.anel .arco {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: var(--circ, 283);
  stroke-dashoffset: var(--circ, 283);
  animation: desenhar 800ms cubic-bezier(0.65, 0, 0.35, 1) 420ms forwards;
}

@keyframes desenhar { to { stroke-dashoffset: var(--resto, 0); } }

.resultado-cabeca { display: flex; align-items: center; gap: 20px; }
.resultado-cabeca > div { min-width: 0; }

.fundamentacao {
  animation: assentar 620ms var(--mola) 420ms both;
}

.avisos .aviso {
  animation: assentar 560ms var(--mola) both;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}

/* ---------- calculadora ---------- */

.tecla { position: relative; overflow: hidden; }
.tecla:active { transform: scale(0.94); background: var(--azul); color: #FFFFFF; }

.visor { position: relative; }

/* O dígito novo sobe pro lugar: o olho acompanha de onde ele veio. */
.visor-valor { display: inline-block; animation: subirDigito 260ms var(--mola) both; }

@keyframes subirDigito {
  from { opacity: 0; transform: translateY(11px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.visor.ativo {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(127, 178, 217, 0.12);
}

.total { overflow: hidden; }
.total-valor { display: inline-block; animation: subirDigito 300ms var(--mola) both; }

/* Pulso quando o total muda por fração: avisa que o número virou outro.
 * Mora num pseudo-elemento de propósito. Aplicado no próprio .total, ele
 * substituiria a animação de entrada (.assenta) e o elemento voltaria pro
 * opacity 0 da regra base, sumindo da tela. Foi o que aconteceu no primeiro
 * render e só apareceu olhando o screenshot. */
.total::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-g);
  pointer-events: none;
  opacity: 0;
}

.total.mudou::after { animation: pulsar 560ms var(--mola); }

@keyframes pulsar {
  0%   { opacity: 1; box-shadow: inset 0 0 0 2px rgba(127, 178, 217, 0.75); }
  100% { opacity: 0; box-shadow: inset 0 0 0 12px rgba(127, 178, 217, 0); }
}


:root[data-tema="claro"] .resultado { background: var(--elevated); }

/* ---------- fundamentação recolhível ---------- */

.detalhe { margin-top: 10px; }

.detalhe summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--acento);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
}

.detalhe summary::-webkit-details-marker { display: none; }

.detalhe summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms var(--mola);
}

.detalhe[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.detalhe[open] p { animation: assentar 380ms var(--mola) both; }
.detalhe p { margin-top: 8px; color: var(--text-1); }

/* ============================================================
   IDENTIDADE E ACABAMENTO (lote de melhoria 18/08, noite)
   ============================================================ */

/* ---------- marca no topo: o icone oficial, nunca so texto ---------- */

.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  text-decoration: none;
  color: inherit;
}

.topo-icone { display: block; }

/* No tema claro o icone branco some: troca pro corte navy do mesmo asset. */
:root[data-tema="claro"] .topo-icone { content: url("/assets/img/icone-navy.svg"); }

.topo-nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.topo-nome span { color: var(--acento); }

/* ---------- atalhos da home: convite ao toque ---------- */

.atalho {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  /* era center: com descricao de 3 ou 4 linhas o icone descia pro meio do
   * paragrafo e o canto de cima do cartao virava um vazio de 66x43px com o
   * titulo flutuando. Medido: centro do icone 27px abaixo da linha de base do
   * titulo no celular, 43px no desktop. */
  align-items: start;
  padding: 20px 44px 20px 16px;
  transition: background 180ms var(--mola), border-color 180ms var(--mola),
              transform 180ms var(--mola), box-shadow 180ms var(--mola);
}

.atalho-icone {
  /* o span continua atravessando titulo e descricao: com align-items: start no
   * pai, o icone encosta no topo da area que ele ocupa sem criar uma linha so
   * pra ele (medido: vazio do canto cai de 66x43px pra 66x2px) */
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  margin-top: 2px;          /* acerta com a altura de x do titulo */
  justify-self: center;
  transition: transform 260ms var(--mola);
}

/* Tema claro troca cada celula pelo corte navy do mesmo asset, igual ao topo:
 * filtro de cor sobre SVG branco e chute, e chute de cor em logo e proibido. */
:root[data-tema="claro"] .atalho-icone[src*="cel-balanca"] { content: url("/assets/img/cel-balanca-navy.svg"); }
:root[data-tema="claro"] .atalho-icone[src*="cel-mais"] { content: url("/assets/img/cel-mais-navy.svg"); }
:root[data-tema="claro"] .atalho-icone[src*="cel-igual"] { content: url("/assets/img/cel-igual-navy.svg"); }
:root[data-tema="claro"] .atalho-icone[src*="cel-vezes"] { content: url("/assets/img/cel-vezes-navy.svg"); }

.atalho-nome { margin-bottom: 2px; }
.atalho-desc { grid-column: 2; }

/* A seta existe desde o inicio, apagada: o hover só a acende e desliza.
 * Elemento que nasce no hover salta; elemento que acorda convida. */
.atalho::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--acento);
  border-right: 2px solid var(--acento);
  transform: translateY(-50%) rotate(45deg);
  /* .6 por padrao: no celular nao existe hover e a seta e o unico convite ao
   * toque. Onde ha ponteiro, ela descansa e acorda no hover. */
  opacity: 0.6;
  transition: opacity 180ms var(--mola), transform 260ms var(--mola);
}

@media (hover: hover) {
  .atalho::after { opacity: 0.35; }
}

.atalho:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(6, 79, 120, 0.25);
}

.atalho:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px) rotate(45deg); }
.atalho:hover .atalho-icone { transform: scale(1.08) rotate(-3deg); }

/* ---------- guia: campo numerico dentro dos paineis .coluna ---------- */

.coluna .campo { text-align: center; font-family: var(--fonte-numero); min-height: 48px; }

/* grupos de opção empilhados (etapa de agravantes) respiram entre si */
.opcoes + .opcoes { margin-top: 8px; }

/* requisito por crime: o numero que vai na peticao nao pode ser o texto mais
 * apagado do cartao */
.requisito-valor {
  font-family: var(--fonte-numero);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
}

/* mini anel das linhas de resultado do guia: mesmo desenho, escala menor */
.anel--mini { width: 56px; height: 56px; }
.anel--mini circle { stroke-width: 10; }
/* o gradiente do anel grande mora num defs de outra tela: o mini usa o acento */
.anel--mini .arco { stroke: var(--acento); }

/* ---------- calculadora: seletores de campo + teclado único ---------- */

.visores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.seletor-campo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.seletor-campo .visor { display: block; margin-bottom: 0; }

/* O campo ativo fica marcado o tempo todo: é ele que diz onde o próximo
 * dígito vai cair, então não pode ser um flash de 400ms. */
.seletor-campo[aria-pressed="true"] .coluna-nome { color: var(--acento); }

.teclado--unico { grid-template-columns: repeat(3, 1fr); gap: 8px; }

.teclado--unico .tecla { min-height: 54px; font-size: 19px; }
.teclado--unico .tecla-apagar { font-size: 14px; }

/* ============================================================
   DESKTOP (>= 900px)
   ============================================================
   Mobile continua sendo a base intocada: tudo aqui e ADITIVO. A coluna de
   560px que serve o corredor do forum vira, no desktop, layout de duas
   colunas onde o conteudo pede largura (home, calculadora, guia na etapa de
   lancamento, painel de acessos). O consultor de progressao fica estreito
   de proposito: pergunta unica le melhor em coluna.
   ============================================================ */

/* wrappers de coluna: no celular sao transparentes ao layout */
.calc-colunas, .calc-col-a, .calc-col-b,
.acessos-colunas, .acessos-formularios, .acessos-lista { display: contents; }

@media (min-width: 900px) {
  .pagina--larga { max-width: 1020px; }

  .pagina--larga h1 { font-size: 32px; }

  /* home: os cartoes lado a lado, com a mesma altura na linha */
  .pagina--larga .atalhos {
    /* 280 e nao 300: a largura util e 1240 menos os 28px de padding de cada
     * lado, entao com 300 os quatro cartoes nao cabiam e o de Acessos caia
     * sozinho numa segunda linha. Com 280 cabem os quatro quando o admin esta
     * logado, e os tres esticam quando nao esta (auto-fit colapsa o vazio). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
  }

  /* calculadora: teclado a esquerda, operacoes e fracoes a direita.
   * display: grid nos wrappers desliga o display: contents do celular. */
  .calc-colunas {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 18px;
    align-items: start;
  }

  .calc-col-a, .calc-col-b { display: block; min-width: 0; }

  /* o teclado acompanha a rolagem da coluna direita: digitar e aplicar
   * fracao sem perder o teclado de vista e o ganho real do desktop */
  /* o offset sai da altura MEDIDA do painel (ver ligarPainelGrudado): ele
   * cresce de 111px pra 153px quando ha operacao pendente e recado, e offset
   * fixo deixava os rotulos ANOS, MESES e DIAS atras dele */
  .calc-col-a { position: sticky; top: calc(var(--altura-painel, 111px) + 12px); }

  /* guia, etapa de lancamento: formulario e crimes lancados lado a lado */
  .pagina--larga #palco .etapa[data-etapa="0"] {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 18px;
    align-items: start;
  }

  /* acessos: formularios a esquerda, quem tem acesso a direita */
  .acessos-colunas {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 18px;
    align-items: start;
  }

  .acessos-formularios, .acessos-lista { display: block; min-width: 0; }

  /* o painel fixo da calculadora nao precisa colar no topo do desktop: o
   * respiro vira padding, porque com top > 0 volta a fresta por onde o
   * conteudo passa por cima da barra */
  .painel-total { top: 0; padding-top: 16px; }

  /* liberar acesso acompanha a rolagem: a lista de quem tem acesso cresce sem
   * limite e o formulario e o que a pessoa veio usar */
  .acessos-formularios { position: sticky; top: 24px; }

  /* No celular cada opcao ocupa a linha inteira, que e o certo pro dedo. No
   * desktop a mesma pilha deixava o formulario do guia com 995px de altura
   * ao lado de uma coluna vazia: aqui elas pareiam. */
  .opcoes { grid-template-columns: 1fr 1fr; }

  /* o ultimo item de um grupo impar ficaria sozinho com meia largura e um
   * buraco do lado: ele toma a linha inteira. Vale tambem pro grupo de um
   * item so, que e como os agravantes do consultor sao montados. */
  .opcoes > :nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* lado direito do guia (lista + cruzar): transparente no celular */
.guia-lado { display: contents; }

@media (min-width: 900px) {
  .guia-lado { display: block; min-width: 0; position: sticky; top: 24px; }
}

/* ---------- suporte: consultar e-mail (painel de acessos) ----------
 * Formulário de busca empilhado por padrão (a base mobile do app inteiro):
 * campo em cima, botão embaixo, alvo de dedo de sobra. A partir de 480px
 * (folga o bastante pra "pessoa@email.com" + um botão de texto curto lado a
 * lado sem espremer) os dois entram numa linha só. Nenhum token novo: só os
 * que já existem em tokens.css. */
.suporte-form { display: grid; gap: 10px; }

@media (min-width: 480px) {
  .suporte-form { grid-template-columns: 1fr auto; align-items: center; }
  .suporte-form .botao { width: auto; padding: 0 24px; }
}

.suporte-cabeca {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 16px;
  margin: 18px 0 4px;
}

.suporte-linha { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }

/* O diagnóstico é o motivo desta tela existir: reaproveita .aviso (a caixa
 * de destaque que o app já usa) e só troca a cor do fio esquerdo por
 * inline style, com var(--erro)/var(--aviso-traco)/var(--ok) que já vêm de
 * tokens.css (ver corDoDiagnostico em acessos-ui.js). */
.suporte-diagnostico {
  border-left: 3px solid var(--acento);
  font-weight: 600;
  margin-bottom: 14px;
}

.suporte-envios { display: grid; gap: 8px; margin-bottom: 14px; }

.suporte-envio {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-2);
}

.suporte-envio b { color: var(--text-1); }

.suporte-acoes { display: grid; gap: 8px; }

.suporte-mensagem { margin-top: 12px; }

/* ---------- caixa de marcar e blocos recolhíveis (painel de acessos) ---------- */

/* A caixa nativa media 20x20 e o foco dela caía no anel do navegador. Aqui ela
 * vira um alvo de 44px com a marca desenhada, dentro do sistema do app. */
.caixa-linha {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}

.caixa {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 1px 0 0;          /* alinha com a PRIMEIRA linha do rotulo, nao com o meio do bloco */
  border: 2px solid var(--border-forte);
  border-radius: 6px;
  background: var(--elevated);
  cursor: pointer;
  position: relative;
  transition: background 140ms var(--mola), border-color 140ms var(--mola);
}

.caixa:checked { background: var(--azul); border-color: var(--azul); }

.caixa:checked::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.caixa:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Bloco recolhível: mesmo vocabulário do .detalhe do resultado, aplicado ao
 * título do cartão. */
.dobra > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 0;
}

.dobra[open] > summary { margin-bottom: 12px; }
.dobra > summary::-webkit-details-marker { display: none; }

.dobra > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms var(--mola);
}

.dobra[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.dobra > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* A tecla acende quando a pessoa digita no teclado do computador: sem isso a
 * digitacao muda o visor sem nada explicar de onde veio. Mesmo desenho do
 * :active do toque, so que disparado por classe. */
.tecla.pressionada,
.botao.pressionada {
  transform: scale(0.94);
  background: var(--azul);
  color: #FFFFFF;
  transition: transform 90ms var(--ease), background 90ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .tecla.pressionada, .botao.pressionada { transform: none; }
}

/* Dica de teclado: no celular nao existe teclado fisico, entao ela so aparece
 * na largura em que e verdade. */
.dica-teclado { display: none; }

@media (min-width: 900px) {
  .dica-teclado {
    display: block;
    margin-top: 14px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.6;
  }
  .dica-teclado b { color: var(--text-2); font-weight: 600; }
}


/* ============================================================
   CORREÇÕES DA AUDITORIA DE DESIGN (20/08/2026)
   Duas auditorias adversariais independentes (celular 6,5/10, desktop 5/10) e
   oito verificadores que mediram cada achado antes de eu mexer. O que está
   aqui foi medido antes e depois.
   ============================================================ */

/* Sem regra própria, o navegador entrega #757575 no placeholder: 3,11:1 sobre
 * o --elevated do tema escuro, num app que acerta o contraste em todo o resto. */
.campo::placeholder { color: var(--text-3); opacity: 1; }

/* O total era 19px, menor que o visor de ENTRADA (26px) e que a data derivada
 * (30px): o número que o advogado veio buscar era o menor da tela, escrito
 * como frase, sem um dígito pra bater o olho. */
.total { padding: 13px 16px 15px; }

.total-rotulo {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 1px;
}

/* Maior que TODO numero e titulo da tela, e nao so maior que o visor: a data
 * do direito tinha 30px inline e o h1 tem 32px, e os dois continuavam ganhando
 * do total. Validar contra o alvo da correcao em vez da tela inteira foi o que
 * deixou isso passar na primeira rodada. */
/* O piso de 25px e o 6,6vw nasceram do celular (23/09/2026): em 390 dao
 * 25,7px, que cabe numa linha no estado zerado E continua acima da data do
 * direito (23,4px), que e o maior numero concorrente da tela. Acima de 576px
 * o valor bate no teto de 38px, ou seja, o desktop nao muda. text-wrap:
 * balance e pra pena longa: quando quebra, quebra equilibrado, sem deixar
 * "dias" sozinho no meio, que foi o print que o dono mandou. */
.total-numero {
  display: block;
  font-size: clamp(25px, 6.6vw, 38px);
  line-height: 1.16;
  text-wrap: balance;
}

/* o eco da entrada não precisa competir com a resposta */
.visor { font-size: 22px; }

/* As ações do topo num grupo só: cada .topo-acao tinha margin-left: auto, e
 * com duas delas o espaço livre se dividia em dois, jogando a primeira pro
 * meio do cabeçalho (medido no bônus: "Acessos" em x=720 de um topo de 988px).
 * As páginas que pareciam certas só disfarçavam com um style inline. */
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Alerta do cruzamento: fio na cor cheia e rótulo, que é o que faz o bloco ler
 * como alerta. O fundo continua quente, agora opaco (ver tokens.css). Escopado
 * em .avisos porque a caixa neutra é boilerplate de rodapé, não alerta. */
/* .aviso-decisao, e nao "todo aviso que nao e neutro": o consultor usa .aviso
 * pra NOTA JURIDICA, e algumas delas sao boa noticia (retroatividade
 * benefica, hediondo em 1/6 ate 2007). Carimbar "Atencao" ali dizia pro
 * advogado que uma vantagem do cliente era um alerta: erro de conteudo, nao
 * de estilo. Alerta e so onde a ferramenta PEDE UMA DECISAO que muda a
 * fracao. */
.aviso-decisao {
  border-left: 3px solid var(--aviso-traco);
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.aviso-decisao::before {
  content: "Atenção";
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aviso-rotulo);
}

/* dentro do cartão de alerta o fantasma vive sobre --aviso-fundo, não sobre o
 * fundo da página: o texto e o hover precisam de token próprio */
/* A borda usa --aviso-traco, a cor CHEIA, e nao a translucida: composta sobre
 * o fundo do proprio aviso ela dava 1,88:1 no claro, abaixo dos 3:1 que um
 * contorno de componente precisa. Com a cor cheia sao 4,06:1 no claro e
 * 4,49:1 no escuro. O fundo do aviso e claro demais pro botao branco se
 * separar sozinho (1,14:1): quem entrega a forma aqui e o contorno. */
.aviso .botao-fantasma { color: var(--text-1); border-color: var(--aviso-traco); background: var(--elevated); }
/* o veu branco de 6% sobre o ambar CLARO nao mudava nada: #FCEEDA continuava
 * #FCEEDA aos olhos. O hover vem do token do tema. */
.aviso .botao-fantasma:hover { background: var(--hover); }

@media (min-width: 900px) {
  /* O app parava em 1020px num monitor de 1440: 210px mortos de cada lado, e a
   * calculadora rolava por falta de largura, não por excesso de conteúdo. */
  .pagina--larga { max-width: 1240px; }

  /* Linha de leitura: o subtítulo da home tinha 138 caracteres numa linha só,
   * o da calculadora 127 e o de acessos 123. Acima de 90 o olho perde o começo
   * da linha seguinte. */
  .subtitulo { max-width: 62ch; }

  /* Home: com 1240px cabem os quatro cartões numa linha quando o admin está
   * logado, e os três numa linha quando não está, sem órfão nos dois casos.
   * grid-auto-rows: 1fr faz todos herdarem a altura da linha: o cartão de
   * Acessos vinha com 127px contra 169px das irmãs. */
  .pagina--larga .atalhos { grid-auto-rows: 1fr; }

  /* O 1fr acima iguala a altura dos cartoes, mas tambem estica as LINHAS
   * INTERNAS do cartao de menor conteudo: medido, a folga entre titulo e
   * descricao ia de 2,5px nos cheios pra 43,5px no de Acessos. align-content
   * ancora tudo no topo e deixa a folga sobrar embaixo, onde ninguem ve. */
  .pagina--larga .atalho { align-content: start; }

  /* Consultor: a PERGUNTA continua estreita, porque uma pergunta por vez é
   * foco e não defeito. O RESULTADO é que precisava da largura: tem anel,
   * fração, a lei que sustenta e os avisos, e estava tudo espremido numa
   * coluna de 560px no meio de um monitor de 1440. */
  /* O consultor nao quer os 1240 do resto: com eles, a regua "PERGUNTA 2 DE 2"
   * e os botoes atravessavam a tela inteira enquanto a pergunta parava em 620,
   * e "Aplicar essa fracao numa pena" virava uma barra de 1208px. Uma largura
   * so mantem regua, pergunta, resultado e botoes no mesmo eixo, e ainda sobra
   * espaco pro resultado abrir em duas colunas. */
  .pagina--larga.pagina--consultor { max-width: 900px; }

  .pagina--consultor .resultado {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 20px;
    align-items: start;
  }

  /* `grid-row: 1 / -1` nao serve aqui: sem linhas explicitas, o -1 resolve pra
   * linha 2 e a cabeca ocupa uma linha so, jogando os avisos pra ESQUERDA
   * embaixo dela (visto renderizado). Cada um na sua coluna resolve, e o
   * auto-placement empilha a direita na ordem do documento. */
  .pagina--consultor .resultado > .resultado-cabeca {
    grid-column: 1;
    /* linha 1 e so a linha 1. Duas tentativas de esticar a cabeca por todas as
     * linhas falharam e ficam registradas: `1 / -1` resolve pra linha 2 quando
     * nao ha linhas explicitas (os avisos caiam na ESQUERDA embaixo do anel), e
     * `1 / 100` cria 99 linhas implicitas que herdam o row-gap de 20px e
     * esticaram o cartao de 337px pra 2254px. */
    grid-row: 1;
    position: sticky;
    top: 24px;
  }

  .pagina--consultor .resultado > :not(.resultado-cabeca) { grid-column: 2; }
}

/* Titulo de cartao das telas de venda (renovar, minha assinatura). Existe
   separado de .cartao-titulo de proposito: aquele e rotulo interno da
   ferramenta ("Operacoes", "Fracoes"), em caixa alta espacada, e o Julio ja
   cobrou mais de uma vez que pagina que vende nao abre secao com microtitulo
   em caixa alta. Aqui e titulo de verdade, na fonte dos titulos. */
.cartao-cabeca {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 10px;
}

/* Botao de checkout: preco em linha propria, como o Julio aprovou na pricing
   das paginas de lancamento. */
.oferta-botao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 62px;
  padding: 12px 18px;
  border-radius: var(--raio);
  background: var(--azul);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  transition: filter 120ms var(--ease);
}
.oferta-botao:hover { filter: brightness(1.12); }
.oferta-botao .oferta-nome { font-size: 15px; font-weight: 600; }
.oferta-botao .oferta-preco { font-size: 13px; opacity: 0.85; }
.oferta-botao--secundario {
  background: var(--elevated);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.oferta-botao--secundario:hover { background: var(--hover); filter: none; }

/* ---------- histórico de cálculos (calculadora.html) ---------- */

/* Espaço antes da lista, sem style inline no HTML (achado de auditoria:
 * .historico-salvar substitui o style="margin-bottom:12px" que estava direto
 * na tag). */
.historico-salvar { margin-bottom: 12px; }

/* Rótulo inline em vez de prompt(): abre só quando "Salvar cálculo" é
 * tocado, nunca disputa espaço com o resto do cartão em repouso. */
.historico-form { display: grid; gap: 8px; margin-bottom: 12px; }

.historico-status { font-size: 13px; line-height: 1.5; margin-bottom: 12px; color: var(--text-2); }
.historico-status--erro { color: var(--erro); }

.historico-lista { display: grid; gap: 10px; }

.historico-vazio { color: var(--text-3); font-size: 13px; }

.historico-item {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 12px 14px;
  background: var(--elevated);
}

.historico-item-rotulo { font-weight: 600; color: var(--text-1); font-size: 14px; margin-bottom: 2px; }

/* Fonte de número (mesma família do visor e do total), mas bem abaixo do
 * total: o total continua sendo o maior número da tela de propósito. */
.historico-item-resultado {
  font-family: var(--fonte-numero);
  font-size: 16px;
  color: var(--text-1);
  margin-bottom: 2px;
}

.historico-item-meta { color: var(--text-3); font-size: 12px; }

.historico-item-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.historico-item-acoes .botao { min-height: 44px; font-size: 14px; }

.historico-item .detalhe { margin-top: 8px; }

/* ============================================================
   CALCULADORA NO CELULAR (< 900px), 23/09/2026
   ============================================================
   Medido antes de mexer, em 390x844 e 360x740 com isMobile e
   deviceScaleFactor 2:

   - o painel do total gruda com 140px de altura e esconde 100% de SEIS
     teclas (1, 2, 3, 4, 5 e 6): o teclado aparece cortado, comecando no 7,
     que foi exatamente o print que o dono mandou
   - o total quebra em DUAS linhas e deixa "dias" orfao e centralizado
   - a pagina tem 2,09 telas de altura para uma calculadora, e "= Resolver",
     que e a acao principal, so aparece depois de rolar
   - as quatro linhas do teclado sao doze cartoes brancos soltos no fundo,
     sem ler como um teclado

   Tudo aqui e ADITIVO e escopado abaixo de 900px: o desktop, que ja passou
   por duas auditorias, nao muda.
   ============================================================ */

@media (max-width: 899px) {

  /* ---- topo: 420px antes do primeiro numero ----
   * O cabecalho, o titulo e um subtitulo de tres linhas empurravam o total
   * para baixo da metade da tela. O texto continua inteiro, so para de ter
   * escala de pagina de leitura numa tela de ferramenta. */
  .pagina { padding-top: 14px; }
  .pagina--larga h1 { font-size: 22px; }
  /* 14px e o piso de corpo do gate de responsividade (medido: com 13px ele
   * reprova nas quatro telas de celular). O espaco vem da entrelinha e da
   * margem, nao do tamanho da letra. */
  .pagina--larga .subtitulo { line-height: 1.42; margin-bottom: 14px; }

  /* ---- painel do total ----
   * Em repouso continua sendo o maior numero da tela. Ao grudar vira uma
   * barra de uma linha so: e a diferenca entre cobrir seis teclas e cobrir
   * nenhuma. O rotulo entra na MESMA linha do numero, senao a barra nasce
   * com duas e o ganho some. */
  .painel-total { padding: 4px 0 8px; }

  .total {
    padding: 10px 12px 12px;
    transition: padding 160ms var(--ease);
  }

  /* o tamanho vem do clamp base, que ja foi calibrado pelo celular */
  .total-numero { line-height: 1.14; transition: font-size 160ms var(--ease); }

  .painel-total.grudou .total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 0;
    box-shadow: none;
  }

  .painel-total.grudou .total-rotulo {
    margin-bottom: 0;
    font-size: 11px;
    flex: none;
  }

  .painel-total.grudou .total-numero {
    font-size: 17px;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- entrada: visor um pouco mais baixo, rotulo colado nele ---- */
  /* o display precisa de um respiro maior que o vao entre as teclas, senao
   * a fileira de visores le como se fosse mais uma linha do teclado */
  .visores { gap: 7px; margin-bottom: 14px; }
  .seletor-campo .visor { min-height: 50px; padding: 10px 12px; }
  .coluna-nome { padding-bottom: 4px; }

  /* ---- entrada e teclado num corpo unico ----
   * Antes eram tres visores soltos mais doze cartoes brancos boiando no
   * fundo da pagina. Fechados num painel so, com a mesma moldura dos outros
   * cartoes, leem como o corpo de uma calculadora. As teclas continuam com
   * alvo de toque de 48px, acima dos 44 do minimo. */
  .calc-col-a > section:first-of-type {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-g);
    padding: 12px;
  }

  .teclado--unico { gap: 7px; }
  .teclado--unico .tecla { min-height: 48px; }
  .teclado--unico .tecla-apagar { font-size: 15px; }

  /* ---- cartoes: mesma cara, menos ar ---- */
  .cartao { padding: 14px 14px; margin-bottom: 12px; }
  .calc-col-a > section { margin-bottom: 12px; }

  /* ---- operacoes: hierarquia em vez de seis botoes iguais ----
   * Somar antes de subtrair (somar pena e a conta comum), Resolver com mais
   * peso que Limpar tudo, que e a acao destrutiva ao lado dele, e a memoria
   * como controle secundario, que e o que ela e. */
  #btn-somar { order: -1; }

  .linha-acoes:has(#btn-igual) { grid-template-columns: 1.35fr 1fr; }
  #btn-igual { font-size: 16px; }

  .linha-acoes:has(#btn-ms) { gap: 7px; margin-bottom: 0; }
  .linha-acoes:has(#btn-ms) .botao { min-height: 44px; font-size: 13px; }

  /* ---- fracoes: quatro colunas fechadas, sem orfao na ultima linha ----
   * auto-fit com minmax(62px) entregava 4 colunas em 390 e 4 em 360 por
   * sorte da largura; fixo em 4 garante as tres linhas cheias com os doze
   * botoes em qualquer tela de celular. */
  .fracoes { grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
  .fracao { min-height: 44px; font-size: 15px; }

  /* ---- rodape ---- */
  .rodape { margin-top: 24px; }

/* ---- a barra do total passa POR BAIXO da area de digitacao ----
 * A cobertura nao se resolve encolhendo a barra: mesmo com 50px ela cortava
 * a fileira 4 5 6 no meio. Quem decide aqui e a ordem de empilhamento, sem
 * uma linha de JS: a area de entrada sobe acima da barra e desliza por cima
 * dela. Enquanto se digita, quem informa sao os visores; a barra volta a
 * aparecer no instante em que o teclado sai da tela, que e quando ela passa
 * a ser a unica fonte do total (fracoes, data-base, historico).
 * O fundo proprio e obrigatorio: sem ele a barra vaza pelos vaos entre as
 * teclas e entre os visores. Um bloco so por breakpoint: o gate da cascata
 * (tests/ui/gate-cascata.mjs) conta bloco repetido como divida, e com razao,
 * porque regra do mesmo breakpoint espalhada em dois lugares e como a
 * duplicata nasce. */
  .calc-col-a > section:first-of-type {
    position: relative;
    z-index: 6;
  }

  /* Some de vez enquanto o teclado esta a vista: o z-index sozinho resolvia
   * as teclas e deixava a barra vazando pelos 16px de cada lado do painel,
   * uma faixa cinza emoldurando o teclado sem dizer nada.
   *
   * visibility, e NAO opacity: o painel carrega .assenta, cuja animacao tem
   * `forwards`, e valor animado vence declaracao normal na cascata. Com
   * `opacity: 0` aqui o computado saia 1 e a barra continuava pintada; so
   * o `pointer-events: none` pegava, o que e pior que nao ter regra nenhuma,
   * porque esconde a barra do elementFromPoint e cega o gate no proprio
   * defeito que ele deveria medir. O CSS desta casa ja tinha tropecado nisso
   * uma vez (ver o comentario do .total::after). */
  .painel-total.grudou.teclado-a-vista {
    visibility: hidden;
  }

  /* Excecao: com recado ou operacao pendente a barra volta, e volta POR CIMA.
   * "Somou. Agora digite a proxima pena" e a confirmacao da conta, e naquele
   * instante ela vale mais que a fileira de teclas atras dela. As linhas de
   * feedback ficam :empty quando nao ha nada a dizer, entao o :has() so
   * dispara quando existe texto de verdade. */
  .painel-total.grudou:has(.progresso-texto:not(:empty)) {
    visibility: visible;
    z-index: 8;
  }

  .painel-total { transition: background 160ms var(--ease); }
}