/* ============================================================
   IRM Radar, sistema de design.

   Ferramenta de trabalho aberta todos os dias, nao pagina
   institucional: densidade de informacao, e nada competindo
   com os numeros.

   Regra da cor: azul institucional carrega a marca, azul de
   acao aparece SO onde ha decisao ou destaque (melhor forma de
   anunciar, lucro, botao primario). Verde e vermelho significam
   aprovado e prejuizo, e nunca decoram nada.

   Todo texto foi conferido acima de 4.5:1 sobre branco e sobre
   o fundo tingido, para ler em tela comum.
   ============================================================ */

:root {
  /* ---- cor: neutros ---- */
  --fundo:            #f6f8fb;
  --superficie:       #ffffff;
  --superficie-suave: #fbfcfe;
  --borda:            #dde3ec;
  --borda-forte:      #c6d0de;

  /* ---- cor: tinta (16.4 / 6.2 / 5.5 sobre branco) ---- */
  --tinta:        #10212f;
  --tinta-media:  #546273;
  --tinta-fraca:  #5c6a79;

  /* ---- cor: azuis ---- */
  --azul-base:     #123a5e;   /* institucional: marca e cabecalho */
  --azul-acao:     #0b5fcc;   /* so para acao e destaque */
  --azul-acao-forte: #0a4ea8;
  --azul-tenue:    #eef3fb;   /* fundo de realce */
  --azul-borda:    #cddffa;

  /* ---- cor: significado, nunca decoracao ---- */
  --bom:        #0f7a4a;
  --bom-tenue:  #eaf5ef;
  --ruim:       #b3261e;
  --ruim-tenue: #fdf1f0;
  --atencao:        #8a5a00;
  --atencao-tenue:  #fdf7ea;
  --atencao-borda:  #f0e2c0;

  /* ---- tipografia ---- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-numero: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
                  "Cascadia Mono", Menlo, Consolas, monospace;

  --texto-micro: .72rem;
  --texto-menor: .82rem;
  --texto-base:  .94rem;
  --texto-guia:  1.02rem;
  --texto-t2:    1.18rem;
  --texto-t1:    1.5rem;
  --texto-numero-grande: 1.7rem;

  /* ---- espacamento ---- */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* ---- forma ---- */
  --raio-p: 4px;
  --raio-m: 7px;
  --raio-g: 12px;

  --sombra-p: 0 1px 2px rgba(16, 33, 47, .06);
  --sombra-m: 0 1px 3px rgba(16, 33, 47, .07), 0 6px 16px rgba(16, 33, 47, .05);
  --foco: 0 0 0 3px rgba(11, 95, 204, .28);
}

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- cabecalho */

header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e5); padding: var(--e3) var(--e5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
header nav { display: flex; gap: var(--e5); align-items: center; }
header a { color: var(--tinta-media); text-decoration: none; font-size: var(--texto-menor); }
header a:hover { color: var(--azul-acao); }
header a.marca {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--azul-base); font-size: var(--texto-guia);
  font-weight: 650; letter-spacing: -.01em; margin-right: var(--e2);
}
header a.marca:hover { color: var(--azul-base); }
header .logo { width: 26px; height: 26px; display: block; flex: none; }
header .sair {
  display: flex; gap: var(--e2); align-items: center;
  color: var(--tinta-fraca); font-size: var(--texto-menor);
}

main { max-width: 1220px; margin: 0 auto; padding: var(--e6) var(--e5) var(--e7); }

/* ---------------------------------------------------- tipografia */

h1 {
  font-size: var(--texto-t1); font-weight: 650; letter-spacing: -.02em;
  color: var(--azul-base); margin: 0 0 var(--e2);
}
h2 {
  font-size: var(--texto-t2); font-weight: 620; letter-spacing: -.01em;
  color: var(--azul-base); margin: var(--e6) 0 var(--e3);
}
.explica, .sub {
  color: var(--tinta-media); margin: 0 0 var(--e5); max-width: 74ch;
}
.ajuda { color: var(--tinta-media); font-size: var(--texto-menor);
  margin: 0 0 var(--e5); max-width: 68ch; }
.nota { color: var(--tinta-media); font-size: var(--texto-menor);
  max-width: 80ch; margin: var(--e4) 0 0; }
.fraco { color: var(--tinta-fraca); font-size: var(--texto-menor); }
.forte { font-weight: 650; }
.destaque { font-size: var(--texto-guia); margin: var(--e4) 0; }
a { color: var(--azul-acao); }
a:hover { color: var(--azul-acao-forte); }

/* ---------------------------------------------------- formularios */

.busca {
  display: flex; gap: var(--e4); align-items: flex-end; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-p);
  padding: var(--e4) var(--e5); margin-bottom: var(--e3);
}
.busca .cresce { flex: 1 1 22rem; }
.busca label, .caixa-login label {
  display: flex; flex-direction: column; gap: var(--e1);
  font-size: var(--texto-menor); color: var(--tinta-media); font-weight: 550;
}
.busca .checagem { flex-direction: row; align-items: center;
  gap: var(--e2); padding-bottom: var(--e3); font-weight: 400; }

input[type="text"], input:not([type]), input[type="password"], input[type="file"] {
  font: inherit; font-size: var(--texto-base);
  padding: .5rem .65rem; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
  background: var(--superficie);
  transition: border-color .15s, box-shadow .15s;
}
input:hover:not(:disabled) { border-color: #a9b8cb; }
/* campo de texto mostra o anel em qualquer foco, inclusive por clique:
   quem esta digitando precisa ver onde esta. Botao e link so no foco por
   teclado, senao o anel fica preso depois de cada clique. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-acao); box-shadow: var(--foco);
}
button:focus-visible, a:focus-visible {
  outline: none; box-shadow: var(--foco); border-radius: var(--raio-p);
}
input:disabled { background: var(--fundo); color: var(--tinta-fraca); cursor: not-allowed; }

button, .botao {
  font: inherit; font-size: var(--texto-base); font-weight: 550;
  padding: .52rem 1.3rem; border-radius: var(--raio-m); cursor: pointer;
  border: 1px solid var(--azul-acao); background: var(--azul-acao); color: #fff;
  transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.botao { display: inline-block; text-decoration: none; }
button:hover:not(:disabled), .botao:hover {
  background: var(--azul-acao-forte); border-color: var(--azul-acao-forte); color: #fff;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: var(--borda); border-color: var(--borda-forte);
  color: var(--tinta-fraca); cursor: progress; opacity: 1;
}
button.secundario {
  background: var(--superficie); color: var(--tinta-media); border-color: var(--borda-forte);
}
button.secundario:hover:not(:disabled) {
  background: var(--fundo); color: var(--azul-acao); border-color: var(--azul-acao);
}

/* ---------------------------------------------------- tabelas */

table.dados {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-p);
}
table.dados th, table.dados td {
  padding: var(--e3) var(--e4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--borda);
}
table.dados thead th {
  background: var(--superficie-suave);
  font-size: var(--texto-micro); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca);
  border-bottom: 1px solid var(--borda-forte); vertical-align: bottom;
}
table.dados tbody tr:last-child td { border-bottom: none; }
table.dados tbody tr:hover td { background: var(--superficie-suave); }

/* numeros em monoespacada: alinhamento por coluna e o que permite
   comparar valores de relance */
.num {
  text-align: right; font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums; font-size: .88rem;
}
.sku {
  display: inline-block; margin-left: var(--e2); padding: 0 .38rem;
  font-family: var(--fonte-numero); font-size: var(--texto-micro);
  color: var(--tinta-fraca); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  white-space: nowrap;
}
.sku.grande { font-size: var(--texto-menor); vertical-align: middle; }
.sub-th {
  display: block; margin-top: 2px; font-size: var(--texto-micro);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.3; color: var(--tinta-fraca);
}
table.numerica tbody th { font-weight: 400; white-space: nowrap; color: var(--tinta-media); }
table.numerica tr.total th, table.numerica tr.total td {
  border-top: 2px solid var(--azul-base); font-weight: 700; font-size: 1.02rem;
  color: var(--tinta);
}
table.numerica tr.detalhe th, table.numerica tr.detalhe td {
  color: var(--tinta-fraca); font-size: var(--texto-micro);
  padding-top: 0; padding-bottom: var(--e2); border-bottom: none;
}
table.compacta { max-width: 34rem; }
table.compacta th { font-weight: 400; color: var(--tinta-media); }
th.canto { font-size: var(--texto-micro); text-transform: none; letter-spacing: 0; }

/* destaque: so onde ha decisao */
th.melhor, td.melhor { background: var(--azul-tenue); }
th.melhor { border-bottom: 2px solid var(--azul-acao); }
.etiqueta {
  display: inline-block; margin-top: var(--e1); padding: 1px .4rem;
  font-size: var(--texto-micro); font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: #fff;
  background: var(--azul-acao); border-radius: var(--raio-p);
}
.titulo-produto { font-weight: 600; color: var(--tinta); }
a.titulo-produto { color: var(--azul-acao); text-decoration: none; }
a.titulo-produto:hover { text-decoration: underline; }
.marca-dif {
  display: inline-block; margin: var(--e1) var(--e2) 0 0; padding: 1px .45rem;
  font-size: var(--texto-micro); color: var(--azul-base);
  background: var(--azul-tenue); border: 1px solid var(--azul-borda);
  border-radius: var(--raio-p);
}
.destaque-custo { font-weight: 650; }
.nao-quebra { white-space: nowrap; }

tr.abaixo-do-piso td { color: var(--tinta-media); background: var(--superficie-suave); }
tr.falhou td { color: var(--ruim); background: var(--ruim-tenue); }
tr.prejuizo td { background: var(--ruim-tenue); }
.negativo { color: var(--ruim); font-weight: 700; }
.passa { color: var(--bom); font-weight: 650; }
.nao-passa { color: var(--ruim); font-weight: 550; }
.alerta { color: var(--ruim); font-weight: 650; }

/* ---------------------------------------------------- cartoes e blocos */

.cartoes { display: flex; gap: var(--e4); flex-wrap: wrap; margin: var(--e5) 0; }
.cartao {
  flex: 1 1 12rem; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-p); padding: var(--e4) var(--e5);
}
.cartao .numero {
  font-family: var(--fonte-numero); font-size: var(--texto-numero-grande);
  font-weight: 650; letter-spacing: -.02em; color: var(--azul-base);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cartao .rotulo {
  color: var(--tinta-fraca); font-size: var(--texto-menor); margin-top: var(--e1);
}
.cartao.atencao { border-left: 3px solid var(--atencao); }
.cartao.ruim { border-left: 3px solid var(--ruim); }
.cartao.ruim .numero { color: var(--ruim); }

.painel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-acao); border-radius: var(--raio-m);
  box-shadow: var(--sombra-p); padding: var(--e4) var(--e5); margin: var(--e5) 0;
}
.painel p { margin: var(--e2) 0; }
.alerta-painel { border-left-color: var(--atencao); }

.aviso-forte {
  background: var(--atencao-tenue); border: 1px solid var(--atencao-borda);
  border-left: 3px solid var(--atencao); border-radius: var(--raio-m);
  padding: var(--e4) var(--e5); margin: var(--e5) 0;
}
.aviso-forte p { margin: var(--e2) 0; }
.aviso-forte strong { color: var(--atencao); }

.sem-resultado {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-acao); border-radius: var(--raio-g);
  box-shadow: var(--sombra-p); padding: var(--e5) var(--e6); margin: var(--e5) 0;
}
.vazio {
  padding: var(--e6); background: var(--superficie);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-g);
  color: var(--tinta-media);
}
.avisos {
  background: var(--atencao-tenue); border: 1px solid var(--atencao-borda);
  border-radius: var(--raio-m); color: var(--atencao);
  padding: var(--e3) var(--e4) var(--e3) var(--e6);
  font-size: var(--texto-menor); margin: var(--e5) 0;
}
.avisos li { margin: var(--e1) 0; }
.erro {
  color: var(--ruim); background: var(--ruim-tenue);
  border: 1px solid #f0d4d2; border-radius: var(--raio-m);
  padding: var(--e3) var(--e4); margin: var(--e4) 0;
}
.salvo {
  color: var(--bom); background: var(--bom-tenue);
  border: 1px solid #c7e4d5; border-radius: var(--raio-m);
  padding: var(--e3) var(--e4); margin: var(--e4) 0;
}
.mensagem-erro {
  white-space: pre-wrap; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-m);
  padding: var(--e4) var(--e5); font-size: var(--texto-menor);
  font-family: var(--fonte); color: var(--tinta-media);
}

dl.ficha {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--e2) var(--e5); margin: var(--e4) 0 var(--e5);
}
dl.ficha dt { color: var(--tinta-fraca); font-size: var(--texto-menor); }
dl.ficha dd { margin: 0; }

.ordenar { margin: var(--e4) 0 var(--e3); color: var(--tinta-fraca);
  font-size: var(--texto-menor); }
.ordenar a { margin-right: var(--e4); text-decoration: none; }
.ordenar a:hover { text-decoration: underline; }
.ordenar a.ativo { font-weight: 650; color: var(--tinta); text-decoration: none; }

.lista-simples { padding-left: var(--e4); color: var(--tinta-media);
  font-size: var(--texto-menor); }
.lista-simples li { margin: var(--e1) 0; }

/* ---------------------------------------------------- login */

.caixa-login {
  max-width: 23rem; margin: 14vh auto; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-m); padding: var(--e6);
}
.caixa-login .marca-login {
  display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e1);
}
.caixa-login .logo { width: 38px; height: 38px; flex: none; }
.caixa-login h1 { margin: 0; font-size: var(--texto-t2); }
.caixa-login .sub { font-size: var(--texto-menor); margin-bottom: var(--e5); }
.caixa-login form { display: flex; flex-direction: column; gap: var(--e4); }
.caixa-login button { width: 100%; margin-top: var(--e1); }

/* ---------------------------------------------------- progresso */

.barra {
  height: .5rem; background: var(--borda); border-radius: var(--raio-p);
  overflow: hidden; margin: var(--e3) 0;
}
.barra-cheia {
  height: 100%; background: var(--azul-acao); transition: width .4s ease;
}

/* ---------------------------------------------------- oportunidades */

.termo-pesquisado {
  display: inline-block; padding: .1rem .6rem; margin-left: var(--e2);
  background: var(--azul-tenue); border: 1px solid var(--azul-borda);
  border-radius: var(--raio-m); color: var(--azul-base); font-weight: 650;
}
.confianca {
  display: inline-block; font-size: var(--texto-micro); font-weight: 600;
  padding: 1px .42rem; border-radius: var(--raio-p); white-space: nowrap;
}
/* confianca e qualidade do cruzamento, nao veredito de compra: verde aqui
   seria lido como "pode comprar", que e outra coisa. Verde fica so no
   veredito, e vermelho so no prejuizo. */
.confianca.alta, .confianca.confirmada {
  background: var(--azul-tenue); color: var(--azul-base); border: 1px solid var(--azul-borda);
}
.confianca.media {
  background: var(--atencao-tenue); color: var(--atencao); border: 1px solid var(--atencao-borda);
}
.confianca.baixa {
  background: var(--fundo); color: var(--tinta-fraca); border: 1px solid var(--borda);
}
.decidir { display: inline-flex; gap: var(--e1); margin-top: var(--e1); flex-wrap: wrap; }
.decidir form { display: inline; }
.decidir button {
  font-size: var(--texto-micro); font-weight: 500; padding: 1px .5rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--tinta-media);
}
.decidir button:hover:not(:disabled) {
  background: var(--fundo); color: var(--azul-acao); border-color: var(--azul-acao);
}
.decidir button.nao:hover { color: var(--ruim); border-color: var(--ruim); background: var(--ruim-tenue); }
.decidir button.sim:hover {
  color: var(--azul-acao); border-color: var(--azul-acao); background: var(--azul-tenue);
}

/* ---------------------------------------------------- ajustes */

.formulario-ajustes {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-p);
  padding: var(--e5) var(--e6); max-width: 34rem;
}
.formulario-ajustes .campo { margin-bottom: var(--e5); }
.formulario-ajustes .campo:last-of-type { margin-bottom: var(--e4); }
.formulario-ajustes label {
  display: block; font-weight: 600; margin-bottom: var(--e1); color: var(--tinta);
}
.formulario-ajustes .entrada { display: flex; align-items: center; gap: var(--e2); }
.formulario-ajustes input { width: 9rem; text-align: right;
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.formulario-ajustes .unidade { color: var(--tinta-fraca); font-size: var(--texto-menor); }
.ajuda-campo { color: var(--tinta-fraca); font-size: var(--texto-menor);
  margin: var(--e1) 0 0; max-width: 48ch; }
.erro-campo { color: var(--ruim); font-size: var(--texto-menor); margin: var(--e1) 0 0; }
.campo.com-erro input { border-color: var(--ruim); }
.campo.com-erro input:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, .22); }

/* ---------------------------------------------------- decisao de compra */

.marcar {
  display: flex; gap: var(--e5); align-items: flex-end; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  /* azul de acao, e nao verde: marcar e uma acao, nao um veredito de
     aprovacao. Verde aqui seria lido como "o sistema aprovou a compra". */
  border-left: 3px solid var(--azul-acao); border-radius: var(--raio-g);
  box-shadow: var(--sombra-p); padding: var(--e4) var(--e5); margin: var(--e5) 0;
}
.marcar input[name=quantidade] {
  width: 6.5rem; text-align: right;
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
}

.ajuda-marcar { flex: 1 1 22rem; color: var(--tinta-fraca);
  font-size: var(--texto-menor); }
tr.detalhe-conta td {
  padding-top: 0; font-size: var(--texto-micro); color: var(--tinta-fraca);
  border-bottom: 2px solid var(--borda);
}
.parcela { display: inline-block; margin-right: var(--e4); white-space: nowrap; }
.parcela strong { font-family: var(--fonte-numero); color: var(--tinta); }
.marca-mudou {
  display: inline-block; margin-top: var(--e1); padding: 1px .45rem;
  font-size: var(--texto-micro); color: var(--atencao);
  background: var(--atencao-tenue); border: 1px solid var(--atencao-borda);
  border-radius: var(--raio-p);
}
.selo-origem {
  display: inline-block; margin: 0 var(--e2); padding: 1px .5rem;
  font-size: var(--texto-menor); color: var(--atencao);
  background: var(--atencao-tenue); border: 1px solid var(--atencao-borda);
  border-radius: var(--raio-p);
}

/* ---------------------------------------------------- home */

.chamada { font-size: var(--texto-guia); max-width: 66ch; line-height: 1.65;
  color: var(--tinta-media); }
.acao { margin: var(--e6) 0 var(--e5); }

/* ---------------------------------------------------- telas estreitas */

@media (max-width: 860px) {
  main { padding: var(--e4) var(--e3) var(--e6); }
  header { padding: var(--e3) var(--e4); flex-wrap: wrap; gap: var(--e3); }
  header nav { gap: var(--e4); }
  .busca { flex-direction: column; align-items: stretch; }
  /* .cresce existe para esticar na horizontal quando o formulario e
     uma linha. Virando coluna, o mesmo flex-grow esticava o campo na
     vertical e abria um vao morto de 300px ate o campo seguinte. */
  .busca .cresce { flex: 0 1 auto; }
  .cartoes { gap: var(--e3); }
  .cartao { flex: 1 1 100%; }
}

/* ============================================================
   CELULAR

   Duas transformacoes diferentes, porque sao duas tabelas
   diferentes:

   1. Tabela de LISTA (uma oportunidade por linha, um produto
      por linha): cada linha vira um cartao empilhado e o
      cabecalho da coluna vira rotulo dentro do cartao, lido do
      atributo data-rotulo. O HTML e o mesmo; so o CSS muda.

   2. Tabela de COMPARACAO (produto.html): as linhas sao custos
      e as colunas sao formas de anunciar. Virar cartao por
      linha daria um cartao "Comissao" com quatro numeros
      soltos, e ninguem monta a conta de uma forma lendo dez
      cartoes. Essa rola de lado com a coluna de rotulos presa,
      que e como se compara coluna com coluna no dedo.

   Nada rola na horizontal fora do container da tabela.
   ============================================================ */

/* container de rolagem: a sombra nas bordas aparece e some
   sozinha conforme a posicao, sem javascript. E o aviso de que
   ha mais conteudo para o lado. */
.rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-image:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(16, 33, 47, .13), rgba(16, 33, 47, 0)),
    linear-gradient(to left, rgba(16, 33, 47, .13), rgba(16, 33, 47, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
  border-radius: var(--raio-g);
}

@media (max-width: 720px) {

  /* ---- 1. lista vira cartao ---- */

  table.vira-cartao {
    display: block; border: none; background: none;
    box-shadow: none; border-radius: 0; overflow: visible;
  }
  table.vira-cartao thead {
    /* fica para leitor de tela, sai da tela */
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  table.vira-cartao tbody { display: block; }
  table.vira-cartao tbody tr {
    display: block; margin-bottom: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--superficie);
    border: 1px solid var(--borda); border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
  }
  table.vira-cartao tbody tr:hover td { background: none; }
  table.vira-cartao tbody tr:last-child { margin-bottom: 0; }

  /* o rotulo flutua a esquerda e o valor corre a direita. Float,
     e nao flex, porque varias celulas tem <br> com uma segunda
     linha explicativa, e flex quebraria essa linha em item solto. */
  table.vira-cartao tbody td {
    display: block; overflow: hidden;
    padding: var(--e2) 0; text-align: right;
    border-bottom: 1px solid var(--borda);
  }
  table.vira-cartao tbody td::before {
    content: attr(data-rotulo);
    float: left; max-width: 52%; margin-right: var(--e3);
    font-size: var(--texto-micro); font-weight: 650; letter-spacing: .04em;
    text-transform: uppercase; color: var(--tinta-fraca);
    text-align: left; line-height: 1.5;
  }
  table.vira-cartao tbody td:last-child { border-bottom: none; padding-bottom: 0; }

  /* primeira celula: e o titulo do cartao, nao um par rotulo/valor */
  table.vira-cartao tbody td:first-child {
    padding-top: 0; text-align: left;
    border-bottom: 1px solid var(--borda-forte);
  }
  table.vira-cartao tbody td:first-child::before { content: none; }

  /* celula com conteudo em bloco (formulario, botoes): rotulo em
     cima, conteudo embaixo, tudo alinhado a esquerda */
  table.vira-cartao tbody td.bloco { text-align: left; }
  table.vira-cartao tbody td.bloco::before {
    float: none; display: block; max-width: none; margin: 0 0 var(--e1);
  }
  table.vira-cartao tbody td[colspan] { text-align: left; }
  table.vira-cartao tbody td[colspan]::before { content: none; }

  /* numeros: seguem monoespacados e encostados a direita, entao
     continuam alinhados entre si dentro do cartao */
  table.vira-cartao tbody td.num { font-size: var(--texto-base); }
  table.vira-cartao tbody td.num.forte { font-size: var(--texto-guia); }

  /* a cor de estado sai da celula e vai para a borda do cartao:
     em cartao, fundo colorido inteiro pesa demais */
  table.vira-cartao tbody tr.falhou,
  table.vira-cartao tbody tr.prejuizo,
  table.vira-cartao tbody tr.abaixo-do-piso { background: var(--superficie); }
  table.vira-cartao tbody tr.falhou td,
  table.vira-cartao tbody tr.prejuizo td,
  table.vira-cartao tbody tr.abaixo-do-piso td { background: none; }
  table.vira-cartao tbody tr.falhou { border-left: 3px solid var(--ruim); }
  table.vira-cartao tbody tr.prejuizo { border-left: 3px solid var(--ruim); }
  table.vira-cartao tbody tr.abaixo-do-piso { border-left: 3px solid var(--atencao); }

  /* ---- 2. comparacao: rola de lado com o rotulo preso ---- */

  /* overflow:hidden no proprio table (usado para arredondar as
     pontas) recorta o contexto e mata o position:sticky da coluna
     de rotulos. Aqui quem arredonda e o .rolagem. */
  .rolagem table.dados {
    border-radius: 0; border-left: none; border-right: none;
    box-shadow: none; overflow: visible;
  }
  /* largura fixa: com max-width o rotulo longo do imposto vazava
     por cima dos numeros em vez de quebrar linha */
  table.numerica tbody th, table.numerica thead th.canto {
    position: sticky; left: 0; z-index: 2;
    width: 9rem; min-width: 9rem; max-width: 9rem;
    background: var(--superficie);
    border-right: 1px solid var(--borda-forte);
    white-space: normal; overflow-wrap: anywhere;
    font-size: var(--texto-menor); line-height: 1.35;
  }
  table.numerica thead th.canto { background: var(--superficie-suave); }
  table.numerica tr.total th { background: var(--superficie); }
  /* so os valores ficam em linha unica; o rotulo quebra */
  .rolagem table.dados td, .rolagem table.dados thead th:not(.canto) {
    padding: var(--e2) var(--e3); white-space: nowrap;
  }

  /* ---- alvos de toque ---- */

  /* 44px e o minimo para o dedo. Os dois botoes lado a lado
     convidavam ao toque errado: empilhados, com folga entre
     eles, e um deles com peso visual diferente. */
  .decidir { display: flex; flex-direction: column; gap: var(--e2); width: 100%; }
  .decidir form { display: flex; flex-direction: column; gap: var(--e2); width: 100%; }
  .decidir button {
    min-height: 44px; width: 100%; padding: var(--e2) var(--e4);
    font-size: var(--texto-base); font-weight: 550; border-radius: var(--raio-m);
  }
  .decidir button.sim {
    color: var(--azul-acao); border-color: var(--azul-borda); background: var(--azul-tenue);
  }
  .decidir button.nao { color: var(--tinta-media); background: var(--superficie); }

  button, .botao, a.botao, input[type="submit"] { min-height: 44px; }
  header nav a { display: inline-block; min-height: 44px; line-height: 44px; }
  header .sair button { min-height: 44px; padding: 0 var(--e3); }

  /* campos: 16px evita o zoom automatico do iOS ao focar */
  input[type="text"], input[type="password"], input[type="number"],
  input:not([type]), select, textarea {
    font-size: 16px; min-height: 44px;
  }
  /* so o rotulo da caixa de marcar vira alvo de 44px. Aplicar isso
     em todo <label> esticava os rotulos do formulario de busca, que
     empilham texto e campo, e abria um vao enorme entre eles. */
  input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
  label.checagem {
    display: flex; align-items: center; gap: var(--e2); min-height: 44px;
  }

  h1 { font-size: var(--texto-t2); }
  .titulo-home { font-size: var(--texto-t2); }

  /* ---- menu ---- */

  /* sete itens nao cabem em 375px. Sem quebra de linha os tres
     ultimos ficavam fora da tela, e como a pagina nao rola na
     horizontal, ficavam inalcancaveis: o Ajustes sumia do app. */
  header { flex-direction: column; align-items: stretch; gap: var(--e2); }
  header nav {
    flex-wrap: wrap; column-gap: var(--e4); row-gap: 0;
    align-items: center;
  }
  header nav a.marca { flex: 1 0 100%; margin: 0 0 var(--e1); }
  header nav a { font-size: var(--texto-base); }
  header .sair {
    justify-content: flex-end; gap: var(--e3);
    border-top: 1px solid var(--borda); padding-top: var(--e1);
  }

  /* ordenar: sao controles, nao texto corrido. Viram fichas
     tocaveis, senao sao quatro alvos de 16px lado a lado. */
  .ordenar { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .ordenar a {
    margin: 0; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 var(--e3);
    border: 1px solid var(--borda); border-radius: var(--raio-m);
    background: var(--superficie); font-size: var(--texto-menor);
  }
  .ordenar a.ativo { border-color: var(--azul-acao); background: var(--azul-tenue); }

  /* o nome do produto e o caminho para o detalhe, tanto no titulo
     do cartao quanto na celula do catalogo: ganha area de toque em
     vez de ser uma linha de texto de 18px */
  table.vira-cartao td.bloco > a,
  table.vira-cartao td:first-child > a {
    display: inline-block; min-height: 44px;
    padding: var(--e2) var(--e2) var(--e2) 0;
  }
}

/* nada, em nenhuma largura, empurra a pagina inteira para o lado */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, table { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* logo: o mesmo SVG em tres tamanhos, sem arquivo extra */
.titulo-home {
  display: flex; align-items: center; gap: var(--e3);
  font-size: var(--texto-t1);
}
.titulo-home .logo { width: 34px; height: 34px; flex: none; }

/* segundo botao da home: mesma forma, peso menor */
a.botao.secundario-link {
  background: var(--superficie); color: var(--azul-acao);
  border-color: var(--borda-forte); margin-left: var(--e2);
}
a.botao.secundario-link:hover {
  background: var(--azul-tenue); color: var(--azul-acao-forte);
  border-color: var(--azul-acao);
}

/* sair nao e acao principal: o azul de acao fica para o que decide */
header .sair button {
  padding: .2rem .6rem; font-size: var(--texto-menor); font-weight: 500;
  color: var(--tinta-fraca); background: transparent; border-color: var(--borda);
}
header .sair button:hover:not(:disabled) {
  background: var(--fundo); color: var(--tinta); border-color: var(--borda-forte);
}

h3 {
  font-size: var(--texto-guia); font-weight: 620; color: var(--tinta);
  margin: var(--e5) 0 var(--e2);
}

/* dica que so faz sentido onde a tabela rola */
.so-no-celular { display: none; }
@media (max-width: 720px) { .so-no-celular { display: block; } }