/* ═══════════════════════════════════════════════════════════════════
   COMPONENTES · botões, cards, inputs, badges, avatars, forms
   ═══════════════════════════════════════════════════════════════════ */

/* ── Botões ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r10);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  white-space: nowrap;
  text-decoration: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--p);
  color: #fff;
  border-color: var(--p-ink);
}
.btn-primary:hover {
  background: var(--ph);
  border-color: var(--ph);
  box-shadow: 0 4px 12px rgba(249,115,22,.35);
  text-decoration: none;
  color: #fff;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line);
}
.btn-secondary:hover {
  background: var(--line);
  color: var(--ink-1);
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--p-ink);
  border-color: var(--p-ink);
}
.btn-outline:hover {
  background: var(--pb);
  text-decoration: none;
  color: var(--ph);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink-1);
  text-decoration: none;
}

.btn-danger {
  background: color-mix(in oklch, var(--red) 8%, transparent);
  color: var(--red-ink);
  border-color: color-mix(in oklch, var(--red) 25%, transparent);
}
.btn-danger:hover {
  background: color-mix(in oklch, var(--red) 14%, transparent);
  text-decoration: none;
}

.btn-sm  { padding: 6px 14px;  font-size: 13px; }
.btn-lg  { padding: 14px 28px; font-size: 16px; }
.btn-xl  { padding: 16px 32px; font-size: 17px; }
.btn-full { width: 100%; justify-content: center; }

.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Inputs e formulários ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r10);
  font-size: 16px; /* 16px é essencial, previne zoom iOS ao focar */
  color: var(--ink-1);
  background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: var(--ink-fantasma); }
.form-input:focus {
  border-color: var(--p-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 15%, transparent);
}
.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--red-ink);
}
.form-input.has-error { border-color: var(--red-ink); }

.form-input-wrap {
  position: relative;
}
.form-input-wrap .input-icon-left,
.form-input-wrap .form-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-input-wrap .input-icon-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-input-wrap .input-icon-right:hover { color: var(--ink-2); }
.form-input-wrap.has-left  .form-input { padding-left: 42px; }
.form-input-wrap.has-right .form-input { padding-right: 42px; }

.form-error {
  font-size: 12px;
  color: var(--red-ink);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-hint {
  font-size: 12px;
  color: var(--ink-4);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox e Radio customizados */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--p-ink);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.form-check-label {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--line-2);
  border-radius: var(--rf);
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: transform var(--transition);
}
.toggle-track.active {
  background: var(--p);
}
.toggle-track.active::after {
  transform: translateX(20px);
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--r16);
  border: var(--card-border);
  box-shadow: var(--sh-sm);
  transition: background var(--t-base), border-color var(--t-base);
}
.card-hover {
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--rf);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--surface-2);
  color: var(--ink-2);
}
/* As etiquetas tinham um par de hex por cor no tema claro e um segundo par
   sobrescrito no escuro. Agora cada uma usa o fundo tingido e a tinta de texto
   do token, que já trocam sozinhos com o tema. */
.badge-green  { background: var(--ok-bg);     color: var(--green-ink); }
.badge-yellow,
.badge-amber  { background: var(--warn-bg);   color: var(--warn-ink); }
.badge-red    { background: var(--danger-bg); color: var(--red-ink); }
.badge-blue   { background: color-mix(in oklch, var(--blue) 13%, transparent); color: var(--blue-ink); }
.badge-orange { background: var(--pl);        color: var(--p-ink); }
.badge-gray   { background: var(--surface-2); color: var(--ink-2); }

/* ── Avatars ─────────────────────────────────────────────────────────── */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  /* As iniciais eram brancas sobre um cinza claro: sumiam. O fundo escuro do
     tema em vigor segura letra clara nos dois temas. */
  color: var(--surface);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--ink-2);
}
.avatar-xs { width: 28px; height: 28px; font-size: 11px; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.avatar-md { width: 44px; height: 44px; font-size: 15px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 72px; height: 72px; font-size: 22px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Divisor ─────────────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-4);
  font-size: 13px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Loading spinner ─────────────────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--p-ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Info box ─────────────────────────────────────────────────────────── */
.info-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r10);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.info-box.info-primary {
  background: var(--pb);
  border-color: var(--pl);
  color: var(--ph);
}
.info-box.info-warning {
  background: color-mix(in oklch, var(--amber) 10%, transparent);
  border-color: color-mix(in oklch, var(--amber) 30%, transparent);
  color: var(--amber);
}
.info-box.info-success {
  background: color-mix(in oklch, var(--green) 10%, transparent);
  border-color: color-mix(in oklch, var(--green) 30%, transparent);
  color: var(--green-ink);
}
.info-box.info-error {
  background: color-mix(in oklch, var(--red) 10%, transparent);
  border-color: color-mix(in oklch, var(--red) 30%, transparent);
  color: var(--red-ink);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  gap: 0;
}
.tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  touch-action: manipulation;
}
.tab.active {
  color: var(--p-ink);
  border-bottom-color: var(--p-ink);
  font-weight: 600;
}
.tab:hover:not(.active) { color: var(--ink-2); }

/* ── <dialog> nativo ──────────────────────────────────────────────────────
   O reset global (tokens.css:163: `* { margin: 0 }`) apaga o `margin: auto`
   da folha padrão do navegador, que é justamente o que centraliza um dialog
   aberto com showModal(). Sem esta regra, TODO modal do projeto fica preso no
   canto superior esquerdo (vale também para os três de calendar.html).
   Restaurado aqui em vez de em cada dialog, para não repetir o conserto. */
dialog[open] {
  /* O <dialog> não herda a cor do body: a folha do navegador põe CanvasText,
     que é preto mesmo com o tema escuro ligado pelo atributo. Todo texto solto
     dentro de um diálogo ficava preto sobre fundo escuro. */
  color: var(--ink-1);
  margin: auto;
  max-height: calc(100dvh - 32px);
}
dialog::backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
}

/* ── Tabelas e chips do painel administrativo ─────────────────────────────
   Estas classes estavam duplicadas no {% block extra_css %} de quatro
   templates (users, stores, store_detail, user_detail). Consequência: a
   tela nova de Problemas usou th-cell/td-cell e saiu SEM padding e com o
   alinhamento padrão do navegador (cabeçalho centralizado, célula à
   esquerda) · a bagunça visível no print. Centralizado aqui, valem em
   qualquer tela do painel. */
.th-cell {
  padding: 11px 16px;
  text-align: left; vertical-align: bottom;
  font-size: 10px; font-weight: 700;
  color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .06em; font-family: var(--font-mono);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.td-cell {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
/* Última linha sem borda: com ela, sobra um traço solto acima do rodapé
   arredondado do cartão. */
tbody tr:last-child .td-cell { border-bottom: none; }

/* Linha clicável (static/js/rf-linha.js): a linha inteira leva ao registro,
   com o mesmo cuidado de um link: mão, fundo no hover e anel de foco. */
[data-linha-href] { cursor: pointer; }
[data-linha-href]:hover { background: var(--surface-2); }
[data-linha-href]:focus-visible { outline: 2px solid var(--p-ink); outline-offset: -2px; }
/* As ações que sobram na linha (desativar, página pública) eram ícones de
   28px no mouse e 36 no toque: sobem para 36 e 44. */
.table-scroll td[data-cel="acoes"] .btn.btn-sm { min-height: 36px; min-width: 36px; justify-content: center; }
@media (pointer: coarse) {
  .table-scroll td[data-cel="acoes"] .btn.btn-sm { min-height: 44px; min-width: 44px; }
}
/* Alinhamento à direita vale para o cabeçalho E para a célula: declarado só
   num dos dois, a coluna sai torta (foi o caso da coluna "Quando"). */
.th-right, .td-right { text-align: right; }
.tr-hover:hover { background: var(--surface-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; text-decoration: none;
  border: 1.5px solid var(--line); color: var(--ink-2);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.chip:hover { border-color: var(--p-ink); color: var(--p-ink); }
.chip-active { background: var(--p-fill); color: #fff !important; border-color: var(--p-fill) !important; }

/* Faixa de filtros: rola na horizontal em vez de empilhar em três linhas
   quando há muitos. Barra de rolagem escondida, a borda cortada já indica
   que há mais conteúdo. */
.filtro-linha {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.filtro-linha::-webkit-scrollbar { display: none; }


/* ── Tabelas ────────────────────────────────────────────────────────────────
   No desktop a tabela é tabela, e este contêiner só evita que uma janela
   estreita corte a última coluna. No celular ela deixa de ser tabela: ver
   responsive.css, onde cada linha vira um bloco com rótulo e valor. O cartão
   tinha overflow:hidden e as colunas da direita simplesmente sumiam. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* No celular esta rolagem some: responsive.css transforma a tabela em lista. */
.table-scroll > table { width: 100%; border-collapse: collapse; }

/* ══════════════════════════════════════════════════════════════════════════
   CRÉDITOS DOS MAPAS LEAFLET

   "Leaflet | Powered by Geoapify | © OpenStreetMap" é uma faixa de texto que
   atravessa o canto do mapa e disputa espaço com o próprio mapa.

   Apagar não é opção: a licença dos dados do OpenStreetMap (ODbL) exige o
   crédito, e o Geoapify pede o dele nos termos de uso. O que dá para fazer, e
   as diretrizes do próprio OpenStreetMap aceitam em mapa interativo, é dobrar
   o crédito atrás de um ⓘ. O texto continua no HTML e a um toque de distância.

   font-size:0 no contêiner some com o texto E com os links, que não declaram
   tamanho próprio e herdam daqui. :focus-within cobre o teclado; em telas de
   toque, tocar no ⓘ dá foco ao link de dentro e abre.
   ══════════════════════════════════════════════════════════════════════════ */
.leaflet-control-attribution {
  font-size: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
  opacity: .6;
  transition: opacity var(--t-fast);
}
.leaflet-control-attribution::before {
  content: '\24D8';                     /* ⓘ */
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 13px; line-height: 1;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.leaflet-control-attribution:hover,
.leaflet-control-attribution:focus-within {
  opacity: 1;
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(6px);
  color: var(--ink-3);
}
.leaflet-control-attribution:hover::before,
.leaflet-control-attribution:focus-within::before { display: none; }
.leaflet-control-attribution a { color: var(--ink-2); }

/* "Leaflet" some do crédito: a biblioteca não é dado de mapa, e o prefixo é
   opcional pela própria documentação dela. Os dados continuam creditados. */
.leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LINHA DO TEMPO DA RESERVA  (.lt)

   Responde, num olhar, as duas perguntas que a tela não respondia: onde o
   pedido está e de quem é a vez. Uma régua de degraus com o atual aceso, e
   embaixo um cartão com a frase do momento e a instrução para quem olha.

   Mesma semântica dos passos do formulário de reserva (.co-steps): feito em
   verde com check, atual em laranja, futuro apagado. Problema (atraso,
   contestação, cancelamento) pinta o degrau atual de vermelho.

   .lt--compacta é a versão de lista: só a régua, sem o cartão.
   ══════════════════════════════════════════════════════════════════════════ */
.lt { display: flex; flex-direction: column; gap: 14px; }

/* ── A régua ── */
.lt-regua { display: flex; align-items: flex-start; }
.lt-degrau {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0; position: relative; text-align: center;
}
/* O conector é desenhado pelo degrau, à esquerda dele: assim a linha vai de
   centro a centro dos círculos, sem contas de largura. */
.lt-degrau + .lt-degrau::before {
  content: ''; position: absolute; top: 11px; right: 50%; left: -50%;
  height: 2px; background: var(--line);
}
.lt-degrau.feito + .lt-degrau::before,
.lt-degrau.feito + .lt-degrau.feito::before { background: var(--green); }
.lt-degrau.feito + .lt-degrau.agora::before { background: var(--green); }
/* Encerrada com problema (cancelada, não retirou, perda): a linha até o
   ponto onde parou é vermelha. Verde até um degrau vermelho lia como
   "deu tudo certo". */
.lt--encerrada .lt-degrau + .lt-degrau.problema::before { background: var(--red); }
.lt-bola {
  width: 24px; height: 24px; border-radius: 50%; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-2); background: var(--surface); color: var(--ink-4);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  transition: all var(--t-fast);
}
.lt-bola svg { width: 12px; height: 12px; }
.lt-degrau.feito .lt-bola { background: var(--green); border-color: var(--green-ink); color: #fff; }
.lt-degrau.agora .lt-bola {
  background: var(--p); border-color: var(--p-ink); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--p) 22%, transparent);
}
.lt-degrau.agora.problema .lt-bola {
  background: var(--red); border-color: var(--red-ink);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--red) 22%, transparent);
}
/* Pulso no degrau atual: é o "acontecendo agora" do iFood, sem gif. */
.lt-degrau.agora:not(.problema) .lt-bola::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--p); opacity: 0; animation: lt-pulso 2s ease-out infinite;
}
@keyframes lt-pulso {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lt-degrau.agora .lt-bola::after { animation: none; } }
.lt-rotulo {
  font-size: 11px; line-height: 1.25; color: var(--ink-4); font-weight: 500;
  max-width: 100%; overflow-wrap: anywhere;
}
.lt-degrau.feito .lt-rotulo { color: var(--ink-2); }
.lt-degrau.agora .lt-rotulo { color: var(--ink-1); font-weight: 600; }
.lt-quando {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4);
  letter-spacing: 0.02em;
}

/* ── O cartão do agora ── */
.lt-agora {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in oklch, var(--p) 35%, transparent);
  background: color-mix(in oklch, var(--p) 7%, transparent);
}
.lt-agora.problema {
  border-color: color-mix(in oklch, var(--red) 40%, transparent);
  background: color-mix(in oklch, var(--red) 7%, transparent);
}
.lt-agora.espera {
  border-color: var(--line); background: var(--surface-2);
}
.lt-agora-icone {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--p-fill); color: #fff;
}
.lt-agora.problema .lt-agora-icone { background: var(--red); }
.lt-agora.espera .lt-agora-icone { background: var(--ink-4); }
.lt-agora-icone svg { width: 16px; height: 16px; }
.lt-agora-txt { flex: 1; min-width: 0; }
.lt-agora-vez {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--p-ink); font-weight: 700;
}
.lt-agora.problema .lt-agora-vez { color: var(--red-ink); }
.lt-agora.espera .lt-agora-vez { color: var(--ink-4); }
.lt-agora-titulo {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink-1); margin-top: 1px; line-height: 1.25;
}
.lt-agora-instrucao { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.lt-agora-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lt-agora-acoes form { margin: 0; }

/* ── Compacta: só a régua, para listas ── */
.lt--compacta .lt-bola { width: 16px; height: 16px; border-width: 1.5px; }
.lt--compacta .lt-bola svg { width: 9px; height: 9px; }
.lt--compacta .lt-degrau + .lt-degrau::before { top: 7px; }
.lt--compacta .lt-rotulo { font-size: 10px; }
.lt--compacta .lt-quando { display: none; }
.lt--compacta .lt-degrau:not(.agora) .lt-rotulo { display: none; }
.lt--compacta .lt-degrau.agora .lt-bola { box-shadow: 0 0 0 3px color-mix(in oklch, var(--p) 22%, transparent); }

/* ── Celular: só o degrau atual leva o nome, os outros ficam pela bola ── */
@media (max-width: 560px) {
  .lt-degrau:not(.agora) .lt-rotulo { display: none; }
  .lt-degrau:not(.agora) .lt-quando { display: none; }
  /* Régua curta (encerrada: dois ou três degraus): cabe o nome de todos, e
     sem ele sobrava um check mudo numa ponta e o problema na outra. */
  .lt--curta:not(.lt--compacta) .lt-degrau:not(.agora) .lt-rotulo { display: block; }
  .lt--curta:not(.lt--compacta) .lt-degrau:not(.agora) .lt-quando { display: block; }
  .lt-agora { padding: 12px; }
  .lt-agora-acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Resumo de erros de formulário ──
   Vinha escrito dentro de stores/profile_edit.html e servia só aquela tela. O
   formulário do produto imprimia erro de dois campos e engolia todos os outros:
   a pessoa clicava em salvar, a página voltava igual, e a leitura possível era
   que o botão não funcionava. */
.form-erros {
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-md);
}
.form-erros-topo {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--red-ink); margin-bottom: 8px;
}
.form-erros ul { margin: 0; padding-left: 24px; }
.form-erros li { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 3px; }
.form-erros a { color: var(--ink-1); font-weight: 600; text-decoration: underline; }
.form-erros span { color: var(--ink-3); }
.form-error { margin-top: 5px; font-size: 12.5px; color: var(--red-ink); line-height: 1.45; }

/* ── Cartão de produto ──
   Um desenho só, com a MESMA anatomia em todo cartão: foto, nome em duas
   linhas, marca e modelo em uma, preço no pé. Antes isto era estilo em linha
   dentro do template, e a linha da marca só existia quando havia marca: o
   cartão sem marca ficava mais baixo que o vizinho da mesma fileira. */

.pc { display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; }
.pc:hover { text-decoration: none; }

.pc-foto {
  height: 155px; flex-shrink: 0; position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.pc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-selo { position: absolute; top: 8px; left: 8px; font-size: 10px; }

.pc-corpo { display: flex; flex-direction: column; flex: 1; padding: 12px 14px; min-width: 0; }

/* Duas linhas fixas: com uma só, o nome curto e o comprido davam cartões de
   alturas diferentes na mesma fileira. */
.pc-nome {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--ink-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.35em);
}
/* Reservada mesmo vazia, pelo mesmo motivo. */
.pc-marca {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  margin-top: 2px; min-height: 1.45em; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* margin-top:auto cola o preço no pé: é o que alinha os preços de toda a
   fileira na mesma altura, qualquer que seja o tamanho do nome. */
.pc-pe { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 10px; }
.pc-preco { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--p-ink); white-space: nowrap; }
.pc-preco small { font-size: 10px; color: var(--ink-3); font-weight: 400; }
.pc-preco--venda { color: var(--green-ink); }
.pc-preco--sem { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pc-entrega { width: 13px; height: 13px; color: var(--p-ink); flex-shrink: 0; }

/* ── Carrinho ──
   Era tudo estilo em linha dentro do template, e o resumo grudava por baixo
   (position:sticky) em cima do último cartão de item: no celular ele tapava o
   botão de quantidade e a lixeira do último equipamento. Aqui o resumo tem
   coluna própria no computador e barra fixa no celular, e o item vira grade,
   que é o que faz ele caber em qualquer largura sem espremer o preço. */

.ck-pagina { max-width: 1120px; margin: 0 auto; padding: 22px 16px 120px; }

.ck-cabeca { margin-bottom: 20px; }
.ck-titulo {
  font-family: var(--font-display); font-size: 27px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-1);
  margin: 4px 0 6px; display: flex; align-items: center; gap: 10px;
}
.ck-titulo :is(i, svg) { width: 24px; height: 24px; color: var(--p-ink); flex-shrink: 0; }
.ck-linha-fina { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.55; max-width: 62ch; }

/* Duas colunas a partir de 960px: o resumo sobe para o lado e para de
   disputar espaço com a lista. */
.ck-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 960px) {
  .ck-grade { grid-template-columns: minmax(0, 1fr) 336px; gap: 20px; }
}

/* ── Cartões ── */
.ck-bloco {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r16); overflow: hidden;
}
.ck-bloco + .ck-bloco { margin-top: 14px; }
.ck-bloco-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ck-bloco-topo :is(i, svg) { width: 15px; height: 15px; color: var(--p-ink); flex-shrink: 0; }
.ck-bloco-nome {
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  color: var(--ink-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-bloco-conta {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  margin-left: auto; flex-shrink: 0;
}
.ck-corpo { padding: 16px; }

/* ── Período ── */
.ck-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 430px) { .ck-datas { grid-template-columns: 1fr; } }

.ck-diarias {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 5px 11px; border-radius: 99px;
  background: var(--pb); border: 1px solid var(--pl);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--p-ink);
}
.ck-diarias.ruim { background: var(--danger-bg); border-color: var(--danger-line); color: var(--red-ink); }

/* Caixa da opção de pedir a vizinhos: um alvo de toque inteiro, não só a
   caixinha de 16px. */
.ck-opcao {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r12);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.ck-opcao:hover { border-color: var(--line-2); background: var(--surface-2); }
.ck-opcao:has(input:checked) { border-color: var(--p-ink); background: var(--pb); }
.ck-opcao input { accent-color: var(--p-ink); width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; }
.ck-opcao span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ck-opcao strong { color: var(--ink-1); }

/* ── Item ──
   Grade com áreas nomeadas: no computador a linha é foto, texto e valor; no
   celular o valor desce e as ações ganham a largura toda, em vez de três
   colunas se espremendo até o preço quebrar no meio. */
.ck-item {
  display: grid; gap: 2px 14px; padding: 14px 16px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: "foto nome valor" "foto acoes valor";
  align-items: center;
  transition: background var(--t-fast), opacity .2s;
}
.ck-item + .ck-item { border-top: 1px solid var(--line); }
.ck-item:hover { background: var(--surface-2); }
.ck-item.saindo { opacity: 0; }

.ck-item-foto {
  grid-area: foto; width: 72px; height: 72px; border-radius: var(--r12);
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.ck-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ck-item-nome { grid-area: nome; min-width: 0; }
.ck-item-nome a {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  color: var(--ink-1); text-decoration: none; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ck-item-nome a:hover { color: var(--p-ink); }
.ck-item-dia { font-size: 12px; color: var(--ink-3); margin-top: 3px; font-family: var(--font-mono); }

.ck-item-acoes { grid-area: acoes; display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.ck-passo {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 99px; overflow: hidden;
  background: var(--surface);
}
.ck-passo button {
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: var(--ink-2); font-size: 16px; line-height: 1; display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.ck-passo button:hover { background: var(--surface-2); color: var(--ink-1); }
.ck-passo span {
  min-width: 26px; text-align: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-1);
}
.ck-tirar {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 99px;
  background: none; cursor: pointer; color: var(--ink-4);
  display: grid; place-items: center;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ck-tirar:hover { color: var(--red-ink); background: var(--danger-bg); border-color: var(--danger-line); }
.ck-tirar :is(i, svg) { width: 15px; height: 15px; }

.ck-item-valor { grid-area: valor; text-align: right; }
.ck-item-valor b {
  display: block; font-family: var(--font-display); font-size: 15.5px;
  font-weight: 700; color: var(--ink-1); white-space: nowrap;
}
.ck-item-valor small { font-size: 10px; color: var(--ink-4); font-family: var(--font-mono); }

@media (max-width: 560px) {
  .ck-item {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-areas: "foto nome" "foto valor" "acoes acoes";
    row-gap: 4px;
  }
  .ck-item-foto { width: 60px; height: 60px; }
  .ck-item-valor { text-align: left; }
  .ck-item-valor b { font-size: 15px; }
  .ck-item-acoes { margin-top: 10px; }
  .ck-item-acoes .ck-tirar { margin-left: auto; }
}

/* ── Resumo ──
   Coluna própria no computador, barra fixa no celular. Sticky por baixo, como
   era antes, deixava o cartão do resumo por cima do último item da lista. */
.ck-resumo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r16); padding: 18px; }
@media (min-width: 960px) {
  .ck-resumo { position: sticky; top: 88px; box-shadow: var(--sh-sm); }
}

.ck-resumo-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-3); padding: 5px 0;
}
.ck-resumo-linha span:last-child { font-family: var(--font-mono); color: var(--ink-2); }
.ck-resumo-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ck-resumo-total > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ck-resumo-total b {
  font-family: var(--font-display); font-size: 25px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.02em; white-space: nowrap;
}
.ck-resumo .btn { width: 100%; margin-top: 14px; }

.ck-miudo { font-size: 11.5px; color: var(--ink-4); line-height: 1.55; margin: 12px 0 0; }
.ck-miudo .ok { color: var(--green-ink); }

@media (max-width: 959px) {
  .ck-resumo {
    position: fixed; left: 0; right: 0; z-index: 40;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px);
    border-radius: var(--r16) var(--r16) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) * 0);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .10);
  }
  /* Na barra fixa só o que decide o clique: quanto é e o botão. O resto já
     está escrito na página, acima da barra. */
  .ck-resumo .ck-resumo-linha, .ck-resumo .ck-miudo { display: none; }
  .ck-resumo-total { margin-top: 0; padding-top: 0; border-top: none; }
  .ck-resumo-total b { font-size: 21px; }
  .ck-resumo .btn { margin-top: 10px; }
  /* Fôlego para a página passar por baixo da barra fixa e da navegação:
     sem isto a última linha da letra miúda ficava cortada pela metade. */
  .ck-pagina { padding-bottom: 215px; }
}

/* ── Vazio ── */
.ck-vazio {
  text-align: center; padding: 56px 24px; max-width: 520px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r16);
}
.ck-vazio-marca {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-4);
}
.ck-vazio-marca :is(i, svg) { width: 28px; height: 28px; }
.ck-vazio h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink-1); margin: 0 0 6px; }
.ck-vazio p { font-size: 13.5px; color: var(--ink-3); margin: 0 auto 20px; max-width: 34ch; line-height: 1.55; }

/* ── Recados ── */
.ck-recado {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: var(--r12); font-size: 13px; line-height: 1.5;
}
.ck-recado :is(i, svg) { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.ck-recado--presente { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ink-2); }
.ck-recado--presente :is(i, svg) { color: var(--green-ink); }
.ck-recado--trava { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--ink-2); }
.ck-recado--trava :is(i, svg) { color: var(--red-ink); }

/* ── Caixa de mensagens ──
   A lista mostrava nome do produto e datas, e nada do que tinha sido dito: não
   dava para saber do que se tratava sem abrir uma conversa de cada vez. Agora
   cada linha traz a última mensagem, a hora e, quando há pendência, a bolinha
   com quantas ainda não foram abertas. */

.msgs-pagina { max-width: 820px; margin: 0 auto; padding: 22px 16px 90px; }
.msgs-cabeca, .msgs-lista, .msgs-vazio { max-width: 820px; }
.msgs-cabeca { margin-bottom: 18px; }
.msgs-titulo {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-1); margin: 4px 0 4px;
}
.msgs-linha-fina { font-size: 14px; color: var(--ink-3); margin: 0; }

.msgs-lista {
  border: 1px solid var(--line); border-radius: var(--r16);
  background: var(--surface); overflow: hidden;
}

.msgs-linha {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px; padding: 13px 16px;
  text-decoration: none; color: inherit;
  transition: background var(--t-fast);
}
.msgs-linha + .msgs-linha { border-top: 1px solid var(--line); }
.msgs-linha:hover { background: var(--surface-2); text-decoration: none; }
/* Linha com pendência: fundo tingido e um filete na borda, como no WhatsApp.
   Só negrito não bastava para achar a conversa de relance numa lista longa. */
.msgs-linha.nova {
  background: var(--pb);
  box-shadow: inset 3px 0 0 var(--p-fill);
}
.msgs-linha.nova:hover { background: color-mix(in oklch, var(--p) 9%, var(--surface)); }

.msgs-foto {
  width: 54px; height: 54px; border-radius: var(--r12);
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.msgs-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A linha é a pessoa, então o retrato é redondo e é dela, não do equipamento.
   A moldura quadrada some: quem carrega a borda agora é o próprio círculo. */
.msgs-foto-pessoa { border: none; background: none; border-radius: 50%; }
.msgs-retrato {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-fill); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.msgs-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.msgs-meio { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.msgs-topo { display: flex; align-items: baseline; gap: 10px; }
.msgs-nome {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  color: var(--ink-1); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgs-quando {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
}
.msgs-linha.nova .msgs-quando { color: var(--p-ink); font-weight: 700; }

.msgs-quem {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); min-width: 0;
}
.msgs-quem > span:first-of-type {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgs-quem i, .msgs-quem svg { width: 14px; height: 14px; flex-shrink: 0; }
.msgs-quem .badge { flex-shrink: 0; }

.msgs-pe { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msgs-previa {
  min-width: 0; flex: 1;
  font-size: 13px; color: var(--ink-3); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgs-previa b { color: var(--ink-4); font-weight: 600; }
.msgs-linha.nova .msgs-previa { color: var(--ink-1); font-weight: 600; }

.msgs-conta {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--p-fill); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1;
}

@media (max-width: 480px) {
  .msgs-linha { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px 13px; }
  .msgs-foto { width: 46px; height: 46px; }
  .msgs-retrato { width: 46px; height: 46px; font-size: 17px; }
  /* O status sai: numa linha de 46px sobrando, ele empurrava o nome de quem
     está do outro lado para fora da tela. Ele continua dentro da conversa. */
  .msgs-quem .badge { display: none; }
}

.msgs-vazio {
  text-align: center; padding: 56px 24px; max-width: 460px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r16);
}
.msgs-vazio-marca {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--pb); color: var(--p-ink);
}
.msgs-vazio-marca :is(i, svg) { width: 28px; height: 28px; }
.msgs-vazio h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink-1); margin: 0 0 6px; }
.msgs-vazio p { font-size: 13.5px; color: var(--ink-3); margin: 0 auto 20px; max-width: 34ch; line-height: 1.55; }

/* ── Notificações ──
   Abrir a lista marcava tudo como lido, e por isso nada jamais aparecia como
   pendente. Agora o não lido tem fundo tingido, filete na borda, selo e ponto,
   e some quando a pessoa toca no aviso ou em "marcar todas". */

.nt-pagina { max-width: 780px; margin: 0 auto; padding: 22px 16px 90px; }

.nt-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.nt-titulo {
  font-family: var(--font-display); font-size: 27px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-1);
  margin: 4px 0 6px; display: flex; align-items: center; gap: 10px;
}
.nt-titulo :is(i, svg) { width: 24px; height: 24px; color: var(--p-ink); flex-shrink: 0; }
.nt-linha-fina { font-size: 14px; color: var(--ink-3); margin: 0; }
.nt-marcar { margin: 0; flex-shrink: 0; }

/* Contagem em bolinha, a mesma peça do título e do atalho de mensagens. */
.nt-conta {
  min-width: 22px; height: 22px; padding: 0 7px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--danger-solid); color: #fff;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; line-height: 1;
}

.nt-atalho {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 13px 16px; border-radius: var(--r16);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.nt-atalho:hover { border-color: var(--p-ink); background: var(--pb); text-decoration: none; }
.nt-atalho-ic {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--pb); color: var(--p-ink);
}
.nt-atalho-ic :is(i, svg) { width: 18px; height: 18px; }
.nt-atalho-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nt-atalho-txt strong { font-size: 14px; color: var(--ink-1); }
.nt-atalho-txt span { font-size: 12.5px; color: var(--ink-3); }
.nt-atalho-seta { width: 16px; height: 16px; color: var(--ink-4); flex-shrink: 0; }

.nt-lista {
  border: 1px solid var(--line); border-radius: var(--r16);
  background: var(--surface); overflow: hidden;
}
.nt-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: background var(--t-fast);
}
.nt-item + .nt-item { border-top: 1px solid var(--line); }
a.nt-item:hover { background: var(--surface-2); text-decoration: none; }
.nt-item.sem-link { cursor: default; }
.nt-item.nova {
  background: var(--pb);
  box-shadow: inset 3px 0 0 var(--p-fill);
}
a.nt-item.nova:hover { background: color-mix(in oklch, var(--p) 9%, var(--surface)); }

.nt-ic {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3);
}
.nt-item.nova .nt-ic { background: color-mix(in oklch, var(--p) 16%, transparent); color: var(--p-ink); }
.nt-ic :is(i, svg) { width: 17px; height: 17px; }

.nt-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nt-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-assunto {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink-1); line-height: 1.35;
}
.nt-item.nova .nt-assunto { font-weight: 700; }
.nt-selo {
  flex-shrink: 0; padding: 1px 7px; border-radius: 99px;
  background: var(--p-fill); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.nt-texto { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.nt-quando { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.nt-abrir { color: var(--p-ink); }
.nt-ponto {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  background: var(--p-fill);
}

.nt-vazio {
  text-align: center; padding: 56px 24px; max-width: 460px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r16);
}
.nt-vazio-marca {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-4);
}
.nt-vazio-marca :is(i, svg) { width: 28px; height: 28px; }
.nt-vazio h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink-1); margin: 0 0 6px; }
.nt-vazio p { font-size: 13.5px; color: var(--ink-3); margin: 0 auto 20px; max-width: 34ch; line-height: 1.55; }

@media (max-width: 480px) {
  .nt-cabeca { flex-direction: column; gap: 10px; }
  .nt-marcar { width: 100%; }
  .nt-marcar .btn { width: 100%; }
}

/* ── Documentos da locação: ordem e recibo ──
   Os dois templates carregavam cada um a sua cópia de cento e oitenta linhas
   de estilo em linha, com hex fixo e a fonte do sistema: não seguiam nenhum
   token, não tinham tema escuro, e o que mudava entre eles era a cor de
   destaque. Aqui existe um só documento, e a cor de destaque é variável:
   a ordem puxa a primária, o recibo puxa o verde de quitado.

   Impresso, o documento é papel. O bloco @media print no fim redefine os
   tokens para tinta escura sobre branco, seja qual for o tema da tela. */

.doc-fundo { max-width: 780px; margin: 0 auto; padding: 18px 16px 72px; }

/* Barra de ações: só existe na tela, e nem lá quando o documento está
   dentro do modal do painel (o modal tem os próprios botões) */
.doc-em-moldura .doc-barra { display: none; }
.doc-em-moldura .doc-fundo { padding-top: 12px; padding-bottom: 24px; }

.doc-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.doc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.doc-btn :is(i, svg) { width: 16px; height: 16px; flex-shrink: 0; }
.doc-btn:hover { border-color: var(--line-2); color: var(--ink-1); background: var(--surface-2); }
.doc-btn-forte { background: var(--p-fill); border-color: var(--p-fill); color: #fff; }
.doc-btn-forte:hover { background: var(--pd); border-color: var(--pd); color: #fff; }

/* A folha */
.doc-folha {
  --doc-ink:   var(--p-ink);
  --doc-bg:    var(--pb);
  --doc-linha: var(--pl);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 18px 40px -22px rgba(0,0,0,.20);
}
.doc-folha.doc-quitado {
  --doc-ink:   var(--green-ink);
  --doc-bg:    var(--ok-bg);
  --doc-linha: var(--ok-line);
}

/* ── Cabeçalho ── */
.doc-topo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: start; padding: 26px 30px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--doc-bg), var(--surface) 76%);
}
.doc-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.doc-logo {
  width: 54px; height: 54px; border-radius: 15px; flex-shrink: 0;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--line);
}
.doc-logo-letra {
  display: grid; place-items: center;
  background: var(--doc-bg); border-color: var(--doc-linha); color: var(--doc-ink);
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
}
.doc-tipo {
  margin: 0; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--doc-ink);
}
.doc-loja {
  margin: 3px 0 0; font-family: var(--font-display); font-size: 23px;
  font-weight: 600; letter-spacing: -.02em; color: var(--ink-1); line-height: 1.16;
}
.doc-loja-linha {
  margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3);
  line-height: 1.6; overflow-wrap: anywhere;
}

.doc-selo { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; }
.doc-numero {
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--ink-1); color: var(--surface);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
}
.doc-estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.doc-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.doc-estado-yellow { background: var(--warn-bg);   color: var(--warn-ink); }
.doc-estado-blue   { background: color-mix(in oklch, var(--blue) 14%, transparent); color: var(--blue-ink); }
.doc-estado-green  { background: var(--ok-bg);     color: var(--green-ink); }
.doc-estado-gray   { background: var(--surface-2); color: var(--ink-2); }
.doc-estado-red    { background: var(--danger-bg); color: var(--red-ink); }
.doc-emitido { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }

/* ── Faixa do período: retirada, duração e devolução ── */
.doc-periodo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 14px; padding: 18px 30px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.doc-marco { min-width: 0; }
.doc-marco-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
}
.doc-marco-rotulo :is(i, svg) { width: 13px; height: 13px; flex-shrink: 0; }
.doc-marco-data {
  display: block; margin-top: 5px; font-family: var(--font-display);
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-1);
}
.doc-marco-hora { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.doc-fim { text-align: right; }
.doc-fim .doc-marco-rotulo { justify-content: flex-end; }
.doc-ponte {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; color: var(--doc-ink);
}
.doc-ponte :is(i, svg) { width: 18px; height: 18px; }
.doc-duracao { font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* ── Seções ── */
.doc-bloco { padding: 22px 30px; border-bottom: 1px solid var(--line); }
.doc-titulo {
  margin: 0 0 13px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
}

/* Partes */
.doc-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-parte {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2);
}
.doc-parte-papel {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--doc-ink);
}
.doc-parte-nome {
  margin-top: 5px; font-family: var(--font-display); font-size: 15.5px;
  font-weight: 600; color: var(--ink-1); line-height: 1.3; overflow-wrap: anywhere;
}
.doc-parte-linha { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.doc-parte-linha.doc-fraco { color: var(--ink-3); }

/* Itens */
.doc-itens { list-style: none; margin: 0; padding: 0; }
.doc-item {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-areas: 'foto texto valor'; gap: 6px 14px; align-items: center;
}
.doc-item + .doc-item { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.doc-item-foto {
  grid-area: foto; width: 58px; height: 58px; border-radius: var(--r-md);
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--line);
}
.doc-item-icone {
  display: grid; place-items: center;
  background: var(--doc-bg); border-color: var(--doc-linha); color: var(--doc-ink);
}
.doc-item-icone :is(i, svg) { width: 22px; height: 22px; }
.doc-item-icone.doc-alerta { background: var(--danger-bg); border-color: var(--danger-line); color: var(--red-ink); }
.doc-item-texto { grid-area: texto; min-width: 0; }
.doc-item-nome { font-size: 14.5px; font-weight: 600; color: var(--ink-1); line-height: 1.35; }
.doc-item-nome.doc-alerta { color: var(--red-ink); }
.doc-item-linha { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; overflow-wrap: anywhere; }
.doc-item-conta { margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.doc-item-valor {
  grid-area: valor; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink-1);
}
.doc-item-valor.doc-alerta { color: var(--red-ink); }

/* ── Contas ── */
.doc-contas { padding: 20px 30px 24px; }
.doc-conta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 6px 0; font-size: 13.5px;
}
.doc-conta-rotulo { color: var(--ink-3); line-height: 1.5; }
.doc-conta-valor { font-family: var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.doc-conta.doc-alerta .doc-conta-rotulo,
.doc-conta.doc-alerta .doc-conta-valor { color: var(--red-ink); }
.doc-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 16px;
  border-top: 2px solid var(--ink-1);
}
.doc-total-rotulo {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-2);
}
.doc-total-valor {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink-1); line-height: 1;
}

/* ── Caixas de recado e de assinatura ── */
.doc-recado, .doc-firma {
  display: flex; gap: 11px; margin: 0 30px 22px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
}
.doc-recado > :is(i, svg) { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--warn-ink); }
.doc-recado-texto, .doc-firma-corpo { min-width: 0; font-size: 12.5px; line-height: 1.65; color: var(--warn-ink); }
.doc-recado-texto strong { font-weight: 600; }

.doc-firma { display: block; background: var(--ok-bg); border-color: var(--ok-line); }
.doc-firma-topo {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--green-ink);
}
.doc-firma-topo :is(i, svg) { width: 15px; height: 15px; flex-shrink: 0; }
.doc-firma-corpo { margin-top: 7px; font-size: 13px; color: var(--ink-2); }
.doc-firma-corpo strong { color: var(--ink-1); font-weight: 600; }
.doc-codigo { font-family: var(--font-mono); font-weight: 600; letter-spacing: .1em; }
.doc-firma.doc-esperando { background: var(--warn-bg); border-color: var(--warn-line); }
.doc-firma.doc-esperando .doc-firma-topo { color: var(--warn-ink); }
.doc-firma + .doc-firma { margin-top: -10px; }

/* ── Termos ── */
.doc-termos { background: var(--surface-2); border-top: 1px solid var(--line); }
.doc-termos summary {
  display: flex; align-items: center; gap: 9px; min-height: 48px;
  padding: 14px 30px; cursor: pointer; list-style: none; user-select: none;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-2);
}
.doc-termos summary::-webkit-details-marker { display: none; }
.doc-termos summary :is(i, svg) { width: 15px; height: 15px; flex-shrink: 0; color: var(--doc-ink); }
.doc-termos summary:hover { color: var(--ink-1); }
.doc-termos summary .doc-seta-termos { margin-left: auto; color: var(--ink-3);
  transition: transform var(--t-fast); }
.doc-termos[open] .doc-seta-termos { transform: rotate(180deg); }
.doc-termos ol {
  margin: 0; padding: 0 30px 22px 50px; list-style: decimal outside;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.7;
}
.doc-termos li { margin-bottom: 6px; list-style: decimal outside; }
.doc-termos li::marker { color: var(--ink-4); }

.doc-rodape {
  padding: 15px 30px; border-top: 1px solid var(--line); background: var(--surface-2);
  text-align: center; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: .02em; overflow-wrap: anywhere;
}

/* ── Telas estreitas ── */
@media (max-width: 620px) {
  .doc-fundo { padding: 14px 12px 84px; }
  .doc-topo, .doc-periodo, .doc-bloco, .doc-contas { padding-left: 18px; padding-right: 18px; }
  .doc-recado, .doc-firma { margin-left: 18px; margin-right: 18px; }
  .doc-termos summary, .doc-rodape { padding-left: 18px; padding-right: 18px; }
  .doc-termos ol { padding-left: 38px; padding-right: 18px; }

  .doc-topo { grid-template-columns: minmax(0, 1fr); }
  .doc-selo { flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; }
  .doc-loja { font-size: 20px; }

  /* A faixa vira uma coluna, e a seta deita junto */
  .doc-periodo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .doc-fim { text-align: left; }
  .doc-fim .doc-marco-rotulo { justify-content: flex-start; }
  .doc-ponte { flex-direction: row; align-self: flex-start; gap: 7px; }
  .doc-ponte :is(i, svg) { transform: rotate(90deg); }

  .doc-partes { grid-template-columns: minmax(0, 1fr); }
  .doc-total-valor { font-size: 28px; }
}

/* O preço desce para a linha de baixo antes de espremer o nome do item */
@media (max-width: 460px) {
  .doc-item { grid-template-columns: 50px minmax(0, 1fr); grid-template-areas: 'foto texto' 'valor valor'; }
  .doc-item-foto { width: 50px; height: 50px; }
  .doc-item-valor { font-size: 16px; }
}

/* ── Impresso ──
   Papel é branco. A pessoa no tema escuro imprimiria uma folha preta e
   gastaria a impressora inteira, então aqui os tokens voltam para tinta
   escura sobre branco. print-color-adjust mantém os fundos tingidos, que é
   o que separa aviso de assinatura no PDF. */
@media print {
  @page { margin: 12mm; }

  .doc-fundo {
    --surface: #ffffff; --surface-2: #fafaf9; --bg: #ffffff;
    --line: #dddad6; --line-2: #c9c5c0;
    --ink-1: #14110e; --ink-2: #35302b; --ink-3: #56504a; --ink-4: #6b655e;
    --p-ink: #8a4a24; --pb: #fbf3ec; --pl: #eddccc;
    --warn-bg: #fdf6e6; --warn-line: #e3c885; --warn-ink: #6d4b09;
    --ok-bg: #eef9f1; --ok-line: #a6d7b6; --green-ink: #145c37;
    --danger-bg: #fdf1f0; --danger-line: #e6b0ac; --red-ink: #8a2420;
    --blue-ink: #1d4d8f;
    max-width: none; margin: 0; padding: 0;
  }
  .doc-barra { display: none !important; }
  .doc-folha {
    border: none; border-radius: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .doc-topo, .doc-periodo, .doc-bloco, .doc-contas,
  .doc-item, .doc-recado, .doc-firma, .doc-termos, .doc-parte { break-inside: avoid; }
  .doc-termos summary { min-height: 0; padding-bottom: 6px; }
  .doc-seta-termos { display: none; }
}

/* ── Comparar materiais: lado a lado, de novo, e só isso ──
   Três desenhos foram rejeitados: tabela com rolagem de lado, tabela com o
   cabeçalho grudado dentro de uma caixa, e o "veredito" com número e cor por
   produto. Aqui os produtos são colunas fixas, os atributos são linhas, e o
   cabeçalho com foto, nome inteiro e loja gruda no topo do viewport (não de
   uma caixa: nenhum ancestral tem overflow). No celular ficam duas colunas
   à vista; os outros produtos esperam na lista "Também na comparação" e o
   JS troca quem está na grade (.cmp-fora esconde quem não está). A partir
   de 768px o rótulo vira a primeira coluna e todas as colunas cabem. Nada
   rola de lado, nada rola por dentro. Tokens só; nenhuma cor cheia como
   linha ou letra. */

.cmp-pagina { max-width: 1120px; margin: 0 auto; padding: 8px 16px 96px; }
.cmp-pagina :is(i, svg) { width: 18px; height: 18px; flex: 0 0 auto; }
.cmp-so-largo { display: none; }
.cmp-so-estreito { display: inline; }
@media (min-width: 600px) { .cmp-so-largo { display: inline; } .cmp-so-estreito { display: none; } }

/* Botões: os 44px que o toque pede, por cima dos 40 do @media (pointer: coarse). */
.cmp-pagina .btn { min-height: 44px; }
.cmp-pagina .cmp-btn-icone { min-width: 44px; width: 44px; padding: 0; }
.cmp-pagina .btn:focus-visible, .cmp-vaga:focus-visible, .cmp-foto:focus-visible {
  outline: 2px solid var(--p-ink); outline-offset: 2px;
}

/* ── Topo ── */
.cmp-topo { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; }
.cmp-h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink-1); }
.cmp-conta { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.cmp-topo-acoes { margin-left: auto; display: flex; gap: 8px; }
.cmp-h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.015em; color: var(--ink-1); }
.cmp-dica { margin: -4px 0 10px; font-size: 13px; color: var(--ink-3); }

/* ── A grade ──
   minmax(0, 1fr) é o que impede a coluna de crescer com o conteúdo; "1fr"
   sozinho vale minmax(auto, 1fr) e é assim que uma grade estoura a página. */
.cmp-grade { --cmp-n: 2; margin-top: 4px; }
.cmp-cabecalho, .cmp-linha, .cmp-rodape {
  display: grid; grid-template-columns: repeat(var(--cmp-n), minmax(0, 1fr));
  column-gap: var(--space-3);
}
.cmp-coluna, .cmp-celula, .cmp-acoes { min-width: 0; }
.cmp-canto { display: none; }
.cmp-pagina .cmp-fora { display: none; }

/* Cabeçalho das colunas: gruda sob o header do site. Fundo opaco para as
   linhas passarem por baixo; z-index abaixo do .gh-bar (96). */
.cmp-cabecalho {
  position: sticky; top: var(--gh-h); z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px 0 10px; align-items: start;
}
.cmp-coluna { position: relative; display: flex; gap: 8px; align-items: flex-start; }
.cmp-foto {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); display: block; position: relative; z-index: 2;
}
.cmp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-coluna-texto { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.cmp-nome { font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--ink-1); overflow-wrap: anywhere; }
.cmp-loja { font-size: 13px; line-height: 1.3; color: var(--ink-3); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Quem acabou de entrar na grade pelo "Comparar" pisca uma vez, de leve. */
.cmp-entrou { animation: cmp-entrou .9s ease-out; }
@keyframes cmp-entrou { from { background: var(--ok-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cmp-entrou { animation: none; } }

/* A coluna vaga convida a adicionar; some no celular quando já há dois. */
.cmp-vaga {
  display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch;
  min-height: 60px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
  color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none;
}
.cmp-vaga :is(i, svg) { width: 16px; height: 16px; color: var(--p-ink); }
.cmp-vaga:hover { background: var(--surface-2); color: var(--ink-1); text-decoration: none; }

/* Linhas: rótulo em faixa por cima das células no celular. */
.cmp-linha { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.cmp-rotulo { grid-column: 1 / -1; order: -1; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cmp-rotulo :is(i, svg) { width: 15px; height: 15px; color: var(--ink-3); }
.cmp-celula { display: flex; align-items: flex-start; }
.cmp-valor {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  padding: 3px 7px; margin-left: -7px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--ink-1); overflow-wrap: anywhere;
}
.cmp-valor :is(i, svg) { width: 14px; height: 14px; }
.cmp-valor-icone { color: var(--ink-2); }
.cmp-celula.vago .cmp-valor { font-size: 13px; font-weight: 400; color: var(--ink-3); padding-top: 5px; }
/* O melhor da linha: check, peso e um único fundo colorido na tela. Funciona
   em preto e branco pelo peso e pela forma do check; "Melhor" vai só para o
   leitor de tela. */
.cmp-marca { color: var(--green-ink); }
.cmp-celula:not(.melhor) :is(.cmp-marca, .cmp-marca-texto) { display: none; }
.cmp-celula.melhor .cmp-valor { font-weight: 700; background: var(--ok-bg); }
.cmp-celula.melhor .cmp-valor-icone { display: none; }

/* Rodapé: reservar em cima, carrinho e tirar embaixo, sob cada produto. */
.cmp-rodape { padding-top: 14px; }
.cmp-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.cmp-reservar { grid-column: 1 / -1; }
.cmp-pagina .cmp-cart-btn.feito { color: var(--green-ink); border-color: var(--ok-line); }

/* Celular: só a coluna vaga de quem tem um produto só aparece. */
@media (max-width: 767.98px) {
  .cmp-grade:not([data-produtos="1"]) :is(.cmp-vaga, .cmp-vaga-celula) { display: none; }
}

/* A partir de 768px: rótulo em coluna, todas as colunas à vista, e a lista
   "Também na comparação" não tem mais razão de existir. */
@media (min-width: 768px) {
  .cmp-tambem { display: none; }
  .cmp-grade[data-n="2"] { --cmp-n: 2; max-width: 760px; }
  .cmp-grade[data-n="3"] { --cmp-n: 3; max-width: 960px; }
  .cmp-grade[data-n="4"] { --cmp-n: 4; }
  .cmp-cabecalho, .cmp-linha, .cmp-rodape {
    grid-template-columns: minmax(124px, .6fr) repeat(var(--cmp-n), minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .cmp-canto { display: block; }
  .cmp-cabecalho { padding: 12px 0; }
  .cmp-coluna { flex-direction: column; gap: 8px; }
  .cmp-foto { width: 56px; height: 56px; }
  .cmp-nome { font-size: 14px; }
  .cmp-rotulo { grid-column: auto; order: 0; margin: 0; padding-top: 3px; align-self: flex-start; }
  .cmp-linha { padding: 12px 0; }
}
@media (min-width: 1024px) {
  .cmp-acoes { grid-template-columns: 1fr auto auto; }
  .cmp-reservar { grid-column: auto; }
}

/* ── Adicionar: busca e parecidos ── */
.cmp-adicionar { margin-top: 28px; display: grid; gap: 24px; scroll-margin-top: calc(var(--gh-h) + 12px); }
/* min-width 0: sem isso o item da grade herda a largura mínima da lista de
   parecidos (nome em uma linha só) e a página estoura de lado no celular. */
.cmp-adicionar > * { min-width: 0; }
@media (min-width: 900px) { .cmp-adicionar { grid-template-columns: 1fr 1fr; gap: 40px; } }
.cmp-adicionar-vazio > .cmp-nada { grid-column: 1 / -1; }
.cmp-busca { position: relative; display: block; max-width: 480px; }
.cmp-busca > :is(i, svg) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cmp-busca .input { min-height: 44px; padding-left: 42px; border-radius: var(--r-full); }
/* Os achados entram no fluxo da página, sem caixa que rola: o servidor
   devolve no máximo seis. */
.cmp-achados { max-width: 480px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.cmp-achado {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 8px 14px; text-align: left; cursor: pointer;
  border: none; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit;
}
.cmp-achado:last-child { border-bottom: none; }
.cmp-achado:hover { background: var(--surface-2); }
.cmp-achado img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.cmp-achado > :is(i, svg) { color: var(--p-ink); }
.cmp-achado-texto { flex: 1; min-width: 0; }
.cmp-achado-nome { font-size: 13.5px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-achado-meta { font-size: 13px; color: var(--ink-3); }
.cmp-achado-vazio { padding: 18px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ── Lista de itens: "Também na comparação" (celular) e "Parecidos" ──
   Nome inteiro, sem cortar: a identidade do produto é o nome e a loja. */
.cmp-tambem { margin-top: 24px; }
.cmp-lista { display: flex; flex-direction: column; }
.cmp-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-width: 0; border-top: 1px solid var(--line); }
.cmp-item:first-child { border-top: 0; }
.cmp-item .cmp-foto { z-index: auto; }
.cmp-item-texto { flex: 1 1 auto; min-width: 0; }
.cmp-item-texto b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-1); overflow-wrap: anywhere; }
.cmp-item-texto span { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.cmp-item-texto .cmp-item-preco { color: var(--ink-1); font-weight: 600; }
.cmp-pagina .cmp-comparar { flex: 0 0 auto; padding: 0 12px; }

/* ── Vazio ── */
.cmp-nada { text-align: center; padding: 44px 16px 8px; }
.cmp-nada-marca { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; }
.cmp-nada-marca :is(i, svg) { width: 30px; height: 30px; }
.cmp-nada h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--ink-1); }
.cmp-nada p { color: var(--ink-3); max-width: 360px; margin: 0 auto; font-size: 14px; }


/* ── Quantas máquinas sobram hoje, na lista do painel ──
   A conta de estoque já decidia quem consegue reservar, mas não aparecia em
   tela nenhuma: o fornecedor não tinha onde ver o que ainda estava no pátio. */
.pl-patio {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--green-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pl-patio :is(i, svg) { width: 13px; height: 13px; flex-shrink: 0; }
.pl-patio-parcial { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pl-patio-zerado  { background: var(--danger-bg); border-color: var(--danger-line); color: var(--red-ink); }

/* ── Abas da caixa de mensagens: não lidas, lidas, todas ──
   A caixa era uma lista só, e com muita conversa a pessoa cansava de
   procurar a que pedia resposta. As abas entram no lugar da linha de
   explicação do topo, cada uma com a conta. */
.msgs-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.msgs-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.msgs-filtro:hover { border-color: var(--line-2); color: var(--ink-1); }
.msgs-filtro.aqui { background: var(--pb); border-color: var(--pl); color: var(--p-ink); font-weight: 600; }
.msgs-filtro-n {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-3);
}
.msgs-filtro.aqui .msgs-filtro-n { background: var(--surface); color: var(--p-ink); }
.msgs-vazio-leve { padding: 32px 20px; }
.msgs-vazio-leve a { color: var(--p-ink); font-weight: 600; text-decoration: none; }
.msgs-vazio-leve a:hover { text-decoration: underline; }

/* ── Onde é a obra: o seletor de local da busca ──
   Era cinco blocos empilhados com 628px num telefone e rolagem por dentro,
   e o cartão do endereço cadastrado abria a edição em vez de escolher.
   Agora é uma lista de escolhas, uma linha por opção, todas com o mesmo
   desenho e alvo de 44px; a linha marcada é onde a busca está. */
.loc-modal {
  border: none; border-radius: var(--r-xl); padding: 0;
  width: calc(100% - 24px); max-width: 440px;
  background: var(--surface); box-shadow: var(--sh-lg);
  color: var(--ink-1);
}
.loc-modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.loc-topo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 12px 12px 18px; border-bottom: 1px solid var(--line);
}
.loc-topo-texto { flex: 1; min-width: 0; }
.loc-titulo { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-1); }
.loc-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.loc-fechar {
  width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center; margin: -6px -2px 0 0;
}
.loc-fechar :is(i, svg) { width: 18px; height: 18px; }
.loc-fechar:hover { background: var(--surface-2); color: var(--ink-1); }

.loc-lista { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
/* O display: flex/grid das linhas vence o [hidden] do navegador, e uma linha
   escondida (a de "buscando aqui") aparecia vazia. */
.loc-modal [hidden] { display: none; }

/* A linha: ícone, nome, detalhe, e o check quando é a escolhida */
.loc-linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-1); text-align: left;
  font-family: var(--font-body); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.loc-linha:hover { border-color: var(--line-2); background: var(--surface-2); }
.loc-linha:disabled { opacity: .6; cursor: progress; }
.loc-linha.aqui { border-color: var(--p-ink); background: var(--pb); }
.loc-linha-gps { border-style: dashed; }
.loc-linha-suave { min-height: 44px; border: none; background: transparent; color: var(--ink-3); }
.loc-form-linha { flex: 1; min-width: 0; margin: 0; }
.loc-linha-dupla { display: flex; align-items: stretch; gap: 6px; }
.loc-linha-dupla form:not(.loc-form-linha) { margin: 0; display: flex; }

.loc-icone {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--p-ink);
}
.loc-icone :is(i, svg) { width: 17px; height: 17px; }
.loc-linha.aqui .loc-icone { background: var(--surface); }
.loc-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-nome { font-size: 14px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.loc-detalhe { font-size: 12px; color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.loc-detalhe.ruim { color: var(--red-ink); }
.loc-marca {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--p-fill); color: #fff;
}
.loc-marca :is(i, svg) { width: 14px; height: 14px; }
.loc-marca-seta { background: transparent; color: var(--ink-4); }

/* Ações de uma linha: estrela e lixeira, cada uma com o próprio alvo */
.loc-acao {
  width: 44px; min-height: 56px; flex-shrink: 0; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink-3);
  cursor: pointer; display: grid; place-items: center;
}
.loc-acao :is(i, svg) { width: 16px; height: 16px; }
.loc-acao:hover { color: var(--p-ink); border-color: var(--line-2); }
.loc-acao-perigo:hover { color: var(--red-ink); background: var(--danger-bg); border-color: var(--danger-line); }

/* Outra cidade, na mesma linha, com o botão de ir */
.loc-outro, .loc-salvar {
  display: flex; align-items: center; gap: 8px; margin: 0; min-height: 56px;
  padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.loc-outro.aqui { border-color: var(--p-ink); background: var(--pb); }
.loc-outro.aqui .loc-icone { background: var(--surface); }
.loc-campo {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-1); font-size: 15px; font-family: var(--font-body);
}
.loc-campo::placeholder { color: var(--ink-fantasma); }
.loc-campo:focus { outline: none; border-color: var(--p-ink); box-shadow: 0 0 0 3px color-mix(in oklch, var(--p) 15%, transparent); }
/* A regra de toque de responsive.css (input:not(...) cinco vezes) pesa mais
   que .loc-campo e rebaixava o campo a 40px de min-height; a altura fixa
   passa por cima dela sem disputar especificidade. */
.loc-modal .loc-campo { height: 44px; }
.loc-campo-uf { flex: 0 0 58px; text-transform: uppercase; text-align: center; }
.loc-ir {
  width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: var(--r-sm);
  background: var(--p-fill); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.loc-ir :is(i, svg) { width: 18px; height: 18px; }
.loc-ir:hover { background: var(--pd); }
.loc-ir-suave { background: var(--surface-2); color: var(--p-ink); border: 1px solid var(--line); }
.loc-ir-suave:hover { background: var(--pb); }
.loc-salvar { border-style: dashed; }
.loc-salvar .loc-icone { background: transparent; }

/* "Buscar em outra cidade" fica recolhida numa linha igual às outras; aberta,
   o formulário desce logo abaixo, dentro da mesma moldura. */
.loc-outro-caixa { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.loc-outro-caixa > summary { list-style: none; border: none; background: transparent; }
.loc-outro-caixa > summary::-webkit-details-marker { display: none; }
.loc-outro-caixa > summary .loc-marca-seta :is(i, svg) { transition: transform var(--t-fast); }
.loc-outro-caixa[open] > summary .loc-marca-seta :is(i, svg) { transform: rotate(180deg); }
.loc-outro-caixa > .loc-outro { border: none; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); min-height: 56px; }
.loc-linha-abre:hover { background: var(--surface-2); }
div.loc-linha { cursor: default; }
div.loc-linha:hover { border-color: var(--p-ink); background: var(--pb); }

/* O editor de um lugar salvo: nome, "usar sempre" e a lixeira dentro. */
.loc-editar-corpo { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
/* Em coluna, o flex: 1 do campo vira altura zero e o mínimo de toque de 40
   ganha da altura de 44: aqui o campo não estica. */
.loc-editar-corpo .loc-campo { flex: none; }
.loc-editar-rotulo { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.loc-editar-padrao { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--ink-1); cursor: pointer; }
.loc-editar-padrao input { width: 20px; height: 20px; accent-color: var(--p-fill); flex-shrink: 0; }
.loc-editar-acoes { display: flex; gap: 8px; margin-top: 4px; }
.loc-editar-acoes .btn { min-height: 44px; flex: 1; }
.loc-editar-apagar { color: var(--red-ink); }
.loc-editar-apagar:hover { background: var(--danger-bg); border-color: var(--danger-line); color: var(--red-ink); }

@media (max-width: 400px) {
  .loc-lista { padding: 10px; }
  .loc-linha, .loc-outro, .loc-salvar { padding-left: 10px; }
  .loc-icone { width: 32px; height: 32px; }
}

/* ── Páginas de erro: 404, 403 e 500 ──
   Produção mostrava a página crua do Django, em inglês. Agora as três têm o
   desenho do site: o número pequeno em cima, uma frase que diz o que houve,
   e o que fazer agora. A 500 usa só tokens.css e este bloco, sem herdar o
   base (veja templates/500.html). */
.erro {
  min-height: calc(100vh - var(--gh-h) - 120px); display: grid; place-items: center;
  padding: 32px 16px 96px;
}
.erro-sozinha { margin: 0; background: var(--bg); color: var(--ink-1); font-family: var(--font-body); }
.erro-sozinha .erro { min-height: calc(100vh - 64px); }
.erro-topo { height: 64px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
.erro-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--ink-1); font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.erro-cartao { width: 100%; max-width: 440px; text-align: center; }
.erro-marca {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--p-ink);
}
.erro-marca :is(i, svg) { width: 30px; height: 30px; }
.erro-codigo { margin: 0 0 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.erro-titulo { margin: 0 0 10px; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink-1); }
.erro-texto { margin: 0 auto 24px; max-width: 380px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.erro-busca { position: relative; margin: 0 0 16px; }
.erro-busca > :is(i, svg) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.erro-busca .input { height: 48px; padding-left: 42px; border-radius: var(--r-full); font-size: 16px; }
.erro-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.erro-acoes .btn { min-height: 44px; padding: 0 18px; }
.erro-acoes .btn :is(i, svg) { width: 16px; height: 16px; }
@media (max-width: 420px) {
  .erro-titulo { font-size: 23px; }
  .erro-acoes { flex-direction: column; }
  .erro-acoes .btn { width: 100%; justify-content: center; }
}

/* Selos que se atualizam sozinhos (static/js/rf-contadores.js): o display
   de cada componente vencia o [hidden] do navegador, e o selo de zero
   aparecia vazio. */
:is(.gh-num, .gh-drop-badge, .dash-side-badge, .dash-bnav-badge, .gh-icon-btn)[hidden] { display: none !important; }

/* ── Espera visível (static/js/rf-espera.js) ──────────────────────────
   Popover manual: na camada de topo, por cima de <dialog> aberto. Os
   estilos de popover do navegador (borda, margem, fundo) são zerados. */
#rf-espera {
  position: fixed; inset: 0; width: auto; height: auto; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: visible; color: inherit;
  display: none; pointer-events: none; z-index: 10000;
}
#rf-espera:popover-open, #rf-espera.aberto { display: block; }
.rf-espera-barra {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--p-ink) 50%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: rf-espera-corre 1.1s ease-in-out infinite;
}
@keyframes rf-espera-corre {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
.rf-espera-veu {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 16px; pointer-events: auto; cursor: progress;
  background: color-mix(in oklch, var(--ink-1) 26%, transparent);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
#rf-espera.com-veu .rf-espera-veu { display: flex; }
.rf-espera-cartao {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: var(--r-md); background: var(--surface); color: var(--ink-1);
  font-size: 14px; font-weight: 500; box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
/* Sombra local: o modal ou cartão que está recarregando fica fosco e sem clique. */
.rf-esperando { position: relative; }
.rf-espera-local {
  position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--surface) 72%, transparent); border-radius: inherit; cursor: progress;
}
/* Botão que já enviou (rf-envio-unico.js): roda um anel ao lado do rótulo. */
.btn[aria-busy="true"] { opacity: .8; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rf-espera-barra { animation: none; background: var(--p-ink); }
  .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* ── Escolha com busca (static/js/rf-escolha.js) ──────────────────────── */
.rf-escolha { position: relative; }
.rf-escolha-campo { position: relative; }
.rf-escolha-busca {
  width: 100%; min-height: 44px; padding: 10px 40px 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-1); font-size: 14px; font-family: var(--font-body);
}
.rf-escolha-busca:focus { outline: none; border-color: var(--p-ink); }
.rf-escolha.escolhido .rf-escolha-busca { border-color: var(--p-ink); font-weight: 600; }
.rf-escolha-limpar {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer;
}
.rf-escolha-limpar:hover { background: var(--surface-2); color: var(--ink-1); }
.rf-escolha-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.rf-escolha-lista[hidden] { display: none; }
.rf-escolha-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--ink-1);
}
.rf-escolha-item[aria-selected="true"], .rf-escolha-item:hover { background: var(--surface-2); }
.rf-escolha-rotulo { font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; }
.rf-escolha-sub { font-size: 12px; color: var(--ink-3); }
.rf-escolha-vazio { padding: 12px; font-size: 13px; color: var(--ink-3); }
.rf-escolha-rodape { margin-top: 6px; min-height: 16px; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.rf-escolha-rodape:empty { display: none; }
@media (pointer: coarse) {
  /* A regra geral de input no toque (responsive.css) é mais específica e
     deixava o campo em 40 px; o alvo do dedo é 44. */
  .rf-escolha .rf-escolha-busca { min-height: 44px; }
  .rf-escolha-limpar { width: 44px; height: 44px; }
}

/* Botões do cartão "agora" da régua: 44 px no toque, como todo alvo do site. */
@media (pointer: coarse) {
  .lt-agora-acoes .btn { min-height: 44px; }
}

/* Preço cheio riscado ao lado do preço com a promoção da loja (comparador). */
.cmp-antes { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.cmp-antes s { text-decoration-thickness: 1px; }
.cmp-promo { display: inline-block; padding: 0 6px; border-radius: 99px; background: var(--ok-bg); color: var(--green-ink); font-weight: 700; font-size: 11px; }
.cmp-item-preco .cmp-antes { display: inline; margin: 0 0 0 4px; }