/* trousseau.css: o que é só do Portal Trousseau. Lê os tokens do cheff-ui.css (cópia fiel do Portal
   Cheff, sem edição); nenhuma cor literal aqui, só token. Prefixo por componente. */

/* ---------- logo: altura de cada lugar (decisão registrada em DECISIONS.md) ----------
   A logo TROUSSEAU é vetor 7:1 (a do Portal Cheff é quase quadrada). Lateral: 24px de altura = 168px
   de largura nos 199px livres da lateral de 248px (padding 12 + margem 12 de cada lado). Topo do
   celular: 18px = 126px. Login: 32px = 224px, cabe em 342px de tela de 390px. */
.side__logo{ height:24px; width:auto }
.topbar__logo{ height:18px; width:auto }
.auth__logo{ height:32px; width:auto }

/* ---------- login ---------- */
.login__titulo{ text-align:center; margin:0 0 var(--sp-6) }

/* ---------- stat card em duas colunas (tela de bipe) ---------- */
.stats--duo{ grid-template-columns:repeat(2,minmax(0,1fr)) }

/* ---------- tela de bipe ----------
   Campo do leitor: padrão de campo (fonte >= 16px), em tamanho de mira por ser o gesto da tela
   (mesmo raciocínio do campo de busca da home do Portal Cheff). Sem transição: o bipe não anima. */
.field--bipe input{ font-size:22px; height:64px; letter-spacing:.02em; transition:none }
@media (max-width:759px){ .field--bipe input{ font-size:20px; height:58px } }
.field--sem-foco input{ border-color:var(--amber); background:var(--amber-bg) }
.field--sem-foco input::placeholder{ color:var(--amber); opacity:1 }

.bipe{ overflow:hidden }
.bipe__ultimo{ padding:var(--sp-4); border-top:1px solid var(--line-card); border-left:3px solid var(--line-2);
  display:flex; flex-direction:column; gap:var(--sp-2) }
.bipe__titulo{ margin:0; overflow-wrap:anywhere }
.bipe--ok .bipe__ultimo{ border-left-color:var(--green) }
.bipe--alerta .bipe__ultimo{ border-left-color:var(--amber) }
.bipe--erro .bipe__ultimo{ border-left-color:var(--red) }
.bipe--neutro .bipe__ultimo{ border-left-color:var(--blue) }
.bipe__texto{ margin:0 0 var(--sp-4); font-size:13px; color:var(--fg-2) }

/* Opções do diálogo de escolha: botões grandes, escolha só por clique ou toque. */
.bipe-opcoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--sp-2) }
.bipe-opcao{ min-height:56px; text-align:left; padding:var(--sp-3); border-radius:var(--r-2); border:1px solid var(--line-2);
  background:var(--surface); color:var(--fg); font:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  transition:transform var(--t-press) var(--ease-out), border-color var(--t-fast) var(--ease-out) }
.bipe-opcao:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){ .bipe-opcao:hover{ border-color:var(--fg); background:var(--hover) } }
.bipe-opcao--destaque{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue) }
@media (max-width:759px){ .bipe-opcoes{ grid-template-columns:1fr } .bipe-opcao{ min-height:56px } }

/* ---------- fechamento ---------- */
.fech__lista{ margin:var(--sp-2) 0 0; padding-left:var(--sp-5) }
.fech__texto{ margin:0 0 var(--sp-4); font-size:13px; color:var(--fg-2) }
.card__body .u-hstack + .u-hstack{ margin-top:var(--sp-3) }

/* ---------- busca de produto (Conferência) ---------- */
.bp__lista{ border:1px solid var(--line-card); border-radius:var(--r-2); max-height:280px; overflow-y:auto }
.bp__lista[hidden]{ display:none }

/* Título do diálogo recebe foco por programa (para o Enter do leitor não cair numa opção); não é alvo de navegação, então sem anel. */
.modal__title:focus{outline:none}