/* KeepInventory404, design system v3 "caixa do mercado" + liquid glass.
   Ver docs/DESIGN_SYSTEM.md (tokens, camadas de vidro e medições de contraste). */

/* Fontes dentro do app (sem depender do Google na hora de abrir, e no ar mesmo
   sem internet). Arquivos variáveis, só o alfabeto latino, licença OFL em fonts/. */
@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/urbanist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Cores por papel */
  --paper: #FFFFFF;
  --shelf: #F2F3F1;
  --ink: #161817;
  --ink-2: #3F4541;
  --ink-disabled: #A3AAA6;
  --line: #D5D9D6;
  --entrada: #17693F;
  --saida: #8E1B5C;
  --contagem: #1F3F9E;
  --acabando: #F2C230;
  --on-acabando: #161817; /* texto sobre o amarelo de "acabando": igual nos dois temas */
  --danger: #B42318;
  --on-mode: #FFFFFF;
  --scanline: #E5242B;
  --mode: var(--ink);
  --focus: var(--ink);

  /* Raios (concêntricos: interno = externo - espaçamento) */
  --r-sheet: 28px;
  --r-bar: 26px;       /* barras flutuantes, padding 8px */
  --r-in-bar: 18px;    /* botões dentro das barras: 26 - 8 */
  --r-control: 14px;   /* botões, campos, seletor */
  --r-media: 20px;     /* visor da câmera */
  --r-thumb: 10px;
  --r-tag: 8px;

  /* Material (liquid glass). Opacidades medidas no pior fundo: ver docs. */
  --glass-regular: color-mix(in oklab, var(--paper) 72%, transparent);
  --glass-thick: color-mix(in oklab, var(--paper) 88%, transparent);
  --glass-solid: var(--paper);
  --glass-media: color-mix(in oklab, #161817 66%, transparent);
  --glass-blur: 24px;
  --glass-blur-thick: 28px;
  --glass-saturate: 140%;
  --glass-edge: rgba(22, 24, 23, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.70);
  --glass-shadow: 0 10px 32px rgba(22, 24, 23, 0.14);
  --img-outline: oklch(0 0 0 / 0.1);
  /* Validade: o âmbar de "acabando", que também é a cor com que o iPhone marca
     o texto reconhecido pela câmera. Destaque só no que importa na leitura:
     a mira que viu uma data, a data mais provável, o "Sim", o caminho
     recomendado. --val-ink: texto e ícones (6,8:1 no papel). */
  --val: #F2C230;
  --val-ink: #7A5200;
  --val-soft: color-mix(in oklab, var(--val) 28%, var(--paper));

  /* Schibsted Grotesk nos textos (firme, de jornal, boa em frase longa);
     Urbanist nos títulos, nomes e números (geométrica, redonda, com charme). */
  --font-ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Urbanist', 'Schibsted Grotesk', system-ui, sans-serif;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* Molas como as do iPhone, geradas de uma mola física (amortecimento 0,86 e
     0,72). Navegador sem linear() cai na curva --ease. */
  --spring: var(--ease);
  --spring-bouncy: var(--ease);
  --bar-space: calc(96px + var(--safe-bottom));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161817;
    --shelf: #1F2220;
    --ink: #F1F2F0;
    --ink-2: #BFC5C1;
    --ink-disabled: #5E6561;
    --line: #343936;
    --entrada: #5CC48A;
    --saida: #E58CC0;
    --contagem: #8FA5F5;
    --danger: #FF8A7A;
    --on-mode: #161817;
    --glass-regular: color-mix(in oklab, var(--paper) 78%, transparent);
    --glass-thick: color-mix(in oklab, var(--paper) 90%, transparent);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    --img-outline: oklch(1 0 0 / 0.1);
    --val-ink: #F5C451;
    --val-soft: color-mix(in oklab, var(--val) 20%, var(--paper));
    color-scheme: dark;
  }
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.043 3.6%, 0.142 7.1%, 0.267 10.7%, 0.396 14.3%, 0.518 17.9%, 0.626 21.4%, 0.717 25%, 0.792 28.6%, 0.851 32.1%, 0.897 35.7%, 0.932 39.3%, 0.957 42.9%, 0.975 46.4%, 0.987 50%, 0.995 53.6%, 1 57.1%, 1.003 60.7%, 1.005 67.9%, 1.003 82.1%, 1);
    --spring-bouncy: linear(0, 0.061 4.2%, 0.202 8.3%, 0.373 12.5%, 0.541 16.7%, 0.689 20.8%, 0.81 25%, 0.9 29.2%, 0.963 33.3%, 1.004 37.5%, 1.026 41.7%, 1.038 50%, 1.029 58.3%, 1.016 66.7%, 1.006 75%, 1.001 83.3%, 0.999 91.7%, 1);
  }
}

.mode-entrada { --mode: var(--entrada); }
.mode-saida { --mode: var(--saida); }
.mode-contagem { --mode: var(--contagem); }
/* Validade: o âmbar das datas; texto escuro (branco no amarelo não se lê). */
.mode-validade { --mode: var(--val); --on-mode: #161817; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* Base do texto: 17 px, ou o tamanho escolhido no iPhone (Dynamic Type, ver
   app.js). Textos de até 22 px usam rem e crescem junto; números de
   etiqueta, seletor e rótulos da barra de abas ficam fixos, como no iOS. */
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
/* Sem zoom de toque duplo (o celular esperava um segundo toque e dava zoom);
   o gesto de pinça continua funcionando, por acessibilidade. */
html, body, a, button, input, label, select, textarea { touch-action: manipulation; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.has-sheet { overflow: hidden; }

h1, h2, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Sobre fundos na cor do modo, o anel usa a cor do texto do modo (contraste medido ≥ 6,7:1). */
.band, .toast.has-mode, .mode-btn, .btn-mode, .btn-danger { --focus: var(--on-mode); }
.cam-tools { --focus: #FFFFFF; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 22px; height: 22px; flex: none; }

/* ---------- Tipografia ---------- */

.page-title, .band-title, .sheet-title {
  font-family: var(--font-num);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.list-title { text-wrap: balance; }
.list-title-icon { display: flex; align-items: center; }

/* Histórico de cupons */
.cupons { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); }
.cupom-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-thumb); background: var(--mode); color: var(--on-mode); }
.cupom-total { flex: none; font-family: var(--font-num); font-weight: 800; line-height: 1; }
.lead { text-wrap: pretty; }
.sheet-text, .empty, .empty-state p, .empty-filter p { color: var(--ink); text-wrap: pretty; }
.empty { padding-block: 16px; }
.stock-note { font-weight: 700; color: var(--ink); }

/* ---------- Estrutura ---------- */

.screen { min-height: 100dvh; display: flex; flex-direction: column; }
.content { padding: 8px var(--gutter) calc(32px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 8px; }

.topbar {
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + var(--safe-top)) 8px 8px;
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  width: 48px; height: 48px; flex: none;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--r-control); background: transparent;
  text-decoration: none;
  transition-property: scale;
}
.icon-btn:active { background: color-mix(in srgb, currentColor 14%, transparent); scale: 0.96; }

/* Faixa do modo: estrutura, não flutua, então não é vidro. */
.band {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  background: var(--mode);
  color: var(--on-mode);
  /* Entrada ↔ Saída: a cor da faixa muda junto com a pílula, sem piscar */
  transition: background-color 360ms var(--ease), color 360ms var(--ease);
  padding-block: calc(12px + var(--safe-top)) 16px;
  padding-inline: var(--gutter) 8px;
}
.band > .icon-btn:first-child { margin-inline-start: -8px; }
.band-text { display: flex; flex-direction: column; gap: 2px; flex: 1; padding-top: 4px; }
.band-title { font-size: 40px; }
.band-hint { font-size: 0.9412rem; text-wrap: pretty; }

/* ---------- Material: liquid glass ----------
   Só na camada que flutua sobre conteúdo que se move (ver mapa de camadas nos docs).
   Primeiro a versão sólida, legível sem backdrop-filter; o vidro entra por @supports. */

.glass-regular, .glass-thick {
  background: var(--glass-solid);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-regular {
    background: var(--glass-regular);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
  .glass-thick {
    background: var(--glass-thick);
    -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  }
}

/* Versão estática: mesmo preenchimento, borda e brilho, sem desfoque. Usada onde
   medimos que quase nada passa por baixo (barra da tela de leitura: <1% dos pixels). */
.glass-static { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Com uma folha aberta, o que fica atrás do véu não precisa de desfoque:
   mantém no máximo 2 camadas de vidro por tela no celular. */
body.has-sheet .glass-regular, body.has-sheet .home-tools, body.has-sheet .cam-tools { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Barra flutuante: rodapé do Armário e rodapés de ação das outras telas */
.floating-bar {
  position: fixed; z-index: 5;
  inset-inline: 12px; bottom: calc(12px + var(--safe-bottom));
  padding: 8px;
  border-radius: var(--r-bar);
}
.floating-bar .btn { width: 100%; border-radius: var(--r-in-bar); }
.has-floating-bar { padding-bottom: var(--bar-space); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding-inline: 18px;
  border-radius: var(--r-control); border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none; text-align: center;
  transition-property: scale;
}
.btn:active:not(:disabled) { scale: 0.96; }
.btn:disabled, .btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.btn.is-disabled:active { scale: 1; }
.btn-sm { min-height: 44px; padding-inline: 12px; font-size: 0.9412rem; }
.btn-sm .icon { width: 20px; height: 20px; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-mode { background: var(--mode); color: var(--on-mode); }
.btn-quiet { background: var(--paper); color: var(--ink); }
.btn-quiet:active:not(:disabled) { background: var(--shelf); }
.btn-danger { background: var(--danger); color: var(--on-mode); }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-link { background: none; border: 0; text-decoration: underline; min-height: 44px; font-weight: 400; }
.file-btn { cursor: pointer; }
/* O campo de arquivo fica escondido só visualmente: continua no Tab e abre com Enter ou Espaço */
.file-btn:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Etiqueta de gôndola ---------- */

.tag {
  flex: none;
  display: inline-grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-num);
  line-height: 1;
  font-weight: 800;
}
.tag.is-low { background: var(--acabando); color: var(--on-acabando); }
.tag.is-zero, .tag.is-empty { background: transparent; color: var(--ink-2); outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.tag.is-counted { background: var(--contagem); color: var(--on-mode); }

/* ---------- Início (Armário) ---------- */

.home-head {
  display: flex; justify-content: space-between; gap: 8px;
  padding-inline: var(--gutter) 8px;
}
.screen-home .home-head { align-items: center; }

/* Linha do armário: o link abre o produto; o "−" ao lado dá baixa de 1 */
.row-item { align-items: center; }
.row-item .row { flex: 1; min-width: 0; }
.row-minus, .row-minus-space { flex: none; }
.row-minus {
  display: grid; place-items: center;
  background: var(--paper);
  transition-property: scale, background-color;
}
.row-minus:active:not(:disabled) { scale: 0.96; background: var(--shelf); }
.row-minus:disabled { color: var(--ink-disabled); }

/* Busca e filtros ficam presos no topo, em vidro, enquanto a lista passa por baixo */
.home-tools {
  position: sticky; top: 0; z-index: 4;
  margin-top: 12px;
  padding: calc(8px + var(--safe-top)) var(--gutter) 0;
  display: flex; flex-direction: column; gap: 4px;
}
.home-tools.glass-thick { box-shadow: inset 0 -1px 0 var(--glass-edge); }
.search {
  display: flex; align-items: center; gap: 10px;
  padding-inline: 14px;
  background: color-mix(in oklab, var(--ink) 6%, transparent); border: 1px solid transparent; border-radius: var(--r-control);
}
.search:focus-within { border-color: var(--ink); background: var(--paper); }
.search:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }
.search input::placeholder { color: var(--ink-2); }
/* O X do próprio navegador some: o nosso aparece sempre que há texto, com o
   campo em foco ou não, e tem área de toque de 44 px sem alargar a barra. */
.search input { appearance: none; -webkit-appearance: none; }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-clear {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin-inline-end: -12px; padding: 0;
  border: 0; background: none; color: var(--paper); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.search-clear[hidden] { display: none; }
.search-clear > span {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
  transition: scale 150ms var(--ease), background-color 150ms var(--ease);
}
.search-clear .icon { width: 10px; height: 10px; }
.search-clear:active > span { scale: 0.85; background: color-mix(in oklab, var(--ink) 60%, transparent); }
.search-clear:focus-visible { outline: none; }
.search-clear:focus-visible > span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* O pedaço do nome que bateu fica forte; o resto do nome, mais claro (como a
   busca do iPhone). Só nos nomes que têm destaque: um produto achado pela
   marca continua com o nome normal. */
.row-name:has(mark.hit) { color: var(--ink-2); }
mark.hit { background: none; color: var(--ink); }
/* "Mais 2 produtos com … fora de Cozinha" no fim da lista */
.search-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px var(--gutter) 4px; padding: 12px 16px; border-radius: var(--r-control); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.search-more p { margin: 0; font-size: 0.8824rem; color: var(--ink-2); text-wrap: pretty; }
.search-more .btn { flex: none; }

.tabs { display: flex; gap: 20px; }
.tab {
  flex: none; height: 48px; padding: 0;
  border: 0; background: none;
  font-size: 0.9412rem; font-weight: 700; color: var(--ink-2);
  box-shadow: inset 0 -3px 0 transparent;
}
.tab[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }

.draft-note {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px var(--gutter) 0; padding: 8px 8px 8px 14px;
  background: var(--shelf); border-radius: calc(var(--r-control) + 8px);
}

.shelf { padding-bottom: 16px; }
.shelf .empty { padding: 24px var(--gutter); }
.empty-state { display: flex; flex-direction: column; }
.empty-lead { font-family: var(--font-num); font-weight: 800; line-height: 1.1; }
.empty-filter { padding: 24px var(--gutter); display: flex; flex-direction: column; gap: 12px; }

/* Linhas: prateleira contínua separada por fio */
.rows > li { border-bottom: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px var(--gutter);
  background: none; border: 0; text-align: start; text-decoration: none; color: inherit;
}
.row:active { background: var(--shelf); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-name { font-family: var(--font-num); font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-sub { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.thumb {
  position: relative; flex: none; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--r-thumb); background: var(--shelf);
}
.thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  border-radius: inherit;
  outline: 1px solid var(--img-outline); outline-offset: -1px;
}
.thumb-md { width: 64px; height: 64px; border-radius: 12px; }
.thumb-lg { width: 104px; height: 104px; border-radius: 16px; }
.thumb .icon { width: 50%; height: 50%; color: var(--ink-2); opacity: 0.45; }

/* ---------- Leitor ---------- */

.cam-host { padding: 12px var(--gutter) 0; }
.viewfinder {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; max-height: 46dvh; width: 100%;
  border-radius: var(--r-media); background: #0F1110;
}
.viewfinder.is-compact { aspect-ratio: 16 / 9; max-height: 30dvh; min-height: 180px; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.aim {
  position: absolute; left: 10%; right: 10%; top: 44%; height: 34%;
  transform: translateY(-50%);
  border-radius: 4px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* Cantos da mira, como os do visor de um leitor de mão */
.aim::before, .aim::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(#fff, #fff) left top / 22px 3px no-repeat,
    linear-gradient(#fff, #fff) left top / 3px 22px no-repeat,
    linear-gradient(#fff, #fff) right top / 22px 3px no-repeat,
    linear-gradient(#fff, #fff) right top / 3px 22px no-repeat;
}
.aim::after { transform: scaleY(-1); }
/* A linha vermelha do leitor do caixa */
.aim-line {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: var(--scanline);
  box-shadow: 0 0 6px var(--scanline);
}
.aim.is-hit .aim-line { animation: hit 360ms var(--ease); }
@keyframes hit {
  0% { height: 100%; top: 0; opacity: 0.55; }
  100% { height: 2px; top: 50%; opacity: 1; }
}
.viewfinder.is-off .aim { display: none; }
.cam-msg {
  position: absolute; inset: 0 0 64px; display: grid; place-items: center;
  padding: 20px; text-align: center; color: #F1F2F0; font-size: 1rem; text-wrap: pretty;
}

/* Controles da câmera: um grupo de vidro escuro sobre a imagem (conteúdo que se move) */
.cam-tools {
  position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(22, 24, 23, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #F1F2F0;
  max-width: calc(100% - 20px);
}
.cam-tool {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 44px;
  border: 0; border-radius: 999px; background: transparent; color: inherit;
  font-weight: 700; font-size: 0.9412rem;
  transition-property: scale;
}
.cam-tool:active { scale: 0.96; background: rgba(255, 255, 255, 0.14); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cam-tools {
    background: var(--glass-media);
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate));
    backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  }
}
/* Lanterna ligada: preenchida, não só anunciada */
.cam-tool[aria-pressed="true"] { background: #F1F2F0; color: #161817; }

/* Cupom da sessão */
.receipt { padding: 20px var(--gutter) 16px; }
.receipt-lines { display: flex; flex-direction: column; }
.receipt-line { display: flex; align-items: baseline; gap: 6px; padding-block: 5px; }
.receipt-name { min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; }
.receipt-dots { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.receipt-n { flex: none; font-family: var(--font-num); font-weight: 800; line-height: 1; }
.receipt-empty { color: var(--ink-2); }
/* Linha da sessão tocável: abre a edição antes de concluir */
.receipt-edit {
  min-height: 44px; border: 0; background: none; color: inherit; text-align: start;
  border-radius: 8px; margin-inline: -8px; padding-inline: 8px; width: calc(100% + 16px);
}
.receipt-edit:active { background: var(--shelf); }
.receipt-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 8px;
  border-top: 3px double var(--ink);
  font-weight: 700;
}

/* ---------- Contagem e revisão ---------- */

.count-lists { padding-bottom: 16px; }
.count-lists .list-title, .count-lists .empty { padding-inline: var(--gutter); }
.count-lists .rows { border-top: 1px solid var(--line); }

.diff-list { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); }
.diff { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
.diff-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.diff-qty { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diff-delta { font-family: var(--font-num); font-weight: 800; font-size: 26px; min-width: 44px; text-align: end; }
.diff-delta.is-up { color: var(--entrada); }
.diff-delta.is-down { color: var(--saida); }

.choice { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 1rem; }
.radio input { width: 22px; height: 22px; accent-color: var(--ink); }

/* ---------- Produto ---------- */

.product-hero { display: grid; align-items: end; padding-block: 8px 20px; }
.product-hero > .thumb { grid-area: foto; }
.product-hero > .tag { grid-area: etiqueta; justify-self: end; }
.product-hero > .product-meta { grid-area: info; }
.product-hero .page-title { line-height: 1.12; overflow-wrap: break-word; }
/* Correção de estoque: seletor e botão lado a lado, o botão só aparece quando muda */
.product-code { font-size: 0.8235rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.product-head { display: flex; gap: 14px; align-items: flex-start; }
.product-head.is-loading .product-name { color: var(--ink-2); }
.product-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.product-name { line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.product-sub { color: var(--ink-2); font-size: 0.9412rem; }
.product-stock { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.product-stock-label { font-size: 0.7647rem; color: var(--ink-2); white-space: nowrap; }

.history li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; border-bottom: 1px solid var(--line); }
.history-qty { color: var(--ink-2); text-align: end; font-variant-numeric: tabular-nums; }
.history-when { grid-column: 1 / -1; color: var(--ink-2); }
.history .type-entrada > span:first-child { color: var(--entrada); }
.history .type-saida > span:first-child { color: var(--saida); }
.history .type-contagem > span:first-child { color: var(--contagem); }
.history strong { color: var(--ink); }

/* ---------- Escolha entre produtos do mesmo código ---------- */

.pick { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); }
.pick > li { border-bottom: 1px solid var(--line); }
.pick-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 76px; padding: 12px var(--gutter);
  background: none; border: 0; text-align: start;
}
.pick-row .row-name { display: block; overflow: visible; overflow-wrap: break-word; hyphens: auto; }
.pick-row:active { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.pick-row[aria-disabled="true"] .row-name, .pick-row[aria-disabled="true"] .thumb { opacity: 0.5; }

/* Sugestões das lojas no campo de nome */
.suggest { margin-top: 4px; }
.suggest-row { min-height: 64px; padding-block: 8px; }
.suggest-row .row-name { font-size: 0.9412rem; }
.suggest-status { font-size: 0.8824rem; color: var(--ink-2); min-height: 0; }
.suggest-status:empty { display: none; }

/* ---------- Formulários ---------- */

.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-label { font-size: 0.8824rem; font-weight: 700; }
.field-error { color: var(--danger); font-weight: 700; }
.input {
  padding-inline: 14px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--shelf); color: var(--ink);
}
.input::placeholder { color: var(--ink-2); }
.input:focus { outline: none; border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.input-code { font-size: 26px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 52px; height: 30px; border-radius: 15px; margin: 0;
  background: var(--ink-disabled); position: relative; cursor: pointer;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--paper);
  transition-property: translate; transition-duration: 150ms; transition-timing-function: var(--ease);
}
.switch:checked { background: var(--ink); }
.switch:checked::after { translate: 22px 0; }

/* Seletor de quantidade: número grande condensado entre − e + */
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; }
.stepper-btn {
  width: 64px; height: 64px; border-radius: var(--r-control);
  border: 1px solid var(--ink); background: var(--paper);
  display: grid; place-items: center;
  transition-property: scale;
}
.stepper-btn .icon { width: 26px; height: 26px; }
.stepper-btn:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.stepper-btn:active:not(:disabled) { background: var(--shelf); scale: 0.96; }
.stepper-value {
  width: 100%; min-width: 0; border: 0; background: none; text-align: center;
  font-family: var(--font-num); line-height: 1;
  font-weight: 800;
  color: var(--ink);
  border-radius: var(--r-control);
}
.stepper-value:focus { outline: none; background: var(--shelf); }
.stepper-value:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stepper-label { font-weight: 700; font-size: 1.0588rem; text-align: center; }
.stepper-sm { grid-template-columns: 52px 1fr 52px; }
.stepper-sm .stepper-btn { width: 52px; height: 52px; }

/* ---------- Folha inferior (vidro grosso + véu) ---------- */

#sheet-root, .sheet-ghost { position: fixed; inset: 0; z-index: 20; }
.sheet-ghost { pointer-events: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 17, 16, 0.38); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--gutter) calc(20px + var(--safe-bottom));
  transform: translateY(100%);
  transition-property: transform, opacity; transition-duration: 520ms; transition-timing-function: var(--spring);
}
.sheet:focus { outline: none; }
/* Arrastando pela alça: a folha segue o dedo sem atraso */
.sheet.is-dragging { transition: none; }
/* O cupom não flutua sobre conteúdo em movimento: o vidro só mostrava a câmera
   borrada atrás do papel. Material sólido, mesma borda e brilho. */
.sheet.sheet-solid { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet.is-open { transform: translateY(0); }
/* Saída mais suave que a entrada: desce 12px e some */
.sheet-ghost .sheet-backdrop { transition: opacity 160ms ease-out; }
.sheet-ghost.is-leaving .sheet-backdrop { opacity: 0; }
.sheet-grip { width: 100%; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-grip::after { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--ink-disabled); }
.sheet-body { display: flex; flex-direction: column; gap: 16px; }
.sheet-title { padding-inline-end: 44px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.sheet .input { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.sheet .input:focus { background: var(--paper); }
@media (min-width: 640px) {
  .sheet { left: 50%; right: auto; width: 560px; transform: translate(-50%, 100%); }
  .sheet.is-open { transform: translate(-50%, 0); }
}

/* ---------- Aviso ---------- */

.toast {
  /* Abaixo da folha (20): uma folha nova cobre o aviso; o Desfazer volta quando ela fecha. */
  position: fixed; z-index: 15;
  inset-inline: 12px; bottom: calc(92px + var(--safe-bottom));
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; min-height: 60px;
  background: var(--ink); color: var(--paper);
  border-radius: calc(var(--r-control) + 8px);
  box-shadow: var(--glass-shadow);
}
.toast.has-mode { background: var(--mode); color: var(--on-mode); }
.toast-text { flex: 1; text-wrap: pretty; }
.toast-action {
  flex: none; min-height: 44px;
  border: 1px solid currentColor; border-radius: var(--r-control); background: transparent; color: inherit;
  font-weight: 700;
}
/* Todas as telas têm barra flutuante embaixo; o aviso fica logo acima dela,
   longe do botão Fechar da faixa. */
@media (min-width: 640px) { .toast { inset-inline: auto; left: 50%; width: 480px; transform: translateX(-50%); } }

/* ---------- Leitor único: Entrada | Saída na faixa ---------- */
/* Trilho claro translúcido sobre a cor do modo; o escolhido fica cheio (on-mode)
   com o texto na cor do modo. Raio interno 14 = 18 − 4. */
.mode-switch {
  align-self: flex-start;
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 18px;
  background: color-mix(in oklab, var(--on-mode) 14%, transparent);
}
.mode-opt { display: block; cursor: pointer; }
.mode-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode-opt span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding-inline: 12px 16px; border-radius: 14px;
  font-family: var(--font-num); font-weight: 800; line-height: 1;
  color: var(--on-mode);
}
.mode-opt .icon { width: 22px; height: 22px; }
.mode-opt input:checked + span { background: var(--on-mode); color: var(--mode); }
.mode-opt input:focus-visible + span { outline: 3px solid var(--on-mode); outline-offset: 2px; }
.mode-opt:active span { scale: 0.96; }
@media (max-width: 359px) {
  .mode-opt span { padding-inline: 10px 12px; }
  .mode-opt .icon { display: none; }
}
@media (forced-colors: active) {
  .mode-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* A faixa troca de cor junto com o modo */
.band { transition-property: background-color; transition-timing-function: var(--ease); }

/* ---------- Modo rápido (faixa do leitor) ---------- */

/* Leituras que esperam o fim: contorno tracejado, como a etiqueta de algo que falta */
.pending {
  margin: 16px var(--gutter) 0; padding: 0 12px 4px;
  border: 2px dashed var(--ink-2); border-radius: calc(var(--r-control) + 8px);
}
.pending .list-title { margin-block: 12px 4px; }
.pending-row { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.pending-row:first-child { border-top: 0; }
.pending-row .row-sub { white-space: normal; }

/* Dica sobre a câmera depois de alguns segundos sem ler */
.cam-hint {
  position: absolute; z-index: 2; top: 10px; left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100% - 20px);
  min-height: 44px; padding: 8px 16px;
  border: 0; border-radius: 999px;
  background: rgba(22, 24, 23, 0.86); color: #F1F2F0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.3);
  font-size: 0.8824rem; text-wrap: balance;
  animation: hint-in 240ms var(--ease);
}
.cam-hint { --focus: #FFFFFF; transition-property: scale; }
.cam-hint:active { scale: 0.96; }
@keyframes hint-in { from { opacity: 0; translate: -50% -6px; } }

/* ---------- Cupom impresso (fim da sessão) ---------- */

.receipt-stage {
  padding: 12px 14px 8px;
  border-radius: var(--r-media);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
/* A boca da impressora: o papel sai de baixo dela */
.printer-slot {
  position: relative; z-index: 1;
  height: 12px; border-radius: 6px;
  background: #161817;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.10), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ticket-clip {
  /* Corta só em cima: o papel "sai" da boca da impressora. As sobras de 12 px
     nos lados e embaixo deixam a sombra aparecer. Sem clip-path, máscara nem
     filtro: essa combinação deixava o papel em branco ao arrastar a folha. */
  position: relative;
  margin: -6px -2px 0; padding: 0 12px 14px;
  overflow: hidden;
}
.ticket {
  /* O papel é sempre claro, também no tema escuro, como um cupom de verdade */
  --ink: #161817; --ink-2: #3F4541; --line: #C9CEC9;
  --entrada: #17693F; --saida: #8E1B5C; --contagem: #1F3F9E;
  --tooth: 12px;
  position: relative;
  color-scheme: light;
  background: #FFFFFF; color: var(--ink);
  padding: 22px 18px 18px;
  margin-bottom: calc(var(--tooth) / 2);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(22, 24, 23, 0.10), 0 10px 18px -8px rgba(22, 24, 23, 0.22);
  animation: ticket-print var(--print-ms, 1100ms) cubic-bezier(0.22, 1, 0.36, 1) var(--print-delay, 200ms) backwards;
}
/* Borda rasgada: dentes desenhados como fundo de uma faixa logo abaixo do papel */
.ticket::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: calc(var(--tooth) / 2);
  background: conic-gradient(from -45deg at bottom, #FFFFFF 90deg, #0000 0) bottom / var(--tooth) 100% repeat-x;
}
@keyframes ticket-print { from { transform: translateY(-100%); } }
/* Ao fechar, o conteúdo vai para a cópia que some: o papel não pode "imprimir" de novo */
.sheet-ghost .ticket { animation: none; }
.ticket-head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ticket-title { font-family: var(--font-num); font-weight: 800; font-size: 28px; line-height: 1; color: var(--mode); text-transform: uppercase; letter-spacing: 0.04em; }
.ticket-meta { margin-top: 4px; font-size: 0.8235rem; color: var(--ink-2); font-variant-numeric: normal; }
.ticket-lines { padding-block: 10px; }
.ticket-line { padding-block: 5px; }
/* Pontilhado e valor acompanham a última linha do nome, como no cupom de verdade */
.ticket-row { display: flex; align-items: baseline; align-items: last baseline; gap: 6px; }
.ticket-name { min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; font-size: 0.9412rem; line-height: 1.3; text-wrap: pretty; }
.ticket-sub { display: block; font-size: 0.7647rem; color: var(--ink-2); }
.ticket-dots { flex: 1 1 20px; min-width: 20px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.ticket-n { flex: none; font-family: var(--font-num); font-weight: 800; font-size: 24px; line-height: 1; }
.ticket-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 8px; border-top: 3px double var(--ink); font-weight: 700;
}
.ticket-total .ticket-n { font-size: 32px; }
.ticket-note { margin-top: 10px; font-size: 0.8235rem; color: var(--ink-2); text-align: center; }
.ticket-foot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 0.6471rem; letter-spacing: 0.2em; color: var(--ink-2);
}
@media (max-width: 359px) {
  .receipt-stage { padding-inline: 8px; }
  .ticket-clip { padding-inline: 8px; }
  .ticket { padding-inline: 14px; }
}
.ticket-barcode {
  width: 62%; height: 30px;
  background: repeating-linear-gradient(90deg, #161817 0 2px, transparent 2px 4px, #161817 4px 5px, transparent 5px 8px, #161817 8px 11px, transparent 11px 12px, #161817 12px 13px, transparent 13px 17px);
}

/* ---------- Seletor segmentado (ambiente) ---------- */

.segmented { border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented legend { padding: 0; margin-bottom: 6px; }
/* Cabendo, as opções dividem a faixa igual; não cabendo (tela estreita, letra
   grande), cada uma fica com o nome inteiro e a faixa desliza para o lado. */
.segmented-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 4px;
  padding: 4px; border-radius: var(--r-control);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 4px;
}
.segmented-track::-webkit-scrollbar { display: none; }
.segment { display: block; cursor: pointer; }
/* Faixa que continua para o lado: degradê na borda e uma setinha. */
.seg-scroll { position: relative; }
.seg-scroll.is-more-end .segmented-track { mask-image: linear-gradient(to left, transparent, #000 44px); }
.seg-scroll.is-more-start .segmented-track { mask-image: linear-gradient(to right, transparent, #000 44px); }
.seg-scroll.is-more-start.is-more-end .segmented-track { mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.seg-more {
  position: absolute; inset-block: 0; inset-inline-end: 2px; display: grid; place-items: center;
  width: 20px; color: var(--ink-2); pointer-events: none; opacity: 0;
  transition: opacity 200ms var(--ease);
}
.seg-more .icon { width: 16px; height: 16px; }
.seg-scroll.is-more-end .seg-more { opacity: 1; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span {
  display: grid; place-items: center; min-height: 44px; padding-inline: 8px; white-space: nowrap;
  border-radius: calc(var(--r-control) - 4px);
  font-size: 0.9412rem;
}
.segment input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 3px 8px rgba(22, 24, 23, 0.12), 0 0 0 0.5px rgba(22, 24, 23, 0.06); }
.segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
/* O app não teve certeza do ambiente: a trilha ganha a cor de "confira" e um
   aviso curto embaixo. Some quando a pessoa toca num ambiente. */
.segmented.is-unsure .segmented-track { background: var(--val-soft); }
.area-hint { margin: 6px 0 0; font-size: 0.8824rem; font-weight: 700; color: var(--val-ink); text-wrap: pretty; }

/* ---------- Validade ---------- */

.expiry { display: flex; flex-direction: column; }
.btn-expiry { align-self: flex-start; padding: 0; gap: 8px; font-weight: 700; text-underline-offset: 3px; }
.btn-expiry .icon { width: 20px; height: 20px; }
.input-date { font-size: 1.2941rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.field-note { color: var(--ink-2); text-wrap: pretty; }
.field-note.is-error { color: var(--danger); font-weight: 700; }

[data-photo-btn] { width: 100%; margin-top: 6px; }
.file-btn.is-busy { opacity: 0.6; pointer-events: none; }

/* ---------- Início: links, ambientes, filtros de estado, aviso de validade ---------- */

.tabs { overflow-x: auto; scrollbar-width: none; }
/* Em 320 px as quatro abas cabem inteiras, sem a última cortada na borda */
@media (max-width: 359px) {
  .tabs { gap: 12px; }
  .tab { font-size: 0.8824rem; }
}
.tabs::-webkit-scrollbar { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--gutter) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper);
  font-weight: 700; font-size: 0.8824rem;
  transition-property: scale;
}
.chip:active { scale: 0.96; }
/* Marcador pequeno com a mesma linguagem da etiqueta: amarelo, tracejado, calendário */
.chip::before { content: ''; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Compras ---------- */

.shop-lists { display: flex; flex-direction: column; }
.shop-list { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); }
.shop-list > li { border-bottom: 1px solid var(--line); }
.shop-item { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px var(--gutter); cursor: pointer; }
.shop-item .row-main { cursor: pointer; }
.shop-item .row-sub { white-space: normal; }
/* Na lista de compras o nome aparece inteiro: não há outra tela onde lê-lo */
.shop-item .row-name { display: block; overflow: visible; overflow-wrap: break-word; hyphens: auto; }
.shop-item:active { background: var(--shelf); }
.shop-item.is-done .row-name { text-decoration: line-through; color: var(--ink-2); }
.shop-item.is-done .thumb, .shop-item.is-done .shop-qty { opacity: 0.45; }
.shop-qty { flex: none; min-width: 44px; text-align: end; font-family: var(--font-num); font-weight: 800; line-height: 1; }
.check {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 28px; height: 28px; margin: 0;
  display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--paper);
  cursor: pointer;
}
.check:checked { background: var(--ink); }
.shop-clear { align-self: flex-start; margin-top: 12px; }
.shop-add { display: flex; flex-direction: column; gap: 6px; }
.shop-add-row { display: flex; gap: 8px; }
.shop-add-row .input { flex: 1; min-width: 0; }
.shop-add-row .btn { flex: none; }
.every-row { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.every-row .stepper-host { width: 200px; }

/* ---------- Lista agrupada (tela Mais), como os Ajustes do celular ----------
   Linhas de 56 px num bloco arredondado, ícone num quadradinho, fio entre as
   linhas começando depois do ícone. Raio 14 (controle); o ícone usa 8. */
.group { background: var(--shelf); overflow: hidden; }
.group > li + li .group-row { box-shadow: inset 0 1px 0 var(--line); }
.group-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 12px;
  border: 0; background: none; color: var(--ink); text-align: start; text-decoration: none;
  font-size: 1rem; cursor: pointer;
}
.group-row:active { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.group-row:focus-visible { outline-offset: -3px; }
.group-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: var(--paper); }
.group-icon .icon { width: 18px; height: 18px; }
.group-icon.is-contagem { background: var(--contagem); color: var(--on-mode); }
.group-label { flex: 1; min-width: 0; }
.group-chevron { width: 16px; height: 16px; color: var(--ink-2); }
.group-value { color: var(--ink-2); font-size: var(--text-callout); white-space: nowrap; }
.backup-code { font-family: var(--font-num); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.04em; word-break: break-all; margin-block: 4px 8px; font-variant-numeric: tabular-nums; }
.group-note { margin-top: -2px; text-wrap: pretty; }
.group-row .switch { margin-inline-start: auto; }
.group .file-btn:has(input:focus-visible) { outline-offset: -3px; }

/* Folhas sobre a câmera: sólidas. O vidro borrava o vídeo em manchas que se
   mexem atrás do texto (mesmo motivo do cupom). */
body:has(.screen-scan, .screen-count) .sheet { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Liquid glass, versão 3.4 ----------
   Mapa de camadas: barras do topo das telas com lista (Produto, Compras, Mais,
   Cupons) ficam fixas e em vidro regular, porque a lista passa por baixo delas.
   No Armário, os filtros entraram na faixa de vidro da busca (são preenchimentos
   dentro do vidro, não uma camada nova). Avisos viram vidro tingido. No máximo
   2 camadas com desfoque por tela; o aviso é passageiro e fica fora da conta. */

.topbar.glass-regular {
  position: sticky; top: 0; z-index: 4;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--glass-edge);
}

.home-tools .chips { padding: 4px 0 10px; }
.home-tools .chip { background: color-mix(in oklab, var(--ink) 6%, transparent); border-color: transparent; }
.home-tools .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.home-tools:not(:has(.tabs:not([hidden]))):not(:has(.chips:not([hidden]))) { padding-bottom: 10px; }

/* Aviso em vidro tingido: a cor do modo (ou a tinta) a 94% com borda e brilho do
   material. A 88% o texto da lista passava por trás das letras do aviso. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toast {
    background: color-mix(in oklab, var(--ink) 94%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.10), var(--glass-shadow);
  }
  .toast.has-mode { background: color-mix(in oklab, var(--mode) 94%, transparent); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .toast { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toast.has-mode { background: var(--mode); }
}

/* Luz que nasce do ponto do toque nos botões de vidro */
.scan-fab, .floating-bar .btn, .mode-opt span { position: relative; overflow: hidden; isolation: isolate; }
.scan-fab::after, .floating-bar .btn::after, .mode-opt span::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at var(--press-x, 50%) var(--press-y, 50%), rgba(255, 255, 255, 0.34), transparent 65%);
  opacity: 0; scale: 0.6;
  transition-property: opacity, scale; transition-duration: 300ms; transition-timing-function: var(--ease);
}
.scan-fab:active::after, .floating-bar .btn:active::after, .mode-opt span:active::after { opacity: 1; scale: 1; transition-duration: 120ms; }

/* Folha "não está no armário": opções como linhas agrupadas */
.choice-group { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.group-label { display: flex; flex-direction: column; gap: 2px; }
.choice-group .group-label { font-weight: 700; }
.group-sub { font-weight: 400; font-size: 0.8824rem; color: var(--ink-2); text-wrap: pretty; }
.group-icon.is-entrada { background: var(--entrada); color: var(--on-mode); }
.choice-group .group-row { min-height: 72px; padding-block: 12px; }

/* ---------- Barra de abas (versão 3.5) ----------
   Como o iPhone: cápsula de vidro regular flutuando embaixo, 4 abas com ícone e
   rótulo curto; aba ativa com o ícone cheio. O botão de ler código fica separado
   (como a busca no iOS 26), redondo e tingido, e abre o leitor no último modo.
   É a única barra de vidro embaixo; a camada de cima é a busca do Armário. */
.has-tabbar { padding-bottom: calc(100px + var(--safe-bottom)); }
.tabbar-wrap {
  position: fixed; z-index: 5;
  inset-inline: 12px; bottom: calc(10px + var(--safe-bottom));
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.tabbar, .scan-fab { pointer-events: auto; }
/* Rótulos de 12 px sobre uma lista que passa por baixo: vidro bem grosso (94%)
   com desfoque de 28 px, senão o texto da lista aparece entre as letras das abas
   (e continua legível mesmo onde o desfoque não roda). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar.glass-regular {
    background: color-mix(in oklab, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  }
}
.tabbar {
  flex: 1; min-width: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  padding: 4px; border-radius: 999px;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding-inline: 4px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  font-weight: 700; line-height: 1.1;
}
.tab-item .icon { width: 24px; height: 24px; }
.tab-item[aria-current="page"] { color: var(--ink); }
.tab-item:focus-visible { outline-offset: -3px; }
.scan-fab {
  flex: none; width: 72px; height: 64px; border-radius: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-decoration: none;
  /* Cor fixa: tinta (preto; branco no escuro). A cor do modo é só do leitor. */
  background: var(--ink); color: var(--paper);
  box-shadow: var(--glass-shadow);
}
.scan-fab .icon { width: 26px; height: 26px; }
.scan-fab-label { font: 700 12px/1 var(--font-ui); letter-spacing: 0.01em; }
.scan-fab:active { scale: 0.96; }
.scan-fab { --focus: var(--ink); }
@media (min-width: 720px) {
  .tabbar-wrap { inset-inline: auto; left: 50%; width: 560px; transform: translateX(-50%); }
}
@media (forced-colors: active) {
  .tab-item[aria-current="page"] { forced-color-adjust: none; color: HighlightText; }
}

/* Títulos grandes iguais nas telas principais (Armário, Compras, Cupons, Mais) */
.home-head { align-items: center; }
.screen-shop .content, .screen-cupons .content, .screen-data .content { padding-top: 12px; }

/* Botões só com símbolo */
.btn-icon { width: 52px; padding: 0; flex: none; }
.cam-tool { padding-inline: 0; width: 52px; justify-content: center; }
.cam-tool .icon { width: 22px; height: 22px; }

/* ---------- Telas largas ---------- */

@media (min-width: 720px) {
  #app { max-width: 720px; margin: 0 auto; }
  .floating-bar { inset-inline: auto; left: 50%; width: 696px; transform: translateX(-50%); }
}

/* ---------- Preferências e alternativas ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-regular, .glass-thick { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cam-tools, .cam-hint { background: rgba(22, 24, 23, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass-regular, .glass-thick { background: var(--glass-solid); box-shadow: inset 0 0 0 1px var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cam-tools, .cam-hint { background: #161817; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .glass-regular, .glass-thick, .cam-tools { background: Canvas; color: CanvasText; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tag { border: 1px solid CanvasText; }
  /* Estados que eram só preenchimento precisam de cor do sistema */
  .segment input:checked + span, .chip[aria-pressed="true"], .check:checked, .switch:checked {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  .printer-slot, .ticket-barcode { forced-color-adjust: none; }
  .ticket-barcode { background: repeating-linear-gradient(90deg, CanvasText 0 2px, transparent 2px 4px, CanvasText 4px 5px, transparent 5px 8px); }
  .cam-hint { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}

/* ---------- Versão 3.6: movimento e detalhes como no iPhone ---------- */

/* Números: Urbanist tem algarismos de largura igual, a coluna não "dança" */
.tag, .stepper-value, .shop-qty, .cupom-total, .ticket-n, .receipt-n, .diff-delta { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.empty-lead { letter-spacing: -0.02em; }

/* Folha arremessada para baixo: continua o gesto e sai pela borda */
.sheet-ghost.is-flung .sheet { transform: translateY(100%) !important; opacity: 1; transition: transform 300ms cubic-bezier(0.3, 0.6, 0.4, 1); }
.sheet-ghost.is-flung .sheet-backdrop { transition-duration: 300ms; }
.sheet-backdrop { animation: fade-in 300ms var(--ease); }
@keyframes fade-in { from { opacity: 0; } }

/* Aviso entra com mola, de baixo */
.toast.is-in { animation: toast-in 520ms var(--spring-bouncy); }
@keyframes toast-in { from { opacity: 0; translate: 0 24px; scale: 0.94; } }

/* Número da etiqueta rola quando muda (como os contadores do iPhone) */
.tag { overflow: hidden; }
.tag-n { display: block; }
.tag.is-down .tag-n { animation: roll-down 420ms var(--spring); }
.tag.is-up .tag-n { animation: roll-up 420ms var(--spring); }
@keyframes roll-down { from { translate: 0 -70%; opacity: 0; filter: blur(2px); } }
@keyframes roll-up { from { translate: 0 70%; opacity: 0; filter: blur(2px); } }

/* Caixa de marcar das compras: o visto se desenha e a caixa dá um pulinho */
.check { transition-property: background-color, scale; transition-duration: 200ms; transition-timing-function: var(--spring-bouncy); }
.check:active { scale: 0.96; }
.shop-item .row-name { transition: color 200ms var(--ease); }

/* Botões do topo lado a lado (compartilhar e mais) */
.head-actions { display: flex; align-items: center; gap: 0; margin-inline-end: -4px; }

/* Número na aba Compras, como o contador vermelho do iPhone */
.tab-badge {
  position: absolute; top: 4px; left: calc(50% + 6px);
  min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 0.7059rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--paper);
  animation: badge-in 420ms var(--spring-bouncy);
}
@keyframes badge-in { from { scale: 0.2; } }

/* Linha do Armário: segurar abre o menu rápido. Sem o menu de link do sistema. */
.rows .row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.row { transition-property: scale, background-color, box-shadow; transition-duration: 300ms; transition-timing-function: var(--spring); }
.row.is-lifted { scale: 1.02; background: var(--paper); box-shadow: 0 12px 32px rgba(22, 24, 23, 0.18); border-radius: var(--r-control); position: relative; z-index: 2; }

/* ---------- Menu suspenso (como o do iPhone) ----------
   Vidro grosso por cima do conteúdo, cresce a partir do botão com mola. */
.menu-root { position: fixed; inset: 0; z-index: 30; }
.menu-scrim { position: absolute; inset: 0; }
.menu {
  position: absolute; overflow: hidden;
  border-radius: var(--r-control);
  padding-block: 4px;
  opacity: 0; scale: 0.4;
  transition-property: opacity, scale; transition-duration: 460ms, 460ms; transition-timing-function: var(--ease), var(--spring-bouncy);
}
.menu.glass-thick { box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--glass-edge), 0 18px 48px rgba(22, 24, 23, 0.24); }
.menu-root.is-open .menu { opacity: 1; scale: 1; }
.menu-root.is-leaving .menu { opacity: 0; scale: 0.9; transition-duration: 150ms; transition-timing-function: ease-out; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 16px;
  border: 0; background: none; color: var(--ink); text-align: start;
  font-size: 1rem;
}
.menu-item + .menu-item { box-shadow: inset 0 1px 0 var(--line); }
.menu-item .icon { width: 20px; height: 20px; }
.menu-item:active, .menu-item:focus-visible { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.menu-item.is-danger { color: var(--danger); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .menu.glass-thick { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .menu { border: 1px solid CanvasText; }
  .menu-item:focus-visible { outline: 2px solid Highlight; }
}

/* ---------- Transição entre telas (View Transitions) ----------
   Abas: troca no lugar, rápida. Detalhe: entra pela direita e a tela de trás
   recua um terço, escurecendo. Leitor: sobe de baixo, como tela modal.
   A barra de abas não participa: fica parada. */
.tabbar-wrap { view-transition-name: tabbar; }
/* A barra é a mesma nas duas telas: fica viva durante a troca, e o que se
   mexe nela (pílula, esconder) vem das transições dela mesma. */
::view-transition-group(tabbar) { animation-duration: 0s; }
::view-transition-old(tabbar) { display: none; }
::view-transition-new(tabbar) { animation: none; }
/* As "fotos" das telas precisam de fundo: sem ele a tela de cima fica
   transparente e as duas se misturam no meio da troca. */
::view-transition-old(root), ::view-transition-new(root) { background: var(--paper); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--ease); }
/* Abas: esmaecimento curto (a nova sobe 6 px), sem corte seco. */
html[data-nav="tab"]::view-transition-old(root) { animation: vt-fade-out 140ms var(--ease) both; }
html[data-nav="tab"]::view-transition-new(root) { animation: vt-tab-in 260ms var(--ease) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-tab-in { from { opacity: 0; translate: 0 6px; } }
html[data-nav="push"]::view-transition-old(root),
html[data-nav="pop"]::view-transition-old(root),
html[data-nav="up"]::view-transition-old(root),
html[data-nav="down"]::view-transition-old(root),
html[data-nav="push"]::view-transition-new(root),
html[data-nav="pop"]::view-transition-new(root),
html[data-nav="up"]::view-transition-new(root),
html[data-nav="down"]::view-transition-new(root) { mix-blend-mode: normal; animation-duration: 520ms; animation-timing-function: var(--spring); animation-fill-mode: both; }
/* Detalhe (como o empurrar do iPhone): a nova entra pela direita com sombra
   na borda; a de trás anda um terço para a esquerda e escurece. */
html[data-nav="push"]::view-transition-new(root) { animation-name: vt-in-right; z-index: 2; }
html[data-nav="push"]::view-transition-old(root) { animation-name: vt-recede-left; }
html[data-nav="pop"]::view-transition-old(root) { animation-name: vt-out-right; z-index: 2; }
html[data-nav="pop"]::view-transition-new(root) { animation-name: vt-return-left; }
/* Leitor (tela modal): sobe de baixo; a de trás recua e escurece. */
html[data-nav="up"]::view-transition-new(root) { animation-name: vt-in-up; z-index: 2; border-radius: 18px 18px 0 0; }
html[data-nav="up"]::view-transition-old(root) { animation-name: vt-sink; }
html[data-nav="down"]::view-transition-old(root) { animation-name: vt-out-down; z-index: 2; animation-duration: 420ms; border-radius: 18px 18px 0 0; }
html[data-nav="down"]::view-transition-new(root) { animation-name: vt-rise; animation-duration: 420ms; }
@keyframes vt-in-right { from { translate: 100% 0; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); } to { box-shadow: -12px 0 32px rgba(0, 0, 0, 0); } }
@keyframes vt-recede-left { to { translate: -30% 0; filter: brightness(0.82); } }
@keyframes vt-out-right { from { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); } to { translate: 100% 0; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); } }
@keyframes vt-return-left { from { translate: -30% 0; filter: brightness(0.82); } }
@keyframes vt-in-up { from { translate: 0 100%; } }
@keyframes vt-sink { to { scale: 0.94; filter: brightness(0.7); border-radius: 18px; } }
@keyframes vt-out-down { to { translate: 0 100%; } }
@keyframes vt-rise { from { scale: 0.94; filter: brightness(0.7); border-radius: 18px; } }
/* Atrás da tela que recua para o leitor subir: preto, como no iPhone */
html[data-nav="up"]:active-view-transition, html[data-nav="down"]:active-view-transition { background: #000; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html[data-nav="fade"]::view-transition-old(root) { animation: vt-fade-out 180ms ease both !important; }
  html[data-nav="fade"]::view-transition-new(root) { animation: vt-fade-in 180ms ease both !important; }
}
@keyframes vt-fade-in { from { opacity: 0; } }

/* ---------- Versão 3.7: título que encolhe, arrastar, leitor limpo, feedback ---------- */

/* Título pequeno no topo quando o grande sai da tela (vidro grosso, como no iPhone).
   No Armário a busca desce junto e as duas barras viram um bloco só. */
.mini-bar {
  position: fixed; z-index: 6; top: 0; inset-inline: 0;
  height: calc(44px + var(--safe-top)); padding-top: var(--safe-top);
  display: grid; place-items: center;
  background: var(--glass-solid);
  box-shadow: inset 0 -1px 0 var(--glass-edge);
  opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity 200ms var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mini-bar {
    background: color-mix(in oklab, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  }
}
.mini-title { font-family: var(--font-num); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; translate: 0 6px; transition: translate 420ms var(--spring); }
.is-collapsed .mini-bar { opacity: 1; pointer-events: auto; }
.is-collapsed .mini-title { translate: 0 0; }
.screen-home .mini-bar { box-shadow: none; }
.home-tools { transition: top 380ms var(--spring); }
.screen-home.is-collapsed .home-tools { top: 44px; }
@media (min-width: 720px) { .mini-bar { inset-inline: 0; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .mini-bar { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Esqueletos: o formato do que vai chegar, com um brilho que passa devagar */
.skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--shelf) 0 35%, color-mix(in oklab, var(--shelf), var(--paper) 70%) 50%, var(--shelf) 65% 100%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-row { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
.skel-thumb { width: 48px; height: 48px; border-radius: var(--r-thumb); flex: none; }
.skel-thumb-md { width: 64px; height: 64px; border-radius: 12px; flex: none; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel-line { height: 14px; }
.skel-short { width: 34%; height: 11px; }
.skel-tag { border-radius: var(--r-tag); flex: none; }
.skel-block { height: 120px; border-radius: var(--r-control); }
.skeleton-list .skel-row:nth-child(2) .skel { animation-delay: 80ms; }
.skeleton-list .skel-row:nth-child(3) .skel { animation-delay: 160ms; }
.skeleton-list .skel-row:nth-child(4) .skel { animation-delay: 240ms; }
.skeleton-list .skel-row:nth-child(5) .skel { animation-delay: 320ms; }
.pick .skel-row { padding-inline: var(--gutter); min-height: 64px; }
.product-head.is-loading .product-meta { gap: 8px; padding-top: 6px; }

/* Rodinha de "fazendo" */
.spinner {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.loading-note { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 0.8824rem; min-height: 24px; }
.loading-note [data-note] { animation: fade-in 300ms var(--ease); }
/* Botão ocupado: a rodinha só aparece se demorar (mais de 300 ms) */
.btn[aria-busy="true"] { position: relative; color: transparent; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--on-mode); border-right-color: transparent;
  animation: spin 700ms linear infinite, fade-in 200ms 300ms backwards;
}
.btn-primary[aria-busy="true"]::after { border-color: var(--paper); border-right-color: transparent; }
.btn-quiet[aria-busy="true"]::after, .btn-link[aria-busy="true"]::after { border-color: var(--ink-2); border-right-color: transparent; }

/* Arrastar a linha: por baixo, o verde do +1 (direita) e o vinho do −1 (esquerda) */
.row-item { position: relative; overflow: hidden; display: block; }
.row-slide { position: relative; z-index: 1; display: flex; align-items: center; background: var(--paper); transition: transform 460ms var(--spring); }
.row-slide.is-swiping { transition: none; }
.rows { touch-action: pan-y pinch-zoom; }
.swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; visibility: hidden; }
.row-item.swipe-left .swipe-bg, .row-item.swipe-right .swipe-bg { visibility: visible; }
.row-item.swipe-left .swipe-bg { background: var(--saida); }
.row-item.swipe-right .swipe-bg { background: var(--entrada); }
.swipe-act {
  display: inline-flex; align-items: center; gap: 4px; padding-inline: 24px;
  color: var(--on-mode); font-family: var(--font-num); font-weight: 800; font-size: 1.2941rem;
  opacity: 0; scale: 0.25; filter: blur(4px);
  transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.swipe-act .icon { width: 20px; height: 20px; }
.row-item.swipe-right .swipe-plus, .row-item.swipe-left .swipe-minus { opacity: 0.7; scale: 1; filter: blur(0); }
.row-item.is-armed .swipe-plus, .row-item.is-armed .swipe-minus { opacity: 1; scale: 1.15; filter: blur(0); }
.row-item.swipe-right .swipe-minus, .row-item.swipe-left .swipe-plus { opacity: 0; }
.rows .row-slide .row { -webkit-user-drag: none; }
.row-item:has(.row.is-lifted) { overflow: visible; z-index: 2; }
.row-item:has(.row.is-lifted) .row-slide { background: transparent; }

/* Leitor: faixa fina com fechar, Entrada | Saída e Rápido numa linha só */
.band.band-slim {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px;
  padding-block: calc(6px + var(--safe-top)) 10px; padding-inline: 4px 12px;
}
.band.band-slim > .icon-btn:first-of-type { margin: 0; }
.band-slim .mode-switch { justify-self: center; align-self: center; }
.band-slim .mode-opt span { min-height: 42px; font-size: 1.0588rem; padding-inline: 10px 14px; }
.band-slim .mode-opt .icon { width: 20px; height: 20px; }
.screen-validade .band-title { font-size: 1.0588rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; justify-self: center; }
.screen-validade .band-title .icon { width: 20px; height: 20px; }
/* Sem Rápido na faixa: a terceira coluna guarda o lugar para o título ficar no meio. */
.screen-validade .band-slim::after { content: ''; width: 44px; }
.screen-validade .receipt-line { text-decoration: none; color: inherit; }
/* Lista do armário no modo Validade: as datas já marcadas de cada produto e
   quantas unidades estão sem data (em âmbar, primeiro na lista). */
.val-shelf { margin-top: 16px; padding-inline: var(--gutter); }
.val-shelf-note { color: var(--ink-2); font-size: 0.9412rem; margin: 4px 0 12px; text-wrap: pretty; }
.val-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.val-row:active { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.val-dates { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
/* Linha tocável: a seta diz que abre (como nos Ajustes). */
.val-chev { flex: none; width: 16px; height: 16px; color: var(--ink-2); }
.val-date, .val-free { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: 999px; font-size: 0.8235rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.val-date { background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink); }
.val-date .icon { width: 14px; height: 14px; }
.val-free { background: var(--val-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--val-ink) 35%, transparent); }
/* Modo Validade: datas que o produto já tem, em cima da câmera, e o aviso
   quando a data lida é uma delas. */
.exp-existing, .exp-dup {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px;
  padding: 10px 12px; border-radius: var(--r-control);
  background: var(--val-soft); color: var(--ink); font-size: 0.9412rem; text-wrap: pretty;
}
.exp-existing .icon, .exp-dup .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--val-ink); }
.exp-existing { flex-direction: column; gap: 8px; }
/* "Faltam N" e a pergunta são outro grupo: o dobro do espaço da lista. */
.exp-existing-left { margin-top: 4px; }
.exp-existing-line { margin: 0; text-wrap: pretty; }
.exp-existing-label { margin: 0; font-weight: 700; }
.exp-dup-box { margin: 0; }
/* Validades já cadastradas: uma linha por data (data, quantas, quanto falta);
   a igual à data lida fica destacada. */
.exp-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.exp-dates-more { padding-inline: 12px; font-size: 0.8824rem; color: var(--ink-2); }
.exp-dates-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in oklab, var(--ink) 5%, transparent); font-variant-numeric: tabular-nums;
}
.exp-existing .exp-dates-row { background: color-mix(in oklab, var(--paper) 70%, transparent); }
.exp-existing .exp-dates-row .icon, .exp-dates-row .icon { width: 18px; height: 18px; margin: 0; color: var(--val-ink); }
.exp-dates-text { display: flex; flex-direction: column; min-width: 0; }
.exp-dates-date { font-weight: 700; line-height: 1.25; }
.exp-dates-sub { color: var(--ink-2); font-size: 0.8824rem; line-height: 1.3; }
.exp-dates-qty { color: var(--ink-2); font-size: 0.8824rem; }
.exp-dates-row.is-match { background: var(--paper); box-shadow: inset 0 0 0 2px var(--val-ink); }
.exp-dates-tag { padding: 2px 8px; border-radius: 999px; background: var(--val); color: #161817; font-size: 0.7647rem; font-weight: 700; }
.sheet .exp-dates { margin: 4px 0 8px; }
.exp-existing .exp-dates { margin: 0; align-self: stretch; }
.exp-product { margin-bottom: 12px; }
.pick-row .val-free { margin-top: 2px; }
.exp-dup { margin: 12px 0 0; font-weight: 600; }
/* Texto na cor do modo: no âmbar, o tom escuro (o amarelo no branco não se lê). */
.mode-validade .cam-alt, .mode-validade .exp-alt { color: var(--val-ink); }
.fast-toggle { position: relative; cursor: pointer; }
.fast-pill {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 42px; padding-inline: 10px 12px; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--on-mode) 55%, transparent);
  color: var(--on-mode); font-weight: 700; font-size: 0.8235rem;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), scale 300ms var(--spring-bouncy);
}
.fast-pill .icon { width: 18px; height: 18px; }
.fast-toggle:active .fast-pill { scale: 0.96; }
.fast-toggle input:checked + .fast-pill { background: var(--on-mode); color: var(--mode); border-color: var(--on-mode); }
.fast-toggle input:checked + .fast-pill .icon { animation: bolt-zap 420ms var(--spring-bouncy); }
@keyframes bolt-zap { 0% { scale: 0.6; rotate: -12deg; } }
.fast-toggle input:focus-visible + .fast-pill { outline: 3px solid var(--on-mode); outline-offset: 2px; }
/* Em celulares comuns (até 430 px) as setas saem: a cor e a palavra já dizem o modo */
@media (max-width: 430px) {
  .band-slim .mode-opt .icon { display: none; }
  .band-slim .mode-opt span { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .band-slim .mode-opt span { font-size: 0.9412rem; padding-inline: 8px; }
  .fast-pill span { display: none; }
}
@media (forced-colors: active) { .fast-toggle input:checked + .fast-pill { forced-color-adjust: none; background: Highlight; color: HighlightText; } }

/* Câmera abrindo, procurando e lendo */
.cam-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #F1F2F0; font-size: 0.9412rem;
}
.viewfinder.is-live .aim-line { animation: scan-breathe 1.8s ease-in-out infinite; }
@keyframes scan-breathe { 50% { opacity: 0.55; box-shadow: 0 0 12px var(--scanline); } }
.viewfinder.is-live .aim.is-hit .aim-line { animation: hit 360ms var(--ease); }
.cam-pop {
  position: absolute; z-index: 3; left: 50%; top: 42%;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px;
  background: var(--mode); color: var(--on-mode);
  font-family: var(--font-num); font-weight: 800; font-size: 1.1765rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  translate: -50% -50%;
  animation: cam-pop 1500ms var(--spring-bouncy) forwards;
}
@keyframes cam-pop {
  0% { opacity: 0; scale: 0.6; }
  18% { opacity: 1; scale: 1; }
  70% { opacity: 1; translate: -50% -50%; }
  100% { opacity: 0; translate: -50% -130%; }
}

/* Linha nova da sessão: entra e acende de leve na cor do modo */
.receipt-lines > li.is-fresh { animation: line-in 520ms var(--spring); border-radius: 8px; }
.receipt-lines > li.is-fresh .receipt-edit { animation: line-glow 1400ms var(--ease); }
@keyframes line-in { from { translate: 0 -10px; opacity: 0; } }
@keyframes line-glow { from { background: color-mix(in oklab, var(--mode, var(--ink)) 16%, transparent); } }

/* Número do seletor pula para o lado do toque */
.stepper-value.is-up { animation: num-up 320ms var(--spring); }
.stepper-value.is-down { animation: num-down 320ms var(--spring); }
@keyframes num-up { from { translate: 0 18%; opacity: 0.4; } }
@keyframes num-down { from { translate: 0 -18%; opacity: 0.4; } }

/* ---------- Versão 3.8: movimento como no iPhone ---------- */

/* Barra de abas: uma pílula de vidro desliza entre as abas e estica no caminho.
   Arrastando o dedo pela barra, ela vira uma lente que segue o dedo. */
.tabbar { position: relative; }
.tab-glide {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: color-mix(in oklab, var(--ink) 9%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 0.5px var(--glass-edge);
  transition-property: translate, width, scale, opacity, background-color, box-shadow;
  transition-duration: 480ms, 420ms, 420ms, 200ms, 200ms, 200ms;
  transition-timing-function: var(--spring), var(--spring), var(--spring), var(--ease), var(--ease), var(--ease);
}
.tab-glide.no-anim { transition: none; }
.tab-glide.is-moving { scale: 1.08 0.94; transition-duration: 580ms, 420ms, 140ms, 200ms, 200ms, 200ms; }
.tabbar.is-scrubbing .tab-glide {
  scale: 1.2 1.14;
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  box-shadow: 0 8px 22px rgba(22, 24, 23, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px var(--glass-edge);
}
.tab-item { position: relative; z-index: 1; transition: color 150ms var(--ease); }
.tab-item[aria-current="page"] { background: transparent; }
/* Aba não encolhe nem pula ao tocar (o iPhone só destaca) */
.tab-item:active { scale: 1; opacity: 0.7; }
.tab-item.is-over { color: var(--ink); }
/* Ícone vazado e cheio no mesmo lugar: a troca é na hora. O pulinho da aba
   escolhida fica no fim do arquivo (Inércia e bobeirinhas). */
.tab-icons { position: relative; display: grid; width: 24px; height: 24px; }
.tab-icons > .icon { grid-area: 1 / 1; }
.tab-icons > .tab-on, .tab-item[aria-current="page"] .tab-off { visibility: hidden; }
.tab-item[aria-current="page"] .tab-on { visibility: visible; }
.tab-icons .tab-badge { top: -6px; left: 14px; }
/* Fora das abas (produto, leitor, contagem) a barra desce e some com mola */
.tabbar-wrap { transition-property: translate, opacity; transition-duration: 520ms, 260ms; transition-timing-function: var(--spring), var(--ease); }
.tabbar-wrap.is-hidden { translate: 0 calc(100% + 24px + var(--safe-bottom)); opacity: 0; }
.tabbar-wrap.is-hidden .tabbar, .tabbar-wrap.is-hidden .scan-fab { pointer-events: none; }
.scan-fab { transition-property: scale, background-color; transition-duration: 380ms, 300ms; transition-timing-function: var(--spring-bouncy), var(--ease); }
.scan-fab:active { transition-duration: 90ms, 300ms; }
@media (forced-colors: active) { .tab-glide { forced-color-adjust: none; background: Highlight; } }

/* Seletores de cima e das folhas: o preenchimento desliza entre as opções */
.segmented-track, .mode-switch, .tabs { position: relative; }
.segment, .mode-opt, .tab { position: relative; z-index: 1; }
.glide {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  transition-property: translate, width, height, scale;
  transition-duration: 540ms, 420ms, 300ms, 480ms;
  transition-timing-function: var(--spring-bouncy), var(--spring), var(--spring), var(--spring-bouncy);
}
.glide.no-anim { transition: none; }
.glide.is-moving { scale: 1.1 0.9; transition-duration: 540ms, 420ms, 300ms, 140ms; }
.segmented-track .glide { background: var(--paper); border-radius: calc(var(--r-control) - 4px); box-shadow: 0 3px 8px rgba(22, 24, 23, 0.12), 0 0 0 0.5px rgba(22, 24, 23, 0.06); }
.segmented-track.has-glide .segment input:checked + span { background: transparent; box-shadow: none; }
/* Como o seletor do iPhone: pílula clara sobre o trilho, texto sempre escuro; a escolhida fica em negrito */
.segment span { color: var(--ink-2); font-weight: 600; }
.segment input:checked + span { font-weight: 800; }
@media (prefers-color-scheme: dark) {
  .segment input:checked + span, .segmented-track .glide { background: color-mix(in oklab, var(--ink) 22%, var(--shelf)); }
  .segmented-track.has-glide .segment input:checked + span { background: transparent; }
}
.mode-switch .glide { background: var(--on-mode); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.mode-switch.has-glide .mode-opt input:checked + span { background: transparent; }
.tabs .glide-line { background: var(--ink); border-radius: 2px; }
.tabs.has-glide .tab[aria-pressed="true"] { box-shadow: none; }
.tab { transition: color 250ms var(--ease); }
.segment span, .mode-opt span { transition-property: color, background-color, scale; transition-duration: 250ms, 250ms, 380ms; transition-timing-function: var(--ease), var(--ease), var(--spring-bouncy); }
@media (forced-colors: active) {
  .glide { forced-color-adjust: none; background: Highlight; }
  .has-glide input:checked + span { forced-color-adjust: none; color: HighlightText; }
}

/* Linha → produto: foto, nome e etiqueta voam da lista até o topo do produto */
.product-hero > .thumb { view-transition-name: hero-thumb; }
.product-hero .page-title { view-transition-name: hero-title; }
.product-hero > .tag { view-transition-name: hero-tag; }
::view-transition-group(hero-thumb), ::view-transition-group(hero-title), ::view-transition-group(hero-tag) {
  animation-duration: 560ms; animation-timing-function: var(--spring);
}
::view-transition-old(hero-title), ::view-transition-new(hero-title) {
  width: auto; height: 100%; object-fit: none; object-position: left top; inset-inline-start: 0;
}
::view-transition-group(hero-tag) { z-index: 3; }
/* O nome antigo some logo; o novo aparece por cima, sem ficar em dobro */
::view-transition-old(hero-title) { animation: vt-text-out 160ms ease-out both; }
::view-transition-new(hero-title) { animation: vt-text-in 300ms ease-out 80ms both; }
@keyframes vt-text-out { to { opacity: 0; } }
@keyframes vt-text-in { from { opacity: 0; } }

/* Linhas que continuam deslizam para o novo lugar ao trocar ambiente ou filtro */
::view-transition-group(*.row) { animation-duration: 460ms; animation-timing-function: var(--spring); }
::view-transition-old(home-tools) { display: none; }
::view-transition-new(home-tools) { animation: none; }

/* Folha aberta: a tela de trás recua e escurece, como um cartão empilhado */
#app { transition-property: scale, filter; transition-duration: 560ms, 400ms; transition-timing-function: var(--spring), var(--ease); }
body { transition: background-color 400ms var(--ease); }
body.sheet-stack { background: #000; }
body.sheet-stack #app { scale: 0.93; filter: brightness(0.9); clip-path: inset(0 round 18px); }
body.sheet-stack .tabbar-wrap { translate: 0 40px; opacity: 0; }
body.sheet-stack .mini-bar { opacity: 0; }

/* Aviso sai mais suave do que entra */
.toast.is-out { animation: toast-out 200ms ease-out forwards; }
@keyframes toast-out { to { opacity: 0; translate: 0 12px; scale: 0.98; } }

/* Menu: cada opção chega logo depois da anterior */
.menu-root.is-open .menu-item { animation: menu-item-in 420ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }
@keyframes menu-item-in { from { opacity: 0; translate: 0 -6px; } }

/* Lista do Armário entra em cascata na primeira vez (depois do esqueleto) */
.rows.is-entering > li { animation: row-in 520ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes row-in { from { opacity: 0; translate: 0 14px; } }

/* Toque: aperta rápido e solta com mola (0,96, como pede o guia) */
.btn, .icon-btn, .chip, .row-minus, .stepper-btn, .cam-tool, .cam-hint, .group-row, .menu-item {
  transition-duration: 420ms; transition-timing-function: var(--spring-bouncy);
}
.btn:active:not(:disabled), .icon-btn:active, .chip:active, .row-minus:active:not(:disabled), .stepper-btn:active:not(:disabled), .cam-tool:active, .cam-hint:active {
  transition-duration: 90ms;
}
.group-row { transition-property: scale, background-color; }
.group-row:active { scale: 0.98; transition-duration: 90ms; }

/* A cor da faixa do leitor troca junto com a pílula Entrada | Saída */
.band { transition-duration: 420ms; }

/* ---------- Versão 3.9: posições e tamanhos como no iOS 26 ----------
   Escala do iPhone: título grande 34, título compacto 17, corpo 17,
   secundário 15, legenda 13, rótulo da barra de abas 11. */
.page-title, .home-head .page-title, .screen-home .page-title { letter-spacing: -0.02em; }
.home-head { padding-block: calc(12px + var(--safe-top)) 0; }
.lead { font-size: 0.8824rem; color: var(--ink-2); }
.field-note, .group-note { font-size: 0.7647rem; }
.tab-item { font-size: 11px; }
.toast-text { font-size: 0.8824rem; }
.row { min-height: 64px; padding-block: 10px; }
.row-name { font-size: 1rem; }
.row-sub { font-size: 0.8824rem; }
.thumb-sm { width: 44px; height: 44px; }
.tag { min-width: 44px; height: 38px; font-size: 24px; padding-inline: 7px; border-radius: 7px; }
.tag-lg { min-width: 64px; height: 56px; font-size: 40px; border-radius: 10px; }
.row-minus, .row-minus-space { height: 44px; }
.skel-tag { width: 44px; height: 38px; }
.stepper-value { font-size: 72px; height: 80px; }
.stepper-sm .stepper-value { font-size: 34px; height: 52px; }
.shop-qty { font-size: 1.2941rem; }
.cupom-total { font-size: 1.1765rem; }
.receipt-n { font-size: 1.1765rem; }
.receipt-total .receipt-n { font-size: 24px; }
.btn { font-size: 1rem; }
.btn-lg { min-height: 56px; font-size: 1rem; }
.mode-opt span { font-size: 0.9412rem; }
.search { height: 44px; }
.search input { font-size: 1rem; }
.input { height: 48px; font-size: 1rem; }

/* Botão circular de vidro (barra do produto, cabeçalho das folhas) */
.glass-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 0.5px var(--glass-edge);
}
.glass-btn .icon { width: 20px; height: 20px; }
.glass-btn:active { background: color-mix(in oklab, var(--ink) 14%, transparent); }

/* Folha: alça, depois a barra com X à esquerda, título no meio e ação à direita */
.sheet { padding-top: 0; }
.sheet-grip { height: 14px; }
.sheet-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 8px; }
.sheet-bar-end { display: flex; justify-content: flex-end; }
.sheet-bar-title { min-width: 0; text-align: center; }
.sheet-bar .sheet-title { font-family: var(--font-num); font-size: 1rem; font-weight: 800; line-height: 1.25; letter-spacing: 0; padding: 0; text-wrap: balance; }
.sheet-bar .sheet-share { position: static; }
.sheet-bar .icon-btn { width: 44px; height: 44px; }
/* Fechar: a folha desce inteira pela borda, como no iPhone */
.sheet-ghost.is-leaving .sheet { transform: translateY(100%); opacity: 1; transition: transform 320ms cubic-bezier(0.3, 0.6, 0.4, 1); }
.sheet-ghost.is-leaving .sheet-backdrop { transition-duration: 320ms; }
@media (min-width: 640px) { .sheet-ghost.is-leaving .sheet { transform: translate(-50%, 100%); } }

/* Produto: barra transparente com botões de vidro; ao rolar, vidro e nome pequeno */
.nav-bar.topbar {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  padding: calc(6px + var(--safe-top)) 12px 6px;
  border-bottom: 0; background: transparent; box-shadow: none;
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.nav-bar > :last-child:not(:first-child) { grid-column: 3; }
.nav-title {
  grid-column: 2; min-width: 0; text-align: center;
  font-family: var(--font-num); font-weight: 800; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; translate: 0 6px; transition: opacity 200ms var(--ease), translate 380ms var(--spring);
}
.is-scrolled .nav-bar.topbar { background: var(--glass-solid); box-shadow: inset 0 -1px 0 var(--glass-edge); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-scrolled .nav-bar.topbar {
    background: color-mix(in oklab, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  }
}
.is-scrolled .nav-title { opacity: 1; translate: 0 0; }
.is-scrolled .nav-bar .glass-btn { background: transparent; box-shadow: none; }

/* Produto em cartões agrupados, como os Ajustes */
.screen-product .content { gap: 12px; padding-top: 0; }
.screen-product .product-hero { padding-block: 0 4px; }
/* Como os Ajustes e o Saúde: título da seção fora do cartão, conteúdo dentro */
.group-card { background: var(--shelf); padding: 4px 16px; }
.group-card > .sheet-text:only-child, .group-card > .sheet-text:first-child { padding-block: 12px; }
.group-card > .sheet-text + .sheet-text { padding-bottom: 12px; }
.group-card .facts { margin: 0; border-top: 0; }
.group-card .fact:last-child { border-bottom: 0; }
.group-card > .btn { margin-block: 4px 12px; }
.group-note { padding: 6px 16px 0; font-size: 0.7647rem; color: var(--ink-2); text-wrap: pretty; }
.screen-product .history li:last-child { border-bottom: 0; }
.screen-product .btn-quiet { background: var(--paper); }

/* Compras: "novo item" como uma linha no fim da lista */
.shop-add { margin-top: 16px; }

/* ---------- Nota fiscal (importar a compra) ---------- */
.sheet.sheet-tall { min-height: 88dvh; }
.sheet-footer {
  position: sticky; bottom: calc(-20px - var(--safe-bottom)); z-index: 2;
  margin: 8px calc(var(--gutter) * -1) calc(-20px - var(--safe-bottom));
  padding: 12px var(--gutter) calc(16px + var(--safe-bottom));
  background: linear-gradient(to top, var(--paper) 70%, color-mix(in oklab, var(--paper) 0%, transparent));
}
.sheet-footer .btn { width: 100%; }
.nota-head { display: flex; flex-direction: column; gap: 4px; }
.nota-store { font-family: var(--font-num); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.nota-meta { font-size: 0.8824rem; color: var(--ink-2); }
.nota-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-control);
  background: color-mix(in oklab, var(--acabando) 30%, var(--paper)); color: var(--ink); font-size: 0.8824rem;
}
.nota-warn .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.nota-items { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); }
.nota-item { border-bottom: 1px solid var(--line); }
.nota-line { display: flex; align-items: center; gap: 4px; padding-inline: var(--gutter) 8px; }
.nota-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 8px 4px 8px 8px; border: 0; background: none; color: inherit; text-align: start;
}
.nota-main .row-name { font-size: 0.9412rem; }
.nota-main .row-sub { font-size: 0.7647rem; white-space: normal; }
.nota-qty { flex: none; font-family: var(--font-num); font-weight: 800; font-size: 1.1765rem; color: var(--entrada); font-variant-numeric: tabular-nums; }
.nota-chev { width: 16px; height: 16px; color: var(--ink-2); flex: none; transition: rotate 380ms var(--spring); }
.nota-item.is-open .nota-chev { rotate: 90deg; }
.nota-item.is-off .row-name { color: var(--ink-2); }
.nota-item.is-off .thumb { opacity: 0.5; }
/* Linha que expande: a altura anima de 0 até o conteúdo (grid 0fr → 1fr) */
.nota-edit { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms var(--spring); }
.nota-item.is-open .nota-edit { grid-template-rows: 1fr; }
.nota-edit-in {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-inline: calc(var(--gutter) + 40px) var(--gutter);
  opacity: 0; translate: 0 -6px; transition: opacity 200ms var(--ease), translate 460ms var(--spring);
}
.nota-item.is-open .nota-edit-in { opacity: 1; translate: 0 0; padding-bottom: 16px; }
.nota-src { font-size: 0.7647rem; color: var(--ink-2); }
.nota-link { display: flex; align-items: center; gap: 10px; }
.nota-link .row-main { gap: 0; }
.nota-guesses { display: flex; flex-wrap: wrap; gap: 8px; }
.nota-guesses .chip { background: color-mix(in oklab, var(--ink) 6%, transparent); border-color: transparent; font-weight: 600; text-align: start; }
.nota-guesses .chip::before { display: none; }
.nota-error { padding-inline: 0; }
body:has(.screen-scan) .sheet-footer { background: linear-gradient(to top, var(--paper) 70%, color-mix(in oklab, var(--paper) 0%, transparent)); }

/* ---------- Versão 3.11: hierarquia (revisão better-interface) ----------
   Escala com nomes por uso. Cada nível desce: título da tela > título de seção
   > nome do item > texto > secundário > nota. Antes o título de seção (15 px)
   era menor que o nome do item (17 px) que ele encabeça. */
:root {
  --text-large-title: 34px;  /* título da tela */
  --text-title: 1.2941rem;        /* seção da tela: Cozinha, Backup, Hoje */
  --text-headline: 1rem;     /* nome do item, título de cartão */
  --text-body: 1rem;         /* texto corrido */
  --text-callout: 0.8824rem;      /* linha secundária, histórico */
  --text-footnote: 0.7647rem;     /* notas de rodapé */
}
.list-title {
  font-family: var(--font-num); font-weight: 800; font-size: var(--text-title);
  line-height: 1.15; letter-spacing: -0.01em; margin-block: 32px 10px;
}
.list-title-icon { gap: 10px; }
.list-title-icon .icon { width: 22px; height: 22px; }
/* Dentro de um cartão (produto), o título do cartão é um degrau abaixo */
.screen-product main > section:not(.product-hero) > .list-title { font-size: var(--text-headline); margin-block: 18px 8px; }
.screen-product .sheet-text { font-size: var(--text-callout); }
/* Histórico é detalhe: menor e mais claro que o conteúdo principal */
.history li { font-size: var(--text-callout); padding-block: 8px; }
.history-when { font-size: var(--text-footnote); }
/* O nome do produto na folha usa a mesma fonte dos nomes na lista */
.product-name { font-family: var(--font-num); font-weight: 800; font-size: 1.1765rem; letter-spacing: -0.01em; }
/* Primeiro título de seção logo abaixo do título da tela não precisa do espaço todo */
.content > .list-title:first-child, .shop-lists > .list-title:first-child { margin-top: 20px; }

/* Botões secundários: preenchimento suave em vez de contorno preto, para não
   competir com o botão principal (cheio). Continuam com forma de botão. */
.btn-quiet { background: color-mix(in oklab, var(--ink) 7%, transparent); border-color: transparent; }
.btn-quiet:active:not(:disabled) { background: color-mix(in oklab, var(--ink) 13%, transparent); }
.sheet .btn-quiet { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.stepper-btn { border-color: transparent; background: color-mix(in oklab, var(--ink) 8%, transparent); }
.stepper-btn:disabled { border-color: transparent; background: color-mix(in oklab, var(--ink) 4%, transparent); }
.screen-product .stepper-btn { background: var(--paper); }
.row-minus { border-color: transparent; background: color-mix(in oklab, var(--ink) 7%, transparent); }
@media (forced-colors: active) {
  .btn-quiet, .stepper-btn, .row-minus { border: 1px solid ButtonText; }
}

/* Número da aba Compras: amarelo de "acabando" (o que falta comprar), não o
   vermelho de apagar, que no app é só para ações destrutivas. */
.tab-badge { background: var(--acabando); color: var(--on-acabando); }
@media (prefers-color-scheme: dark) { .tab-badge { background: var(--acabando); } }

/* ---------- Versão 3.12: pílulas de estado, blocos de resumo e seções ----------
   Inspiração: selos de estoque dos apps de inventário (um estado por pílula,
   separado do nome), as listas inteligentes do Lembretes (blocos com contagem)
   e os apps de despensa que separam por lugar da casa. */

/* Pílula de estado na linha de baixo, antes da marca e do tamanho */
.row-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; }
.row-meta .row-sub { min-width: 0; }
.row-meta:not(:has(.pill)) { margin-top: 0; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding-inline: 8px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.7647rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.pill .icon { width: 13px; height: 13px; }
.pill-low { background: var(--acabando); color: var(--on-acabando); }
.pill-zero { background: transparent; color: var(--ink); outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; }
.pill-soon { background: color-mix(in oklab, var(--acabando) 45%, var(--paper)); color: var(--ink); }
.pill-watch { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
.pill-expired { background: var(--ink); color: var(--paper); }
.pill-new { background: color-mix(in oklab, var(--entrada) 14%, var(--paper)); color: var(--entrada); }
.hero-pills { display: flex; gap: 6px; margin-top: 8px; }
@media (forced-colors: active) { .pill { border: 1px solid CanvasText; } }

/* Blocos de resumo (Acabando, Zerados, Vencendo), como no Lembretes */
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px var(--gutter) 4px; }
.tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon n" "label label";
  align-items: center; gap: 10px 6px;
  min-height: 84px; padding: 12px; border: 0;
  background: var(--shelf); color: var(--ink); text-align: start;
  transition-property: scale, background-color, color, opacity; transition-duration: 420ms, 200ms, 200ms, 200ms;
  transition-timing-function: var(--spring-bouncy), var(--ease), var(--ease), var(--ease);
}
.tile:active { scale: 0.96; transition-duration: 90ms, 200ms, 200ms, 200ms; }
.tile-icon { grid-area: icon; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.tile-icon .icon { width: 17px; height: 17px; }
.tile-n { grid-area: n; justify-self: end; font-family: var(--font-num); font-weight: 800; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-label { grid-area: label; font-size: 0.8824rem; font-weight: 700; line-height: 1.2; }
.tile-acabando .tile-icon { background: var(--acabando); color: var(--on-acabando); }
.tile-zerados .tile-icon { background: transparent; color: var(--ink); outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; }
.tile-vencendo .tile-icon { background: var(--ink); color: var(--paper); }
.tile-vencendo.is-urgent .tile-icon { background: var(--acabando); color: var(--on-acabando); }
/* Sem nada: fica apagado, mas o 0 continua lá dizendo por quê */
.tile.is-empty { opacity: 0.55; }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--paper); opacity: 1; }
.tile-vencendo[aria-pressed="true"]:not(.is-urgent) .tile-icon { background: var(--paper); color: var(--ink); }
.tile-zerados[aria-pressed="true"] .tile-icon { color: var(--paper); outline-color: var(--paper); }
@media (max-width: 359px) {
  .summary { gap: 8px; }
  .tile { padding: 10px; }
  .tile-n { font-size: 24px; }
  .tile-label { font-size: 0.8235rem; }
}
@media (forced-colors: active) { .tile[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }

/* Seções por ambiente no Armário (em "Tudo") */
.shelf-title { padding-inline: var(--gutter); margin-block: 26px 6px; }
.shelf > .shelf-title:first-child { margin-top: 16px; }
.title-count { margin-inline-start: auto; font-family: var(--font-ui); font-size: 0.8824rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shelf .rows { border-top: 1px solid var(--line); }
/* Sem espaço ao lado da pílula, o texto desce para a linha de baixo inteiro */
.row-meta { flex-wrap: wrap; row-gap: 2px; }
.row-meta .row-sub { flex: 1 1 10ch; }

/* ---------- Versão 3.14: opções pela frequência de uso ---------- */

/* Produto: Tirar 1 e Guardar 1 logo abaixo do topo (o que mais se faz ali) */
.quick-actions { display: grid; }
.quick-actions .btn { min-height: 48px; }
/* Ação rara, discreta: link pequeno sob o código */
.link-sm {
  align-self: flex-start; margin-top: 6px; padding: 10px 0; min-height: 44px;
  border: 0; background: none; color: var(--ink-2);
  font-size: 0.8824rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.fix-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.fix-cam { margin-inline: calc(var(--gutter) * -1); }
.fix-cam .cam-host { padding-top: 0; }

/* Leitor em Saída: tirar sem ler o código */
.quick-out { padding: 4px var(--gutter) 24px; }
.quick-out .list-title { margin-top: 20px; margin-bottom: 2px; }
.quick-out .field-note { margin-bottom: 8px; }
.quick-list { border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); margin-bottom: 12px; }
.quick-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px var(--gutter); border-bottom: 1px solid var(--line); }
.quick-row .row-main { flex: 1; min-width: 0; }
.quick-row .btn { flex: none; }

/* O que não se usa naquele momento não aparece */
.screen-scan.mode-saida [data-nota] { display: none; }
@media (display-mode: standalone) { .install-note { display: none; } }
.screen-product .quick-actions .btn-quiet { background: color-mix(in oklab, var(--ink) 7%, transparent); }

/* ---------- Versão 3.15: Remédios ---------- */

/* Tarja tem cor de verdade na caixa: aqui ela é informação, como a cor do modo */
:root { --tarja-vermelha: #C8102E; }
@media (prefers-color-scheme: dark) { :root { --tarja-vermelha: #FF6B7D; } }

/* Remédio sem foto: uma caixinha branca, inclinada, com a faixa da tarja
   embaixo (vermelha, preta ou nenhuma) e duas linhas de "texto" da embalagem. */
.thumb-med { background: var(--shelf); }
.mini-box {
  position: relative; width: 70%; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden;
  background: linear-gradient(160deg, #fff, #eef0ed);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(22, 24, 23, 0.1);
  rotate: -8deg;
}
.mini-box::before, .mini-box::after { content: ''; position: absolute; left: 14%; border-radius: 2px; }
.mini-box::before { top: 18%; width: 50%; height: 12%; background: #161817; }
.mini-box::after { top: 40%; width: 34%; height: 8%; background: #9aa19c; }
.mini-box-band { position: absolute; inset: auto 0 0 0; height: 26%; }
.mini-box.is-red .mini-box-band { background: #C8102E; }
.mini-box.is-black .mini-box-band { background: #161817; }
@media (forced-colors: active) { .mini-box { outline: 1px solid CanvasText; } }

/* Fatos do remédio: rótulo pequeno em cima, valor embaixo, fio entre eles */
.facts { margin: 0 0 12px; border-top: 1px solid var(--line); }
.fact { padding-block: 10px; border-bottom: 1px solid var(--line); }
.fact dt { font-size: 0.7647rem; font-weight: 600; color: var(--ink-2); }
.fact dd { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.fact-sub { display: block; font-size: 0.7647rem; color: var(--ink-2); }
.fact-num { font-variant-numeric: tabular-nums; }
.tarja {
  display: inline-block; width: 22px; height: 10px; margin-inline-end: 8px;
  border-radius: 2px; vertical-align: 1px;
}
.tarja-vermelha, .tarja-vermelha-retencao { background: var(--tarja-vermelha); }
.tarja-preta { background: #161817; outline: 1px solid var(--ink-2); outline-offset: -1px; }
.tarja-livre { background: transparent; outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; }
@media (forced-colors: active) { .tarja { outline: 1px solid CanvasText; } }

/* Produto antigo que é remédio: oferta discreta para passar para a aba */
.med-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-control); background: var(--shelf); }
.med-offer .sheet-text { display: flex; gap: 8px; align-items: flex-start; }
.med-offer .sheet-text .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* Aba Remédios */
.found-title { margin: 0; padding: 18px var(--gutter) 6px; display: flex; flex-direction: column; gap: 2px; }
.found-name { font-family: var(--font-num); font-weight: 700; font-size: 1.0588rem; line-height: 1.25; }
.found-sub { font-size: 0.8824rem; font-weight: 400; color: var(--ink-2); }
.meds-found { border-top: 1px solid var(--line); }
.meds-found .row { min-height: 56px; padding-block: 8px; }
.meds-found .row-name { font-family: var(--font-ui); font-size: 0.9412rem; font-weight: 600; }
.row-chevron { flex: none; width: 16px; height: 16px; color: var(--ink-2); }
.meds-hint { padding: 12px var(--gutter); color: var(--ink-2); font-size: 0.8824rem; }

/* ---------- Leitor: modo nota fiscal (QR Code) ---------- */
/* Mira quadrada no meio, instrução em cima e o botão de QR aceso */
.viewfinder.is-qr { aspect-ratio: 1; max-height: 62dvh; margin-inline: auto; }
.viewfinder.is-qr .aim { left: 50%; right: auto; top: 44%; width: 54%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.viewfinder.is-qr .aim-line { display: none; }
.cam-qr-note {
  position: absolute; z-index: 2; top: 10px; left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100% - 20px);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(22, 24, 23, 0.86); color: #F1F2F0;
  font-size: 0.8824rem; font-weight: 600; text-align: center; text-wrap: balance;
}
.cam-paste { top: auto; bottom: 70px; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .cam-qr-note { background: #161817; } }

/* Aviso curto sobre a câmera (modo rápido): aparece, fica 2 s e some */
.cam-notice {
  position: absolute; z-index: 3; top: 10px; left: 50%; translate: -50% -6px;
  width: max-content; max-width: calc(100% - 20px);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(22, 24, 23, 0.86); color: #F1F2F0;
  font-size: 0.8824rem; font-weight: 600; text-align: center;
  opacity: 0; transition: opacity 220ms var(--ease), translate 320ms var(--spring);
  pointer-events: none;
}
.cam-notice.is-on { opacity: 1; translate: -50% 0; }
.viewfinder.is-qr .cam-notice { display: none; }
@media (prefers-reduced-motion: reduce) { .cam-notice { transition: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .cam-notice { background: #161817; } }

/* "Produto sem código de barras": botão de texto na cor do modo, logo abaixo
   da câmera (ícone nenhum comunica "sem código") */
.cam-alt {
  display: block; margin: 6px auto 0; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 999px; background: none;
  color: var(--mode); font-size: 0.9412rem; font-weight: 700;
  transition-property: scale, background-color, color; transition-duration: 150ms, 150ms, 360ms; transition-timing-function: var(--ease);
}
.cam-alt:active { scale: 0.96; background: color-mix(in oklab, var(--mode) 12%, transparent); }
.screen-scan .cam-alt + * { margin-top: 0; }

/* ---------- Versão 3.19: revisão com olhar de designer da Apple ---------- */

/* Menu aberto pelo toque: foco no próprio menu, sem anel */
.menu:focus { outline: none; }

/* Ambientes do Armário: quando não cabem, a fileira rola e a borda esmaece,
   dizendo que tem mais (em vez de cortar "Remé" no meio) */
.home-tools .tabs {
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent);
}
.home-tools .tab { scroll-snap-align: start; }

/* "−" da linha: glifo leve num círculo, sem borda; a etiqueta é quem pesa */
.row-minus {
  width: 44px; height: 44px; margin-inline-end: calc(var(--gutter) - 6px);
  border: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink-2);
}
.row-minus-space { width: 44px; margin-inline-end: calc(var(--gutter) - 6px); }
.row-minus .icon { width: 18px; height: 18px; }
.row-minus:active:not(:disabled) { background: color-mix(in oklab, var(--ink) 14%, transparent); }
.row-item .row { padding-inline-end: 10px; }

/* Compras: marcar é redondo, como no Lembretes */
.check { border-radius: 50%; border-width: 1.5px; border-color: var(--ink-2); }
.check:checked { border-color: var(--ink); }

/* Mais: registros com o nome em cima e o tipo e a hora embaixo */
.history-log { align-items: baseline; }
.history-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-at { color: var(--ink-2); font-size: var(--text-footnote); text-align: end; }
.history-log .history-type { font-size: var(--text-footnote); }
.history .type-entrada .history-type { color: var(--entrada); }
.history .type-saida .history-type { color: var(--saida); }
.history .type-contagem .history-type { color: var(--contagem); }
.history-log > span:first-child { color: inherit; }

/* Folha de guardar: ações secundárias em texto, sem sublinhado de site.
   "Marcar validade" na cor do modo (como um botão de texto do iOS); "Não é
   este?" discreto, para não competir com o botão principal. */
.btn-expiry { text-decoration: none; color: var(--mode, var(--ink)); }
.btn-other { align-self: center; text-decoration: none; color: var(--ink-2); font-size: 0.8824rem; font-weight: 600; }

/* Ação da tela no canto de cima (como o "Editar" dos Contatos): cápsula com
   ícone e texto, porque "nota fiscal" não se explica só com um desenho */
.head-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: 12px 16px; border: 0; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink);
  font-size: 0.8824rem; font-weight: 700; text-decoration: none;
  transition-property: scale, background-color; transition-duration: 150ms; transition-timing-function: var(--ease);
}
.head-pill .icon { width: 18px; height: 18px; }
.head-pill:active { scale: 0.96; background: color-mix(in oklab, var(--ink) 14%, transparent); }

/* ---------- Validade pela câmera (leitura no aparelho) ---------- */
.exp-cam { margin-top: 10px; }
.exp-vf { min-height: 190px; }
.exp-vf .aim { top: 50%; height: 38%; }
.exp-vf .aim-line { display: none; }
/* Instrução sobre a imagem, na mesma cápsula dos outros avisos da câmera */
.exp-status {
  position: absolute; z-index: 2; top: 10px; left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100% - 20px); overflow: hidden;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(22, 24, 23, 0.86); color: #F1F2F0;
  /* Mesmo vidro escuro da lanterna: flutua sobre o vídeo, que se move */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.3);
  font-size: 0.8824rem; font-weight: 600; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums; /* "Preparando o leitor (1ª vez) 45%" */
}
/* Uma linha (a cápsula anima a largura, js); texto grande pode quebrar */
/* Centrado e sem reticências: enquanto a cápsula muda de largura, o texto
   novo é recortado igual dos dois lados (flex centralizado transborda para
   os dois lados), não aparece "abai…" */
.exp-status-text { display: flex; justify-content: center; }
.text-large .exp-status { white-space: normal; text-wrap: balance; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .exp-status {
    background: var(--glass-media);
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate));
    backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .exp-status { background: #161817; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* A mira da validade: cantos brancos; viu uma data, ficam âmbar e a mira
   respira (mola com um toque de rebote); aceitou, a mira trava: encolhe um
   pouco, o miolo ganha um véu âmbar e o resto escurece. */
@property --aim-color { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
.exp-vf .aim {
  --aim-color: #FFFFFF;
  transition-property: --aim-color, scale, background-color, box-shadow;
  transition-duration: 250ms, 450ms, 250ms, 300ms;
  transition-timing-function: var(--ease), var(--spring-bouncy), var(--ease), var(--ease);
}
.exp-vf .aim::before, .exp-vf .aim::after {
  background:
    linear-gradient(var(--aim-color), var(--aim-color)) left top / 22px 3px no-repeat,
    linear-gradient(var(--aim-color), var(--aim-color)) left top / 3px 22px no-repeat,
    linear-gradient(var(--aim-color), var(--aim-color)) right top / 22px 3px no-repeat,
    linear-gradient(var(--aim-color), var(--aim-color)) right top / 3px 22px no-repeat;
}
.exp-vf.is-seen .aim { --aim-color: var(--val); scale: 1.03; }
.exp-vf.is-locked .aim {
  --aim-color: var(--val); scale: 0.96;
  background-color: color-mix(in oklab, var(--val) 16%, transparent);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) { .exp-vf .aim { transition-property: --aim-color, background-color, box-shadow; } .exp-vf.is-seen .aim, .exp-vf.is-locked .aim { scale: none; } }

/* ---------- Texto do tamanho escolhido no iPhone (Dynamic Type) ----------
   Títulos crescem junto, mais devagar (como o Large Title do iOS: 34 vira 44
   no dobro do texto). */
.page-title, .home-head .page-title, .screen-home .page-title { font-size: calc(34px + (1rem - 17px) * 0.6); }
.product-hero .page-title { font-size: calc(24px + (1rem - 17px) * 0.8); }
.sheet-title { font-size: calc(30px + (1rem - 17px) * 0.6); }
.empty-lead { font-size: calc(28px + (1rem - 17px) * 0.6); }
.nota-store { font-size: calc(24px + (1rem - 17px) * 0.8); }
/* Texto grande: o que fica lado a lado vira uma coluna, em vez de espremer */
.text-large .summary { grid-template-columns: 1fr; }
.text-large .tile { grid-template-columns: auto 1fr auto; grid-template-areas: "icon label n"; min-height: 0; }
.head-pill { white-space: nowrap; }
/* Com letra grande não cabe o texto ao lado do título: fica só o ícone,
   do tamanho de um botão (o nome segue para o VoiceOver) */
.text-large .head-pill { padding: 0; width: 44px; justify-content: center; }
.text-large .head-pill .icon { width: 22px; height: 22px; }
.text-large .head-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Tela estreita: Validade e Nota fiscal não cabem com texto ao lado do
   título. Até 409 px (iPhone comum) só a Nota fiscal vira ícone (o QR Code se
   reconhece); até 359 px, as duas. O nome segue para o VoiceOver. */
@media (max-width: 409px) {
  .head-pill[data-nota] { padding: 0; width: 44px; justify-content: center; }
  .head-pill[data-nota] .icon { width: 22px; height: 22px; }
  .head-pill[data-nota] .head-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .head-pill { padding: 0; width: 44px; justify-content: center; }
  .head-pill .icon { width: 22px; height: 22px; }
  .head-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Nome do produto: com letra grande, mais linhas antes das reticências */
.text-large .row-name { -webkit-line-clamp: 4; }
.tile-label { overflow-wrap: anywhere; }

/* Voltar arrastando da borda (app instalado): a tela sai com o dedo, com
   sombra na borda, e por baixo o fundo escurece como a tela de trás */
html.swiping body { background: color-mix(in oklab, var(--ink) 12%, var(--paper)); transition: none; }
html.swiping #app { background: var(--paper); box-shadow: -10px 0 30px rgb(0 0 0 / 0.12); min-height: 100dvh; will-change: translate; }

/* ---------- Versão 3.25: alinhamento e retorno (como a Apple faz) ---------- */

/* Tela vazia no centro, com um símbolo grande e o próximo passo, como o
   ContentUnavailableView do iOS */
.empty-state, .empty-filter { align-items: center; text-align: center; }
.empty-state { justify-content: center; min-height: 52dvh; padding: 40px 32px; gap: 6px; }
.empty-state p:not(.empty-lead), .empty-filter p { max-width: 30ch; }
.empty-state .btn { margin-top: 14px; min-width: 220px; }
.empty-filter { padding-block: 40px; }
.empty-icon {
  display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 10px;
  border-radius: 50%; background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink-2);
}
.empty-icon .icon { width: 34px; height: 34px; }
.empty-icon.is-small { width: 52px; height: 52px; margin-bottom: 4px; }
.empty-icon.is-small .icon { width: 24px; height: 24px; }
.receipt-empty { text-align: center; padding-block: 28px; }

/* Página do produto: cabeçalho no centro, como um contato; a quantidade fica
   no meio, entre Tirar e Guardar */
.product-hero { grid-template-columns: 1fr; grid-template-areas: "foto" "info"; justify-items: center; text-align: center; gap: 12px; }
.product-hero .page-title { text-wrap: balance; }
.product-hero .hero-pills { justify-content: center; flex-wrap: wrap; }
.product-hero .product-sub { text-wrap: balance; }
.quick-actions { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; }
.btn-stack { flex-direction: column; gap: 4px; min-height: 76px; padding: 10px 6px; font-size: 0.8824rem; }
.btn-stack .icon { width: 22px; height: 22px; }
.hero-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 76px; }
.hero-qty-label { font-size: 0.7647rem; color: var(--ink-2); white-space: nowrap; }
.hero-qty > .tag { view-transition-name: hero-tag; }
.text-large .quick-actions { grid-template-columns: 1fr; }
.text-large .hero-qty { order: -1; }

/* Barras presas no topo: o que passa por baixo some no vidro, sem aparecer
   atrás do texto (o "scroll edge" do iOS) */
.screen-home.is-collapsed .home-tools.glass-thick, .mini-bar { background: color-mix(in oklab, var(--paper) 97%, transparent); }

/* Títulos de seção alinhados com o texto de dentro dos cartões, como nos Ajustes */
.screen-product main > section:not(.product-hero) > .list-title { padding-inline: 16px; }
.screen-data .list-title { font-size: var(--text-headline); padding-inline: 12px; margin-block: 24px 8px; }
.screen-data .group-note { padding-inline: 12px; }

/* Aviso: ícone do gesto, o que aconteceu em uma linha e o resto embaixo */
.toast:has(.toast-icon) { padding-left: 10px; gap: 10px; }
.toast-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in oklab, currentColor 16%, transparent);
}
.toast-icon .icon { width: 18px; height: 18px; }
.toast-text { min-width: 0; }
.toast-head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; }
/* Desfazer como texto, sem moldura (como no Mail): sobra espaço para a frase */
.toast-action { border-color: transparent; padding-inline: 10px; text-decoration: underline; text-underline-offset: 3px; }
.toast-sub { display: block; margin-top: 1px; font-size: 0.8235rem; opacity: 0.88; }
.text-large .btn-stack { flex-direction: row; gap: 8px; min-height: 56px; }

/* ---------- Versão 3.26: acabamento (make-interfaces-feel-better) ---------- */

/* Raios concêntricos: raio de fora = raio de dentro + a distância entre eles */
.group { border-radius: 20px; }                  /* ícone 8 + 12 */
.group-card { border-radius: 28px; }             /* botões 12 + 16 */
.group-card .btn, .group-card .stepper-btn, .group-card .icon-btn { border-radius: 12px; }
.sheet { border-radius: 38px 38px 0 0; }         /* botão Fechar redondo (22) + 16 */
.toast:has(.toast-icon) { border-radius: 27px; } /* ícone redondo (17) + 10 */
.tile { border-radius: 26px; }                   /* ícone redondo (15) + 12 */

/* Visto da caixa de marcar: sempre no lugar, aparece com opacidade, escala e
   desfoque (transição, pode ser interrompida) */
.check::after {
  content: ''; width: 13px; height: 7px; border: solid var(--paper); border-width: 0 0 3px 3px;
  transform: translateY(-2px) rotate(-45deg);
  opacity: 0; scale: 0.25; filter: blur(4px);
  transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.check:checked::after { opacity: 1; scale: 1; filter: blur(0); }
.check.is-fresh::after { opacity: 0; scale: 0.25; filter: blur(4px); transition: none; }

/* Área de toque de 44 px nas abas de ambiente */
.tab { min-width: 44px; }

/* Remover sem borda para simular volume: fundo vermelho claro, como no iOS */
.btn-danger-ghost { border-color: transparent; background: color-mix(in oklab, var(--danger) 10%, transparent); }
.btn-danger-ghost:active:not(:disabled) { background: color-mix(in oklab, var(--danger) 16%, transparent); }

/* Títulos grandes da tela vazia em linhas equilibradas */
.empty-state .empty-lead { text-wrap: balance; }

/* A quantidade do produto é um botão: toca e corrige */
.hero-qty { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 16px; transition: scale 150ms var(--ease); }
.hero-qty:active { scale: 0.96; }
/* Entrada/Saída: cada opção tem 42 px de altura; o toque vale 44 (só na
   vertical, para não invadir a opção ao lado) */
.mode-opt { position: relative; }
.mode-opt::before { content: ''; position: absolute; inset: -1px 0; }

/* Alto contraste (Windows): a aba atual com o fundo de destaque do sistema.
   Estava sendo anulada pela regra da pílula que desliza; vem por último. */
@media (forced-colors: active) {
  .tab-item[aria-current="page"] { background: Highlight; }
}

/* ---------- Versão 3.27: usar o que a foto leu ---------- */
/* Fim da lista de sugestões: separador "Nenhuma dessas?" e a linha de ação,
   com a própria foto e o nome lido. */
.pick > .pick-caption {
  padding: 14px var(--gutter) 6px; border-bottom: 0;
  font-size: 0.8235rem; font-weight: 700; color: var(--ink-2);
  background: color-mix(in oklab, var(--ink) 4%, transparent);
}
.suggest-photo { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.suggest-photo .row-name { font-weight: 800; }
.suggest-photo .row-sub { white-space: normal; text-wrap: pretty; }
.suggest-photo .thumb img { object-fit: cover; }
.suggest-photo .row-chevron { flex: none; width: 18px; height: 18px; color: var(--ink-2); }

/* ---------- Versão 3.29: marcar validade como num app da Apple ---------- */

/* Linhas de formulário (como nos Ajustes): bloco arredondado, linhas de 52 px,
   fio entre elas começando depois da margem. Usadas na linha "Validade" da
   folha de guardar e na lista de validades da página do produto. */
.form-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--shelf); border-radius: 20px; overflow: hidden; }
.form-rows > li { position: relative; }
.form-rows > li + li::before { content: ''; position: absolute; top: 0; inset-inline: 16px 0; height: 1px; background: var(--line); }
.form-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 10px 16px;
  border: 0; background: none; color: var(--ink); text-align: start;
  font: inherit; font-size: 1rem; cursor: pointer;
  transition: background-color 150ms var(--ease);
}
.form-row:active:not(.is-static) { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.form-row.is-static { cursor: default; padding-inline-end: 4px; }
.form-row-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--mode, var(--ink)); color: var(--on-mode, var(--paper)); }
.form-row-icon .icon { width: 18px; height: 18px; }
.form-row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.form-row-label.is-muted { color: var(--ink-2); }
.form-row-value { flex: none; color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.form-row.has-value .form-row-value { color: var(--ink); font-weight: 700; }
.form-row-chevron { flex: none; width: 16px; height: 16px; color: var(--ink-2); }
.form-row.is-action { color: var(--mode, var(--entrada)); font-weight: 700; }
.form-row.is-action > .icon { flex: none; width: 20px; height: 20px; }
.form-rows + .group-note { padding: 6px 16px 0; }
/* Fio embaixo de uma linha com ícone começa no texto, como no iOS (16 + 20 + 12) */
.form-rows > li:has(> .form-row.is-action) + li::before { inset-inline-start: 48px; }
/* O bloco corta o que passa da borda: o anel de foco fica para dentro, como nas
   linhas da tela Mais */
.form-row:focus-visible, .form-rows .icon-btn:focus-visible { outline-offset: -3px; }
/* Na página do produto, o mesmo raio dos outros cartões (Consumo, Histórico) */
.screen-product .form-rows { border-radius: 28px; }

/* Uma data por linha; a que vence logo leva o amarelo de "vencendo" */
.exp-lot-date { font-family: var(--font-num); font-weight: 800; font-size: 1.0588rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.exp-lot-sub { font-size: 0.8824rem; color: var(--ink-2); }
.lot-row.is-soon .exp-lot-date { align-self: flex-start; padding-inline: 6px; border-radius: 6px; background: var(--acabando); color: var(--on-acabando); }
.lot-row.is-past .exp-lot-sub { color: var(--danger); }
.lot-qty { font-size: var(--text-footnote); }
.exp-lot-drop { flex: none; color: var(--ink-2); }
.exp-lot-drop .icon { width: 20px; height: 20px; }

/* Páginas dentro da folha (Validade), com "‹" no lugar do X */
.sheet-page { display: flex; flex-direction: column; gap: 14px; }

/* Leitura: a câmera grande, as datas lidas logo embaixo e "Digitar a data" */
.exp-scan .exp-cam { margin: 0; }
.exp-scan .exp-vf { min-height: 0; aspect-ratio: 4 / 3; border-radius: 22px; }  /* folha 38 − margem 16 */
/* Caminho alternativo ("Digitar a data", "Outra data para…"): texto na cor
   do modo, em negrito como o ícone ao lado, sem sublinhado nem fundo (como o
   "Inserir dados manualmente" da Carteira) */
.exp-alt { align-self: center; min-height: 44px; padding-inline: 12px; border: 0; background: none; color: var(--mode, var(--ink)); font-weight: 700; text-decoration: none; }
.exp-alt:active:not(:disabled) { background: color-mix(in oklab, currentColor 10%, transparent); }

/* Datas lidas: uma fileira em flexbox que vai de borda a borda. Uma data
   ocupa a largura toda, duas dividem ao meio, três em terços. A que chega
   cresce devagar (flex-grow em transição de 300 ms) enquanto as outras
   encolhem, sem pulo, e por meio segundo nenhuma aceita toque (js). Espaço
   reservado desde o início, então a fileira não empurra nada. Cápsulas claras
   com respiro dentro, como as datas que o iPhone reconhece num texto. */
.exp-picks { display: flex; gap: 8px; min-height: 48px; margin-top: 12px; }
.exp-picks-hint { flex: 1; align-self: center; margin: 0; font-size: 0.8235rem; color: var(--ink-2); text-align: center; }
.exp-pick {
  flex: 1 1 0; min-width: 0; container-type: inline-size;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding-inline: 14px; border: 0; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink);
  font-family: var(--font-num); font-weight: 800; font-size: 0.9412rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; cursor: pointer;
  transition-property: opacity, flex-grow, scale, background-color, filter, box-shadow;
  transition-duration: 200ms, 300ms, 240ms, 200ms, 240ms, 200ms;
  transition-timing-function: var(--ease), cubic-bezier(0.2, 0, 0, 1), var(--spring), var(--ease), var(--ease), var(--ease);
}
.exp-pick .icon { flex: none; width: 16px; height: 16px; color: var(--val-ink); }
/* Chega crescendo de um leve desfoque, com a mola do app */
.exp-pick.is-new { opacity: 0; flex-grow: 0; scale: 0.92; filter: blur(4px); }
.exp-pick:active { scale: 0.96; background: color-mix(in oklab, var(--ink) 14%, transparent); }
/* Sem espaço com respiro: primeiro sai o calendário, depois o ano fica com
   dois dígitos (três datas numa tela estreita) */
.exp-pick-short { display: none; }
@container (max-width: 116px) { .exp-pick .icon { display: none; } }
@container (max-width: 92px) { .exp-pick-long { display: none; } .exp-pick-short { display: inline; } }
@media (prefers-reduced-motion: reduce) { .exp-pick { transition-property: opacity, background-color; } .exp-pick.is-new { flex-grow: 1; } }
.text-large .exp-picks { flex-direction: column; }
/* Quantas imagens mostraram a data ("3×") e a mais provável com fundo mais
   forte. Nada troca de lugar: só o número e o fundo mudam. */
/* No canto, fora do fluxo: cabe mesmo com três datas numa tela estreita */
.exp-pick { position: relative; }
.exp-pick-count { position: absolute; top: 4px; inset-inline: 0; text-align: center; font-size: 0.6471rem; font-weight: 800; line-height: 1; color: var(--val-ink); }
.exp-pick:has(.exp-pick-count:not(:empty)) > span:not(.exp-pick-count) { translate: 0 3px; }
.exp-pick-count:empty { display: none; }
/* A mais provável: marcador âmbar, como o texto que o iPhone reconhece */
.exp-pick.is-likely { background: var(--val-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--val) 75%, transparent); }
@media (prefers-reduced-motion: reduce) { .exp-pick.is-new { scale: none; filter: none; } }

/* "11/08/2027 é a validade?". Cartão com respiro de 8 em volta dos botões
   (raio 14): 14 + 8 = 22, concêntrico. */
.exp-ask {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 8px; border-radius: 22px;
  background: var(--val-soft);
  animation: card-in 480ms var(--spring);
}
/* Cartões que entram na folha (pergunta, painel): sobem um pouco, com mola */
@keyframes card-in { from { opacity: 0; translate: 0 10px; scale: 0.98; } }
/* "Sim" é a ação principal: âmbar com texto escuro, como a etiqueta "Acabando" */
.exp-ask [data-ask-yes], .exp-find [data-find-yes] { background: var(--val); border-color: transparent; color: #161817; }
.exp-ask [data-ask-no] { background: color-mix(in oklab, var(--paper) 70%, transparent); }
.exp-ask[hidden] { display: none; }
.exp-ask-text { margin: 0; padding: 8px 8px 2px; font-weight: 600; text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
.exp-ask-actions { display: flex; gap: 8px; }
.exp-ask-actions .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .exp-ask { animation: none; } }

/* "A validade está aqui?": a melhor foto com o palpite marcado (o resto
   escurece), toque para corrigir, e as outras fotos numa fileira */
/* Cartão próprio, como a pergunta: respiro 8, raio 22, a foto com 14. */
.exp-find {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 12px; padding: 8px 8px 12px; border-radius: 22px;
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  animation: card-in 480ms var(--spring);
}
@media (prefers-reduced-motion: reduce) { .exp-find, .exp-ask { animation: fade-in 200ms var(--ease); } }
.sheet-page > .exp-find { margin-top: 0; } /* na folha, o espaço entre as partes já é o gap */
.exp-find[hidden] { display: none; }
.exp-find-title { margin: 0; padding-top: 6px; font-weight: 700; text-align: center; text-wrap: balance; }
.exp-find-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 14px; overflow: hidden; outline: 1px solid var(--img-outline, transparent); outline-offset: -1px; }
.exp-find-img { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; cursor: crosshair; touch-action: manipulation; }
.exp-find-box {
  position: absolute; pointer-events: none; border-radius: 8px;
  border: 2px solid var(--val); box-shadow: 0 0 12px color-mix(in oklab, var(--val) 55%, transparent), 0 0 0 9999px rgba(0, 0, 0, 0.38);
}
@media (prefers-reduced-motion: no-preference) { .exp-find-box { transition: left 200ms var(--ease), top 200ms var(--ease), width 200ms var(--ease), height 200ms var(--ease); } }
.exp-find-busy {
  position: absolute; inset: auto 8px 8px 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; line-height: 1.3; font-size: 0.8235rem; font-weight: 600;
  background: rgba(22, 24, 23, 0.86); color: #F1F2F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .exp-find-busy { background: var(--glass-media); -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate)); backdrop-filter: blur(16px) saturate(var(--glass-saturate)); }
}
.exp-find-busy[hidden] { display: none; }
.exp-find-note { margin: 0; color: var(--ink-2); font-size: 0.8235rem; text-align: center; text-wrap: pretty; }
.exp-find-note:empty { display: none; }
.exp-find-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.exp-find-fail[hidden] { display: none; }
.exp-find-crop { display: block; max-width: 100%; max-height: 120px; border-radius: 10px; image-rendering: auto; outline: 1px solid var(--img-outline); outline-offset: -1px; }
.exp-find-actions { align-self: stretch; display: flex; gap: 8px; }
.exp-find-actions .btn { flex: 1; }
.exp-find-actions .btn[hidden] { display: none; }
.exp-find-others { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.exp-find-others[hidden] { display: none; }
.exp-find-strip { display: flex; gap: 8px; justify-content: center; }
.exp-find-thumb { width: 64px; height: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--shelf); cursor: pointer; outline: 1px solid var(--img-outline); outline-offset: -1px; transition-property: scale; transition-duration: 150ms; }
.exp-find-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-find-thumb:active { scale: 0.96; }
/* Piscar branco quando a foto automática é tirada (o js anima a opacidade) */
.exp-shutter { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none; }
/* As saídas da câmera, sempre no mesmo lugar e sempre à vista: "Tirar foto"
   (a câmera do celular) e "Digitar a data", lado a lado. Nada aparece ou
   some: o caminho que a câmera recomenda só ganha fundo. */
.exp-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.exp-cam .exp-bar { margin-top: 12px; }
.exp-bar .exp-alt {
  flex: 0 1 auto; padding-inline: 20px; border-radius: 999px;
  transition-property: scale, background-color; transition-duration: 150ms; transition-timing-function: var(--ease);
}
/* Na barra o destaque é só o fundo (o respiro já é o mesmo): nada se mexe. */
.exp-bar .exp-alt.is-suggested { animation: none; background: var(--val-soft); color: var(--ink); }
.exp-bar .exp-alt .icon { width: 20px; height: 20px; color: var(--val-ink); }
/* "Tirar foto" ou "Digitar a data" vira o caminho sugerido */
.exp-alt.is-suggested {
  padding-inline: 20px; border-radius: 999px;
  background: color-mix(in oklab, var(--mode, var(--ink)) 13%, transparent);
  animation: fade-in 400ms var(--ease);
}
@media (prefers-reduced-motion: reduce) { .exp-alt.is-suggested { animation: none; } }

/* Diagnóstico da leitura (ligado em Mais): o recorte enviado ao leitor e as
   últimas tentativas, com o motivo de a votação não ter confirmado */
.exp-debug { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: color-mix(in oklab, var(--ink) 5%, transparent); }
.exp-debug summary { font-size: 0.8235rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.exp-debug-shot { display: block; max-width: 100%; max-height: 110px; margin: 10px auto 0; border-radius: 8px; image-rendering: pixelated; }
.exp-debug-log {
  margin: 10px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px;
  font: 0.72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); overflow-wrap: anywhere;
}
.exp-debug-log .is-event { color: var(--ink); }
.exp-debug-log .is-ok { color: var(--ink); font-weight: 700; }

/* Digitar olhando a melhor foto da câmera; um toque amplia no ponto tocado */
.exp-type-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.exp-type-zoom {
  display: block; width: 100%; height: 190px; padding: 0; border: 0; overflow: hidden; cursor: zoom-in;
  background: var(--shelf); border-radius: var(--r-thumb); outline: 1px solid var(--img-outline); outline-offset: -1px;
}
.exp-type-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 250ms var(--ease); }
.exp-type-zoom.is-zoomed { cursor: zoom-out; }
.exp-type-zoom.is-zoomed img { transform: scale(2.6); }
.exp-type-photo figcaption { color: var(--ink-2); font-size: 0.8235rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .exp-type-zoom img { transition: none; } }

/* Confirmação: a data por extenso, grande, e quantas vencem nela */
.exp-confirm { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: 8px 4px; text-align: center; }
.exp-confirm-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%;
  background: color-mix(in oklab, var(--mode, var(--ink)) 14%, transparent); color: var(--mode, var(--ink));
}
.exp-confirm-icon .icon { width: 28px; height: 28px; }
.exp-confirm-icon.is-past { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.exp-confirm-date { margin: 0; font-family: var(--font-num); font-weight: 800; font-size: calc(26px + (1rem - 17px) * 0.6); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.exp-confirm-rel { margin: 0; color: var(--ink-2); text-wrap: balance; }
.exp-confirm-rel.is-past { color: var(--danger); }
.exp-type .field-note.is-error { color: var(--danger); }
.exp-howmany { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 22px; background: var(--shelf); }
.exp-howmany-label { margin: 0; font-weight: 700; text-wrap: balance; text-align: center; }
.exp-howmany .stepper-host { width: 220px; }
.exp-howmany-of { margin: -4px 0 0; font-size: 0.8235rem; color: var(--ink-2); }
.exp-actions { display: flex; flex-direction: column; gap: 4px; }
/* Confirmar a validade: os botões ficam presos no fim da folha (como o rodapé
   da nota fiscal). Com várias datas cadastradas, "Salvar" saía da tela. */
.exp-confirm-page .exp-actions, .sheet .exp-scan .exp-bar {
  position: sticky; bottom: calc(-20px - var(--safe-bottom)); z-index: 2;
  margin: 0 calc(var(--gutter) * -1) calc(-20px - var(--safe-bottom));
  padding: 12px var(--gutter) calc(16px + var(--safe-bottom));
  background: var(--paper);
}
/* Degradê curto acima do rodapé: o conteúdo some ao passar por baixo, sem
   texto por cima de texto. */
.exp-confirm-page .exp-actions::before, .sheet .exp-scan .exp-bar::before {
  content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(to top, var(--paper), color-mix(in oklab, var(--paper) 0%, transparent));
}
.exp-confirm-page .exp-actions { gap: 8px; }
/* Formulários nas folhas (guardar, cadastrar, editar): o botão principal fica
   preso no fim da folha. Em 320 e 375 px e com letra grande, "Guardar" e
   "Salvar" ficavam abaixo da tela. */
.sheet .sheet-sticky {
  position: sticky; bottom: calc(-20px - var(--safe-bottom)); z-index: 2;
  margin: 0 calc(var(--gutter) * -1) calc(-20px - var(--safe-bottom));
  padding: 12px var(--gutter) calc(16px + var(--safe-bottom));
  background: var(--paper);
}
.sheet .sheet-sticky::before {
  content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(to top, var(--paper), color-mix(in oklab, var(--paper) 0%, transparent));
}
.sheet .sheet-sticky:not(:last-child) { margin-bottom: 0; padding-bottom: 12px; }
.sheet-sticky .btn { width: 100%; }
/* Tela baixa (iPhone SE): o ícone do calendário é enfeite; sai para caber a lista. */
@media (max-height: 700px) { .exp-confirm-page .exp-confirm-icon { display: none; } }
/* Pergunta da data repetida junto das respostas, no rodapé preso. */
.exp-dup-ask { margin: 0 0 4px; font-size: 0.9412rem; text-wrap: pretty; }
/* No rodapé preso, o botão cinza é sólido (o conteúdo passa por baixo). */
.exp-confirm-page .exp-actions .btn-quiet { background: color-mix(in oklab, var(--ink) 8%, var(--paper)); }

/* ---------- Versão 3.32: voltar para onde estava ---------- */
/* A linha do produto de onde se voltou fica marcada e apaga devagar (a lista
   também volta para a mesma posição, em js/app.js) */
.row-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in oklab, var(--ink) 9%, transparent);
  opacity: 0; transition: opacity 700ms ease-out;
}
.row-item.is-return::after { opacity: 1; transition: none; }
/* A captura fica apenas na confirmação; não é enviada nem salva no produto. */
/* Recorte do quadro usado na leitura, como prova antes de salvar: mesma
   moldura clara e contorno de imagem do resto do app (thumb, foto do produto) */
.exp-evidence { margin-block: 4px 0; }
.exp-evidence img {
  display: block; width: 100%; max-height: 170px; object-fit: contain;
  padding: 10px; box-sizing: border-box; background: var(--shelf);
  border-radius: var(--r-thumb); outline: 1px solid var(--img-outline); outline-offset: -1px;
}
.exp-evidence figcaption { margin-top: 8px; color: var(--ink-2); font-size: 0.8235rem; line-height: 1.4; text-wrap: pretty; }

/* Tela de testes (#/testes): simples de propósito, só para medir */
.tests-pre { margin: 0; padding: 12px; border-radius: 12px; background: color-mix(in oklab, var(--ink) 6%, transparent); font: 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.tests-log { max-height: 50vh; overflow: auto; }
.tests-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.tests-opts legend { padding: 0 4px; font-weight: 700; font-size: 0.8235rem; }
.tests-opts label { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.tests-num { width: 64px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; }
.tests-img { display: block; max-width: 100%; max-height: 140px; border-radius: 8px; }
/* O campo de arquivo cobre o botão, transparente: o toque cai nele direto */
.tests-pick { position: relative; overflow: hidden; align-self: flex-start; }
.tests-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 100px; }
.tests-opts small { color: var(--ink-2); }
.tests-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tests-table { width: 100%; border-collapse: collapse; font-size: 0.8235rem; }
.tests-table th, .tests-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tests-table small { color: var(--ink-2); }

/* Nenhuma loja tem o código (3.71) */
.notfound-code { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--text-callout); font-variant-numeric: tabular-nums; }
.notfound-code svg { width: 16px; height: 16px; }
.notfound-title { font-size: var(--text-title); text-align: start; }
.notfound .btn-lg { width: 100%; }
.web-slot { min-height: 64px; display: flex; align-items: center; justify-content: center; }
.web-found { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border-radius: var(--r-control); background: var(--shelf); }
.web-found .row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.suggest-front { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-control); background: var(--shelf); color: var(--ink); text-align: start; font: inherit; border: 0; }
.suggest-front svg { width: 18px; height: 18px; flex: none; }
.suggest-front > span { display: flex; flex-direction: column; }
.suggest-front-label { font-size: var(--text-footnote); font-weight: 700; color: var(--ink-2); }
.suggest-front-name { font-family: var(--font-num); font-weight: 700; }
.suggest-front:active { scale: 0.96; }

/* Nome da comunidade (3.72) */
/* Nome da comunidade: o selo é a ponta de um contorno que abraça o campo do
   nome e o voto. Mesmo traço no selo e na linha, para ler como uma peça só;
   raio concêntrico (o do campo mais o espaço até a linha). */
.comm-box {
  --comm-line: color-mix(in oklab, var(--ink) 45%, transparent);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  margin: 0; padding: 4px 11px 12px;
  border: 1.5px solid var(--comm-line); border-radius: calc(var(--r-control) + 12px);
  transition: border-color 200ms ease-out, padding 200ms ease-out;
}
.comm-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 4px;
  padding: 3px 10px; border: 1.5px solid var(--comm-line); border-radius: 999px;
  background: var(--paper); font-size: var(--text-footnote); font-weight: 700; line-height: 1.2;
}
.comm-tag svg { width: 16px; height: 16px; flex: none; }
.comm-box .comm-vote { margin-top: 4px; }
.comm-box.is-own { border-color: transparent; padding: 0; }
.comm-box.is-own .comm-tag { display: none; }
.comm-box.is-own .comm-vote, .comm-box.is-own .comm-done { display: none; }
@media (prefers-reduced-motion: reduce) { .comm-box { transition: none; } }
.comm-vote { display: flex; gap: 8px; }
.comm-vote .btn { flex: 1; min-height: 44px; }
.comm-done { font-size: var(--text-callout); color: var(--ink-2); }
.sheet-text:empty { display: none; }

/* Câmera pausada com uma folha aberta (3.73) */
.cam-paused { position: absolute; inset-inline: 0; margin-inline: auto; inset-block-start: 12px; width: max-content; padding: 6px 12px; border-radius: 14px; background: rgba(22, 24, 23, 0.86); color: #fff; font-weight: 600; font-size: var(--text-footnote); opacity: 0; transition: opacity 150ms var(--ease); pointer-events: none; z-index: 3; }
.viewfinder.is-paused .cam-paused { opacity: 1; }
.viewfinder video { transition: filter 150ms var(--ease); }
.viewfinder.is-paused video { filter: brightness(0.45) grayscale(0.4); }
.viewfinder.is-paused .aim { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .cam-paused, .viewfinder video { transition: none; } }

/* =====================================================================
   Redesenho 4.0 (DESIGN_NOVO.md). Fica no fim para valer sobre o antigo.
   ===================================================================== */

/* ---------- Menu com uma linha de explicação (Conferir) ---------- */
.menu-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; text-align: start; }
.menu-sub { font-size: 0.7647rem; font-weight: 400; color: var(--ink-2); line-height: 1.25; }
.menu-item:has(.menu-sub) { min-height: 60px; padding-block: 10px; }

/* ---------- Armário: Pede atenção ---------- */
.attn-strip { position: relative; margin-top: 4px; }
.attn-strip .attn {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, max-content); gap: 8px;
  padding: 8px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.attn-strip .attn::-webkit-scrollbar { display: none; }
.att {
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 108px; padding: 12px; border: 0; border-radius: 20px;
  background: var(--shelf); color: var(--ink); text-align: start;
  font: 600 0.8235rem/1.2 var(--font-ui); cursor: pointer;
  transition: background-color 240ms var(--ease), color 240ms var(--ease), scale 200ms var(--spring);
}
.att:active { scale: 0.96; }
.att-i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 4px; }
.att-i .icon { width: 17px; height: 17px; }
.att-n { font: 800 28px/1 var(--font-num); font-variant-numeric: tabular-nums; margin-top: 2px; }
.att-l { max-width: 12ch; overflow-wrap: break-word; hyphens: auto; }
.att-vencidos .att-i { background: var(--val-ink); color: var(--paper); }
.att-vencidos.is-med { background: var(--val-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--val) 70%, transparent); }
.att-semana .att-i, .att-acabando .att-i { background: var(--acabando); color: var(--on-acabando); }
.att-zerados .att-i { outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; }
.att-conferir .att-i { background: var(--contagem); color: var(--on-mode); }
.att[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.att[aria-pressed="true"].att-zerados .att-i { outline-color: var(--paper); }
@media (forced-colors: active) { .att[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }

/* Título do filtro ligado: "2 vencem esta semana" e "Mostrar tudo". */
.filter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px var(--gutter) 6px; }
.filter-head h2 { margin: 0; font: 800 1.1765rem/1.2 var(--font-num); letter-spacing: -0.01em; }
.filter-head.is-search h2, .filter-head.is-anvisa h2 { font-size: 1rem; }
.filter-count { font-size: 0.8235rem; color: var(--ink-2); }
.link-btn { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 700 0.8824rem var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Etiqueta de data ("01/10" e "amanhã"), no lugar da quantidade. */
.date-tag {
  flex: none; min-width: 66px; height: 50px; padding: 0 8px; border-radius: var(--r-tag);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: var(--acabando); color: var(--on-acabando);
}
.date-tag b { font: 800 19px var(--font-num); font-variant-numeric: tabular-nums; }
.date-tag em { font: 700 11px var(--font-ui); font-style: normal; }
.date-tag.is-past { background: var(--val-ink); color: var(--paper); }
.date-tag.is-later { background: var(--shelf); color: var(--ink); }
.row-item.has-acts .row { padding-inline-end: var(--gutter); }
.row-acts { display: flex; gap: 8px; padding: 0 var(--gutter) 16px; }
.row-acts .btn { flex: 1 1 auto; min-height: 40px; padding-inline: 10px; white-space: nowrap; font-size: 0.8235rem; }
.row-acts .btn .icon { width: 16px; height: 16px; }

/* Armário vazio e busca sem resultado. */
.empty-first .btn, .empty-search .btn { width: 100%; max-width: 320px; }
.empty-first .btn + .btn, .empty-search .btn + .btn { margin-top: 8px; }

/* ---------- Toque longo: o cartão que sobe ---------- */
.peek-root { position: fixed; inset: 0; z-index: 40; }
.peek-scrim {
  position: absolute; inset: 0; background: rgba(22, 24, 23, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  opacity: 0; transition: opacity 260ms var(--ease);
}
.peek-root.is-open .peek-scrim { opacity: 1; }
.peek-root.is-leaving .peek-scrim { opacity: 0; transition-duration: 200ms; }
.peek { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.peek-card {
  padding: 12px; border-radius: 26px; background: var(--paper);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--glass-edge);
  transform-origin: 50% 0;
}
.peek-root.is-leaving .peek-card { transition: opacity 200ms ease-out, scale 200ms ease-out; opacity: 0; scale: 0.94; }
.peek-head { display: flex; gap: 12px; align-items: center; }
.peek-text { min-width: 0; }
.peek-name { margin: 0; font: 700 1.0588rem/1.25 var(--font-num); }
.peek-sub { margin: 2px 0 0; color: var(--ink-2); font-size: 0.8824rem; }
.peek-qty { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.peek-step {
  width: 52px; height: 52px; border: 0; border-radius: 16px; display: grid; place-items: center;
  background: var(--shelf); color: var(--ink); cursor: pointer;
}
.peek-step:disabled { color: var(--ink-disabled); }
.peek-step .icon { width: 22px; height: 22px; }
.peek-dates { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.peek-dates li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-tag); background: var(--shelf); font-size: 0.8235rem; }
.peek-dates li b { font: 700 0.8824rem var(--font-num); font-variant-numeric: tabular-nums; }
.peek-dates li .icon { width: 14px; height: 14px; }
.peek-dates li.is-free { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.peek-menu {
  width: min(260px, 100%); border-radius: 14px; overflow: hidden;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--glass-edge);
  transform-origin: 0 0;
}
.peek-root:not(.is-open) .peek-menu { opacity: 0; scale: 0.9; }
.peek-root.is-open .peek-menu { opacity: 1; scale: 1; transition: opacity 220ms var(--ease) 60ms, scale 420ms var(--spring-bouncy) 60ms; }
.peek-root.is-open .peek-menu .menu-item { animation: menu-item-in 420ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 28ms + 90ms); }
.row-item.is-peeked .row-slide { opacity: 0; }
.row.is-pressing { transition: scale 480ms var(--ease); scale: 0.97; }
@media (prefers-reduced-motion: reduce) {
  .peek-scrim, .peek-menu { transition: none !important; }
  .row.is-pressing { scale: 1; }
}

/* ---------- Botão Ler ---------- */
.scan-fab:active { scale: 0.94; }

/* ---------- Editar ---------- */
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field-inline .field-label { flex: 1; }
.btn-text-danger { align-self: center; min-height: 44px; margin-top: 12px; padding: 0 12px; border: 0; background: none; color: var(--danger); font: 700 1rem var(--font-ui); cursor: pointer; }
.edit-code { margin: 0; text-align: center; color: var(--ink-2); font-size: 0.7647rem; font-variant-numeric: tabular-nums; }
.stepper-lg { grid-template-columns: 64px 1fr 64px; }
.stepper-lg .stepper-btn { width: 64px; height: 64px; }
.stepper-lg .stepper-value { font-size: 48px; height: 64px; }

/* ---------- Página do produto e do remédio ---------- */
.nav-text-btn {
  justify-self: end; min-height: 44px; padding: 0 6px; border: 0; background: none;
  color: var(--ink); font: 700 1rem var(--font-ui); cursor: pointer;
}
.nav-text-btn:active { opacity: 0.6; }
.thumb-lg { width: 120px; height: 120px; border-radius: 20px; }
.thumb-xl { width: 120px; height: 120px; border-radius: 22px; }
.sr-only-soft { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-product .quick-actions { margin-top: 18px; }
.screen-product .quick-actions .btn-stack { min-height: 80px; border-radius: 20px; flex-direction: column; gap: 6px; }
.screen-product .hero-qty .tag-lg { height: 64px; min-width: 64px; font-size: 40px; }
.screen-product .history li { grid-template-columns: 1fr auto; }
.screen-product .history-type { color: var(--ink); }
.screen-product .history .type-entrada .history-type { color: var(--entrada); }
.screen-product .history .type-saida .history-type, .screen-product .history .type-descarte .history-type { color: var(--saida); }
.screen-product .history .type-contagem .history-type { color: var(--contagem); }
.lot-row .exp-lot-date { display: inline-flex; align-items: center; gap: 6px; }
.lot-row .exp-lot-date .icon { width: 16px; height: 16px; }
.lot-row.is-free .exp-lot-date { font-family: var(--font-num); font-weight: 700; }
.lot-mark { flex: none; min-height: 36px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.lot-row.is-past .exp-lot-sub { color: var(--danger); }

/* A caixa do remédio: desenhada com os dados da Anvisa, em 3D leve. Continua
   clara no escuro, como uma caixa de verdade. */
.product-hero .mbox { grid-area: foto; }
.mbox { position: relative; display: flex; justify-content: center; width: 100%; padding: 14px 0 10px; perspective: 900px; }
.mbox-3d {
  --w: 268px; --h: 150px; --d: 34px;
  position: relative; width: var(--w); height: var(--h);
  transform: rotateX(8deg) rotateY(-16deg); transform-style: preserve-3d;
  transition: transform 600ms var(--spring);
}
.mbox-face {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; padding: 12px 14px;
  background: linear-gradient(160deg, #fff, #f1f2f0); color: #161817; text-align: start;
  box-shadow: inset 0 0 0 1px rgba(22, 24, 23, 0.08);
}
.mbox-side { position: absolute; top: 0; right: calc(var(--d) * -1); width: var(--d); height: var(--h); background: linear-gradient(90deg, #dadDD9, #c6cac6); transform-origin: left; transform: rotateY(90deg); border-radius: 0 4px 4px 0; }
.mbox-top { position: absolute; left: 0; top: calc(var(--d) * -1); width: var(--w); height: var(--d); background: linear-gradient(0deg, #e9ebe8, #f7f8f6); transform-origin: bottom; transform: rotateX(90deg); }
.mbox::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 260px; height: 18px; translate: -46% 0; background: radial-gradient(closest-side, rgba(22, 24, 23, 0.22), transparent); z-index: -1; }
.mbox-lab { position: absolute; top: 10px; right: 12px; font: 800 11px var(--font-num); letter-spacing: 0.06em; color: #3f4541; text-transform: uppercase; }
.mbox-gen { position: absolute; right: 0; top: 30px; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: #FFD400; border-radius: 4px 0 0 4px; }
.mbox-gen i { width: 22px; height: 22px; border-radius: 4px; background: #1D3E8E; color: #FFD400; font: 900 16px/22px var(--font-num); text-align: center; font-style: normal; }
.mbox-gen em { font: 800 8px/1.1 var(--font-ui); color: #1D3E8E; font-style: normal; text-transform: uppercase; }
.mbox-name { font: 800 26px/1 var(--font-num); letter-spacing: -0.01em; max-width: 70%; overflow-wrap: anywhere; }
.mbox-name.is-long { font-size: 21px; }
.mbox-name.is-longer { font-size: 17px; }
.mbox-act { font-size: 12px; color: #3f4541; margin-top: 3px; max-width: 75%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbox-dose { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.mbox-dose b { font: 800 20px var(--font-num); white-space: nowrap; }
.mbox-dose em { font-style: normal; font-size: 12px; font-weight: 600; color: #3f4541; }
.mbox-tarja { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 6px 7px; font: 800 8.5px/1.35 var(--font-ui); letter-spacing: 0.01em; color: #fff; text-align: center; text-wrap: balance; }
.mbox-tarja.is-red { background: #C8102E; }
.mbox-tarja.is-black { background: #161817; }
.mbox-sticker { position: absolute; top: -4px; right: 4px; rotate: 5deg; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.mbox-sticker .pill { height: 28px; padding: 0 12px; font-size: 13px; border-radius: 14px; }
.mbox.sm .mbox-3d { scale: 0.86; margin: -10px 0; }

/* Vencido: logo embaixo da caixa. */
.act-card { margin: 14px 0 0; padding: 14px; border-radius: 24px; background: var(--val-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--val) 70%, transparent); }
.act-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.act-head b { font: 800 1.2353rem var(--font-num); }
.act-head span { font-size: 0.8824rem; color: var(--ink-2); }
.act-card .btn { width: 100%; }
.act-note { margin: 8px 0 0; font-size: 0.8235rem; color: var(--ink-2); }

/* O que a tarja quer dizer na prática. */
.rx-card { display: flex; margin-top: 14px; border-radius: 24px; background: var(--shelf); overflow: hidden; }
.rx-band { flex: none; width: 10px; }
.rx-card.is-red .rx-band { background: #C8102E; }
.rx-card.is-black .rx-band { background: #161817; }
.rx-body { padding: 14px 16px; }
.rx-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.rx-title b { font: 800 1.1176rem var(--font-num); }
.rx-title .icon { width: 20px; height: 20px; }
.rx-text { margin: 0; font-size: 0.8824rem; }
.rx-note { margin: 6px 0 0; font-size: 0.8235rem; color: var(--ink-2); }

/* Uso contínuo com cartela. */
.cont-card { margin-top: 14px; padding: 14px 16px; border-radius: 24px; background: var(--shelf); }
.cont-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.cont-head > span { display: flex; flex-direction: column; }
.cont-head b { font: 800 1.1176rem var(--font-num); }
.cont-head em { font-style: normal; font-size: 0.8235rem; color: var(--ink-2); }
.cont-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cont-row > span { display: flex; flex-direction: column; }
.cont-row b { font: 700 1rem var(--font-num); }
.cont-row em { font-style: normal; font-size: 0.8235rem; color: var(--ink-2); }
.cont-row .btn { flex: none; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cont-perday { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 0.8824rem; color: var(--ink-2); }
.stepper-xs { grid-template-columns: 40px 44px 40px; }
.stepper-xs .stepper-btn { width: 40px; height: 40px; border-radius: 12px; }
.stepper-xs .stepper-value { font-size: 20px; height: 40px; }
.cont-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.8235rem; color: var(--ink-2); }
.cont-note .icon { width: 16px; height: 16px; }
/* Folha da Anvisa: a caixa, o cartão da receita, a ficha e a barra presa. */
.med-have { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 0.8824rem; color: var(--ink-2); }
.med-have .icon { width: 16px; height: 16px; }
.med-have a { color: var(--ink); font-weight: 700; }
.med-facts-card { margin-top: 12px; border-radius: 24px; }
.med-bar { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

/* ---------- Leitor: faixa, cartão, cupom vivo e barra ---------- */
.screen-scan .band.band-slim { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-inline: var(--gutter); padding-bottom: 10px; }
.band-close { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in oklab, var(--on-mode) 20%, transparent); }
.band-end { width: 44px; }
/* Só a lanterna fica na imagem, no canto, em vidro escuro. */
.screen-scan .cam-tools { left: auto; right: 10px; top: 10px; bottom: auto; transform: none; }
.screen-scan .cam-tools:not(:has(.cam-tool:not([hidden]))) { display: none; }

/* Cartão da última leitura: sólido, encostado na câmera. */
.last-host { position: relative; z-index: 3; margin: -30px var(--gutter) 0; }
.last-host:empty { display: none; }
.last-card {
  padding: 12px; border-radius: 26px; background: var(--paper);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge);
}
.last-row { display: flex; gap: 12px; align-items: center; }
.last-row .thumb { border-radius: 14px; }
.last-text { flex: 1; min-width: 0; }
.last-name { margin: 0; font: 700 1rem/1.25 var(--font-num); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.last-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.last-sub > span { flex: 1; min-width: 0; font-size: 0.8824rem; color: var(--ink-2); }
.last-sub strong { color: var(--ink); font-family: var(--font-num); font-weight: 800; }
.last-step { flex: none; display: flex; align-items: center; margin-inline-end: -8px; }
.last-step-btn { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.last-step-btn:disabled { color: var(--ink-disabled); }
.last-step-btn .icon { width: 18px; height: 18px; }
.last-n { min-width: 52px; height: 44px; border: 0; font-size: 22px; cursor: pointer; }
.tag-mode { background: var(--mode); color: var(--on-mode); }
.last-act { width: 100%; margin-top: 10px; min-height: 44px; border-radius: 14px; }
@container (max-width: 340px) { .last-sub { flex-wrap: wrap; } }
@media (max-width: 340px) {
  .last-sub { flex-wrap: wrap; }
  .last-sub > span { flex-basis: 100%; }
  .last-step { margin-inline-start: auto; }
}

/* Cupom vivo: papel, título espaçado, pontinhos, ›, traço duplo e total. */
.live-ticket { padding: 14px var(--gutter) 0; }
.paper {
  padding: 12px 14px; border-radius: 4px; background: #fff; color: #161817;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), inset 0 0 0 1px #e3e6e3;
}
.paper-head { margin: 0 0 6px; font: 800 12px var(--font-num); letter-spacing: 0.14em; text-transform: uppercase; color: #3f4541; }
.paper-lines { list-style: none; margin: 0; padding: 0; }
.paper-line {
  display: flex; align-items: last baseline; gap: 6px; width: 100%; padding: 5px 0;
  border: 0; background: none; color: inherit; font: 400 0.8824rem/1.3 var(--font-ui); text-align: start; cursor: pointer;
}
.paper-name { max-width: 72%; overflow-wrap: anywhere; }
.paper-dots { flex: 1 1 16px; border-bottom: 2px dotted #a3aaa6; translate: 0 -4px; }
.paper-n { flex: none; font: 800 1rem var(--font-num); font-variant-numeric: tabular-nums; }
.paper-chev { flex: none; width: 12px; height: 12px; color: #a3aaa6; align-self: center; }
.paper-lines li.is-last .paper-line { margin-inline: -8px; padding-inline: 8px; width: calc(100% + 16px); border-radius: 6px; background: color-mix(in oklab, var(--mode) 10%, #fff); }
.paper-total { display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 6px; border-top: 3px double #161817; font-weight: 700; font-size: 0.8824rem; }
.paper-total .paper-n { font-size: 1.0588rem; }
.paper-hint { margin: 8px 0 0; text-align: center; font-size: 0.7647rem; color: var(--ink-2); }
.scan-empty { padding: 18px 24px 0; text-align: center; color: var(--ink-2); font-size: 0.8824rem; }
.scan-empty p { margin: 0; }
.scan-empty-lead { color: var(--ink); font: 700 1rem var(--font-num); margin-bottom: 4px !important; }

/* Barra de baixo: Digitar + Nota fiscal, depois Digitar + Concluir. */
.scan-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scan-bar > [hidden] { display: none; }
.scan-bar > .is-wide { grid-column: 1 / -1; }
.scan-bar .btn { min-height: 52px; height: auto; padding: 8px 12px; line-height: 1.15; text-align: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
.scan-bar [data-nota].is-on { background: var(--ink); color: var(--paper); }

/* Quantidade digitada. */
.qty-big { height: 88px; text-align: center; font: 800 56px var(--font-num); font-variant-numeric: tabular-nums; }
.qty-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty-foot span { color: var(--ink-2); font-size: 0.8824rem; }
.ticket-hint { margin: 14px 0 4px; text-align: center; font-size: 0.8235rem; color: var(--ink-2); }
.ticket-title { letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Conferir ---------- */
.count-band .band-center { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.band-name { margin: 0; font: 800 1.1176rem/1.2 var(--font-num); color: var(--on-mode); white-space: nowrap; }
.band-count { margin: 0; font-size: 0.8235rem; font-weight: 600; opacity: 0.9; font-variant-numeric: tabular-nums; }
.ring { width: 44px; height: 44px; display: grid; place-items: center; color: var(--on-mode); }
.ring svg { width: 30px; height: 30px; rotate: -90deg; }
.ring circle { fill: none; stroke: currentColor; stroke-width: 5; }
.ring-bg { opacity: 0.3; }
.ring-fg { stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 600ms var(--spring); }
.count-hint { margin: 10px var(--gutter) 0; text-align: center; font-size: 0.8235rem; color: var(--ink-2); }
.count-card .act-card { margin: 12px 0 0; }
.act-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.act-row .btn { width: 100%; white-space: nowrap; }
.count-card .act-card .btn-quiet { background: var(--paper); }
.count-dates { justify-content: flex-start; margin-top: 10px; }
.diff-note { color: var(--contagem); font-weight: 700; }
.paper-sub { color: #3f4541; }
.paper-ok { font-weight: 800; }
.paper-more { border: 0; background: none; padding: 0; min-height: 32px; font: 800 0.9412rem var(--font-num); color: #161817; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.left-list { list-style: none; margin: 0 0 8px; padding: 0; }
.left-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.left-row .btn { flex: none; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-text-sm { font-size: 0.8235rem; color: var(--ink-2); }
.steps { list-style: none; margin: 4px 0 8px; padding: 0; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; font-size: 1rem; }
.steps b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--contagem); color: var(--on-mode); display: grid; place-items: center; font: 800 15px var(--font-num); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chips .chip { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--shelf); color: var(--ink); font: 700 0.8824rem var(--font-ui); cursor: pointer; }
.chips .chip[aria-checked="true"] { background: var(--ink); color: var(--paper); }

/* Revisão */
.review-title { padding: 4px var(--gutter) 0; }
.review-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px var(--gutter) 4px; }
.review-sum div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: var(--shelf); }
.review-sum b { font: 800 28px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.review-sum span { font-size: 0.7647rem; font-weight: 700; color: var(--ink-2); overflow-wrap: break-word; hyphens: auto; }
.review-sec { margin-top: 8px; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; padding-inline-end: var(--gutter); }
.link-btn.is-danger { color: var(--danger); }
.review-list { list-style: none; margin: 0 var(--gutter); padding: 0 12px; border-radius: 20px; background: var(--shelf); }
.review-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
.review-row + .review-row { border-top: 1px solid var(--line); }
.review-row .thumb { background: var(--paper); }
.review-zero { flex: none; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.review-row.is-zeroed .row-name { text-decoration: line-through; color: var(--ink-2); }
.review-row.is-zeroed .row-sub { color: var(--danger); }
/* "O armário diz 3" decide se zera: nunca cortar com reticências. */
.review-row .row-sub { white-space: normal; }
.review-row .diff-delta { flex: none; font: 800 1.1176rem var(--font-num); }
.diff-delta.is-up { color: var(--contagem); }
.diff-delta.is-down { color: var(--saida); }
.screen-review .floating-bar .btn { width: 100%; }
/* O texto do cartão não quebra no meio ("O armário dizia / 3"): se não couber
   com o − +, os botões descem para a linha de baixo, à direita. */
.last-sub { flex-wrap: wrap; row-gap: 0; }
.last-sub > span { flex: 1 1 auto; white-space: nowrap; }
.last-step { margin-inline-start: auto; }
/* Nota fiscal lida no leitor. */
.nota-card .act-row { margin-top: 12px; }
.nota-card .act-row .btn { min-height: 48px; border-radius: 14px; }
.nota-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--shelf); }
.nota-ico .icon { width: 24px; height: 24px; }
.nota-off { margin: 8px 0 0; text-align: center; font-size: 0.8235rem; color: var(--ink-2); }
.nota-off:empty { display: none; }

/* ---------- Compras ---------- */
.screen-shop .shop-add { margin: 8px var(--gutter) 4px; }
.shop-item.is-done .row-name { text-decoration: line-through; color: var(--ink-2); }
.shop-item .check { width: 28px; height: 28px; }
.pharm { margin: 12px var(--gutter) 4px; padding: 4px 0 4px; border-radius: 24px; background: var(--shelf); }
.pharm-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 6px; }
.pharm-head h2 { margin: 0; font: 800 1.1765rem var(--font-num); }
.pharm-head span { font-size: 0.8824rem; color: var(--ink-2); }
.pharm .shop-list { margin: 0; }
.pharm .shop-item { padding-inline: 14px; }
.pharm .thumb-med { background: var(--paper); }
.pharm-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 700; font-size: 0.8824rem; }
.pharm-note .icon { width: 16px; height: 16px; }
.rx-need { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7647rem; font-weight: 700; color: var(--ink); }
.rx-need::before { content: ''; width: 16px; height: 7px; border-radius: 2px; flex: none; }
.rx-need.is-red::before { background: #C8102E; }
.rx-need.is-black::before { background: #161817; outline: 1px solid var(--ink-2); }
.shop-back { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px var(--gutter) 0; padding: 10px 10px 10px 16px; border-radius: 18px; background: color-mix(in oklab, var(--entrada) 10%, var(--paper)); font-weight: 600; }
.shop-back .btn { flex: none; background: var(--paper); }

/* ---------- Cupons ---------- */
.screen-cupons .rows.cupons { margin: 0 var(--gutter); border-radius: 20px; background: var(--shelf); overflow: hidden; }
.screen-cupons .cupom-row { min-height: 64px; padding-inline: 14px; background: none; }
.screen-cupons .cupons li + li .cupom-row { box-shadow: inset 0 1px 0 var(--line); }
.cupom-icon.is-nota { background: var(--entrada); }
.cupom-icon.is-contagem { background: var(--contagem); }
.screen-cupons .row-chevron { width: 14px; height: 14px; color: var(--ink-2); flex: none; }
.screen-shop .shop-add { margin: 8px 0 4px; }
.screen-shop .pharm { margin-inline: 0; }
.screen-cupons .rows.cupons { margin-inline: 0; }

/* =====================================================================
   Movimento (motion.js): molas, voo até o cupom, selo de pronto
   ===================================================================== */

/* A caixinha da lista vira a caixa grande na página do remédio. */
.product-hero .mbox { view-transition-name: hero-thumb; }
.product-hero .sr-only-soft { view-transition-name: none !important; }

/* O produto que voa da mira até a linha do cupom. */
.fly-ghost { position: fixed; z-index: 60; pointer-events: none; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); will-change: transform; }
.fly-ghost .thumb { width: 100%; height: 100%; border-radius: inherit; }
.paper-lines li.is-landing .paper-line { opacity: 0.35; }
.paper-lines li.is-landed .paper-line { animation: land 520ms var(--spring-bouncy); }
@keyframes land {
  0% { background: color-mix(in oklab, var(--mode) 32%, #fff); scale: 1.03; }
  100% { scale: 1; }
}

/* Cartão da leitura: cada leitura nova chega com um pulo de mola. */
.last-card.is-fresh { animation: card-pop 560ms var(--spring-bouncy); }
@keyframes card-pop { 0% { transform: translateY(10px) scale(0.97); } 100% { transform: none; } }
.last-card.is-fresh .thumb { animation: thumb-pop 600ms var(--spring-bouncy) 60ms backwards; }
@keyframes thumb-pop { 0% { scale: 0.6; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* Selo de pronto: o anel se fecha, enche e o visto se desenha. */
.done-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 10px; color: var(--mode, var(--entrada)); }
.done-mark svg { width: 64px; height: 64px; overflow: visible; }
.done-ring { fill: none; stroke: currentColor; stroke-width: 4; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
.done-fill { fill: currentColor; transform: scale(0); transform-origin: 50% 50%; }
.done-check { fill: none; stroke: var(--on-mode, #fff); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 100; }
.done-mark.is-on .done-ring { animation: ring-close 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.done-mark.is-on .done-fill { animation: fill-in 420ms var(--spring-bouncy) 300ms forwards; }
.done-mark.is-on .done-check { animation: check-draw 320ms cubic-bezier(0.3, 0, 0.2, 1) 520ms forwards; }
.done-mark.is-on svg { animation: mark-bump 520ms var(--spring-bouncy) 520ms; }
@keyframes ring-close { to { stroke-dasharray: 100 100; } }
@keyframes fill-in { to { transform: scale(1); } }
@keyframes check-draw { to { stroke-dasharray: 100 100; } }
@keyframes mark-bump { 50% { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) {
  .done-ring, .done-check { stroke-dasharray: 100 100; }
  .done-fill { transform: none; }
  .done-mark.is-on * { animation: none !important; }
}

/* Pede atenção: os blocos chegam em cascata na primeira vez. */
.attn-strip.is-first .att { animation: att-in 520ms var(--spring) backwards; }
.attn-strip .att:nth-child(2) { animation-delay: 40ms; }
.attn-strip .att:nth-child(3) { animation-delay: 80ms; }
.attn-strip .att:nth-child(4) { animation-delay: 120ms; }
.attn-strip .att:nth-child(5) { animation-delay: 160ms; }
@keyframes att-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.att[aria-pressed="true"] .att-i { animation: att-on 420ms var(--spring-bouncy); }
@keyframes att-on { 40% { scale: 1.2; } }

/* Compras: marcar risca o nome, como uma caneta. */
.shop-item.is-striking .row-name { background: linear-gradient(currentColor, currentColor) 0 58% / 0 1.5px no-repeat; text-decoration: none; animation: strike 380ms cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes strike { to { background-size: 100% 1.5px; } }

/* Conferir: o anel completo dá uma piscada. */
.ring.is-full { animation: ring-full 700ms var(--spring-bouncy); }
@keyframes ring-full { 40% { scale: 1.25; } }

/* Remédio: a caixa responde ao dedo (motion.js tiltable). */
.mbox-3d { cursor: grab; will-change: transform; }
.mbox-3d:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .last-card.is-fresh, .last-card.is-fresh .thumb, .attn-strip .att, .att[aria-pressed="true"] .att-i,
  .paper-lines li.is-landed .paper-line, .ring.is-full { animation: none !important; }
  .shop-item.is-striking .row-name { animation: none; background-size: 100% 1.5px; }
}
/* O Conferir mantém o nome mesmo na tela estreita (ícone sem nome não diz o que faz). */
.head-pill[data-conferir] .head-pill-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
@media (max-width: 359px) { .head-pill[data-conferir] { width: auto; padding-inline: 12px 14px; } }
.text-large .head-pill[data-conferir] { width: auto; padding-inline: 12px 14px; }

/* A caixa cresce com o conteúdo: a face fica no fluxo (a tarja embaixo, no
   fluxo também) e as laterais acompanham a altura dela. */
.mbox-3d { height: auto; min-height: 150px; }
.mbox-face { position: relative; inset: auto; min-height: 150px; }
.mbox-side { top: 0; bottom: 0; height: auto; }
.mbox-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: auto; max-width: 72%; line-height: 1.05; }
.mbox-act { overflow-wrap: anywhere; }
.mbox-dose { flex-wrap: wrap; row-gap: 0; max-width: 100%; }
.mbox-dose em { overflow-wrap: anywhere; }
.mbox-tarja { position: relative; inset: auto; margin: auto -14px -12px; padding-top: 6px; }
.mbox-face:has(.mbox-tarja) .mbox-dose { margin-bottom: 10px; }
.mbox-face:not(:has(.mbox-tarja)) .mbox-dose { margin-bottom: 4px; }
/* Dose e quantidade: um bloco de até duas linhas, que diminui até caber. */
.mbox-dose { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; line-height: 1.15; max-width: 100%; }
.mbox-dose b { font: inherit; font-family: var(--font-num); font-weight: 800; white-space: normal; margin-inline-end: 6px; }
.mbox-dose em { font-size: 0.6em; }
/* Cabeça da caixa: o nome à esquerda; laboratório e G numa coluna à direita,
   que o nome não invade (laboratório longo vira reticências). */
.mbox-head { display: flex; align-items: flex-start; gap: 8px; }
.mbox-head .mbox-name { flex: 1 1 auto; min-width: 0; max-width: none; }
.mbox-brand { flex: none; max-width: 38%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-inline-end: -14px; padding-top: 2px; }
.mbox-brand .mbox-lab { position: static; max-width: 100%; padding-inline-end: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.mbox-brand .mbox-gen { position: static; }
/* O selo fica mais para fora da caixa, sem tapar o laboratório. */
.mbox-sticker { top: -12px; right: 2px; }
.mbox { padding-top: 22px; }

/* ---------- Inércia e bobeirinhas (4.2) ---------- */
/* Pede atenção: cada bloco é uma pessoa em pé no ônibus (motion.js sway). Gira
   pelos pés; o ícone vai pendurado e balança com atraso. A faixa ganha folga
   em cima e embaixo para os cantos não serem cortados no balanço. */
body .attn-strip .attn { padding-block: 12px 14px; margin-block: -4px -8px; }
.attn-strip .att { transform-origin: 50% 100%; }
.attn-strip .att-i { transform-origin: 50% 0; }
.home-tools .tabs .tab { transform-origin: 50% 100%; }
.product-hero > .mbox { transform-origin: 50% 0; }

/* Cada bloco responde do seu jeito quando liga o filtro. */
.att[aria-pressed="true"] .att-i .icon { animation: 520ms var(--spring-bouncy) both; }
.att-vencidos[aria-pressed="true"] .att-i .icon { animation-name: att-shake; animation-timing-function: ease-out; }
.att-semana[aria-pressed="true"] .att-i .icon { animation-name: att-page; }
.att-acabando[aria-pressed="true"] .att-i .icon { animation-name: att-flip; animation-duration: 700ms; }
.att-zerados[aria-pressed="true"] .att-i { animation-name: att-on, att-spin; animation-duration: 420ms, 900ms; animation-timing-function: var(--spring-bouncy), cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes att-shake { 0%, 100% { rotate: 0deg; } 15% { rotate: -16deg; } 35% { rotate: 13deg; } 55% { rotate: -8deg; } 75% { rotate: 4deg; } }
@keyframes att-page { 0% { translate: 0 0; } 30% { translate: 0 -5px; scale: 1.1 0.92; } 60% { translate: 0 1px; scale: 0.96 1.04; } 100% { translate: 0 0; scale: 1; } }
@keyframes att-flip { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes att-spin { to { rotate: 180deg; } }

/* Barra de abas: a aba escolhida dá um pulinho com o jeito do ícone. */
.tab-item.is-hop .tab-icons { animation: 640ms both; transform-origin: 50% 100%; }
.tab-item[data-tab="armario"].is-hop .tab-icons { animation-name: hop-box; }
.tab-item[data-tab="compras"].is-hop .tab-icons { animation-name: hop-cart; }
.tab-item[data-tab="cupons"].is-hop .tab-icons { animation-name: hop-receipt; transform-origin: 50% 0; }
.tab-item[data-tab="mais"].is-hop .tab-icons { animation-name: hop-menu; transform-origin: 50% 50%; }
/* A caixa amassa, pula e assenta. */
@keyframes hop-box {
  0% { transform: none; } 18% { transform: scale(1.14, 0.84); }
  45% { transform: translateY(-7px) scale(0.94, 1.08); } 70% { transform: translateY(0) scale(1.08, 0.92); }
  85% { transform: scale(0.98, 1.02); } 100% { transform: none; }
}
/* O carrinho arranca (inclina para trás), freia (inclina para a frente) e volta. */
@keyframes hop-cart {
  0% { transform: none; } 25% { transform: translateX(6px) rotate(-9deg); }
  48% { transform: translateX(7px) rotate(7deg); } 66% { transform: translateX(3px) rotate(-4deg); }
  82% { transform: translateX(1px) rotate(1.5deg); } 100% { transform: none; }
}
/* O cupom sai da impressora: estica para baixo e volta. */
@keyframes hop-receipt {
  0% { transform: none; } 30% { transform: translateY(-3px) scaleY(0.9); }
  60% { transform: translateY(2px) scaleY(1.12); } 80% { transform: scaleY(0.97); } 100% { transform: none; }
}
@keyframes hop-menu { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-4deg); } }

/* Selo das Compras: pula quando o número muda. */
.tab-badge.is-bump { animation: badge-bump 560ms var(--spring-bouncy); }
@keyframes badge-bump { 0% { scale: 1; } 30% { scale: 1.45; rotate: -10deg; } 60% { scale: 0.92; rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } }

/* Botão Ler: na primeira vez, uma linha de leitor passa pelo código. */
.scan-fab-ico { position: relative; display: grid; place-items: center; }
.scan-fab-ico::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px;
  background: #FF453A; box-shadow: 0 0 6px 1px rgba(255, 69, 58, 0.7); opacity: 0;
}
.scan-fab.is-sweep .scan-fab-ico::after { animation: fab-sweep 1100ms ease-in-out 1; }
@keyframes fab-sweep {
  0% { opacity: 0; translate: 0 -12px; } 12% { opacity: 1; } 45% { translate: 0 12px; }
  80% { opacity: 1; translate: 0 -10px; } 100% { opacity: 0; translate: 0 -10px; }
}

/* Vazios: o ícone flutua devagar, como coisa boiando. */
.empty-icon .icon { animation: float 3.6s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: -4deg; } }

@media (prefers-reduced-motion: reduce) {
  .att[aria-pressed="true"] .att-i .icon, .att-zerados[aria-pressed="true"] .att-i, .tab-item.is-hop .tab-icons,
  .tab-badge.is-bump, .scan-fab.is-sweep .scan-fab-ico::after, .empty-icon .icon { animation: none !important; }
}


/* ---------- Movimento da 4.3: nada pisca, tudo desliza ---------- */
/* As cores de estado mudam com transição (o morph troca só a classe): a
   etiqueta preta fica amarela, a pílula "Acabando" vira "Zerado" sem estalo. */
.tag, .pill, .rx-need, .shop-item, .shop-item .row-name, .lot-row, .val-row {
  transition-property: background-color, color, border-color, box-shadow, outline-color, opacity;
  transition-duration: 320ms; transition-timing-function: var(--ease);
}

/* "−1" / "+1" que sobe do número tocado (motion.js floatLabel). */
.float-n {
  position: fixed; z-index: 90; pointer-events: none;
  font: 800 20px/1 var(--font-num); color: var(--ink);
  text-shadow: 0 1px 0 var(--paper), 0 0 10px var(--paper);
}
.float-n.mode-saida { color: var(--saida); }
.float-n.mode-entrada { color: var(--entrada); }

/* Chave: a bolinha estica ao apertar, como no iPhone, e vai com mola. */
.switch::after { transition-property: translate, width; transition-duration: 380ms, 220ms; transition-timing-function: var(--spring-bouncy), var(--ease); }
.switch:active::after { width: 30px; }
.switch:checked:active::after { translate: 16px 0; }
.switch { transition: background-color 260ms var(--ease); }

/* Caixa de marcar: pula ao encher. */
.check.is-pop { animation: check-pop 460ms var(--spring-bouncy); }
@keyframes check-pop { 0% { scale: 1; } 35% { scale: 1.28; } 65% { scale: 0.92; } 100% { scale: 1; } }

/* Busca sem resultado: a lupa balança a cabeça ("não achei") e depois flutua. */
.empty-search .empty-icon .icon { animation: shake-no 760ms ease-in-out 120ms 1 both, float 3.6s ease-in-out 900ms infinite; }
@keyframes shake-no { 0%, 100% { rotate: 0deg; translate: 0 0; } 20% { rotate: -14deg; translate: -4px 0; } 45% { rotate: 12deg; translate: 4px 0; } 70% { rotate: -6deg; translate: -2px 0; } }

/* Folhas: o conteúdo sobe em cascata enquanto a folha abre. */
.sheet.is-opening .sheet-body > * { animation: sheet-item 520ms var(--spring) backwards; }
.sheet.is-opening .sheet-body > :nth-child(2) { animation-delay: 30ms; }
.sheet.is-opening .sheet-body > :nth-child(3) { animation-delay: 60ms; }
.sheet.is-opening .sheet-body > :nth-child(4) { animation-delay: 90ms; }
.sheet.is-opening .sheet-body > :nth-child(5) { animation-delay: 120ms; }
.sheet.is-opening .sheet-body > :nth-child(n+6) { animation-delay: 150ms; }
.sheet.is-opening .sheet-body > .sheet-sticky { animation: none; }
@keyframes sheet-item { from { opacity: 0; translate: 0 14px; } }

/* Título grande: ao rolar, encolhe um pouco e esmaece, como no iPhone. */
@supports (animation-timeline: scroll()) {
  .home-head .page-title { transform-origin: 0 100%; animation: title-shrink linear both; animation-timeline: scroll(root); animation-range: 0 90px; }
  @keyframes title-shrink { to { scale: 0.88; opacity: 0.35; translate: 0 -3px; } }
}

@media (prefers-reduced-motion: reduce) {
  .check.is-pop, .empty-search .empty-icon .icon, .sheet.is-opening .sheet-body > *, .home-head .page-title { animation: none !important; }
  .switch::after, .switch { transition: none; }
}

/* Entre abas: a tela nova vem um pouco do lado da aba tocada. */
html[data-nav="tab"][data-tab-dir="right"]::view-transition-new(root) { animation: vt-tab-in-r 340ms var(--spring) both; }
html[data-nav="tab"][data-tab-dir="left"]::view-transition-new(root) { animation: vt-tab-in-l 340ms var(--spring) both; }
@keyframes vt-tab-in-r { from { opacity: 0; translate: 28px 0; } }
@keyframes vt-tab-in-l { from { opacity: 0; translate: -28px 0; } }

/* ---------- 4.4: toques e movimento do celular ---------- */
/* Aviso de baixo: arrasta para os lados e joga fora. */
.toast { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Caixa do remédio: um brilho de embalagem corre com a inclinação (dedo ou
   celular; motion.js tiltable põe --sheen). */
.mbox-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0.1) 54%, transparent 64%);
  background-size: 300% 100%; background-position: calc(62% - var(--sheen, 0%)) 0;
  mix-blend-mode: soft-light; opacity: 0.9;
}

/* Bobeirinhas de toque (js/play.js). */
.empty-icon.is-boing { animation: boing 760ms var(--spring-bouncy); }
@keyframes boing { 0% { scale: 1; } 20% { scale: 0.82 1.12; } 45% { scale: 1.16 0.88; translate: 0 -10px; } 70% { scale: 0.96 1.04; translate: 0 0; } 100% { scale: 1; } }
.list-title-icon > .icon.is-wiggle, .hero-qty-label.is-wiggle, .is-wiggle { animation: wiggle 620ms ease-in-out; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 45% { rotate: 11deg; } 70% { rotate: -5deg; } }
.product-hero > .thumb.is-wobble { animation: wobble 700ms var(--spring-bouncy); }
@keyframes wobble { 0% { scale: 1; rotate: 0deg; } 25% { scale: 0.9; rotate: -6deg; } 55% { scale: 1.06; rotate: 4deg; } 80% { scale: 0.98; rotate: -1deg; } 100% { scale: 1; rotate: 0deg; } }
.search > .icon.is-hop { animation: s-hop 280ms var(--spring-bouncy); }
@keyframes s-hop { 40% { translate: 0 -3px; scale: 1.12; } }
.search > .icon.is-look { animation: s-look 680ms ease-in-out; }
@keyframes s-look { 25% { rotate: -18deg; } 60% { rotate: 14deg; } }

@media (prefers-reduced-motion: reduce) {
  .empty-icon.is-boing, .is-wiggle, .product-hero > .thumb.is-wobble, .search > .icon.is-hop, .search > .icon.is-look { animation: none !important; }
}

/* ---------- Cartela (4.6) ----------
   Como a de verdade: folha de alumínio escovado, bolhas de plástico
   transparente e o comprimido dentro. A bolha do que já foi tomado fica
   amassada e o alumínio rasgado. As cartelas cheias ficam empilhadas atrás. */
.blister-stack { position: relative; isolation: isolate; margin: 14px 0 0; padding-bottom: calc(var(--behind, 0) * 5px); }
.blister-behind {
  position: absolute; inset: 0 0 calc(var(--behind, 0) * 5px); border-radius: 14px;
  translate: 0 calc(var(--b) * 5px); scale: calc(1 - var(--b) * 0.035) 1; z-index: calc(-1 * var(--b));
  background: linear-gradient(135deg, #cfd4d9, #b9bfc5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  opacity: calc(1 - var(--b) * 0.22);
}
.blister {
  --foil-a: #eef0f2; --foil-b: #c9ced4; --foil-c: #f6f7f8;
  position: relative; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 10px 8px;
  padding: 14px 16px; border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.0) 0 3px, rgba(255, 255, 255, 0.18) 3px 4px),
    linear-gradient(120deg, var(--foil-a), var(--foil-b) 38%, var(--foil-c) 52%, var(--foil-b) 70%, var(--foil-a));
  box-shadow: inset 0 0 0 1px rgba(22, 24, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(22, 24, 23, 0.12);
}
/* Bolha de plástico */
.pocket {
  position: relative; display: grid; place-items: center; justify-self: center;
  width: 100%; max-width: 46px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 38%, rgba(190, 198, 206, 0.35) 75%, rgba(150, 160, 170, 0.45));
  box-shadow: inset 0 0 0 1px rgba(120, 130, 140, 0.35), inset 0 -3px 5px rgba(80, 90, 100, 0.18), 0 2px 3px rgba(22, 24, 23, 0.15);
  transition: scale 420ms var(--spring-bouncy), box-shadow 300ms var(--ease), background 300ms var(--ease);
}
.blister.is-capsula .pocket { aspect-ratio: 0.52; border-radius: 999px; max-width: 34px; }
.blister.is-dragea .pocket { aspect-ratio: 0.8; }
/* O comprimido: redondo, branco, com o risquinho do meio */
.dose {
  position: relative; display: block; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f2f3f1 55%, #d9dcd8);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
  transition: translate 560ms cubic-bezier(0.2, 0.9, 0.3, 1), rotate 560ms cubic-bezier(0.2, 0.9, 0.3, 1), scale 560ms var(--ease), opacity 260ms var(--ease) 300ms;
}
.blister.is-comprimido .dose::after { content: ''; position: absolute; left: 18%; right: 18%; top: calc(50% - 0.75px); height: 1.5px; border-radius: 1px; background: rgba(22, 24, 23, 0.14); }
/* Cápsula de duas cores */
.blister.is-capsula .dose {
  width: 70%; aspect-ratio: 0.42; border-radius: 999px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.7), transparent 45%),
    linear-gradient(180deg, var(--cap-a) 0 50%, var(--cap-b) 50% 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), inset -2px 0 3px rgba(0, 0, 0, 0.12);
}
/* Drágea: oval brilhante */
.blister.is-dragea .dose { width: 66%; aspect-ratio: 0.8; background: radial-gradient(ellipse at 35% 28%, #fff, var(--cap-b) 45%, color-mix(in oklab, var(--cap-a) 55%, #fff)); }

/* Já tomado: o comprimido salta da bolha, a bolha amassa e o alumínio rasga. */
.pocket:not(.is-on) { scale: 0.9; background: radial-gradient(circle at 50% 55%, rgba(60, 66, 72, 0.55), rgba(60, 66, 72, 0.25) 55%, rgba(200, 206, 212, 0.4) 70%); box-shadow: inset 0 0 0 1px rgba(90, 100, 110, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.pocket:not(.is-on)::after {
  content: ''; position: absolute; inset: 14%;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(180, 186, 192, 0.2));
  clip-path: polygon(0 0, 38% 8%, 52% 0, 70% 14%, 100% 6%, 86% 40%, 100% 62%, 74% 70%, 62% 100%, 44% 82%, 18% 100%, 22% 66%, 0 54%, 12% 30%);
  opacity: 0.55;
}
.pocket:not(.is-on) .dose { translate: calc(var(--dir, 1) * 18px) -64px; rotate: calc(var(--dir, 1) * 80deg); scale: 0.75; opacity: 0; }
.pocket:not(.is-on) { z-index: 2; }
/* Tocar num comprimido: aperta a bolha. */
.pocket.is-on.is-press { animation: press 380ms var(--spring-bouncy); }
@keyframes press { 30% { scale: 0.82; } 60% { scale: 1.06; } }
.blister-more { margin: 8px 0 0; font-size: 0.7647rem; color: var(--ink-2); text-align: center; }
@media (prefers-color-scheme: dark) {
  .blister { --foil-a: #5b6168; --foil-b: #3b4046; --foil-c: #6c737a;
    background: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, 0.05) 3px 4px), linear-gradient(120deg, var(--foil-a), var(--foil-b) 38%, var(--foil-c) 52%, var(--foil-b) 70%, var(--foil-a));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4); }
  .blister-behind { background: linear-gradient(135deg, #3a3f45, #2b2f34); }
  .pocket { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 40%, rgba(20, 24, 28, 0.25)); }
}
@media (prefers-reduced-motion: reduce) { .dose, .pocket { transition: none; } .pocket.is-on.is-press { animation: none; } }

/* ---------- 4.6: entradas com jeito ---------- */
/* Vazios: cada ícone chega do seu jeito e depois flutua. */
.empty-icon.is-box .icon { animation: box-drop 820ms var(--spring-bouncy) 120ms both, float 3.6s ease-in-out 1.2s infinite; }
@keyframes box-drop { 0% { translate: 0 -60px; rotate: -12deg; opacity: 0; } 55% { translate: 0 0; rotate: 4deg; scale: 1.15 0.85; opacity: 1; } 75% { scale: 0.95 1.06; rotate: -2deg; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
/* O carrinho chega como o ônibus: inclina para trás ao andar e para a frente ao frear. */
.empty-icon.is-cart .icon { animation: cart-in 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both, float 3.6s ease-in-out 1.3s infinite; }
@keyframes cart-in { 0% { translate: -90px 0; rotate: -10deg; opacity: 0; } 55% { translate: 6px 0; rotate: -6deg; opacity: 1; } 72% { translate: 0 0; rotate: 9deg; } 86% { rotate: -3deg; } 100% { translate: 0 0; rotate: 0deg; } }
/* O cupom sai da impressora. */
.empty-icon.is-receipt .icon { animation: receipt-print 900ms cubic-bezier(0.3, 0, 0.2, 1) 150ms both, float 3.6s ease-in-out 1.2s infinite; }
@keyframes receipt-print { 0% { clip-path: inset(0 0 100% 0); translate: 0 -10px; } 70% { clip-path: inset(0 0 0 0); translate: 0 3px; } 100% { clip-path: inset(0 0 0 0); translate: 0 0; } }

/* Pede atenção: na primeira vez, cada ícone faz o seu gesto depois de chegar. */
.attn-strip.is-first .att-vencidos .att-i .icon { animation: att-shake 640ms ease-out 560ms both; }
.attn-strip.is-first .att-semana .att-i .icon { animation: att-page 560ms var(--spring-bouncy) 620ms both; }
.attn-strip.is-first .att-acabando .att-i .icon { animation: att-flip 760ms var(--spring-bouncy) 680ms both; }
.attn-strip.is-first .att-zerados .att-i { animation: att-spin 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 740ms; }

/* Conferir atrasado: o botão acena duas vezes ao abrir o Armário. */
.head-pill.is-due .icon { animation: due-nudge 760ms ease-in-out 1.1s 2; transform-origin: 30% 70%; }
@keyframes due-nudge { 0%, 100% { rotate: 0deg; scale: 1; } 25% { rotate: -14deg; scale: 1.12; } 55% { rotate: 10deg; } 80% { rotate: -4deg; } }

@media (prefers-reduced-motion: reduce) {
  .empty-icon.is-box .icon, .empty-icon.is-cart .icon, .empty-icon.is-receipt .icon,
  .attn-strip.is-first .att-i, .attn-strip.is-first .att-i .icon, .head-pill.is-due .icon { animation: none !important; }
}