/* Componentes compartilhados pelos três apps. Consomem só tokens (tokens.css). */

@layer componentes {
  /* ---------- ícones ---------- */
  .ic { inline-size: 1.5rem; block-size: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .ic--16 { inline-size: 1rem; block-size: 1rem; }
  .ic--20 { inline-size: 1.25rem; block-size: 1.25rem; }

  /* ---------- marca (lockup) ---------- */
  .marca { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.01em; text-decoration: none; color: inherit; min-inline-size: 0; }
  .marca > svg, .marca > img, .marca > .monograma { inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 0.5rem; object-fit: contain; }
  .marca > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .monograma { display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0; }

  /* ---------- botões ---------- */
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-block-size: var(--toque); padding: 0.5rem 1.125rem;
    border-radius: 0.75rem; border: 1px solid transparent;
    background: var(--marca); color: var(--sobre-marca);
    font-size: 0.9375rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
    cursor: pointer; transition: background-color .15s, border-color .15s, opacity .15s;
  }
  .botao:hover { background: var(--marca-forte); }
  .botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  .botao[aria-busy="true"]::before {
    content: ""; inline-size: 1em; block-size: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-inline-end-color: transparent; animation: girar .7s linear infinite;
  }
  .botao--contorno { background: var(--superficie); color: var(--texto); border-color: var(--contorno); }
  .botao--contorno:hover { background: var(--superficie-2); }
  .botao--tonal { background: var(--marca-suave); color: var(--marca-texto); }
  .botao--tonal:hover { background: color-mix(in oklch, var(--marca) 20%, var(--superficie)); }
  .botao--fantasma { background: transparent; color: var(--marca-texto); }
  .botao--fantasma:hover { background: var(--marca-suave); }
  .botao--perigo { background: var(--vermelho-suave); color: var(--vermelho); }
  .botao--perigo:hover { background: color-mix(in oklch, var(--vermelho-sinal) 22%, var(--superficie)); }
  .botao--mini { min-block-size: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; border-radius: 0.625rem; }
  .botao--grande { min-block-size: 3.25rem; font-size: 1rem; padding-inline: 1.5rem; }
  .botao--bloco { inline-size: 100%; }
  .botao .ic { inline-size: 1.25rem; block-size: 1.25rem; }

  .btn-icone {
    inline-size: var(--toque); block-size: var(--toque); flex: none;
    display: inline-grid; place-items: center; border-radius: 50%;
    background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none;
  }
  .btn-icone:hover { background: color-mix(in oklch, currentColor 10%, transparent); }

  .link { color: var(--marca-texto); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.125rem; background: none; border: 0; padding: 0; cursor: pointer; font-size: 0.875rem; }
  .link:hover { text-decoration: underline; }

  @keyframes girar { to { rotate: 1turn; } }

  /* ---------- Box ---------- */
  .cartao { background: var(--superficie); border-radius: var(--raio-l); padding: var(--esp-3); box-shadow: var(--sombra-1); border: 1px solid var(--linha); min-inline-size: 0; }
  .cartao--plano { box-shadow: none; }
  .cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
  .cab > :is(h2, h3) { flex: 1 1 auto; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
  .rotulo { font-size: var(--fs--1); font-weight: 500; color: var(--texto-3); }

  .cabeca-tela { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-2); }
  .cabeca-tela > div:first-child { flex: 1 1 18rem; }
  .cabeca-tela h1 { font-size: var(--fs-2); }
  .cabeca-tela p { color: var(--texto-3); }

  /* ---------- selos e semáforo ---------- */
  .selo { display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 1.5rem; padding: 0.125rem 0.5rem; border-radius: 0.4375rem;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2); }
  .selo--ok { background: var(--verde-suave); color: var(--verde); }
  .selo--atencao { background: var(--amarelo-suave); color: var(--amarelo); }
  .selo--alerta { background: var(--vermelho-suave); color: var(--vermelho); }
  .selo--marca { background: var(--marca-suave); color: var(--marca-texto); }
  .selo .ic { inline-size: 0.875rem; block-size: 0.875rem; stroke-width: 2.4; }

  /* o ponto nunca vem sozinho: sempre há texto ao lado */
  .sinal { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; flex: none; background: var(--contorno); }
  .sinal--ok { background: var(--verde-sinal); }
  .sinal--atencao { background: var(--amarelo-sinal); }
  .sinal--alerta { background: var(--vermelho-sinal); box-shadow: 0 0 0 3px var(--vermelho-suave); }

  /* ---------- placa (Mercosul): escala pelo font-size ---------- */
  .placa { display: inline-flex; flex-direction: column; flex: none; border: .12em solid #0E1A33; border-radius: .32em; overflow: hidden;
    background: #fff; color: #0E1A33; font-size: 0.9375rem; line-height: 1; text-align: center; }
  .placa::before { content: "BRASIL"; background: var(--placa-azul); color: #fff; font-size: .36em; font-weight: 700; letter-spacing: .3em;
    padding: .32em 0 .26em .3em; }
  .placa > span { padding: .14em .42em .1em; font-weight: 700; font-stretch: 78%; letter-spacing: .07em; font-size: 1.2em; white-space: nowrap; }
  .placa--mini { font-size: 0.6875rem; }
  .placa--grande { font-size: clamp(1.375rem, 1rem + 2vi, 1.875rem); }
  .entrada-texto { font-family: var(--mono); font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }

  /* ---------- formulário ---------- */
  .campo { display: flex; flex-direction: column; gap: 0.3125rem; min-inline-size: 0; }
  .campo > label, .campo > .rot, legend.rot { font-size: 0.875rem; font-weight: 600; color: var(--texto-2); }
  .campo :is(input:not([type="checkbox"], [type="radio"], [type="color"]), select, textarea) {
    inline-size: 100%; min-block-size: var(--toque); padding: 0.5rem 0.75rem;
    border: 1px solid var(--contorno); border-radius: 0.625rem; background: var(--superficie); color: var(--texto);
  }
  .campo textarea { min-block-size: 6rem; resize: vertical; }
  .campo :is(input, select, textarea):user-invalid { border-color: var(--vermelho-sinal); box-shadow: 0 0 0 1px var(--vermelho-sinal); }
  .campo .ajuda { font-size: 0.8125rem; color: var(--texto-3); }
  .campo .erro-campo { font-size: 0.8125rem; font-weight: 600; color: var(--vermelho); }
  .campo .erro-campo:empty { display: none; }
  .campo:has([aria-invalid="true"]) :is(input, select) { border-color: var(--vermelho-sinal); }
  ::placeholder { color: var(--texto-3); opacity: 1; }

  /* campo com prefixo (R$) */
  .prefixado { display: flex; align-items: center; border: 1px solid var(--contorno); border-radius: 0.625rem; background: var(--superficie); padding-inline-start: 0.625rem; min-inline-size: 0; }
  .prefixado > span { color: var(--texto-3); font-weight: 600; font-size: 0.875rem; }
  .prefixado > input { border: 0; background: none; min-block-size: 2.5rem; padding: 0.25rem 0.5rem; inline-size: 100%; min-inline-size: 4rem; text-align: end; font-variant-numeric: tabular-nums; }
  .prefixado:focus-within { outline: 3px solid var(--foco); outline-offset: 1px; }
  .prefixado > input:focus-visible { outline: none; }
  .prefixado:has([aria-invalid="true"]) { border-color: var(--vermelho-sinal); }

  .marcacao { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; min-block-size: var(--toque); padding-block: 0.625rem; }
  .marcacao input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; margin-block-start: 0.1rem; accent-color: var(--marca); }

  /* chave liga/desliga: checkbox nativo restilizado (mantém teclado e leitor) */
  .chave { appearance: none; position: relative; inline-size: 2.5rem; block-size: 1.5rem; flex: none; border-radius: 1rem; background: var(--contorno); cursor: pointer; transition: background-color .15s; margin: 0; }
  .chave::after { content: ""; position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%; background: #fff; transition: translate .15s; }
  .chave:checked { background: var(--marca); }
  .chave:checked::after { translate: 1rem 0; }
  .chave:disabled { opacity: .5; cursor: not-allowed; }

  /* controle segmentado: radios nativos */
  .segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0.25rem; gap: 0.25rem; border-radius: 0.75rem; background: var(--superficie-2); }
  .segmentos label { display: grid; place-items: center; min-block-size: var(--toque); border-radius: 0.5625rem; font-size: 0.875rem; font-weight: 600; color: var(--texto-2); cursor: pointer; text-align: center; padding-inline: 0.5rem; }
  .segmentos input { position: absolute; opacity: 0; pointer-events: none; }
  .segmentos label:has(input:checked) { background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: var(--sombra-1); }
  .segmentos label:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 1px; }

  /* ---------- tabela ---------- */
  .tabela-caixa { overflow-x: auto; max-inline-size: 100%; }
  .tabela { inline-size: 100%; font-size: 0.875rem; }
  .tabela caption { text-align: start; font-weight: 700; padding-block-end: 0.5rem; }
  .tabela th { text-align: start; font-size: 0.75rem; font-weight: 600; color: var(--texto-3); padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--linha); white-space: nowrap; }
  .tabela td { padding: 0.625rem 0.75rem; border-block-end: 1px solid var(--linha); vertical-align: middle; }
  .tabela tbody tr:last-child td { border-block-end: 0; }
  .tabela td small { display: block; color: var(--texto-3); font-size: 0.75rem; line-height: 1.25; }
  .tabela :is(th, td).num { text-align: end; white-space: nowrap; }
  .tabela .grupo-linha th { font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; background: var(--superficie-2); color: var(--texto-2); }
  .tabela tr.desligada td { color: var(--texto-3); }
  .tabela tr.clicavel { cursor: pointer; }
  .tabela tr.clicavel:hover td { background: var(--superficie-2); }
  .tabela a { font-weight: 600; }
  .mais { color: var(--verde); font-weight: 700; }
  .menos { color: var(--texto-2); font-weight: 600; }
  .margem { color: var(--verde); font-weight: 700; }
  .margem--ruim { color: var(--vermelho); }

  /* ---------- KPI ---------- */
  .kpi { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--esp-2) var(--esp-3); }
  .kpi > span:first-child { font-size: 0.8125rem; font-weight: 600; color: var(--texto-3); }
  /* o número mede o próprio cartão (cqi): R$ 12.345,67 cabe numa linha sem quebrar na vírgula */
  .kpi { container-type: inline-size; }
  .kpi strong { font-size: clamp(1.5rem, 1.2rem + 1vi, 1.875rem); font-size: clamp(1.125rem, 0.4rem + 10cqi, 1.875rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .kpi small { font-size: 0.8125rem; color: var(--texto-3); font-weight: 600; }
  .kpi--ganho strong { color: var(--verde); }

  /* ---------- progresso ---------- */
  .progresso { block-size: 0.5rem; border-radius: 1rem; background: var(--superficie-3); overflow: hidden; }
  .progresso > span { display: block; block-size: 100%; inline-size: var(--p, 0%); background: var(--marca); border-radius: inherit; transition: inline-size .4s ease-out; }

  /* ---------- estados: carregando, vazio, erro ---------- */
  .estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; padding: var(--esp-4) var(--esp-2); color: var(--texto-2); }
  .estado .ic { inline-size: 2.25rem; block-size: 2.25rem; color: var(--texto-3); }
  .estado--erro .ic { color: var(--vermelho-sinal); }
  .estado p { max-inline-size: 42ch; }
  .giro { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 3px solid var(--superficie-3); border-block-start-color: var(--marca); animation: girar .8s linear infinite; }

  .aviso { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: 0.75rem; font-size: 0.9375rem; background: var(--marca-suave); color: var(--texto); }
  .aviso .ic { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.1rem; color: var(--marca-texto); }
  .aviso--erro { background: var(--vermelho-suave); }
  .aviso--erro .ic { color: var(--vermelho); }
  .aviso--ok { background: var(--verde-suave); }
  .aviso--ok .ic { color: var(--verde); }
  .aviso--atencao { background: var(--amarelo-suave); }
  .aviso--atencao .ic { color: var(--amarelo); }
  .aviso > div { flex: 1; min-inline-size: 0; }

  /* notificação flutuante (região aria-live criada pelo dom.js) */
  .torradas { position: fixed; z-index: 50; inset-block-end: 1rem; inset-inline: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
  .torrada { pointer-events: auto; max-inline-size: 32rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--tinta-900); color: #fff; box-shadow: var(--sombra-2); font-weight: 600; font-size: 0.9375rem; }
  .torrada--erro { background: #8E1B12; }
  @media (prefers-reduced-motion: no-preference) {
    .torrada { animation: subir .25s ease-out; }
  }
  @keyframes subir { from { opacity: 0; translate: 0 0.75rem; } }

  /* ---------- diálogo nativo ---------- */
  dialog.dialogo { inline-size: min(34rem, 100% - 2rem); max-block-size: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--raio-l); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
  dialog.dialogo::backdrop { background: rgb(10 18 34 / .55); }
  .dialogo__corpo { padding: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); }
  .dialogo__cab { display: flex; align-items: center; gap: 0.5rem; }
  .dialogo__cab h2 { flex: 1; font-size: var(--fs-1); }

  /* ---------- lista de definição em grade ---------- */
  .dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 0.75rem 1rem; }
  .dados > div { min-inline-size: 0; }
  .dados dt { font-size: 0.75rem; font-weight: 500; color: var(--texto-3); }
  .dados dd { margin: 0; font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }

  /* ---------- score: anel em conic-gradient ---------- */
  .score { --v: 50; --cor: var(--amarelo-sinal); position: relative; display: grid; place-items: center; inline-size: 6.5rem; block-size: 6.5rem; flex: none; }
  .score::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--cor) calc(var(--v) * 1%), var(--superficie-3) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.7rem), #000 calc(100% - 0.65rem)); }
  .score > div { text-align: center; line-height: 1; }
  .score strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
  .score small { font-size: 0.75rem; font-weight: 600; color: var(--texto-3); }
  .score--verde { --cor: var(--verde-sinal); }
  .score--vermelho { --cor: var(--vermelho-sinal); }

  /* ---------- relatório ---------- */
  .relatorio { display: flex; flex-direction: column; gap: var(--esp-2); }
  .rel-veiculo { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
  .rel-veiculo > div { flex: 1 1 14rem; min-inline-size: 0; }
  .rel-veiculo h2 { font-size: var(--fs-1); }
  .rel-veiculo p { color: var(--texto-3); font-size: 0.9375rem; }
  .rel-nota { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; padding-block-start: var(--esp-2); border-block-start: 1px solid var(--linha); }
  .rel-nota > div:last-child { flex: 1 1 14rem; }
  .rel-nota h3 { font-size: var(--fs-1); }
  .rel-nota--vermelho h3 { color: var(--vermelho); }
  .rel-nota--amarelo h3 { color: var(--amarelo); }
  .rel-nota--verde h3 { color: var(--verde); }
  .rel-alertas { display: flex; flex-direction: column; gap: 0.375rem; margin-block-start: 0.5rem; padding: 0; list-style: none; }
  .rel-alertas li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9375rem; font-weight: 600; }
  .rel-alertas li .sinal { translate: 0 -0.05rem; }
  .contagem { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr)); gap: 0.5rem; }
  .contagem .selo { justify-content: center; min-block-size: 2rem; font-size: 0.8125rem; }

  .secoes { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-l); box-shadow: var(--sombra-1); overflow: hidden; }
  .secao-rel + .secao-rel { border-block-start: 1px solid var(--linha); }
  /* resumo de cada seção: nome e resultado lado a lado quando cabe; em tela estreita o resultado desce */
  .secoes { container-type: inline-size; }
  .secao-rel > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sinal nome seta" ". res seta"; align-items: center; gap: 0.125rem 0.75rem; min-block-size: 3.25rem; padding: 0.5rem 0.875rem 0.5rem 1rem; cursor: pointer; }
  .secao-rel > summary > .sinal { grid-area: sinal; }
  .secao-rel > summary > .nome { grid-area: nome; }
  .secao-rel > summary > .res { grid-area: res; text-align: start; }
  .secao-rel > summary > .ic { grid-area: seta; }
  @container (inline-size >= 36rem) {
    .secao-rel > summary { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto; grid-template-areas: "sinal nome res seta"; }
    .secao-rel > summary > .res { text-align: end; max-inline-size: 24rem; }
  }
  .secao-rel > summary::-webkit-details-marker { display: none; }
  .secao-rel > summary:hover { background: var(--superficie-2); }
  .secao-rel > summary:focus-visible { outline-offset: -3px; }
  .secao-rel .nome { font-weight: 600; font-size: 0.9375rem; }
  .secao-rel .res { font-size: 0.875rem; font-weight: 600; color: var(--texto-2); text-align: end; }
  .secao-rel--alerta .res { color: var(--amarelo); }
  .secao-rel--critico .res { color: var(--vermelho); }
  .secao-rel > summary .ic { color: var(--texto-3); transition: rotate .2s; }
  .secao-rel[open] > summary .ic { rotate: 90deg; }
  .secao-rel__corpo { padding: 0.25rem 1rem 1rem 2.375rem; display: flex; flex-direction: column; gap: 0.875rem; }
  .secao-rel__corpo .tabela { font-size: 0.8125rem; }
  .secao-rel__corpo .tabela td { padding-block: 0.5rem; }

  /* ---------- Pix ---------- */
  .pix { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
  .pix__qr { inline-size: 12.5rem; block-size: 12.5rem; flex: none; padding: 0.5rem; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m); margin-inline: auto; }
  .pix__qr img { inline-size: 100%; block-size: 100%; }
  .pix__info { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.75rem; min-inline-size: 0; }
  .pix__valor { font-size: var(--fs-2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .copia { display: flex; gap: 0.5rem; }
  .copia input { flex: 1; min-inline-size: 0; min-block-size: var(--toque); padding-inline: 0.75rem; border-radius: 0.625rem; border: 1px solid var(--contorno); background: var(--superficie-2); font-family: var(--mono); font-size: 0.75rem; color: var(--texto-2); }
  .contador { font-weight: 700; font-variant-numeric: tabular-nums; }

  /* ---------- gráfico (SVG feito à mão) ---------- */
  .grafico { position: relative; }
  .grafico svg { inline-size: 100%; block-size: auto; overflow: visible; }
  .grafico .grade-y line { stroke: var(--linha); }
  .grafico .base { stroke: var(--contorno); }
  .grafico text { fill: var(--texto-3); font-size: 11px; font-family: var(--fonte); }
  .grafico .barra { fill: var(--serie-1); }
  .grafico .linha-margem { fill: none; stroke: var(--serie-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .grafico .ponto { fill: var(--serie-2); stroke: var(--superficie); stroke-width: 2; }
  .grafico .alvo { fill: transparent; cursor: crosshair; }
  .grafico .alvo:focus { outline: none; }
  .grafico .coluna-ativa { fill: color-mix(in oklch, var(--texto) 7%, transparent); }
  .grafico .barra.ativa { fill: color-mix(in oklch, var(--serie-1), white 18%); }
  .dica-grafico { position: absolute; z-index: 5; pointer-events: none; min-inline-size: 10rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-2); font-size: 0.8125rem; }
  .dica-grafico p { display: flex; align-items: center; gap: 0.5rem; }
  .dica-grafico p:first-child { font-weight: 600; color: var(--texto-3); }
  .dica-grafico b { font-variant-numeric: tabular-nums; }
  .dica-grafico i { inline-size: 0.875rem; block-size: 2px; background: var(--c); flex: none; }
  .legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--texto-2); padding: 0; list-style: none; }
  .legenda li { display: inline-flex; align-items: center; gap: 0.375rem; }
  .legenda .chave-barra { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; background: var(--serie-1); }
  .legenda .chave-linha { inline-size: 1rem; block-size: 2px; background: var(--serie-2); }
  .ver-tabela > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--marca-texto); min-block-size: var(--toque); display: flex; align-items: center; }

  /* barras horizontais (top produtos) */
  .barras-h { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; list-style: none; }
  .barras-h li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; font-size: 0.875rem; }
  .barras-h .trilho { grid-column: 1 / -1; block-size: 0.5rem; border-radius: 1rem; background: var(--superficie-2); overflow: hidden; }
  .barras-h .trilho span { display: block; block-size: 100%; inline-size: var(--p); background: var(--serie-1); border-radius: inherit; }
  .barras-h b { font-variant-numeric: tabular-nums; }

  /* ---------- paginação ---------- */
  .paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block-start: 0.75rem; font-size: 0.875rem; color: var(--texto-3); }

  /* ---------- produtos para escolher (radios em cartão) ---------- */
  .opcoes { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); padding: 0; list-style: none; }
  .opcao { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.75rem; align-items: start; min-block-size: var(--toque); padding: 0.75rem 0.875rem; border-radius: var(--raio-m); border: 1.5px solid var(--linha); background: var(--superficie); cursor: pointer; }
  .opcao input { position: absolute; opacity: 0; pointer-events: none; }
  .opcao b { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
  .opcao .preco { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .opcao small { grid-column: 1 / -1; color: var(--texto-3); font-size: 0.8125rem; line-height: 1.35; }
  .opcao .selo { grid-column: 1 / -1; justify-self: start; margin-block-start: 0.25rem; }
  .opcao:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); box-shadow: 0 0 0 2px var(--marca); }
  .opcao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

  /* ---------- etapas (tela "consultando...") ---------- */
  .consultando { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; padding-block: var(--esp-4); }
  .etapas { display: flex; flex-direction: column; gap: 0.625rem; padding: 0; list-style: none; text-align: start; inline-size: min(22rem, 100%); }
  .etapas li { display: flex; gap: 0.625rem; align-items: center; color: var(--texto-3); font-weight: 500; }
  .etapas li::before { content: ""; inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%; border: 2px solid var(--superficie-3); }
  .etapas li[data-estado="feito"] { color: var(--texto); }
  .etapas li[data-estado="feito"]::before { background: var(--verde-sinal); border-color: var(--verde-sinal);
    mask: none; box-shadow: inset 0 0 0 3px var(--superficie); }
  .etapas li[data-estado="agora"] { color: var(--texto); font-weight: 700; }
  .etapas li[data-estado="agora"]::before { border-color: var(--marca); border-inline-end-color: transparent; animation: girar .8s linear infinite; }
  .consultando .progresso { inline-size: min(22rem, 100%); }

  /* ---------- extrato ---------- */
  .valor-pos { color: var(--verde); font-weight: 700; }
  .valor-neg { color: var(--texto); font-weight: 600; }

  /* ---------- texto do contrato ---------- */
  .contrato { max-block-size: 18rem; overflow: auto; padding: var(--esp-2); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-2); font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; }
  .contrato :is(h2, h3, h4) { font-size: 1rem; }
  .contrato ul, .contrato ol { padding-inline-start: 1.25rem; }

  /* ---------- tela de autenticação ---------- */
  .auth { min-block-size: 100dvh; display: grid; place-items: center; padding: var(--esp-3) var(--gutter); }
  .auth__caixa { inline-size: min(28rem, 100%); display: flex; flex-direction: column; gap: var(--esp-3); }
  .auth__caixa--largo { inline-size: min(44rem, 100%); }
  .auth h1 { font-size: var(--fs-2); }
}

/* ---------- impressão: só o relatório, com as seções abertas ---------- */
@media print {
  @layer utilitarios {
    .nao-imprimir, nav, header.topo, .casca__lateral, .casca__topo, .barra-nav, .torradas, .acoes-rel { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .cartao, .secoes { box-shadow: none; border-color: #bbb; break-inside: avoid; }
    .secao-rel { break-inside: avoid; }
    .secao-rel > summary .ic { display: none; }
    .casca, .casca__principal, main { display: block; padding: 0; }
    a { color: inherit; text-decoration: none; }
  }
}

@layer componentes {
  /* campo de placa com cara de placa Mercosul */
  .placa-campo {
    display: flex; flex-direction: column; align-self: center;
    inline-size: min(100%, 8em); font-size: clamp(1.75rem, 1.4rem + 1.6vi, 2.25rem);
    border: .12em solid #0E1A33; border-radius: .3em; overflow: hidden; background: #fff;
    box-shadow: 0 8px 20px -8px rgb(0 0 0 / .45);
  }
  .placa-campo::before { content: "BRASIL"; background: var(--placa-azul); color: #fff; font-size: .34em; font-weight: 700; letter-spacing: .3em; text-align: center; padding: .3em 0 .24em .3em; line-height: 1; }
  .campo .placa-campo input {
    inline-size: 100%; min-block-size: 0; border: 0; border-radius: 0; background: none; color: #0E1A33; text-align: center;
    font-size: 1em; font-weight: 700; font-stretch: 78%; letter-spacing: .08em; text-transform: uppercase;
    padding: .08em .2em .04em; line-height: 1.15;
  }
  .placa-campo input::placeholder { color: #6B7487; }
  .placa-campo input:focus-visible { outline: none; }
  .placa-campo:focus-within { outline: 3px solid var(--foco); outline-offset: 3px; }
  .placa-campo:has([aria-invalid="true"]) { border-color: var(--vermelho-sinal); }
  .campo-entrada--placa { align-items: center; text-align: center; }
  .campo-entrada > input { font-family: var(--mono); letter-spacing: .04em; }
}

@layer componentes {
  .pular { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 60; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--superficie); color: var(--texto); font-weight: 700; }
  .pular:focus { inset-block-start: 1rem; }
}

/* ---------- cardápio de consultas (comum/cardapio.js): grupos com cartões do mesmo tamanho ---------- */
@layer componentes {
  .cardapio { display: flex; flex-direction: column; gap: var(--esp-3); min-inline-size: 0; border: 0; padding: 0; margin: 0; }
  .cardapio__titulo { font-size: 1.125rem; font-weight: 800; padding: 0; margin-block-end: 0.25rem; }
  .cardapio__filtro { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .cardapio .chip {
    min-block-size: 2.25rem; padding: 0.25rem 0.875rem; border-radius: 999px; border: 1.5px solid var(--linha);
    background: var(--superficie); color: var(--texto-2); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  }
  .cardapio .chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
  .cardapio .chip:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
  .cardapio__grupo { display: flex; flex-direction: column; gap: 0.625rem; }
  .cardapio__grupo[hidden] { display: none; }
  .cardapio__cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.125rem 0.5rem; padding-block-end: 0.375rem; border-block-end: 1px solid var(--linha); }
  .cardapio__cab .ic { color: var(--marca); }
  .cardapio__cab h3 { font-size: 1rem; font-weight: 800; }
  .cardapio__cab p { grid-column: 2 / -1; font-size: 0.8125rem; color: var(--texto-3); }
  .cardapio__qtd { font-size: 0.75rem; font-weight: 700; color: var(--texto-3); background: var(--superficie-2); border-radius: 999px; padding: 0.125rem 0.5rem; }
  /* mesma largura (grade) e mesma altura (linhas 1fr + texto cortado em 2 linhas) */
  .cardapio__lista { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); grid-auto-rows: 1fr; padding: 0; list-style: none; }
  .cardapio__lista > li { display: flex; }
  .prato {
    position: relative; flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.375rem;
    min-block-size: 9.5rem; padding: 0.75rem 0.875rem; border-radius: var(--raio-m);
    border: 1.5px solid var(--linha); background: var(--superficie); cursor: pointer;
  }
  .prato input { position: absolute; opacity: 0; pointer-events: none; }
  .prato__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-block-size: 1.5rem; }
  .prato__entrada { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
  .prato__nome, .prato__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .prato__nome { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; min-block-size: 2.6em; }
  .prato__desc { font-size: 0.8125rem; line-height: 1.35; color: var(--texto-3); }
  .prato__rodape { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding-block-start: 0.375rem; border-block-start: 1px dashed var(--linha); }
  .prato__preco { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .prato__detalhe { font-size: 0.75rem; color: var(--texto-3); text-align: end; }
  .prato:hover { border-color: color-mix(in oklch, var(--marca) 45%, var(--linha)); }
  .prato:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); box-shadow: 0 0 0 2px var(--marca); }
  .prato:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
}