/* O produto por cima do design system. Carrega DEPOIS do ds.css e vence na cascata.
 *
 * Duas coisas moram aqui: (1) as classes das telas, portadas dos estilos inline dos
 * arquivos design/*.dc.html; (2) as correções que a R10 exige do design system.
 */

/* ══════════════════════════════════════════════════════════════════════════════════════
   R10 — ALTO CONTRASTE, TEMA CLARO, LEGÍVEL
   Regra do dono, dita com irritação e com reclamação registrada: nada de opacity baixa,
   nada de botão translúcido, nada de cinza-claro sobre fundo claro. O ambiente de uso é uma
   cozinha, e todo estado — inclusive "desabilitado", "secundário" e "vazio" — tem que ser
   legível de longe, com a mão suja.
   O design system tem seis pontos que violam isso. Cada um está consertado abaixo, com a
   razão. Nenhum foi consertado "por gosto".
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* `color-mix(..., transparent)` em texto é opacity com outro nome: o cinza resultante fica
   em torno de 3:1 sobre o fundo claro. Trocado por tons SÓLIDOS da própria rampa neutra,
   todos acima de 5,8:1. */
.text-muted,
.card-meta,
figcaption { color: var(--color-neutral-700); }
.field > label { color: var(--color-neutral-800); }
.table th { color: var(--color-neutral-800); }

/* Texto de cartão a 80% de opacidade some sob a luz de uma cozinha. */
.card-body { opacity: 1; color: var(--color-neutral-800); }
.dialog-body { opacity: 1; color: var(--color-neutral-800); }

/* Botão desabilitado a 45% é ilegível — e, pior, ensina o usuário a insistir num botão que
   não vai funcionar. Aqui ele é sólido e obviamente inerte. Note que a R9 manda ESCONDER a
   ação que o papel não permite, não desabilitá-la: este estilo é só para o botão que está
   ocupado (ex.: "Entrando…"), nunca para permissão. */
.btn:disabled,
.btn[disabled] {
  opacity: 1;
  background: var(--color-neutral-300);
  color: var(--color-neutral-800);
  border-color: var(--color-neutral-400);
  cursor: progress;
}

/* O vermelho da marca (#ec3013) rende 3,8:1 sobre o fundo claro — abaixo de 4,5:1, que é o
   mínimo para texto. Fica como cor de PREENCHIMENTO (barra, faixa), onde 3:1 basta; para
   TEXTO e para o botão primário entra o tom 700 da mesma rampa, que rende 6,3:1. Mesma
   marca, mesma família, legível. */
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
.btn-primary { background: var(--color-accent-700); color: #fff; }
.btn-primary:hover { background: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-ghost { color: var(--color-accent-700); }
.card-kicker { color: var(--color-accent-700); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }
.tag-outline { border-color: var(--color-accent-700); color: var(--color-accent-700); }
/* Pontuação — padrão da casa (design T6 Prato visto.dc.html). Verde/vermelho não têm token no
   design system ainda; oklch(...150) é a MESMA cor literal do design aprovado. */
.tag-success { background: oklch(0.42 0.12 150 / 12%); color: oklch(0.42 0.12 150); font-weight: 700; }
.tag-danger { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 700; }

/* Pontuação — padrão da casa (T6). Verde/vermelho literais: mesma cor do design aprovado. */
.pontuacao-casa { border: 2px solid var(--color-divider); padding: 18px 20px; margin-top: 20px; }
.pontuacao-boa { border-color: oklch(0.42 0.12 150 / 40%); }
.pontuacao-ruim { border-color: var(--color-accent); }
.pontuacao-resumo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pontuacao-nota { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1; }
.pontuacao-veredito, .pontuacao-nota { color: oklch(0.42 0.12 150); }
.pontuacao-ruim .pontuacao-veredito, .pontuacao-ruim .pontuacao-nota { color: var(--color-accent-700); }
.pontuacao-corte { font-size: 13px; color: var(--color-neutral-700); }
.lista-criterios-casa {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  border-top: 1px solid var(--color-divider); padding-top: 14px;
}
.criterio-casa { display: flex; align-items: baseline; gap: 10px; }
.criterio-casa .criterio-texto { font-size: 14px; flex: 1; }
.criterio-casa .criterio-nota { font-size: 13px; font-weight: 700; }
.criterio-ok { color: oklch(0.42 0.12 150); }
.criterio-baixo { color: var(--color-accent-700); }
.criterio-casa:has(.criterio-ok) .criterio-nota { color: oklch(0.42 0.12 150); }
.criterio-casa:has(.criterio-baixo) .criterio-nota { color: var(--color-accent-700); }
.pontuacao-rodape { margin: 12px 0 0; font-size: 13px; color: var(--color-neutral-800); }

/* Foco visível de verdade: só mudar a cor da borda é fraco para quem navega por teclado. */
.input:focus-visible {
  border-color: var(--color-accent-700);
  outline: 2px solid var(--color-accent-700); outline-offset: 1px;
}
.btn:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   Casca do app
   ══════════════════════════════════════════════════════════════════════════════════════ */

body { text-wrap: pretty; }

.marca {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--color-text); text-decoration: none;
}
.marca-estrela { color: var(--color-accent); }
.marca-sub {
  font-size: 10px; letter-spacing: 0.16em; font-weight: 600; color: var(--color-neutral-700);
}

.topo { padding: 14px 32px; gap: 20px; flex-wrap: wrap; row-gap: 10px; }
.topo .marca { font-size: 21px; }
.topo-direita { margin-left: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.topo-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.chip-usuario {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  padding: 3px 12px 3px 3px; border: 1px solid var(--color-divider); color: var(--color-text);
  text-decoration: none;
}
.chip-usuario .iniciais {
  width: 26px; height: 26px; background: var(--color-text); color: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
}
.link-sair { font-size: 13px; font-weight: 600; }
.rotulo-empresa { font-size: 13px; font-weight: 600; }
.topo-links a.atual { border-bottom: 2px solid var(--color-accent-700); padding-bottom: 2px; }
/* Com uma empresa só não há o que escolher: o nome fica, o seletor não. Um botão que abre
   uma lista de um item obriga uma escolha que não é escolha. */
.rotulo-empresa-fixo {
  padding: 7px 12px; border: 1px solid var(--color-divider); color: var(--color-text);
  display: inline-flex; align-items: center;
}

.pagina { max-width: 1200px; margin: 0 auto; padding: 28px 32px 0; }
.pagina-estreita { max-width: 880px; margin: 0 auto; padding: 40px 32px 0; }

.rodape {
  max-width: 1200px; margin: 40px auto 0; padding: 16px 32px 28px;
  border-top: 2px solid var(--color-divider);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.rodape-estreito { max-width: 880px; }
.rodape span { font-size: 12px; color: var(--color-neutral-700); }

/* ══════════════════════════════════════════════════════════════════════════════════════
   Avisos — faixa no topo. Nunca substituem a tela: acompanham o conteúdo.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.aviso {
  padding: 12px 16px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
  border: 2px solid var(--color-text); background: var(--color-surface); color: var(--color-text);
}
.aviso-erro {
  border-color: var(--color-accent-700); background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.aviso-neutro { border-color: var(--color-text); }
.aviso p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   E1 · Entrar
   ══════════════════════════════════════════════════════════════════════════════════════ */
.entrada { min-height: 100vh; display: flex; flex-direction: column; }
.entrada-corpo {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.entrada-cartao { width: 100%; max-width: 420px; }
.entrada .marca { font-size: 34px; }
.entrada-linha-marca { display: flex; align-items: baseline; gap: 10px; }
.entrada-promessa { margin: 10px 0 0; font-size: 15px; color: var(--color-neutral-900); }
.entrada-campos { display: flex; flex-direction: column; gap: 16px; }
.entrada-rodape {
  padding: 16px 24px 24px; display: flex; align-items: center; justify-content: center;
  gap: 14px; border-top: 2px solid var(--color-divider); flex-wrap: wrap;
}
.campo-rotulo { font-size: 13px; font-weight: 700; color: var(--color-text); display: block; margin-bottom: 5px; }
.botao-largo {
  width: 100%; justify-content: center; text-align: center; min-height: 42px; font-size: 15px;
}
.nota { margin: 18px 0 0; font-size: 13px; color: var(--color-neutral-800); }
.nota + .nota { margin-top: 8px; }
.moldura { border: 2px solid var(--color-divider); padding: 32px 28px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T0 · Minhas empresas
   ══════════════════════════════════════════════════════════════════════════════════════ */
.lista-empresas { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
/* O cartão é um <button> dentro de um <form>, porque entrar numa empresa é POST e não link
   (R1). Um botão encolhe até o conteúdo e centraliza o texto — daí os resets. */
.cartao-empresa-form { display: block; }
.cartao-empresa {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  text-decoration: none; color: var(--color-text);
  background: var(--color-surface); padding: 22px 24px; border: 1px solid transparent;
}
.cartao-empresa-topo { display: flex; }
.cartao-empresa:hover { background: var(--color-neutral-200); border-color: var(--color-neutral-400); }
.cartao-empresa:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
.cartao-empresa-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cartao-empresa-topo h2 { font-size: 22px; margin: 0; flex: 1; min-width: 240px; }
.cartao-entrar {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-accent-700);
}
.cartao-empresa-linha {
  display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap;
  font-size: 14px; color: var(--color-neutral-900);
}
.numero-grande { font-family: var(--font-heading); font-size: 20px; font-weight: 800; }
.com-marcador { display: inline-flex; align-items: center; gap: 7px; }

/* Marcadores de estado. SEMPRE acompanhados de texto: cor sozinha não informa ninguém — nem
   quem enxerga pouco, nem quem está olhando de longe. */
.marcador { width: 10px; height: 10px; flex: none; display: inline-block; }
.marcador-no-ar { background: oklch(0.48 0.16 150); }
.marcador-parada { background: var(--color-neutral-600); }
.marcador-problema { background: var(--color-accent-700); }
.marcador-aguardando { border: 2px solid var(--color-neutral-800); }

.vazio {
  margin-top: 24px; border: 2px solid var(--color-divider); padding: 56px 40px;
}
.vazio h2 { font-size: 24px; margin: 0 0 10px; }
.vazio p { font-size: 15px; line-height: 1.6; margin: 0 0 20px; color: var(--color-neutral-800); max-width: 62ch; }
.vazio p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T1 · Hoje
   ══════════════════════════════════════════════════════════════════════════════════════ */
.hoje-cabecalho { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hoje-cabecalho > div:first-child { flex: 1; min-width: 320px; }
.hoje-servico { color: var(--color-accent-700); margin: 0 0 6px; }
.hoje-total { font-size: 52px; margin: 0; letter-spacing: -0.02em; }
.hoje-quebra { margin: 10px 0 0; font-size: 16px; color: var(--color-neutral-800); }
.hoje-quebra strong { color: var(--color-text); }
.hoje-controles { display: flex; gap: 8px; align-items: center; padding-bottom: 6px; flex-wrap: wrap; }

/* R6 — o painel tolera minutos de atraso, e a tela diz isso. Proibido "ao vivo"/"agora". */
.carimbo {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--color-neutral-800); margin-left: 8px;
}

.legenda { display: flex; gap: 18px; font-size: 12px; color: var(--color-neutral-800); align-items: center; flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.amostra { width: 14px; height: 14px; flex: none; display: inline-block; }
.amostra-vistas { background: var(--color-text); }
.amostra-por-vir { border: 1px dashed var(--color-neutral-700); }

/* A HACHURA. É a diferença entre "a cozinha não produziu" e "eu não estava vendo", e a
   segunda já custou um vexame de 16,7 horas num painel real. Nunca desenhe uma barra de
   altura zero para falta de cobertura. */
.amostra-sem-dados, .hachura {
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-600) 0 3px, var(--color-neutral-200) 3px 7px);
}

.grafico {
  display: grid; gap: 8px; align-items: end; height: 180px; margin-top: 20px;
}
.coluna {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 4px; text-decoration: none; height: 100%; color: var(--color-text);
}
a.coluna:hover .barra { background: var(--color-accent-700); }
a.coluna:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.coluna-numero { font-size: 13px; font-weight: 800; color: var(--color-text); }
.coluna-numero-pico { color: var(--color-accent-700); }
.coluna-pilha { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
/* Mínimo de 8px: uma barra de "1" precisa se distinguir do traço do zero à primeira vista.
   Com 2px as duas viravam a mesma linha. */
.barra { width: 100%; background: var(--color-text); min-height: 8px; }
.barra-pico { background: var(--color-accent); }
/* Zero de verdade: estava vendo, e não passou nada. Um traço grosso na base, com o "0"
   escrito — para não se confundir nem com a hachura nem com a hora que não chegou. */
/* Zero de verdade: traço CURTO e centrado, forma diferente da barra (que é larga) e da
   hachura (que é alta). Somado ao "0" escrito acima, não há como confundir os três. */
.barra-zero { width: 42%; height: 5px; background: var(--color-text); }
.hachura { width: 100%; }
.hachura-cheia { height: 100%; }
.coluna-por-vir { width: 100%; height: 2px; border-bottom: 1px dashed var(--color-neutral-700); }
.coluna-rotulo-sem-dados { font-size: 10px; font-weight: 700; color: var(--color-neutral-800); letter-spacing: 0.02em; }

.eixo {
  display: grid; gap: 8px; margin-top: 8px; font-size: 12px;
  color: var(--color-neutral-800); font-weight: 600;
}
.eixo .por-vir { color: var(--color-neutral-700); }

/* A régua de cobertura: onde o sistema estava vendo, ao longo do serviço inteiro. */
.regua { position: relative; height: 14px; margin-top: 12px; margin-bottom: 20px; background: var(--color-neutral-200); }
.regua-visto { position: absolute; top: 0; bottom: 0; background: var(--color-text); }
.regua-lacuna { position: absolute; top: 0; bottom: 0; }
.regua-agora { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--color-accent-700); }
.regua-agora-rotulo {
  position: absolute; top: 16px; font-size: 11px; font-weight: 700; color: var(--color-accent-700);
  white-space: nowrap;
}

.caixa-cobertura {
  margin-top: 18px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--color-divider); padding: 12px 14px;
}
.caixa-cobertura .amostra { width: 22px; height: 22px; }
.caixa-cobertura p { margin: 0; font-size: 14px; color: var(--color-neutral-900); }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.cabeca-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cabeca-secao h2 { margin: 0; font-size: 20px; }
.cabeca-secao a { font-size: 13px; font-weight: 600; }

.lista-cameras { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.linha-camera {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--color-surface); color: var(--color-text); flex-wrap: wrap;
}
.linha-camera-aguardando { background: transparent; border: 1px dashed var(--color-neutral-700); }
.linha-camera strong { font-size: 14px; }
.linha-camera .estado { margin-left: auto; font-size: 13px; color: var(--color-neutral-800); }

/* ⭐ POR QUE a câmera caiu — a frase pronta que o back manda em `motivo`. Ela é o que diz ao
   cliente se a ação é DELE ou NOSSA, então é texto CHEIO: `neutral-900` sobre a superfície
   clara, peso 600, 13px. Nada de tom apagado — a linha que ninguém lê não informa ninguém
   (lição `feedback-ui-alto-contraste-legivel`). */
.motivo-da-camera {
  display: block; font-size: 13px; font-weight: 600; color: var(--color-neutral-900);
  margin-top: 3px;
}
/* Na T1 a linha da câmera é uma faixa horizontal: a frase quebra para a linha DE BAIXO
   inteira, em vez de disputar espaço com o estado (que fica encostado à direita). */
.linha-camera .motivo-da-camera { flex-basis: 100%; margin-top: 4px; }

.grade-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.foto-prato { display: block; text-decoration: none; color: var(--color-text); }
.foto-prato img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--color-neutral-300);
}
.foto-prato span { display: block; font-size: 12px; font-weight: 700; margin-top: 4px; }
/* O slot de sabor. Ele nasce VAZIO: em 262 de 262 eventos reais o sabor é nulo. O chip
   existe para que a tela não se redesenhe quando o classificador entrar. */
.chip-sem-sabor {
  display: inline-block; font-size: 10px; letter-spacing: 0.02em; padding: 2px 7px;
  background: var(--color-neutral-200); color: var(--color-neutral-800); margin-top: 3px;
}

/* ⭐ A FAIXA DE INDICADORES (T1) — desenho do dono: três cartões de relance, logo abaixo do
   número grande. Reaproveita `.cartao-kpi` da Q2 — um cartão só, servindo as duas telas.
   ⛔ A dupla classe NÃO é enfeite: `.cartoes-kpi` (2 colunas) é declarado MAIS ABAIXO neste
   arquivo, então uma regra de uma classe só aqui em cima perderia por ordem e a faixa sairia
   com duas colunas. As media queries abaixo casam essa especificidade de propósito. */
.cartoes-kpi.faixa-indicadores {
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: 22px;
}
/* O link mora no PÉ do cartão: alinhado entre os três mesmo com textos de alturas diferentes. */
.link-kpi { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; }
/* O cartão-atalho é o cartão INTEIRO como link — nenhum número é calculado dentro dele. */
a.cartao-atalho { text-decoration: none; color: var(--color-text); }
a.cartao-atalho:hover { background: var(--color-neutral-200); }
/* O "ver a lista →" deste cartão é um `span` (o link é o cartão inteiro), então não herda a
   cor de âncora — e ficava preto ao lado de dois links vermelhos sublinhados. Os três têm que
   parecer a mesma coisa: é a mesma promessa de que dali se vai a algum lugar. */
a.cartao-atalho .link-kpi { color: var(--color-accent); text-decoration: underline; }
a.cartao-atalho:hover .link-kpi { color: var(--color-accent-600); }
.texto-atalho { font-size: 14px; line-height: 1.45; color: var(--color-neutral-900); margin-top: 6px; }

/* A linha da câmera e a foto do prato viraram LINK (desenho do dono). O alvo cresceu, então
   precisa de hover e de foco VISÍVEIS — alvo grande e mudo é alvo que ninguém descobre. */
a.linha-camera { text-decoration: none; color: var(--color-text); }
a.linha-camera:hover { background: var(--color-neutral-200); }
a.foto-prato:hover img { outline: 2px solid var(--color-accent); outline-offset: 2px; }
a.cartao-atalho:focus-visible,
a.linha-camera:focus-visible,
a.foto-prato:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }

@media (min-width: 761px) and (max-width: 1024px) {
  .cartoes-kpi.faixa-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cartoes-kpi.faixa-indicadores { grid-template-columns: 1fr; }
}

.tabela-servicos { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.tabela-servicos td { padding: 8px; border-bottom: 1px solid var(--color-divider); }
.tabela-servicos td:first-child { font-weight: 600; }
.tabela-servicos .cobertura-parcial { color: var(--color-accent-800); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   Celular
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .duas-colunas { grid-template-columns: 1fr; gap: 28px; }
  .pagina, .pagina-estreita { padding-left: 18px; padding-right: 18px; }
  .rodape { padding-left: 18px; padding-right: 18px; }
  .topo { padding: 12px 18px; gap: 14px; }
  .topo-direita { margin-left: 0; width: 100%; }
  .hoje-total { font-size: 40px; }
  .grafico { height: 150px; gap: 4px; }
  .eixo { gap: 4px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   T7 · Câmeras
   ══════════════════════════════════════════════════════════════════════════════════════ */
.lista-cameras-grande { display: flex; flex-direction: column; gap: 10px; }
.cartao-camera {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--color-surface); padding: 18px 20px;
}
/* Câmera que ainda não subiu tem moldura tracejada — a mesma linguagem da T1, para a pessoa
   reconhecer o estado sem reler o rótulo. */
.cartao-camera-aguardando { background: transparent; border: 1px dashed var(--color-neutral-700); }
.form-renomear { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* As REMOVIDAS. Cartão MENOR que o da ativa — menos altura, sem coluna de estado e sem ação —
   porque não há o que acompanhar nem o que clicar. Mas o texto continua CHEIO: registro
   histórico apagado é registro que ninguém lê, e a data é a informação inteira do cartão. */
.lista-removidas { display: flex; flex-direction: column; gap: 6px; }
.cartao-removida {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--color-surface); padding: 10px 20px; color: var(--color-text);
}
.cartao-removida strong { font-size: 15px; }
.cartao-removida .quando-removida {
  margin-left: auto; font-size: 13px; color: var(--color-neutral-900);
}
.form-renomear .input { width: 210px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T8 · Cadastrar câmera
   ══════════════════════════════════════════════════════════════════════════════════════ */
.formulario { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }
.grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo legend { padding: 0; margin-bottom: 4px; }
.opcao {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--color-divider); padding: 12px 14px; background: var(--color-surface);
}
.opcao:hover { border-color: var(--color-neutral-700); }
.opcao:has(input:checked) { border: 2px solid var(--color-accent-700); padding: 11px 13px; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
.opcao input { margin-top: 3px; accent-color: var(--color-accent-700); width: 17px; height: 17px; }
.opcao > span { display: flex; flex-direction: column; gap: 2px; }
.opcao strong { font-size: 15px; }
.dica { font-size: 13px; color: var(--color-neutral-800); margin: 4px 0 0; }
.opcao .dica { margin: 0; }
/* Erro de campo: sólido e alto contraste, nunca um vermelho claro que some na cozinha. */
.erro-campo {
  margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--color-accent-800);
}
.passos { margin: 0; padding-left: 22px; font-size: 15px; color: var(--color-neutral-900); }
.passos li { margin-bottom: 6px; }
.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px;
  letter-spacing: 0.12em; background: var(--color-neutral-200); padding: 6px 12px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   T11 · O que está acontecendo
   ══════════════════════════════════════════════════════════════════════════════════════ */
.lista-pedidos { display: flex; flex-direction: column; gap: 10px; }
.cartao-pedido {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--color-surface); padding: 18px 20px;
}
.cartao-pedido-falhou { border-left: 4px solid var(--color-accent-700); }
.motivo {
  margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--color-accent-800);
}
/* ⛔ A ESPERA NÃO É ALARME. Mesmo tamanho e peso do `.motivo` para ser lida com a mesma atenção,
   e cor de TEXTO porque nada deu errado: a instalação apenas ainda não aconteceu. */
.motivo-esperando {
  margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--color-neutral-900);
}
.selo-estado {
  font-size: 13px; font-weight: 700; padding: 6px 12px; white-space: nowrap;
  border: 1px solid var(--color-neutral-800); color: var(--color-text);
}
.selo-estado-andando { background: var(--color-neutral-200); }
.selo-estado-pronto { background: oklch(0.48 0.16 150); color: #fff; border-color: transparent; }
.selo-estado-falhou { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-700); }

/* O renomear fica fechado: a pergunta da T7 é "minhas câmeras estão vendo?", e um campo de
   texto aberto em cada linha faz a tela parecer formulário. */
.renomear > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-accent-700);
  list-style: none; padding: 6px 10px; border: 1px solid var(--color-divider);
}
.renomear > summary::-webkit-details-marker { display: none; }
.renomear > summary:hover { background: var(--color-neutral-200); }
.renomear[open] > summary { margin-bottom: 8px; }
.renomear[open] { flex-basis: 100%; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T9 · Cardápio
   ══════════════════════════════════════════════════════════════════════════════════════ */
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtros .input { width: 280px; }

.chips-categoria { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip {
  font-size: 13px; font-weight: 600; padding: 6px 14px; text-decoration: none;
  border: 1px solid var(--color-divider); color: var(--color-text);
}
.chip:hover { background: var(--color-neutral-200); }
.chip-atual { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.titulo-categoria {
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 30px 0 12px; display: flex; align-items: baseline; gap: 10px;
}
.titulo-categoria span {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--color-neutral-700); font-weight: 400;
}

.grade-produtos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.cartao-produto {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  color: var(--color-text); background: var(--color-surface); padding: 0 0 12px;
  border: 1px solid transparent;
}
.cartao-produto:hover { border-color: var(--color-neutral-400); background: var(--color-neutral-200); }
.cartao-produto:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
.cartao-produto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--color-neutral-300); }
/* Produto sem foto de referência é MARCADO. É informação útil, não erro. */
.cartao-produto .sem-foto {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4/3;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-400) 0 3px, var(--color-neutral-200) 3px 7px);
  font-size: 12px; font-weight: 700; color: var(--color-neutral-900); text-align: center;
}
.cartao-produto strong { font-size: 14px; padding: 8px 12px 0; line-height: 1.25; }
.cartao-produto .linha-produto { display: flex; gap: 6px; padding: 0 12px; flex-wrap: wrap; }
.cartao-produto .preco { font-size: 13px; font-weight: 600; padding: 0 12px; }
.cartao-produto .sinais {
  font-size: 12px; color: var(--color-neutral-800); padding: 0 12px; line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   T10 · Um produto
   ══════════════════════════════════════════════════════════════════════════════════════ */
.dois-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.opcoes-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.opcao-curta { padding: 8px 14px; }
.grade-fotos-ref {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.foto-ref img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--color-neutral-300); }
.foto-ref figcaption { font-size: 11px; color: var(--color-neutral-700); margin-top: 3px; }

/* Eleição da capa — o rosto do produto (diário: foto-capa-do-produto).
   ⛔ Sem `opacity` para dizer "não escolhida": o dono reclamou disso, e foto clara demais
   parece foto ruim. O estado se lê pela BORDA e pelo rótulo, que são opacos. */
.foto-eleicao {
  display: block; position: relative; cursor: pointer;
  border: 3px solid var(--color-neutral-400); padding: 4px; background: var(--color-surface);
}
.foto-eleicao:hover { border-color: var(--color-neutral-700); }
.foto-eleicao:has(.radio-capa:focus-visible) {
  outline: 3px solid var(--color-accent-700); outline-offset: 2px;
}
/* O radio some da vista mas NÃO do teclado nem do leitor de tela: `display:none` o tiraria
   da ordem de foco e a eleição viraria exclusiva de quem usa mouse. */
.radio-capa {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* Em coluna: "usar como capa" quebrava em três linhas espremendo a origem ao lado. */
.foto-eleicao .rotulo-capa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  margin-top: 5px; font-size: 12px; color: var(--color-neutral-900);
}
/* A AFIRMAÇÃO é caixa alta; o CONVITE não grita — quem já é capa se anuncia, quem não é
   apenas se oferece. */
.foto-eleicao .rotulo-capa .marca-eleita {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.foto-eleicao .rotulo-capa .marca-eleger {
  font-weight: 700; color: var(--color-neutral-800);
}
.foto-eleicao .rotulo-capa .origem { color: var(--color-neutral-800); }
/* ⛔ UM rótulo por vez. Com "capa" em todas, a tela dizia que todas eram a capa — e o clique
   trocava a borda sem trocar a palavra. A troca é no `:checked`, então vale no clique. */
.marca-eleita { display: none; }
.foto-eleicao:has(.radio-capa:checked) .marca-eleita { display: inline; }
.foto-eleicao:has(.radio-capa:checked) .marca-eleger { display: none; }
/* Eleita: borda cheia na cor de acento + o rótulo vira afirmação, não convite. */
.foto-eleicao:has(.radio-capa:checked) { border-color: var(--color-accent-700); }
.foto-eleicao:has(.radio-capa:checked) .rotulo-capa strong {
  color: var(--color-accent-700);
}
/* A marca do padrão só faz sentido enquanto NINGUÉM foi eleito. Eleger apaga a afirmação
   antiga na hora — ela virou falsa no instante do clique. */
.grade-fotos-ref:has(.radio-capa:checked) .marca-padrao { display: none; }
.foto-eleicao:has(.radio-capa:checked)::after {
  content: "✓"; position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--color-accent-700); color: #fff; font-size: 15px; font-weight: 800;
}
/* "capa hoje, por ser a primeira" — o estado implícito dito em voz alta, para ninguém achar
   que o produto está sem capa quando ele não está. */
.foto-eleicao .marca-padrao {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700;
}

@media (max-width: 700px) {
  .dois-campos { grid-template-columns: 1fr; }
  .filtros .input { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   T5 · Pratos, o feed
   ══════════════════════════════════════════════════════════════════════════════════════ */
.filtros-feed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.separador-filtro { width: 1px; height: 22px; background: var(--color-divider); margin: 0 4px; }

.grade-feed {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.cartao-prato {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  color: var(--color-text); background: var(--color-surface); padding: 0 0 10px;
  border: 1px solid transparent;
}
.cartao-prato:hover { border-color: var(--color-neutral-400); background: var(--color-neutral-200); }
.cartao-prato:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
.cartao-prato img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--color-neutral-300); }
/* Foto ausente é MOLDURA COM ÍCONE, nunca cartão quebrado. */
.prato-sem-foto {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4/3;
  border: 2px dashed var(--color-neutral-700); background: var(--color-neutral-200);
  font-size: 12px; font-weight: 700; color: var(--color-neutral-900);
}
.prato-hora {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; padding: 8px 12px 0;
}
.prato-camera { font-size: 13px; padding: 0 12px; }
.cartao-prato .tag { margin: 2px 12px 0; align-self: flex-start; }
/* O chip de sabor nasce VAZIO e fica cinza. Ele existe para a tela não se redesenhar quando o
   classificador entrar — não para prometer que já existe. */
.chip-sabor {
  display: inline-block; font-size: 10px; letter-spacing: 0.02em; padding: 3px 8px;
  background: var(--color-neutral-200); color: var(--color-neutral-800); margin: 4px 12px 0;
  align-self: flex-start;
}
.chip-sabor-cheio { background: var(--color-accent-100); color: var(--color-accent-800); }

/* Cartão-esqueleto: altura estável, sem pulo de layout enquanto a página seguinte chega. */
.prato-esqueleto {
  display: block; aspect-ratio: 4/3; background: var(--color-neutral-200);
  animation: sk 1.6s infinite;
}
@keyframes sk { 0% { opacity: 1 } 50% { opacity: .6 } 100% { opacity: 1 } }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T6 · Detalhe de um prato visto
   ══════════════════════════════════════════════════════════════════════════════════════ */
.detalhe-prato { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; margin-top: 22px; }
.detalhe-foto img { width: 100%; background: var(--color-neutral-300); }
.ficha { margin: 20px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.ficha dt {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-800); font-weight: 600; align-self: center;
}
.ficha dd { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha dd .chip-sabor { margin: 0; }
/* O `evento_uid` é letra miúda COPIÁVEL para suporte — nunca identidade visual (R11). */
.referencia { margin: 22px 0 0; font-size: 12px; color: var(--color-neutral-700); }
.referencia code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--color-neutral-200); padding: 2px 6px; user-select: all;
}

@media (max-width: 760px) { .detalhe-prato { grid-template-columns: 1fr; gap: 20px; } }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T13 · Minha conta — contexto do TITULAR
   ══════════════════════════════════════════════════════════════════════════════════════ */
.titulo-secao {
  font-size: 20px; margin: 28px 0 10px;
}
.bloco-conta {
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.bloco-conta .dado { display: flex; flex-direction: column; gap: 2px; }
.bloco-conta .dado dt {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-800);
}
.bloco-conta .dado dd { margin: 0; font-size: 16px; color: var(--color-text); }
.bloco-conta .dica { margin: 0; }
.bloco-conta .btn { align-self: flex-start; }

.lista-empresas-conta, .lista-sessoes { list-style: none; margin: 0; padding: 0; }
.lista-empresas-conta li, .lista-sessoes li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--color-neutral-300);
}
.lista-empresas-conta li:first-child, .lista-sessoes li:first-child { padding-top: 0; }
.lista-empresas-conta li:last-child, .lista-sessoes li:last-child { border-bottom: 0; }
.lista-empresas-conta .nome, .lista-sessoes .nome { font-weight: 700; font-size: 15px; }
/* O papel se LÊ, e é o que explica por que uma empresa mostra menos que a outra.
   ⛔ Sem opacity baixa: é informação, não enfeite apagado. */
.lista-empresas-conta .papel {
  font-size: 13px; font-weight: 600; color: var(--color-neutral-800); white-space: nowrap;
}
.lista-sessoes li > div { display: flex; flex-direction: column; gap: 2px; }
.lista-sessoes .detalhe { font-size: 13px; color: var(--color-neutral-800); }

/* "· minha conta" ao lado do nome, na barra de cima. */
.chip-usuario .chip-sub { font-weight: 600; color: var(--color-neutral-800); }
a.chip-usuario { text-decoration: none; color: var(--color-text); }
/* O chip já responde ao hover pelo FUNDO. Recolorir o texto junto é dois sinais para um
   evento — e o vermelho do acento aqui compete com o "sair", que é a ação de verdade. */
a.chip-usuario:hover { background: var(--color-neutral-300); }
a.chip-usuario:hover, a.chip-usuario:hover .chip-sub { color: var(--color-text); }
a.chip-usuario:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   Q1 · Qualidade
   ══════════════════════════════════════════════════════════════════════════════════════ */
.cabeca-qualidade { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.cabeca-qualidade > div { display: flex; flex-direction: column; gap: 2px; }
.rotulo-kpi {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-800);
}
/* ⛔ 22/set: a COR SAIU DO PADRÃO e virou modificador (`numero-kpi-alerta`). O acento é
   acusação; pintar de vermelho um "0" fora-do-padrão ensinaria o cliente a ler o número pela
   cor e a se assustar com o dia perfeito. Desenho do dono: só o número positivo é de acento. */
.numero-kpi {
  font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1;
  letter-spacing: -0.02em; color: var(--color-text);
}
.numero-kpi-alerta { color: var(--color-accent-700); }
.sub-kpi { font-size: 14px; color: var(--color-neutral-900); }

.lista-fora-do-padrao { list-style: none; margin: 0; padding: 0; }
/* ⭐ A LINHA, redesenhada em 22/set contra o desenho do dono (`Q2 Fora do padrao.dc.html`):
   foto · (hora · sabor / motivo / câmera) · nota · ver. A grade de colunas que existia aqui
   serrilhava e não tinha foto — e é a foto que faz a lista ser lida de relance. */
.lista-fora-do-padrao li { margin: 0 0 10px; }
/* ⛔ A LINHA INTEIRA É O LINK: o alvo é a linha, não um "ver →" de 30 px no canto. */
.lista-fora-do-padrao .linha-fora {
  display: flex; align-items: center; gap: 16px;
  background: var(--color-surface, #f6f6f4); padding: 12px 16px 12px 12px;
  text-decoration: none; color: var(--color-text, #111);
}
.lista-fora-do-padrao .linha-fora:hover { background: var(--color-neutral-200); }
.foto-da-linha { width: 96px; height: 72px; object-fit: cover; flex: none; background: var(--color-neutral-300); }
/* Foto ausente é MOLDURA COM PALAVRA, nunca cartão quebrado — o mesmo estado do feed. */
.foto-da-linha.sem-foto {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-neutral-700); border: 1px dashed var(--color-neutral-600);
  background: none;
}
.corpo-da-linha { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.corpo-da-linha strong { font-size: 15px; }
.lista-fora-do-padrao .motivos { font-size: 13px; color: var(--color-neutral-900); }
.camera-da-linha { font-size: 12px; color: var(--color-neutral-700); }

/* Os dois números do topo, em cartão — desenho do dono. */
.cartoes-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 680px; }
.cartao-kpi { background: var(--color-surface, #f6f6f4); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 2px; }
/* A nota abaixo do corte é o dado central da linha: tamanho e cor de acento acessível,
   nunca um vermelho translúcido. */
.nota-fora {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.ver-prato { font-weight: 700; font-size: 14px; white-space: nowrap; }

.grade-corte { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.valor-corte {
  font-family: var(--font-heading); font-weight: 800; font-size: 40px; line-height: 1;
  margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums;
}
/* Sem corte definido a frase entra no lugar do número. NÃO é o número esmaecido: 40px de
   "ainda não definida" é ruído, e `opacity` baixa está proibida nesta casa. Texto menor,
   peso menor, cor cheia — legível, e visivelmente de outra natureza que um 7,0. */
.valor-corte.sem-valor {
  font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--color-neutral-900);
}
.lista-criterios { margin: 0; padding-left: 20px; }
.lista-criterios li { font-size: 15px; padding: 3px 0; }

@media (max-width: 760px) {
  .grade-corte { grid-template-columns: 1fr; }
  /* No celular a foto encolhe e o "ver →" some: a linha inteira já é o link. */
  .lista-fora-do-padrao .linha-fora { gap: 12px; padding: 10px 12px; }
  .foto-da-linha { width: 64px; height: 48px; }
  .lista-fora-do-padrao .ver-prato { display: none; }
  .cartoes-kpi { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   V1 · Quadro de avisos — contexto do TITULAR
   ══════════════════════════════════════════════════════════════════════════════════════ */
.quadro-avisos { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; }
.quadro-avisos li {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 22px;
  padding: 16px 18px; background: var(--color-surface);
  border: 2px solid var(--color-neutral-400); border-left-width: 7px;
}
.corpo-aviso h2 { font-size: 17px; margin: 0 0 4px; line-height: 1.3; }
.corpo-aviso p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-900); }
.lado-aviso { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right; white-space: nowrap; }
.lado-aviso .onde { font-size: 13px; font-weight: 700; }
.lado-aviso .quando { font-size: 12px; color: var(--color-neutral-800); }
.acao-aviso { font-size: 13px; font-weight: 700; margin-top: 4px; }

/* A GRAVIDADE é linguagem, não decoração — e é a mesma da R8:
   vermelho pede ação · hachurado é lacuna de dados · verde é novidade boa.
   ⛔ Nada de opacity: a faixa é opaca e o texto é o mesmo preto em todas. */
/* ⚠️ `.quadro-avisos li` (0,1,1) VENCE `.aviso-acao` (0,1,0): os três traços saíam cinza e a
   linguagem de cor sumia. Visto na imagem, não no código — nenhum teste de HTML pega isto.
   A correção é especificidade igual ou maior, não `!important`. */
.quadro-avisos li.aviso-acao { border-left-color: var(--color-accent-700); }
.quadro-avisos li.aviso-boa { border-left-color: #1c5636; }
.quadro-avisos li.aviso-lacuna {
  border-left-color: var(--color-neutral-700);
  /* A hachura é a MESMA da T1 para hora sem cobertura: quem já viu o gráfico reconhece a
     afirmação sem ler. É listra opaca sobre o fundo, não transparência. */
  background-image: repeating-linear-gradient(135deg,
    var(--color-neutral-300) 0 5px, var(--color-surface) 5px 11px);
}

@media (max-width: 700px) {
  .quadro-avisos li { grid-template-columns: 1fr; }
  .lado-aviso { align-items: flex-start; text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   W1 · Catálogo de leituras — contexto do TITULAR
   ══════════════════════════════════════════════════════════════════════════════════════ */
.cartao-leitura { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.descricao-leitura {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-900);
  max-width: 62ch;
}
.titulo-onde {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-800);
  margin: 8px 0 0;
}
.lista-onde { list-style: none; margin: 0; padding: 0; }
.lista-onde li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--color-neutral-300);
}
.lista-onde li:last-child { border-bottom: 0; }
.lista-onde .nome { font-weight: 700; font-size: 15px; flex: 1 1 16rem; }
.estado-leitura { font-size: 14px; color: var(--color-neutral-900); }
/* Disponível é o estado bom: peso, não cor de alarme. Os outros dois se leem pelo texto —
   "Aguardando nossa aprovação" já diz tudo, e pintar de vermelho faria parecer erro. */
.estado-leitura .estado-disponivel { font-weight: 700; }
.estado-leitura .uso { color: var(--color-neutral-800); }
.btn-pedir { padding: 5px 12px; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   E2 · Equipe — contexto do TITULAR
   ══════════════════════════════════════════════════════════════════════════════════════ */
.lista-equipe { list-style: none; margin: 0; padding: 0; }
.lista-equipe li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--color-neutral-300);
}
.lista-equipe li:first-child { border-top: 1px solid var(--color-neutral-300); }
.lista-equipe .quem { display: flex; flex-direction: column; gap: 2px; flex: 1 1 20rem; }
.lista-equipe .nome {
  font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.lista-equipe .detalhe { font-size: 13px; color: var(--color-neutral-800); }
/* O papel se lê e não se decora: é informação de permissão, não estado de alarme. */
.papel-membro {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-800);
  white-space: nowrap;
}
.acoes-convite { display: flex; gap: 8px; }
.btn-curto { padding: 5px 12px; font-size: 13px; }
.opcoes-coluna { display: flex; flex-direction: column; gap: 8px; }
.opcoes-coluna .opcao { width: 100%; }

.lista-papeis { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.lista-papeis dt {
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; white-space: nowrap;
}
.lista-papeis dd { margin: 0; font-size: 15px; color: var(--color-neutral-900); }

/* ── I1 · Integrações ─────────────────────────────────────────────────────────────────── */

.cartao-integracao { padding: 22px; margin-bottom: 18px; }
.cabeca-integracao { display: flex; gap: 14px; align-items: flex-start; }
.selo-integracao {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--color-text); color: var(--color-surface);
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
}
.descricao-integracao {
  margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-text); max-width: 62ch;
}

.lista-ifood { list-style: none; margin: 0; padding: 0; }
.lista-ifood > li { border-top: 1px solid var(--color-divider); padding: 14px 0; }
.linha-ifood { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha-ifood .nome { font-weight: 700; font-size: 16px; flex: 1 1 220px; }
.estado-ifood { font-size: 14px; color: var(--color-neutral-900); }

/* Os três passos. Numerados porque são uma SEQUÊNCIA de verdade — o passo 2 acontece fora
   deste site, no portal do iFood, e sem a ordem a pessoa não sabe de onde tira o código que
   o passo 3 pede. */
.passos-ifood {
  margin: 14px 0 4px; padding: 16px; border: 1px solid var(--color-divider);
  border-radius: 10px; background: var(--color-neutral-100);
  display: flex; flex-direction: column; gap: 14px;
}
.passo { display: flex; gap: 10px; align-items: flex-start; }
.passo > p { margin: 0; font-size: 15px; line-height: 1.6; }
.numero-passo {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  color: var(--color-text); white-space: nowrap; padding-top: 2px;
}
.rotulo-passo {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-neutral-900);
}
.codigo-vinculacao {
  display: inline-block; margin: 4px 10px 0 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: .08em;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.formulario-passo { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.formulario-passo .field { max-width: 260px; }

.lista-destinatarios { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-destinatarios > li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--color-divider); padding: 10px 0;
}
.lista-destinatarios .nome { font-weight: 600; font-size: 15px; }
/* Cor cheia, não opacidade: "aguardando" é informação, e informação apagada some da tela. */
.aguardando { font-size: 14px; color: var(--color-accent-800); font-weight: 600; }
.linha-adicionar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.linha-adicionar .field { max-width: 320px; }

.exemplo-email {
  margin-top: 16px; border: 1px solid var(--color-divider); border-radius: 10px;
  overflow: hidden; background: var(--color-surface);
}
.etiqueta-exemplo {
  display: block; padding: 8px 14px; background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-divider);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-900);
}
.cabecalho-email {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-bottom: 1px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-900);
}
.corpo-email { padding: 14px; }
.corpo-email p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.corpo-email p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .formulario-passo .field, .linha-adicionar .field { max-width: none; flex: 1 1 100%; }
}

/* ── A1 · Análise ─────────────────────────────────────────────────────────────────────── */

/* Título à esquerda, período à direita — o desenho A1. */
.cabeca-analise {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sub-analise { margin: 8px 0 0; font-size: 15px; color: var(--color-neutral-800); }

/* Período e ordem são NAVEGAÇÃO (link, não botão): entram no histórico e a pessoa volta com o
   botão de voltar do browser. A aba atual se marca por sublinhado E peso — cor sozinha não
   é marca acessível, e `aria-current` diz o mesmo para quem não vê a tela. */
.abas-periodo, .abas-ordem { display: flex; gap: 4px; flex-wrap: wrap; }
.aba {
  padding: 7px 14px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--color-neutral-900); border: 1px solid transparent; border-radius: 8px;
}
.aba:hover { background: var(--color-neutral-100); }
.aba-atual {
  color: var(--color-text); background: var(--color-surface);
  border-color: var(--color-divider);
}

.grade-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin-bottom: 8px;
}
.kpi {
  display: flex; flex-direction: column; gap: 3px;
  border: 2px solid var(--color-divider); padding: 16px 18px;
}
/* O total é NEUTRO: quantidade não é boa nem ruim, e em vermelho ele se lia como alarme ao lado do
   "fora do padrão" — que é onde o destaque mora no desenho. */
/* Mantida por compatibilidade: desde 22/set o PADRÃO já é a cor do texto, então esta classe
   não muda mais nada — o alarme é que virou explícito (`numero-kpi-alerta`). */
.numero-kpi.numero-neutro { color: var(--color-text); }
/* A nota dentro do padrão: o verde do desenho, escuro o bastante para ser texto (R10). */
.numero-kpi.numero-bom { color: oklch(0.42 0.12 150); }
/* O nome do produto líder é texto, não número: 44px de "FRANGO COM CATUPIRY" estoura a
   caixa e some do cartão. */
.numero-kpi.nome-lider { font-size: 22px; line-height: 1.2; color: var(--color-text); }
/* Cor cheia, tamanho menor: "sem nota de corte" no lugar do número não é o número apagado. */
.numero-kpi.sem-valor { font-size: 19px; line-height: 1.3; color: var(--color-neutral-900); }

.lista-producao { list-style: none; margin: 0; padding: 0; }
.lista-producao li {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--color-divider); padding: 12px 0;
}
.linha-casa { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.lista-producao .nome { font-weight: 700; font-size: 16px; min-width: 230px; }
.lista-producao .detalhe { font-size: 14px; color: var(--color-neutral-900); }
.lista-producao .quantidade {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.linha-barra { display: flex; align-items: center; gap: 12px; min-height: 26px; }
/* A barra é PREENCHIMENTO: o número ao lado carrega o valor para quem não distingue a forma. */
.barra-producao { height: 22px; background: var(--color-text); min-width: 6px; }
/* Zero de verdade: traço curto — forma diferente da barra e do travessão de "ninguém viu". */
.barra-zero-producao { width: 18px; height: 4px; background: var(--color-text); }
/* O botão que troca de empresa e abre a Qualidade tem cara de link: para quem lê é navegação,
   ainda que por baixo seja a ação explícita de trocar a empresa ativa (R1). */
.form-inline { display: inline; margin: 0; }
.link-acao {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--color-accent-700); text-decoration: underline; cursor: pointer;
}
.link-acao:hover { color: var(--color-accent-800); }

.cabeca-produtos {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 32px 0 12px;
}
.cabeca-produtos .titulo-secao { margin: 0; }
.controles-tabela { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.busca-produto .input { width: 240px; }

/* A tabela rola DENTRO da própria caixa: com quatro ou cinco casas ela passa da largura da
   página, e página que rola de lado esconde o resto da tela. */
.rolagem-tabela { overflow-x: auto; }
.tabela-produtos { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela-produtos th, .tabela-produtos td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.tabela-produtos thead th {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-800);
  border-bottom-width: 2px; white-space: nowrap;
}
.tabela-produtos tbody th { font-weight: 700; white-space: nowrap; }
.tabela-produtos td { font-variant-numeric: tabular-nums; }
.nota-celula { color: var(--color-neutral-900); font-size: 14px; white-space: nowrap; }
/* A nota contra o corte DA CASA: verde dentro, vermelho abaixo, cor do texto quando não há
   corte — pintar sem padrão afirmaria um padrão que ninguém definiu. */
.nota-dentro { color: oklch(0.42 0.12 150); }
.nota-abaixo { color: var(--color-accent-800); }
.nota-sem-corte { color: var(--color-text); }
.sem-celula { color: var(--color-neutral-800); }
.total-celula { font-weight: 700; }
.meio-celula { display: block; font-size: 13px; font-weight: 400; color: var(--color-neutral-800); }
.marca-lider { color: var(--color-accent-700); font-weight: 800; }
/* A linha com alerta ganha uma faixa à esquerda, não fundo colorido: fundo vermelho atrás de
   texto derruba o contraste que a R10 exige, e a faixa marca sem tingir. */
.linha-atencao th[scope="row"] { box-shadow: inset 3px 0 0 var(--color-accent-700); }
.alerta-produto { color: var(--color-accent-800); font-weight: 700; font-size: 14px; }
.comparacao { max-width: 34ch; }

/* A leitura em caixa, como no desenho: são frases tiradas do dado, e a borda as separa da tabela. */
.painel-leitura { margin-top: 32px; border: 2px solid var(--color-divider); padding: 18px 24px; }
.titulo-leitura {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 8px;
}
.lista-leitura { margin: 0; padding-left: 20px; }
.lista-leitura li { font-size: 15px; line-height: 1.6; padding: 4px 0; max-width: 80ch; }
.fonte-analise { margin-top: 22px; max-width: 80ch; }

@media (max-width: 760px) {
  .busca-produto .input { width: 100%; }
  .controles-tabela { align-items: stretch; }
  .lista-producao .nome { min-width: 0; }
}

/* ── Seletor de empresa no topo ────────────────────────────────────────────────────────── */

.seletor-empresa { position: relative; }
.seletor-empresa > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center;
}
.seletor-empresa > summary::-webkit-details-marker { display: none; }
.menu-empresa {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 260px;
  background: var(--color-bg); border: 2px solid var(--color-text);
  display: flex; flex-direction: column; padding: 6px;
}
.menu-empresa-titulo {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-800);
  padding: 8px 10px 6px;
}
.menu-empresa-form { margin: 0; }
.menu-empresa-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 9px 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--color-text);
}
.menu-empresa-item:hover, .menu-empresa-item:focus-visible { background: var(--color-surface); }
/* A casa atual se LÊ, não se clica — cor cheia, não apagada. */
.menu-empresa-atual {
  padding: 9px 10px; font-size: 15px; font-weight: 700; color: var(--color-text);
  display: flex; justify-content: space-between; gap: 10px;
}
.menu-marca { color: var(--color-accent-700); font-weight: 800; }
.menu-empresa-todas {
  margin-top: 4px; border-top: 1px solid var(--color-divider);
  padding: 9px 10px 4px; font-size: 13px; font-weight: 700;
}

/* ── O menu do nome: a porta da conta, dentro de uma casa ──────────────────────────────── */

.menu-do-nome { position: relative; }
.menu-do-nome > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-do-nome > summary::-webkit-details-marker { display: none; }
.chip-seta { color: var(--color-neutral-800); }
.menu-conta {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 260px; max-width: calc(100vw - 36px);
  background: var(--color-bg); border: 2px solid var(--color-text);
  display: flex; flex-direction: column; padding: 6px;
}
.menu-conta-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
.menu-conta-item:hover, .menu-conta-item:focus-visible { background: var(--color-surface); }
/* "minha conta" e "sair" são de outra natureza que as telas acima: fecham a lista. */
.menu-conta-eu { margin-top: 4px; border-top: 1px solid var(--color-divider); }
.menu-conta-sub {
  display: block; font-size: 13px; font-weight: 500; color: var(--color-neutral-800);
  margin-top: 2px;
}
.menu-conta-sair { color: var(--color-accent-700); font-weight: 700; }

/* O selo de avisos: o número que diz se vale a pena abrir. */
.selo-avisos {
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px;
  background: var(--color-accent); color: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px; line-height: 1;
}
.menu-conta-item .selo-avisos { margin-left: auto; }
.menu-conta-item { display: flex; align-items: center; gap: 8px; }
.topo-links a { display: inline-flex; align-items: center; gap: 6px; }

/* O chip de volta para a casa, na barra da conta. */
.chip-da-casa {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border: 1px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
.chip-da-casa:hover { background: var(--color-surface); }

/* ── Tablet (761–1024): a decisão do desenho de 18/set ──────────────────────────────────
   A linha de identidade fica como no computador — marca, casa, conta — e as abas descem para
   uma linha própria, em blocos com alvo de 44 px. Sem faixa que rola de lado (aba que não se vê
   não se clica) e sem mandar aba para dentro do menu do nome (o menu é a porta da CONTA;
   misturar as abas da casa ali desfaz a regra que acabamos de estabelecer). */
@media (max-width: 1024px) {
  .topo { padding: 12px 20px; }
  .topo-direita { flex-wrap: wrap; }
  .topo-links { order: 5; width: 100%; margin-left: 0; gap: 8px; }
  .topo-links > a {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px;
    background: var(--color-surface); font-weight: 600;
  }
  .topo-links > a.atual {
    background: var(--color-text); color: var(--color-bg);
    border-bottom: 0; padding-bottom: 0;
  }
  .chip-usuario, .chip-da-casa, .rotulo-empresa, .seletor-empresa > summary {
    min-height: 44px; box-sizing: border-box;
  }
  .menu-conta-item, .menu-empresa-item, .menu-empresa-todas { min-height: 44px; display: flex; align-items: center; }
}

/* ── Tablet (761–1024): o CONTEÚDO — a decisão do desenho de 18/set (rodada 3) ──────────────
   O bloco acima é a BARRA, que entrou na rodada 2. Este é o conteúdo, que foi aceito inteiro em
   18/set ("Telas no tablet. Aceito inteiro, vai para o produto como está") e nunca existiu:
   medido em 20/set, o único ponto de quebra acima de 860 tocava só `.topo`.

   O defeito que a rodada 3 levantou: `.detalhe-prato` só quebrava em 760, então entre 761 e
   1024 a T6 continuava pedindo 1.096 px — mais do que a tela tem. O mesmo valia para a Q1
   (quebrava em 760), a T1 (860) e os campos de formulário (700): a faixa do tablet caía sempre
   no desenho de computador, com duas colunas onde não cabem duas.

   ⛔ A página NUNCA rola de lado. Só tabela, gráfico e grade larga rolam, cada um no seu
   contêiner — `.rolagem-tabela` já faz isso, e é por isso que ele não aparece aqui. */
@media (max-width: 1024px) {
  /* T1 · T6 · Q1 · formulários: de duas colunas para uma. Os valores de `gap` são os mesmos que
     cada uma já usava no ponto de quebra estreito — não é desenho novo, é o mesmo desenho
     começando antes. */
  .duas-colunas { grid-template-columns: 1fr; gap: 28px; }
  .detalhe-prato { grid-template-columns: 1fr; gap: 20px; }
  .grade-corte { grid-template-columns: 1fr; }
  .dois-campos { grid-template-columns: 1fr; }

  /* A1 · os indicadores em 2×2. O `auto-fit minmax(190px)` dava 4 colunas a 1.024 px, com
     ~190 px cada — número grande em caixa apertada, que é o que a rodada 3 recusou. Dois por
     linha devolve ~460 px a cada um. */
  .grade-kpi { grid-template-columns: repeat(2, 1fr); }

  /* T5 · três colunas de foto. O `auto-fill minmax(190px)` dava 4 aqui e 5 logo acima; o
     desenho pediu 3, que é o que deixa a foto grande o bastante para decidir sem abrir. */
  .grade-feed { grid-template-columns: repeat(3, 1fr); }

  /* ⛔ ALVO DE 44 px em tudo que se toca abaixo de 1.024. A barra já tinha; o conteúdo não.
     Dedo não tem ponteiro: alvo de 30 px num tablet erra o vizinho, e a pessoa desfaz o que não
     queria ter feito. `box-sizing` junto, senão o padding some dentro da altura. */
  .btn, button, input[type="submit"], .input, select, textarea {
    min-height: 44px; box-sizing: border-box;
  }
  .ver-prato, .aba-ordem, .aba-periodo, .menu-empresa-todas {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* Em tela estreita o menu ocupa a barra inteira: painel de 260 px preso à direita de uma
   barra de 390 px sai da tela. */
@media (max-width: 860px) {
  /* O painel deixa de pendurar no chip e passa a pendurar na BARRA — sem isto ele se ancora na
     página e cai a 850 px do topo, fora da tela, num menu que parecia funcionar na medição. */
  .topo { position: relative; }
  .menu-do-nome { position: static; }
  .menu-conta { left: 18px; right: 18px; min-width: 0; max-width: none; }
  .menu-conta-item, .chip-da-casa { min-height: 44px; display: flex; align-items: center; }
  .menu-conta-eu { flex-direction: column; align-items: flex-start; }
}

/* Escolher a empresa DENTRO da Equipe — a tela pergunta em vez de mandar embora. */
.lista-escolher-empresa { list-style: none; margin: 0; padding: 0; }
.lista-escolher-empresa > li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--color-divider); padding: 14px 0;
}
.lista-escolher-empresa .nome { display: block; font-weight: 700; font-size: 17px; }
.lista-escolher-empresa .detalhe { font-size: 14px; color: var(--color-neutral-900); }
.link-camera { color: var(--color-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T9 · Cardápios (do titular) · P1 · Propostas
   Alto contraste, como o resto: borda sólida, texto escuro, nada translúcido. */
.onde-estou {
  margin: 12px 0 0; font-size: 15px; color: var(--color-neutral-900);
  border-left: 4px solid var(--color-text); padding: 6px 12px;
}
.lista-cardapios, .lista-propostas { list-style: none; margin: 0; padding: 0; }
.cartao-cardapio {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 2px solid var(--color-divider); padding: 18px 20px; margin-bottom: 12px;
}
.cartao-cardapio h2 { font-size: 21px; margin: 0; }
.cartao-cardapio .meta, .cartao-proposta .meta {
  margin: 6px 0 8px; font-size: 15px; color: var(--color-neutral-900);
}
.cartao-cardapio-acoes { display: flex; gap: 8px; align-items: center; }
.cartao-cardapio .ligacoes { margin: 8px 0 0; font-size: 15px; font-weight: 700; }
/* T9b · os produtos DE UM cardápio: uma linha por produto, o botão de tirar ao lado. */
.lista-produtos-do-cardapio { list-style: none; margin: 0; padding: 0; }
/* T9b · "N produtos do cardápio não aparecem nesta empresa": borda sólida, texto escuro. */
.aviso-isolados {
  margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--color-neutral-900);
  border: 2px solid var(--color-divider); padding: 10px 14px;
}
.lista-produtos-do-cardapio > li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--color-divider); padding: 12px 0;
}
.lista-produtos-do-cardapio > li:last-child { border-bottom: 1px solid var(--color-divider); }
.lista-produtos-do-cardapio .nome { font-weight: 700; font-size: 17px; }
.lista-produtos-do-cardapio .detalhe { font-size: 14px; color: var(--color-neutral-900); margin-left: 8px; }
.cartao-proposta { border: 2px solid var(--color-divider); padding: 18px 20px; margin-bottom: 14px; }
.cartao-proposta h2 { font-size: 21px; margin: 0; }
/* O que muda: rótulo em peso, valor ao lado, uma linha por campo. */
.mudancas { margin: 6px 0 0; display: grid; gap: 6px; }
/* Duas colunas fixas: o rótulo numa, o valor noutra — um valor longo quebra DEBAIXO de si mesmo,
   não empurra o rótulo para uma linha só dele. */
.mudancas > div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; font-size: 15px; }
.mudancas dt { font-weight: 700; margin: 0; }
.mudancas dd { margin: 0; color: var(--color-neutral-900); }
.decisao { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
/* Os dois botões têm o MESMO peso: nenhum é o "certo". Título e alcance dentro do botão,
   para a pessoa ler o efeito antes do clique. */
.btn-decisao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  height: auto; padding: 12px 16px; text-align: left; max-width: 26rem; white-space: normal;
}
.btn-decisao strong { font-size: 16px; }
.btn-decisao span { font-size: 13px; font-weight: 500; color: var(--color-neutral-900); }

/* ⭐ 22/set — "Fora do padrão": a aba do que não passou na nota de corte (calendário + busca +
   as duas visões, Hoje e Cardápio). Decisão do dono; a tela Qualidade ficou com o corte e os
   critérios. Alto contraste, tema claro — a regra dura do produto. */
.cabecalho-fora { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.controles-calendario { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.abas-visao { display:flex; gap:4px; margin:18px 0 0; border-bottom:2px solid var(--color-neutral-300, #d9d9d9); }
.aba-visao { padding:10px 18px; font-weight:600; font-size:15px; text-decoration:none;
  color:var(--color-neutral-800, #444); border:2px solid transparent; border-bottom:none;
  border-radius:8px 8px 0 0; position:relative; top:2px; }
.aba-visao:hover { background:var(--color-neutral-100, #f2f2f2); }
/* A aba atual é sólida e escura — nada de opacidade baixa: o dono reclamou disso com todas as letras. */
.aba-visao-atual { background:#fff; border-color:var(--color-neutral-300, #d9d9d9);
  border-bottom:2px solid #fff; color:#111; }

.sabor-da-linha { font-weight:600; color:#1f1f1f; }

.tabela-cardapio { width:100%; border-collapse:collapse; margin-top:4px; }
.tabela-cardapio th, .tabela-cardapio td { text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--color-neutral-300, #d9d9d9); }
.tabela-cardapio thead th { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:#444; }
.tabela-cardapio .coluna-numero { text-align:right; font-variant-numeric:tabular-nums; }
.tabela-cardapio tbody th { font-weight:600; color:#111; }
.linha-reprovou td:first-of-type strong { color:#9b1c1c; }
/* Sabor que o revisor não reconheceu: é um fato, não um produto — e não se clica. */
.sem-identidade { font-style:italic; color:#5a5a5a; font-weight:500; }
/* O resumo com link da tela Qualidade — ela mostra o efeito da régua, e a lista mora na aba. */
.resumo-do-corte { margin:14px 0 0; font-size:15px; color:#1f1f1f; }
.ver-fora { font-weight:700; white-space:nowrap; }
/* A ausência de régua é o estado que mais muda o produto — ela se lê antes da dica. */
.falta-o-corte { margin:14px 0 0; font-size:15px; color:#8a5300; }

/* ⭐ 22/set — "detalhes para contar" na T10: o que contar + quanto em cada tamanho.
   ⭐ 24/set — a coluna REGRA entrou (desenho, 4ª rodada), e com ela o grid virou de CINCO colunas:
   o que contar · regra · broto · grande · tirar. O botão de tirar nasce `hidden` no HTML e só o
   JavaScript o revela, então a quinta coluna fica vazia sem ele — é por isso que ela é `auto` e
   não uma largura fixa, que abriria um buraco na linha em quem não tem JS. */
.detalhes-contaveis-campo { margin-top:6px; }
.linhas-de-detalhe { display:flex; flex-direction:column; gap:6px; }
.bloco-de-detalhe + .bloco-de-detalhe { margin-top:6px; }
.cabecalho-detalhe,
.linha-de-detalhe { display:grid; grid-template-columns: 1fr 118px 84px 84px auto; gap:8px; align-items:center; }
.cabecalho-detalhe { margin-bottom:6px; }
.cabecalho-detalhe span { font-size:13px; font-weight:700; color:#444; text-transform:uppercase; letter-spacing:.04em; }

/* ⛔ EM BRANCO × ZERO ficou VISUAL, não explicado (o desenho insistiu nisso): a caixa vazia é
   TRACEJADA — "não se confere neste tamanho" —, e com número ela fica sólida e em negrito, porque
   aí ela é uma afirmação que reprova. A legenda embaixo repete a mesma dupla. */
/* ⛔ A borda do `.input` é 1px na cor de divisória; TRACEJADA nessa espessura e nessa cor é
   invisível — medido no print de 24/set, onde a caixa vazia e a preenchida se liam iguais e a
   distinção que o quadro inteiro protege sumia. Por isso a vazia engrossa para 2px numa cor que
   se enxerga. ⚠️ `:placeholder-shown` só é verdade com placeholder no campo, então TODA caixa de
   contagem tem um (` `), inclusive as linhas em branco — sem ele a regra nunca casa. */
/* O rótulo por tamanho só aparece onde o cabeçalho da tabela não cabe (o celular). */
.campo-de-contagem { display:block; min-width:0; }
.nome-do-tamanho { display:none; }
.caixa-de-contagem { text-align:center; font-weight:400;
                     border:2px dashed color-mix(in srgb, var(--color-text) 40%, transparent); }
.caixa-de-contagem:not(:placeholder-shown) { border:2px solid var(--color-text); font-weight:700; }
.legenda-branco-zero { margin:10px 0 0; font-size:13px; color:#555; }
.amostra-em-branco,
.amostra-com-numero { display:inline-block; width:26px; height:20px; line-height:18px; text-align:center;
                      vertical-align:-4px; font-size:12px; border:2px solid var(--color-text); }
.amostra-em-branco { border-style:dashed; }
.amostra-com-numero { font-weight:700; }

/* ⭐ O SELO — o trabalho principal da 4ª rodada do desenho. Os dois quadros vizinhos se parecem e
   fazem coisas OPOSTAS, e um cliente que confunde os dois faz o sistema reprovar sobre o que era
   só descrição. Alto contraste: a informação NÃO pode depender só da cor. */
/* ⛔ `align-self` porque o `fieldset.grupo` é um FLEX COLUMN: sem ele o selo e o botão esticam
   até a borda e deixam de parecer selo e botão — o de cima, dentro de um `div`, ficava compacto e
   o de baixo não, e os dois têm de se ler como o mesmo tipo de coisa. */
.selo-do-bloco { align-self:flex-start; display:inline-block; margin:4px 0 0; padding:2px 8px; font-size:12px;
                 font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                 border:2px solid var(--color-text); }
.selo-reconhece { color:#1f1f1f; background:#fff; }
.selo-reprova { color:#fff; background:var(--color-text); }

/* A frase de prova: a régua abstrata dita como fato verificável. Cor de TEXTO quando é só a
   tradução; cor de aviso quando a condição escolhida nunca reprovaria (o "no mínimo 0"). */
.prova-do-detalhe { margin:4px 0 0; font-size:13px; color:#333; }
.prova-do-detalhe:empty { display:none; }
.prova-sem-regra,
.prova-nunca-reprova { color:#8a5300; font-weight:700; }

.somar-detalhe { align-self:flex-start; margin-top:10px; }
.tirar-detalhe { border:2px solid var(--color-text); background:#fff; cursor:pointer;
                 width:34px; height:34px; font-size:15px; line-height:1; padding:0; }
.tirar-detalhe:hover { background:var(--color-text); color:#fff; }

/* As pontes entre os dois quadros. São SUGESTÃO — o tom não é de erro. */
.pontes-entre-blocos { margin:12px 0 0; padding-left:20px; font-size:13px; color:#555; }
.pontes-entre-blocos li + li { margin-top:4px; }

@media (max-width: 560px) {
  .cabecalho-detalhe { display:none; }
  /* ⛔ O cabeçalho da tabela SOME aqui (não cabe), e sem ele as duas caixas de contagem ficam
     idênticas lado a lado — ninguém sabe qual é o broto. O `aria-label` já resolvia para leitor de
     tela; quem enxerga precisava do rótulo, e é ele que aparece agora. */
  .linha-de-detalhe { grid-template-columns: 1fr 1fr auto; align-items:end; }
  .linha-de-detalhe > .input:first-child { grid-column: 1 / -1; }
  .linha-de-detalhe select { grid-column: 1 / -1; }
  .nome-do-tamanho { display:block; font-size:11px; font-weight:700; color:#444;
                     text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
}
/* A busca respira depois dos cartões de número — o desenho separa os dois blocos. */
.lista-fora-do-padrao, .pagina .filtros + .lista-fora-do-padrao { margin-top: 16px; }
.cartoes-kpi + .filtros, .cartoes-kpi + form.filtros { margin-top: 26px; }

/* ⭐ 22/set — PEDIR ACESSO: a linha "Somente leitura" deixa de ser beco (desenho do dono, 4ª
   rodada). O fio de prazo e o aviso de fim usam cor de TEXTO, não de alarme: ter acesso
   emprestado não é problema, e perdê-lo no prazo combinado também não. */
.fio-de-acesso { margin: 10px 0 0; font-size: 14px; color: var(--color-text); }
.fio-de-acesso .dica { display: block; margin-top: 2px; }
.acesso-terminou { margin: 8px 0 0; font-size: 14px; color: #8a5300; }
.pedir-acesso { margin-top: 10px; }
.pedir-acesso > summary { display: inline-flex; cursor: pointer; list-style: none; font-size: 13px; }
.pedir-acesso > summary::-webkit-details-marker { display: none; }
.painel-pedido { margin-top: 10px; padding: 14px; border: 2px solid var(--color-text); max-width: 420px; }
.formulario-pedido { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.formulario-pedido .input { width: 100%; box-sizing: border-box; }

/* ⭐ 22/set — os dois blocos de acesso na Equipe (desenho do dono, 4ª rodada). */
.lista-pedidos-acesso, .lista-acessos-concedidos { list-style: none; margin: 0; padding: 0; }
.lista-pedidos-acesso li, .lista-acessos-concedidos li {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--color-neutral-300);
}
.lista-pedidos-acesso li:first-child, .lista-acessos-concedidos li:first-child {
  border-top: 1px solid var(--color-neutral-300);
}
.quem-pediu { min-width: 180px; display: flex; flex-direction: column; }
.o-que-pediu { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 2px; }
.motivo-do-pedido { font-size: 14px; color: var(--color-neutral-900); font-style: italic; }
/* ⚠️ `button_to` gera um FORM por botão — sem isto os três prazos empilham em coluna, e o
   desenho os põe lado a lado, porque eles são UMA escolha entre três. */
.decidir-pedido { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.decidir-pedido form { display: inline-flex; margin: 0; }
.lista-acessos-concedidos li > div:first-child { flex: 1; min-width: 280px; font-size: 15px; }
.lista-acessos-concedidos li form { display: inline-flex; margin: 0; }
/* A decisão do pedido: o prazo é UMA escolha (rádio), conceder e negar são DUAS decisões. */
.decidir-pedido { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.decidir-pedido .prazos { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.decidir-pedido .prazos legend { float: left; width: 100%; margin-bottom: 4px; }
.botoes-da-decisao { display: flex; gap: 8px; }
.porque-e-do-dono { margin: 0 0 4px; max-width: 70ch; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   T10 · o produto em DUAS COLUNAS — campos à esquerda, fotos de referência à direita
   ══════════════════════════════════════════════════════════════════════════════════════
   ⛔ 24/set — o desenho (`T10 Produto.dc.html`) sempre foi assim: `minmax(0,640px)` para os
   campos e `minmax(0,400px)` para as fotos, LADO A LADO. Eu tinha empilhado numa coluna só, e o
   dono procurou as fotos três vezes sem achar — primeiro porque o bloco só existia na edição,
   depois porque estava no fim da página, e por fim porque mesmo no lugar certo do fluxo ele cai
   abaixo da dobra. No desenho as fotos NUNCA saem da tela: elas não estão no fluxo do formulário.
   "Está na página" e "a pessoa vê" são coisas diferentes, e foi o dono quem teve de me dizer. */
/* ⛔ `.formulario` tem `max-width: 620px`, e a grade vive DENTRO dele: sem soltar esse teto, as
   duas colunas dividiam 620 px e a da esquerda ficava com ~180 — "Categoria" virava "tra". Visto
   no print da página inteira, não no CSS. O modificador solta o teto SÓ neste formulário. */
.formulario-produto { max-width: 1060px; }

/* As medidas são as do desenho: 640 para os campos, 400 para as fotos. */
.colunas-produto {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(280px, 380px);
  gap: 18px 44px;
  align-items: start;
}
.coluna-campos { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* GRUDADA: o formulário é longo, e a coluna curta acompanharia a rolagem até sumir. */
.coluna-fotos { position: sticky; top: 16px; min-width: 0; }
.coluna-fotos h2 { margin-top: 0; }

/* ⛔ Em tela estreita volta a UMA coluna, e as fotos vêm DEPOIS dos campos — não antes: num
   celular, empurrar o nome do produto para baixo da galeria faria a pessoa rolar para começar
   a preencher. A âncora `#fotos-de-referencia` continua alcançando. */
@media (max-width: 900px) {
  .colunas-produto { grid-template-columns: 1fr; }
  .coluna-fotos { position: static; }
}