/* ==========================================================================
   Brigada · biblioteca de componentes · v2.0 · 29/09/2026
   Depende de brigada-tokens.css (carregar antes).
   Prefixo .b- em tudo: convive com as classes antigas durante a migração.

   Índice
    0. Base                    10. Tabela
    1. Tipografia              11. Abas e alternador de vista
    2. Ícone                   12. Navegação (sidebar, topbar, bottom nav, trilha, paginação)
    3. Botão                   13. Modal, drawer, bottom sheet
    4. Campo de formulário     14. Menu, tooltip
    5. Seleção (check, rádio, switch, segmentado)   15. Toast e alerta
    6. Upload                  16. Progresso, spinner, skeleton, vazio
    7. Badge, etiqueta, chip   17. Avatar, etapas, acordeão, linha do tempo
    8. Card e KPI              18. Produto: kanban, avaliação OUVIR, divisas, ranking, feed, etiqueta
    9. Gráfico (moldura)       19. Movimento (keyframes e utilitários)
                               20. Transição de marca (popup da troca de nome)
   21. Rotina: lista Hoje (.b-clgroup, .b-clcard), execução (.b-run, .b-runbar, .b-seg-progress, .b-item,
       .b-photo, .b-temp, .b-finishbar, .b-done), pessoa (.b-person-picker), modo cozinha (.b-kitchen),
       linha do tempo do dia (.b-daytl), raias por loja (.b-lanes), lojas (.b-store-switch, .b-scope),
       ações de gestão (.b-stretch, .b-row-actions, .b-card-actions, .b-check-cell, .b-bulkbar, .b-sit, .b-empty--compact),
       cabeçalho do dia (.b-dayhead, .b-tabrow), execução como tela (.b-run--tela, .b-run__cols, .b-run__side)
   22. Site público (.b-site-*): topo, hero, seções, confiança, pilares, depoimento, planos, FAQ, contato, rodapé
   Grades e carrossel do celular compacto: seção 8 (.b-grid--2/3/4/painel, .b-carousel).
   Etiqueta de validade térmica (.b-label-print, em mm): seção 18.
   Tamanhos de tela: celular < 768, tablet 768–1199, PC ≥ 1200 (seção 12).
   ========================================================================== */

/* ---------- 0. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01"; /* Inter: 1 e a mais legíveis */
}
[data-theme] { color: var(--text); }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a) { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a):hover { text-decoration-thickness: 2px; }
::selection { background: var(--brasa-200); color: var(--carvao-900); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* hidden sempre esconde, mesmo nas classes .b- que definem display (alerta, banner, vazio, skeleton…) */
[hidden]:not([hidden="until-found"]) { display: none !important; }
.b-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.b-num { font-variant-numeric: tabular-nums; }
.b-divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-6) 0; }
.b-kbd {
  font-family: var(--font-mono); font-size: 0.8em; padding: 1px 6px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--text-muted);
}

/* ---------- 1. Tipografia ---------- */
.b-display, .b-h1, .b-h2, .b-h3, .b-h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
.b-display { font-size: var(--fs-display); line-height: 1.02; font-weight: var(--fw-bold); letter-spacing: -0.035em; }
.b-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.b-h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: var(--fw-semibold); }
.b-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.b-h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.b-lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.b-body { font-size: var(--fs-md); line-height: var(--lh-normal); margin: 0; text-wrap: pretty; }
.b-small { font-size: var(--fs-sm); line-height: 1.45; }
.b-caption { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); }
.b-over {
  font-size: var(--fs-xs); line-height: 1.35; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--text-muted);
}
.b-muted { color: var(--text-muted); }
.b-brand { color: var(--brand); }
.b-mono { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- 2. Ícone (Lucide, contorno 2 px, pontas arredondadas) ---------- */
.b-icon, :where(svg.lucide) { /* :where: .b-icon--sm/--lg vencem no svg que o Lucide gera */
  width: var(--icon-md); height: var(--icon-md); flex: none;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.b-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.b-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.b-icon-tile {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md); background: var(--action-soft); color: var(--on-action-soft);
}
.b-icon-tile--neutral { background: var(--bg-sunken); color: var(--text); }
.b-icon-tile--success { background: var(--success-soft); color: var(--success); }
.b-icon-tile--warning { background: var(--warning-soft); color: var(--warning); }
.b-icon-tile--danger  { background: var(--danger-soft);  color: var(--danger); }
.b-icon-tile--info    { background: var(--info-soft);    color: var(--info); }
.b-icon-tile--gema    { background: var(--gema-soft);    color: var(--on-gema-soft); }

/* ---------- 3. Botão ---------- */
.b-btn {
  --_h: var(--ctl-md);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--_h); min-width: var(--_h); padding: 0 var(--sp-4);
  border: var(--bw-strong) solid transparent; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  line-height: 1; letter-spacing: 0; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}
.b-btn:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { transform: scale(0.97); }
.b-btn:disabled, .b-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.b-btn .b-icon, .b-btn svg.lucide { width: 18px; height: 18px; }

.b-btn--sm { --_h: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.b-btn--lg { --_h: var(--ctl-lg); padding: 0 var(--sp-6); font-size: var(--fs-md); }
.b-btn--xl { --_h: var(--ctl-xl); padding: 0 var(--sp-8); font-size: var(--fs-lg); }
.b-btn--block { width: 100%; }
.b-btn--icon { width: var(--_h); padding: 0; }

.b-btn--primary { background: var(--action); color: var(--text-on-action); }
.b-btn--primary:hover:not(:disabled) { background: var(--action-hover); box-shadow: var(--shadow-action); }
.b-btn--primary:active:not(:disabled) { background: var(--action-press); box-shadow: none; }

.b-btn--secondary { background: transparent; color: var(--neutral-btn); border-color: var(--neutral-btn); }
.b-btn--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--neutral-btn) 8%, transparent); }

.b-btn--soft { background: var(--action-soft); color: var(--on-action-soft); }
.b-btn--soft:hover:not(:disabled) { background: var(--action-soft-hover); }

.b-btn--ghost { background: transparent; color: var(--text); }
.b-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); }

.b-btn--danger { background: var(--danger-solid); color: #fff; }
.b-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-solid) 85%, #000); }

.b-btn--gema { background: var(--gema); color: var(--carvao-900); } /* só em conquista */
.b-btn--gema:hover:not(:disabled) { background: color-mix(in srgb, var(--gema) 88%, #000); }

.b-btn--link {
  --_h: auto; padding: 0; min-width: 0; border: 0; background: none; color: var(--link); overflow: visible;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.b-btn--link:hover { text-decoration-thickness: 2px; }

/* seta que avança no hover: ação de "seguir" */
.b-btn .b-btn__arrow { transition: transform var(--dur-base) var(--ease-brasa); }
.b-btn:hover .b-btn__arrow { transform: translateX(4px); }

/* brilho de clique (brasa), posicionado pelo brigada.js */
.b-btn__spark {
  position: absolute; z-index: -1; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.45), transparent 70%);
  transform: translate(-50%, -50%) scale(0); pointer-events: none;
  animation: b-spark var(--dur-slower) var(--ease-enter) forwards;
}
.b-btn--secondary .b-btn__spark, .b-btn--ghost .b-btn__spark, .b-btn--soft .b-btn__spark {
  background: radial-gradient(circle, rgb(236 74 39 / 0.25), transparent 70%);
}

/* carregando: aria-busy="true" (trava de duplo clique) */
.b-btn[aria-busy="true"] { cursor: progress; color: transparent !important; }
.b-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--_spin, var(--text-on-action)) transparent var(--_spin, var(--text-on-action)) var(--_spin, var(--text-on-action));
  border-right-color: transparent;
  animation: b-spin 0.7s linear infinite;
}
.b-btn--secondary[aria-busy="true"], .b-btn--ghost[aria-busy="true"] { --_spin: var(--text); }
.b-btn--soft[aria-busy="true"] { --_spin: var(--on-action-soft); }
.b-btn--gema[aria-busy="true"] { --_spin: var(--carvao-900); }

/* sucesso momentâneo: data-state="done" */
.b-btn[data-state="done"] { background: var(--success); color: #fff; border-color: transparent; }
.b-btn[data-state="done"] .b-btn__check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: b-draw var(--dur-slow) var(--ease-enter) forwards; }

.b-btn-group { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.b-btn-group--attached { gap: 0; }
.b-btn-group--attached .b-btn { border-radius: 0; }
.b-btn-group--attached .b-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.b-btn-group--attached .b-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.b-btn-group--attached .b-btn + .b-btn { margin-left: calc(var(--bw-strong) * -1); }

/* contador sobre botão de ícone (sino): o .b-btn corta o que sai da caixa, então o .b-count vai no invólucro */
.b-btn-badge { position: relative; display: inline-flex; }
.b-btn-badge > .b-count { position: absolute; top: -4px; right: -4px; z-index: 1; pointer-events: none; box-shadow: 0 0 0 2px var(--bg); }

/* botão flutuante (ação principal no celular) */
.b-fab {
  position: fixed; right: var(--sp-4); bottom: calc(var(--bottomnav-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky); width: 56px; height: 56px; border-radius: var(--r-lg);
  display: grid; place-items: center; border: 0;
  background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-brasa), background-color var(--dur-fast);
}
.b-fab:hover { background: var(--action-hover); transform: translateY(-2px); }
.b-fab:active { transform: scale(0.94); }
@media (min-width: 768px) { .b-fab { right: var(--sp-6); bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); } } /* tablet e PC: sem bottom nav */

/* ---------- 4. Campo de formulário ---------- */
.b-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); display: flex; gap: var(--sp-1); align-items: baseline; }
.b-label__opt { font-weight: var(--fw-regular); color: var(--text-muted); }
.b-label__req { color: var(--danger); }
.b-hint { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.b-error { font-size: var(--fs-xs); line-height: 1.4; color: var(--danger); display: flex; gap: 6px; align-items: flex-start; font-weight: var(--fw-medium); }
.b-error .b-icon { width: 14px; height: 14px; margin-top: 1px; }
.b-valid { font-size: var(--fs-xs); line-height: 1.4; color: var(--success); display: flex; gap: 6px; align-items: flex-start; font-weight: var(--fw-medium); }
.b-valid .b-icon { width: 14px; height: 14px; margin-top: 1px; }
.b-counter { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

.b-input, .b-select, .b-textarea {
  width: 100%; min-height: var(--ctl-lg); padding: 0 var(--sp-3);
  background: var(--surface-2); color: var(--text);
  border: var(--bw) solid var(--border-input); border-radius: var(--r-sm);
  font-size: var(--fs-md); /* 16 px: o iPhone não dá zoom no foco */
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
  appearance: none; -webkit-appearance: none;
}
.b-input::placeholder, .b-textarea::placeholder { color: var(--text-subtle); }
.b-input:hover, .b-select:hover, .b-textarea:hover { border-color: var(--text-muted); }
.b-input:focus, .b-select:focus, .b-textarea:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 22%, transparent);
}
.b-input:disabled, .b-select:disabled, .b-textarea:disabled { background: var(--bg-sunken); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }
.b-input[readonly] { background: var(--bg-sunken); border-style: dashed; }
.b-input[aria-invalid="true"], .b-select[aria-invalid="true"], .b-textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}
.b-input--valid { border-color: var(--success); }
.b-input--sm { min-height: var(--ctl-md); font-size: var(--fs-sm); }
@media (max-width: 767px) { .b-input--sm { font-size: 16px; } }
.b-textarea { padding: var(--sp-3); min-height: 112px; resize: vertical; line-height: var(--lh-normal); }
.b-select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A736A' 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; background-size: 18px;
}
input[type="date"].b-input, input[type="time"].b-input { padding-right: var(--sp-2); }
/* O tema escuro já tem color-scheme: dark, que clareia o ícone; inverter de novo o apagava. */
::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; }

/* campo com ícone, prefixo, sufixo ou botão dentro */
.b-input-wrap { position: relative; display: flex; align-items: center; }
.b-input-wrap > .b-input { flex: 1; }
.b-input-wrap > .b-icon:first-child { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.b-input-wrap > .b-icon:first-child ~ .b-input { padding-left: 42px; }
.b-input-wrap__end {
  position: absolute; right: 4px; height: calc(100% - 8px); min-width: 40px;
  display: grid; place-items: center; border: 0; background: none; color: var(--text-muted);
  border-radius: var(--r-xs); padding: 0 var(--sp-2);
}
.b-input-wrap__end:hover { color: var(--text); background: var(--surface-hover); }
.b-input-wrap:has(.b-input-wrap__end) > .b-input { padding-right: 48px; }
.b-affix {
  display: flex; align-items: center; padding: 0 var(--sp-3); min-height: var(--ctl-lg);
  background: var(--bg-sunken); border: var(--bw) solid var(--border-input); color: var(--text-muted-sunken);
  font-size: var(--fs-sm); white-space: nowrap;
}
.b-affix:first-child { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.b-affix:last-child { border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.b-input-wrap > .b-affix:first-child + .b-input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.b-input-wrap > .b-input:has(+ .b-affix) { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.b-input-wrap > .b-affix:first-child + .b-input:has(+ .b-affix) { border-radius: 0; } /* afixo dos dois lados */
/* afixo que é botão (− e + do passo, limpar): alvo de 48 px */
button.b-affix { min-width: var(--ctl-lg); justify-content: center; cursor: pointer; color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-bold); transition: background-color var(--dur-fast); }
button.b-affix:hover { background: var(--surface-hover); }
/* [data-toggle-password]: ponha os dois ícones (.b-eye e .b-eye-off); o aria-pressed escolhe qual aparece */
[data-toggle-password]:not([aria-pressed="true"]) .b-eye-off, [data-toggle-password][aria-pressed="true"] .b-eye { display: none; }

.b-form-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.b-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.b-fieldset > legend { padding: 0; margin-bottom: var(--sp-2); }
.b-form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--border); }

.b-field--shake { animation: b-shake 360ms var(--ease-standard); }

/* ---------- 5. Seleção ---------- */
.b-check, .b-radio {
  display: inline-flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  font-size: var(--fs-md); line-height: 1.4; min-height: 24px;
}
/* Só a caixa e o rádio: campo de data ou número dentro do rótulo (ex.: "Numa data") fica .b-input. */
.b-check input:where([type="checkbox"], [type="radio"]), .b-radio input:where([type="checkbox"], [type="radio"]) {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 22px; height: 22px; border: var(--bw-strong) solid var(--border-input); background: var(--surface-2);
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), transform var(--dur-instant);
}
.b-check input:where([type="checkbox"]) { border-radius: var(--r-xs); }
.b-radio input:where([type="radio"]) { border-radius: 50%; }
.b-check input::after {
  content: ""; width: 12px; height: 7px; border: 2.5px solid #fff; border-top: 0; border-right: 0;
  transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform var(--dur-base) var(--ease-brasa);
}
.b-check input:checked { background: var(--action); border-color: var(--action); }
.b-check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.b-check input:indeterminate { background: var(--action); border-color: var(--action); }
.b-check input:indeterminate::after { width: 10px; height: 0; border-left: 0; border-bottom: 2.5px solid #fff; transform: none; }
.b-radio input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--dur-base) var(--ease-brasa); }
.b-radio input:checked { background: var(--action); border-color: var(--action); }
.b-radio input:checked::after { transform: scale(1); }
.b-check input:where([type="checkbox"], [type="radio"]):active, .b-radio input:where([type="checkbox"], [type="radio"]):active { transform: scale(0.9); }
.b-check input:where([type="checkbox"], [type="radio"]):disabled, .b-radio input:where([type="checkbox"], [type="radio"]):disabled { opacity: 0.45; cursor: not-allowed; }
.b-check__text small, .b-radio__text small { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

/* item de checklist grande (tarefa da equipe) */
.b-task {
  display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-base);
}
.b-task:hover { border-color: var(--border-strong); }
.b-task input:where([type="checkbox"]) { appearance: none; -webkit-appearance: none; margin: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-input); flex: none; display: grid; place-items: center; cursor: pointer; transition: all var(--dur-base) var(--ease-brasa); }
.b-task input:where([type="checkbox"])::after { content: ""; width: 12px; height: 7px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-base) var(--ease-brasa); }
.b-task input:checked { background: var(--success); border-color: var(--success); transform: scale(1.06); }
.b-task input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.b-task:has(input:checked) { background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); }
.b-task input:where([type="checkbox"]):disabled { opacity: 0.45; cursor: not-allowed; } /* ex.: pede a foto antes */
.b-task:has(input:where([type="checkbox"]):disabled) { cursor: default; }
.b-task--late { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--danger); }
.b-task--late:has(input:checked) { border-color: var(--border); box-shadow: none; }
.b-task:has(input:checked) .b-task__title { text-decoration: line-through; text-decoration-color: var(--text-muted); color: var(--text-muted); }
.b-task__body { flex: 1; min-width: 0; }
.b-task__title { font-weight: var(--fw-semibold); transition: color var(--dur-base); }
.b-task__meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }

.b-switch { display: inline-flex; gap: var(--sp-3); align-items: center; cursor: pointer; font-size: var(--fs-md); }
.b-switch input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: 44px; height: 26px; border-radius: var(--r-full); background: var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.b-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-brasa), width var(--dur-fast);
}
.b-switch input:active::after { width: 24px; }
.b-switch input:checked { background: var(--action); }
.b-switch input:checked::after { transform: translateX(18px); }
.b-switch input:checked:active::after { transform: translateX(14px); }
.b-switch input:disabled { opacity: 0.45; cursor: not-allowed; }

/* segmentado: filtro curto, lista/cards, período */
.b-segmented {
  display: inline-flex; position: relative; padding: 3px; gap: 2px;
  background: var(--bg-sunken); border-radius: var(--r-sm); border: 1px solid var(--border);
}
.b-segmented button, .b-segmented label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 var(--sp-3); border: 0; background: none; border-radius: var(--r-xs);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted-sunken); cursor: pointer;
  transition: color var(--dur-fast);
}
.b-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.b-segmented label:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-segmented [aria-pressed="true"], .b-segmented [aria-selected="true"], .b-segmented label:has(input:checked) { color: var(--text); }
.b-segmented__thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0;
  background: var(--surface-2); border-radius: var(--r-xs); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-brasa), width var(--dur-base) var(--ease-brasa);
}

/* ---------- 6. Upload ---------- */
.b-drop {
  position: relative; display: grid; place-items: center; gap: var(--sp-2); text-align: center;
  padding: var(--sp-8) var(--sp-4); border: 2px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-base) var(--ease-brasa);
}
.b-drop:hover { border-color: var(--action); color: var(--text); }
.b-drop[data-over="true"] { border-color: var(--action); background: var(--action-soft); transform: scale(1.01); }
.b-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.b-drop strong { color: var(--text); }
.b-drop input[type="file"] { width: 100%; height: 100%; }
/* em linha: o input.b-input de arquivo que o brigada.js embrulha (formulários comuns) */
.b-drop--linha { display: flex; justify-content: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-align: left; }
.b-drop--linha strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.b-drop:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.b-drop:has(input:focus-visible), .b-photo-slot:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-file {
  display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-sm);
}
.b-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.b-file__bar { height: 3px; background: var(--bg-sunken); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.b-file__bar > i { display: block; height: 100%; background: var(--action); width: var(--p, 0%); transition: width var(--dur-slow) var(--ease-standard); }
.b-photo-slot {
  aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: var(--sp-1); text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-sunken);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.b-photo-slot:has(input[aria-invalid="true"]), .b-photo-slot[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ---------- 7. Badge, etiqueta, chip ---------- */
.b-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap; background: var(--bg-sunken); color: var(--text); border: 1px solid transparent;
}
.b-badge .b-icon { width: 14px; height: 14px; }
.b-badge--brand   { background: var(--action-soft);  color: var(--on-action-soft); }
.b-badge--success { background: var(--success-soft); color: var(--success); }
.b-badge--warning { background: var(--warning-soft); color: var(--warning); }
.b-badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.b-badge--info    { background: var(--info-soft);    color: var(--info); }
.b-badge--gema    { background: var(--gema-soft);    color: var(--on-gema-soft); }
.b-badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.b-badge--solid   { background: var(--action); color: var(--text-on-action); }
.b-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.b-badge--live .b-badge__dot { animation: b-live 1.6s var(--ease-standard) infinite; }

.b-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--action); color: var(--text-on-action);
  font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1;
}
.b-count--pop { animation: b-pop var(--dur-slow) var(--ease-brasa); }
.b-count--danger { background: var(--danger-solid); color: #fff; }  /* atraso */
.b-count--neutral { background: var(--bg-sunken); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } /* total, sem urgência */

/* etiqueta de cor livre (CRM, categoria). Nunca usar para status. */
.b-tag {
  --_c: var(--carvao-500);
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--_c) 14%, var(--surface)); color: color-mix(in srgb, var(--_c) 60%, var(--text)); /* 60%: 4,6:1 ou mais nas 8 cores e nos 2 temas */
  border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
}
.b-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--_c); }
.b-tag--vermelho { --_c: #C8323F; } .b-tag--laranja { --_c: #E26A1B; } .b-tag--amarelo { --_c: #C99A06; }
.b-tag--verde { --_c: #2B8A4E; } .b-tag--azul { --_c: #2C6BB0; } .b-tag--roxo { --_c: #7B4FB0; }
.b-tag--rosa { --_c: #C24C8A; } .b-tag--cinza { --_c: #7A736A; }

/* chip de filtro: liga/desliga, removível */
.b-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.b-chip:hover { border-color: var(--text-muted); }
.b-chip[aria-pressed="true"], .b-chip:has(input:checked) { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.b-chip input { position: absolute; opacity: 0; pointer-events: none; } /* chip com checkbox dentro: dias da semana */
.b-chip:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-chip__x { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-right: -4px; border-radius: var(--r-xs); border: 0; background: none; color: inherit; opacity: 0.7; }
.b-chip__x:hover { opacity: 1; background: rgb(127 127 127 / 0.2); }
.b-chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- 8. Card e KPI ---------- */
.b-card {
  --_cp: var(--sp-5); /* padding: 16 no celular compacto (fim da seção 8) */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--_cp); position: relative;
}
.b-card--flat { background: transparent; }
.b-card--sunken { background: var(--bg-sunken); border-color: transparent; }
/* sobre o fundo rebaixado, o Inox escuro dá 4,49:1: o texto secundário de dentro troca de token */
:where(.b-card--sunken, .b-modal__foot, .b-column) { --text-muted: var(--text-muted-sunken); }
.b-card--elevated { border-color: transparent; box-shadow: var(--shadow-md); }
.b-card--inverse { background: var(--surface-inverse); color: var(--text-inverse); border-color: transparent; }
.b-card--brand { background: var(--brasa-500); color: var(--comanda-100); border-color: transparent; }
.b-card--interactive {
  cursor: pointer; text-decoration: none; color: inherit; display: block;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast);
}
.b-card--interactive:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.b-card--interactive:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-xs); }
.b-card--accent { border-left: 3px solid var(--brand); }
.b-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.b-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; }
.b-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.b-card__media { margin: calc(var(--_cp) * -1) calc(var(--_cp) * -1) var(--sp-4); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-sunken); }

.b-kpi { display: flex; flex-direction: column; gap: var(--sp-1); }
.b-kpi__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--sp-2); }
.b-kpi__value {
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1.05; font-weight: var(--fw-bold);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.b-kpi__value small { font-size: 0.5em; font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: 0; margin-left: 2px; }
.b-kpi__delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.b-kpi__delta--up { color: var(--success); }
.b-kpi__delta--down { color: var(--danger); }
.b-kpi__delta--flat { color: var(--text-muted); }
.b-kpi__foot { font-size: var(--fs-xs); color: var(--text-muted); }
.b-spark { width: 100%; height: 36px; margin-top: var(--sp-2); overflow: visible; }
.b-spark path.line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-spark path.area { fill: color-mix(in srgb, var(--brand) 14%, transparent); stroke: none; }

/* Grades pela largura disponível (sem ponto de quebra). Celular compacto (regra do Júlio, 30/09/2026):
   o que é curto fica lado a lado. 1 coluna só abaixo de 2 × 136 + gap (≈ 284 px de conteúdo, tela de 320).
     --4  4 colunas a partir de 848 px de largura; abaixo, 2 (2 × 2); nunca 3 + 1       KPIs, atalhos, pilares, medalhas
     --3  3 colunas a partir de 752 px; abaixo, 2                                       cards de treino, lojas, prêmios, modelos
     --2  2 colunas sempre (lado a lado também no celular)                              "é / não é", antes e depois, 2 números
     --painel  2 colunas a partir de 656 px; abaixo, 1                                  gráfico + lista, formulário + resumo
   O que é longo (depoimento, plano, card extenso) vai em .b-carousel, não em pilha de largura total.
   O "- 1px" evita que o arredondamento de subpixel derrube uma coluna. */
.b-grid { --_g: var(--sp-4); display: grid; gap: var(--_g); }
.b-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(136px, (100% - var(--_g)) / 2 - 1px)), 1fr)); }
.b-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(136px, min((100% - var(--_g)) / 2 - 1px, max((100% - 2 * var(--_g)) / 3 - 1px, (752px - 100%) * 999)))), 1fr)); }
.b-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(136px, min((100% - var(--_g)) / 2 - 1px, max((100% - 3 * var(--_g)) / 4 - 1px, (848px - 100%) * 999)))), 1fr)); }
.b-grid--painel { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, (100% - var(--_g)) / 2 - 1px)), 1fr)); }
.b-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.b-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.b-spacer { flex: 1; }

/* Carrossel horizontal com encaixe: no celular, o que é longo desliza de lado e o próximo card aparece na borda
   (86% da largura). A partir de 768 px vira grade (coluna mínima --b-carousel-min, padrão 280); com
   .b-carousel--sempre continua carrossel em qualquer tamanho. Sangra até a borda da tela: fica dentro de um
   container com margem lateral de 16 (--b-carousel-bleed). Rola com teclado: tabindex="0" + aria-label.
   <div class="b-carousel" tabindex="0" role="region" aria-label="Depoimentos"> <article>…</article> … </div> */
.b-carousel {
  --_bleed: var(--b-carousel-bleed, var(--sp-4));
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--b-carousel-w, 86%); gap: var(--sp-3); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--_bleed);
  margin-inline: calc(var(--_bleed) * -1); padding: 2px var(--_bleed) var(--sp-3); scrollbar-width: none;
}
.b-carousel::-webkit-scrollbar { display: none; }
.b-carousel > * { scroll-snap-align: start; min-width: 0; }
.b-carousel:focus-visible { outline-offset: -2px; }
@media (min-width: 768px) {
  .b-carousel:not(.b-carousel--sempre, .b-shell .b-carousel) { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--b-carousel-min, 280px)), 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
}
@container b-shell (min-width: 768px) {
  .b-carousel:not(.b-carousel--sempre) { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--b-carousel-min, 280px)), 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
}

/* Celular compacto: menos respiro e número menor (a tabela compacta fica no fim da seção 10).
   Alvo de toque não encolhe (44; 48 na equipe). Vale na tela (fora da casca) e na casca do app. */
@media (max-width: 767px) {
  .b-grid { --_g: var(--sp-3); }
  .b-card { --_cp: var(--sp-4); }
  .b-card__head { margin-bottom: var(--sp-3); }
  .b-kpi__value { font-size: 1.75rem; }
}
@container b-shell (max-width: 767px) {
  .b-grid { --_g: var(--sp-3); }
  .b-card { --_cp: var(--sp-4); }
  .b-card__head { margin-bottom: var(--sp-3); }
  .b-kpi__value { font-size: 1.75rem; }
}

/* ---------- 9. Gráfico (moldura; cores em --chart-*) ---------- */
.b-chart { position: relative; }
.b-chart__legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); }
.b-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.b-chart__legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--_c); }
.b-bars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 160px; padding-top: var(--sp-2); margin-bottom: 22px; border-bottom: 1px solid var(--chart-grid); }
.b-bars > div { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.b-bars > div > i {
  display: block; width: 100%; max-width: 40px; height: var(--v); border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: var(--_c, var(--chart-1)); transform-origin: bottom;
  animation: b-grow var(--dur-slower) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger));
}
.b-bars > div > span { position: absolute; top: calc(100% + 6px); font-size: 11px; line-height: 1.2; white-space: nowrap; color: var(--chart-axis); } /* fora do fluxo: 90% e 100% não ficam iguais */
.b-meter { height: 8px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.b-meter > i { display: block; height: 100%; width: var(--v); background: var(--_c, var(--action)); border-radius: inherit; animation: b-grow-x var(--dur-slower) var(--ease-enter) both; transform-origin: left; }

/* ---------- 10. Tabela ---------- */
.b-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
/* menu "⋯" aberto numa linha: a caixa deixa o menu sair (com overflow auto ele era cortado no tablet e no PC).
   No celular o menu já é bottom sheet fixa. Tabela que não cabe sem rolar de lado: esconda coluna ou use
   .b-table--stack; não dependa da rolagem lateral numa tabela com menu. */
.b-table-wrap:has(details.b-dropdown[open]) { overflow: visible; }
.b-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.b-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-sunken); color: var(--text-muted-sunken);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.b-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.b-table tbody tr { transition: background-color var(--dur-fast); }
.b-table tbody tr:hover { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.b-table tbody tr:last-child td { border-bottom: 0; }
.b-table tr[aria-selected="true"] { background: var(--action-soft); }
.b-table tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.b-table .num, .b-table [data-num] { text-align: right; font-variant-numeric: tabular-nums; }
.b-table--compact td, .b-table--compact th { padding: var(--sp-2) var(--sp-3); }
.b-table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-sunken) 45%, transparent); }
.b-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.b-sort:hover, .b-sort[aria-sort] { color: var(--text); }
.b-sort .b-icon { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-standard); }
.b-sort[aria-sort="descending"] .b-icon { transform: rotate(180deg); }
th[aria-sort] .b-sort { color: var(--text); }  /* aria-sort é atributo do <th>, não do botão */
th[aria-sort="descending"] .b-sort .b-icon { transform: rotate(180deg); }
/* celular compacto: a tabela fica compacta (célula 8 × 12) antes de virar pilha; troque rótulo longo por ícone
   com aria-label ou por texto curto (data-short) antes de usar .b-table--stack */
@media (max-width: 767px) { .b-table :is(th, td) { padding: var(--sp-2) var(--sp-3); } }
@container b-shell (max-width: 767px) { .b-table :is(th, td) { padding: var(--sp-2) var(--sp-3); } }

/* no celular, cada linha vira cartão (td precisa de data-label) */
@media (max-width: 640px) {
  .b-table--stack thead { display: none; }
  .b-table--stack, .b-table--stack tbody, .b-table--stack tr, .b-table--stack td { display: block; width: 100%; }
  .b-table--stack tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .b-table--stack td { padding: 4px 0; border: 0; display: flex; justify-content: space-between; gap: var(--sp-4); text-align: right; }
  .b-table--stack td::before { content: attr(data-label); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: left; }
}

/* ---------- 11. Abas ---------- */
.b-tabs { position: relative; display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.b-tabs::-webkit-scrollbar { display: none; }
/* rola de lado (brigada.js marca data-rola): o degradê avisa que tem mais aba ou chip */
:is(.b-tabs, .b-chip-row)[data-rola="fim"] { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
:is(.b-tabs, .b-chip-row)[data-rola="inicio"] { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
:is(.b-tabs, .b-chip-row)[data-rola="ambos"] { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.b-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-3); border: 0; background: none; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast);
}
.b-tab:hover { color: var(--text); }
.b-tab[aria-selected="true"] { color: var(--text); }
/* aba que é link (troca de página, sem a tinta do brigada.js): <a class="b-tab" aria-current="page"> */
a.b-tab { text-decoration: none; }
.b-tab[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--brand); }
.b-tabs__ink {
  position: absolute; bottom: -1px; left: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--brand);
  transition: transform var(--dur-slow) var(--ease-brasa), width var(--dur-slow) var(--ease-brasa);
}
.b-tabpanel[hidden] { display: none; }
.b-tabpanel { animation: b-fade-up var(--dur-base) var(--ease-enter); }
/* alternador de vista (data-vista-alvo): o alvo recebe data-vista; o brigada.js esconde o [data-so-vista] da outra vista.
   Lista/cards também em CSS, para não piscar antes do JS. */
[data-vista="lista"] [data-so-vista="cards"], [data-vista="cards"] [data-so-vista="lista"] { display: none; }

/* ---------- 12. Navegação ----------
   Três tamanhos, medidos pela largura do .b-shell (no produto, a tela inteira):
     celular  < 768      topbar compacta (56) + .b-bottomnav; menu completo = .b-sidebar em drawer
     tablet   768–1199   trilho .b-rail (72, ícone + rótulo curto); sem bottom nav; o "Menu" do trilho
                         abre a mesma .b-sidebar por cima (retrato 768–1023 e paisagem 1024–1199)
     PC       ≥ 1200     .b-sidebar fixa de 264
   O .b-shell é container (container-type: inline-size): tudo dentro dele segue a largura do próprio
   shell. Por isso a moldura de tablet do kit (820 px) mostra o trilho mesmo numa tela de 1440, e a
   tela de PC montada em 1200 px continua PC numa janela estreita. O que fica fora do shell
   (bottom nav depois dele, .b-menu-fundo, toaster, .b-fab) segue a largura da tela, nos mesmos pontos.
   Marcação: .b-shell > [.b-rail] + .b-sidebar#menu-principal + .b-shell__main; bottom nav logo depois. */
.b-shell { container: b-shell / inline-size; display: flex; min-height: 100dvh; }
.b-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-shell__content { padding: var(--sp-6); max-width: var(--container); width: 100%; margin: 0 auto; }
.b-shell > .b-sidebar { flex: 0 0 var(--sidebar-w); }
.b-sidebar {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3); background: var(--surface); border-right: 1px solid var(--border);
}
.b-sidebar__brand { display: flex; align-items: center; height: 40px; padding: 0 var(--sp-2); margin-bottom: var(--sp-4); }
.b-sidebar__brand svg { height: 26px; width: auto; }
.b-sidebar__section { margin: var(--sp-4) var(--sp-3) var(--sp-1); }
.b-nav-item {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.b-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.b-nav-item[aria-current="page"] { background: var(--action-soft); color: var(--on-action-soft); font-weight: var(--fw-semibold); }
.b-nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(var(--sp-3) * -1); top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.b-nav-item .b-count { margin-left: auto; }
.b-sidebar__foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
/* fundo escuro atrás do menu aberto (celular e tablet); o clique nele fecha o menu (brigada.js) */
.b-menu-fundo { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-standard); }
body:has(.b-sidebar[data-open="true"]) .b-menu-fundo, .b-menu-fundo[data-open="true"] { opacity: 1; pointer-events: auto; }
@media (min-width: 1200px) { .b-menu-fundo { display: none; } }
@media (min-width: 768px) { .b-topbar__menu { display: none; } }

/* Trilho do tablet (768–1199): 72 px, ícone + rótulo curto embaixo; no máximo 6 destinos.
   O primeiro item é o "Menu" (button data-menu-abrir aria-controls="menu-principal") que abre a
   .b-sidebar completa por cima. Rótulo de uma palavra ("Hoje", "Treinos"); o nome inteiro vai no data-tip. */
.b-rail {
  display: none; flex: 0 0 var(--rail-w); width: var(--rail-w); flex-direction: column; align-items: center; gap: 2px;
  position: sticky; top: 0; z-index: var(--z-sidebar); height: 100dvh; padding: var(--sp-2) 0 var(--sp-3);
  background: var(--surface); border-right: 1px solid var(--border);
}
.b-rail__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 6px 4px 8px; border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--text-muted); font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.2;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur-fast);
}
.b-rail__icon {
  display: grid; place-items: center; width: 48px; height: 32px; border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast), transform var(--dur-base) var(--ease-brasa);
}
.b-rail__label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-rail__item:hover { color: var(--text); }
.b-rail__item:hover .b-rail__icon { background: var(--surface-hover); }
.b-rail__item:active .b-rail__icon { transform: scale(0.92); }
.b-rail__item:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.b-rail__item[aria-current="page"] { color: var(--text); }
.b-rail__item[aria-current="page"] .b-rail__icon { background: var(--action-soft); color: var(--on-action-soft); }
.b-rail__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; width: 3px; height: 32px; border-radius: 0 3px 3px 0; background: var(--brand); }
.b-rail__item[aria-expanded="true"] .b-rail__icon { background: var(--surface-hover); color: var(--text); }
.b-rail__item .b-count { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.b-rail__sep { flex: none; width: 32px; height: 1px; margin: var(--sp-1) 0; background: var(--border); }
.b-rail__foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* pular para o conteúdo: primeiro item do <body>, aparece só no foco do teclado */
.b-pular {
  position: fixed; left: var(--sp-3); top: -100px; z-index: var(--z-tooltip); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); background: var(--surface-inverse); color: var(--text-inverse); font-weight: var(--fw-semibold); text-decoration: none;
}
.b-pular:focus { top: var(--sp-3); }

.b-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.b-topbar__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .b-topbar { padding: 0 var(--sp-3); } }

.b-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
@media (max-width: 767px) { .b-bottomnav { display: grid; } }
.b-bottomnav.b-bottomnav--static { position: static; display: grid; }
.b-bottomnav :is(a, button) { /* <button> para o "Mais" que abre menu */
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: var(--fw-semibold);
  -webkit-tap-highlight-color: transparent;
}
.b-bottomnav :is(a, button) .b-icon { transition: transform var(--dur-base) var(--ease-brasa); }
.b-bottomnav :is(a, button)[aria-current="page"] { color: var(--link); } /* rótulo de 11 px: Brasa 500 dava 3,6:1 */
.b-bottomnav :is(a, button)[aria-current="page"] .b-icon { transform: translateY(-2px); }
.b-bottomnav :is(a, button)[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.b-bottomnav button[aria-expanded="true"] { color: var(--text); }
.b-bottomnav :is(a, button):active .b-icon { transform: scale(0.88); }
.b-bottomnav .b-count { position: absolute; top: 6px; left: calc(50% + 4px); min-width: 18px; height: 18px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }

/* As três faixas, dentro do .b-shell (vêm depois das regras de tela: dentro do shell, vale a largura dele) */
@container b-shell (max-width: 1199px) {
  /* celular e tablet: a sidebar vira o menu completo, por cima. Comece com data-open="false". */
  .b-sidebar {
    position: fixed; inset: 0 auto 0 0; height: auto; width: min(86vw, 320px); z-index: var(--z-modal);
    transform: translateX(-100%); box-shadow: var(--shadow-lg); transition: transform var(--dur-slow) var(--ease-enter);
  }
  .b-sidebar[data-open="true"] { transform: none; }
  /* fechada: sai da ordem do Tab depois de terminar de deslizar */
  .b-sidebar[data-open="false"] { visibility: hidden; transition: transform var(--dur-slow) var(--ease-enter), visibility 0s linear var(--dur-slow); }
  .b-menu-fundo { display: block; }
}
@container b-shell (min-width: 768px) and (max-width: 1199px) {
  .b-rail { display: flex; }
  /* página antiga sem trilho: o botão de menu da topbar continua, para ninguém ficar sem navegação */
  .b-shell:not(:has(> .b-rail)) .b-topbar__menu { display: inline-flex; }
}
@container b-shell (max-width: 767px) {
  .b-shell__content { padding: var(--sp-4) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-8)); }
  .b-topbar { height: var(--topbar-h-compact); padding: 0 var(--sp-3); }
  .b-topbar__menu { display: inline-flex; }
  .b-bottomnav { display: grid; }
}
@container b-shell (min-width: 768px) {
  .b-topbar__menu { display: none; }
  .b-bottomnav:not(.b-bottomnav--static) { display: none; }
}

.b-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); list-style: none; padding: 0; margin: 0; }
.b-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.b-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.b-breadcrumb li + li::before { content: "/"; margin-right: var(--sp-1); color: var(--border-strong); }
.b-breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }

.b-pagination { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.b-pagination :where(a, span):not(.b-btn, .b-pagination__info, .b-pagination__info *) {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.b-pagination a:not(.b-btn):hover { background: var(--surface-hover); }
.b-pagination [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.b-pagination [aria-current="page"] { background: var(--surface-inverse); color: var(--text-inverse); }
.b-pagination__info { margin-right: auto; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- 13. Modal, drawer, bottom sheet (use <dialog>) ---------- */
.b-modal, .b-drawer, .b-sheet {
  border: 0; padding: 0; color: var(--text); background: var(--surface); box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - var(--sp-8));
}
.b-modal::backdrop, .b-drawer::backdrop, .b-sheet::backdrop {
  background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: b-fade var(--dur-slow) var(--ease-standard);
}
.b-modal { width: min(560px, calc(100vw - var(--sp-8))); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.b-modal:not([open]) { display: none; }
.b-modal[open] { animation: b-modal-in var(--dur-slow) var(--ease-enter); }
.b-modal--sm { width: min(420px, calc(100vw - var(--sp-8))); }
.b-modal--lg { width: min(820px, calc(100vw - var(--sp-8))); }
.b-modal__head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0; }
.b-modal__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.015em; margin: 0; flex: 1; }
.b-modal__body { padding: var(--sp-4) var(--sp-5); overflow-y: auto; }
.b-modal__foot { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--bg-sunken); }
/* celular: rodapé de formulário e de modal empilha em largura total, primário em cima (o HTML segue cancelar → primário) */
@media (max-width: 640px) {
  .b-form-actions, .b-modal__foot { flex-direction: column-reverse; align-items: stretch; }
  :is(.b-form-actions, .b-modal__foot) > .b-btn { --_h: var(--ctl-lg); flex: none; width: 100%; font-size: var(--fs-md); }
  :is(.b-form-actions, .b-modal__foot) > .b-spacer { display: none; }
}
.b-close { display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -8px 0 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); }
.b-close:hover { background: var(--surface-hover); color: var(--text); }
.b-closing { animation: b-modal-out var(--dur-base) var(--ease-exit) forwards !important; }
.b-closing::backdrop { animation: b-fade var(--dur-base) var(--ease-exit) reverse forwards; }

.b-drawer {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw); max-width: 100vw; /* o navegador limita o dialog a 100% − 2em */
  border-radius: var(--r-lg) 0 0 var(--r-lg); display: flex; flex-direction: column;
}
.b-drawer:not([open]) { display: none; }
.b-drawer[open] { animation: b-drawer-in var(--dur-slow) var(--ease-enter); }
.b-drawer.b-closing { animation: b-drawer-out var(--dur-base) var(--ease-exit) forwards !important; }
.b-drawer .b-modal__body { flex: 1; }
@media (max-width: 480px) { .b-drawer { border-radius: 0; } }

.b-sheet {
  margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; flex-direction: column;
}
.b-sheet:not([open]) { display: none; }
.b-sheet[open] { animation: b-sheet-in var(--dur-slow) var(--ease-enter); }
.b-sheet.b-closing { animation: b-sheet-out var(--dur-base) var(--ease-exit) forwards !important; }
@media (min-width: 641px) { .b-sheet { width: min(520px, 100vw); margin: auto auto 0; } } /* no desktop não estica na tela toda */
.b-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: var(--sp-2) auto 0; }
/* menu dentro da bottom sheet (lojas, ações do "⋯"): sem caixa, itens grandes */
.b-sheet .b-menu { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.b-sheet .b-menu__item { min-height: 52px; font-size: var(--fs-md); }
.b-sheet .b-modal__foot > .b-btn { flex: 1 1 auto; } /* pé da sheet: os botões dividem a largura */

/* ---------- 14. Menu e tooltip ---------- */
.b-menu {
  min-width: 220px; padding: var(--sp-1); margin: 0; list-style: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.b-menu[popover] { position: fixed; inset: auto; margin: 0; } /* o brigada.js põe embaixo do botão com popovertarget */
.b-menu:popover-open { animation: b-menu-in var(--dur-base) var(--ease-enter); }
details.b-dropdown { position: relative; display: inline-block; }
details.b-dropdown > summary { list-style: none; }
details.b-dropdown > summary::-webkit-details-marker { display: none; }
details.b-dropdown > .b-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); animation: b-menu-in var(--dur-base) var(--ease-enter); transform-origin: top right; }
details.b-dropdown--start > .b-menu { right: auto; left: 0; transform-origin: top left; }
details.b-dropdown--up > .b-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
details.b-dropdown--up.b-dropdown--start > .b-menu { transform-origin: bottom left; }
.b-menu__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-sm); background: none; text-align: left; text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); cursor: pointer;
}
.b-menu__item:hover, .b-menu__item:focus-visible { background: var(--surface-hover); outline: none; }
.b-menu__item .b-icon { color: var(--text-muted); width: 18px; height: 18px; }
.b-menu__item--danger { color: var(--danger); }
.b-menu__item--danger .b-icon { color: var(--danger); }
.b-menu__item kbd { margin-left: auto; }
.b-menu__item[aria-checked="true"] { font-weight: var(--fw-semibold); } /* role="menuitemradio" ou "menuitemcheckbox" */
.b-menu__item[aria-checked="true"]::after { content: ""; flex: none; margin-left: auto; width: 10px; height: 6px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.b-menu__sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.b-menu__label { padding: var(--sp-2) var(--sp-3) var(--sp-1); }

/* :where: não tira o position de classe nenhuma (.b-fab continua fixed) */
:where([data-tip]) { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-tooltip); left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; box-shadow: var(--shadow-md);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:has(:focus-visible)::after { /* :has: span em volta do botão */ opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }
[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
/* à direita: trilho do tablet */
[data-tip-pos="right"]::after { left: calc(100% + 6px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
[data-tip-pos="right"]:is(:hover, :focus-visible, :has(:focus-visible))::after { transform: translate(0, -50%); }

/* ---------- 15. Toast e alerta ---------- */
.b-toaster {
  /* o brigada.js faz dele popover="manual": assim sobe acima de um modal aberto (camada de topo) */
  position: fixed; z-index: var(--z-toast); inset: var(--sp-4) var(--sp-4) auto auto;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  display: flex; flex-direction: column; gap: var(--sp-2); width: min(380px, calc(100vw - var(--sp-8))); pointer-events: none;
}
@media (max-width: 767px) { .b-toaster { top: auto; bottom: calc(var(--bottomnav-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); right: var(--sp-4); left: var(--sp-4); width: auto; } }
.b-toast {
  --_c: var(--text-muted);
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: b-toast-in var(--dur-slow) var(--ease-brasa);
}
.b-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--_c); }
.b-toast > .b-icon { color: var(--_c); margin-top: 1px; }
.b-toast__body { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.b-toast__title { font-weight: var(--fw-semibold); display: block; }
.b-toast__text { color: var(--text-muted); }
.b-toast__action { display: flex; width: fit-content; margin-top: var(--sp-1); font-size: var(--fs-sm); } /* Brigada.toast({ acao: { rotulo: "Desfazer", onClick } }) */
.b-toast__timer { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--_c); opacity: 0.5; animation: b-timer var(--_t, 4s) linear forwards; }
.b-toast--success { --_c: var(--success); }
.b-toast--warning { --_c: var(--warning); }
.b-toast--danger  { --_c: var(--danger); }
.b-toast--info    { --_c: var(--info); }
.b-toast--brigada { --_c: var(--brand); }
.b-toast--brigada > .b-icon { animation: b-pop var(--dur-slower) var(--ease-brasa); }
.b-toast.b-leaving { animation: b-toast-out var(--dur-base) var(--ease-exit) forwards; }

.b-alert {
  --_c: var(--info); --_bg: var(--info-soft);
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
  background: var(--_bg); color: var(--text); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--_c) 28%, transparent);
  font-size: var(--fs-sm);
}
.b-alert > .b-icon { color: var(--_c); margin-top: 1px; }
.b-alert__body { flex: 1; min-width: 0; }
.b-alert__title { font-weight: var(--fw-semibold); display: block; margin-bottom: 2px; }
.b-alert--success { --_c: var(--success); --_bg: var(--success-soft); }
.b-alert--warning { --_c: var(--warning); --_bg: var(--warning-soft); }
.b-alert--danger  { --_c: var(--danger);  --_bg: var(--danger-soft); }
.b-alert--brand   { --_c: var(--brand);   --_bg: var(--action-soft); }
/* alerta crítico (atraso, temperatura): pulsa até alguém agir */
.b-alert--critical { --_c: var(--danger); --_bg: var(--danger-soft); border-width: 1.5px; animation: b-critical 2.4s var(--ease-standard) infinite; }
.b-banner {
  display: flex; gap: var(--sp-3); align-items: center; justify-content: center; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4); background: var(--surface-inverse); color: var(--text-inverse); font-size: var(--fs-sm); text-align: center;
}
.b-banner a { color: inherit; font-weight: var(--fw-semibold); }
/* cobrança: vence em breve (alerta) e atrasada (erro). Não pulsa: cobrança não é alerta crítico. */
.b-banner--warning, .b-banner--danger { color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--_c) 30%, transparent); }
.b-banner--warning { --_c: var(--warning); background: var(--warning-soft); }
.b-banner--danger  { --_c: var(--danger);  background: var(--danger-soft); }
:is(.b-banner--warning, .b-banner--danger) > .b-icon { color: var(--_c); }

/* ---------- 16. Progresso, spinner, skeleton, vazio ---------- */
.b-progress { height: 8px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.b-progress > i {
  display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--action);
  transition: width var(--dur-slower) var(--ease-enter); position: relative; overflow: hidden;
}
.b-progress > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.28), transparent); transform: translateX(-100%); animation: b-shimmer 2.2s var(--ease-standard) infinite; }
.b-progress--success > i { background: var(--success); }
.b-progress--gema > i { background: var(--gema); }
.b-progress--indeterminate > i { width: 40%; animation: b-indeterminate 1.3s var(--ease-standard) infinite; }
.b-progress-label { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

.b-progress-label > :last-child { text-align: right; }

.b-ring { --v: 0; --_s: 64px; width: var(--_s); height: var(--_s); position: relative; display: grid; place-items: center; }
.b-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.b-ring circle { fill: none; stroke-width: 6; }
.b-ring .track { stroke: var(--bg-sunken); }
.b-ring .fill { stroke: var(--_c, var(--action)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset var(--dur-hero) var(--ease-enter); }
.b-ring b { font-family: var(--font-display); font-size: calc(var(--_s) * 0.26); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.b-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand); animation: b-spin 0.7s linear infinite; }
.b-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

.b-skeleton {
  display: block; border-radius: var(--r-xs); background: var(--skeleton); position: relative; overflow: hidden;
  min-height: 12px;
}
.b-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); transform: translateX(-100%); animation: b-shimmer 1.4s var(--ease-standard) infinite; }
.b-skeleton--text { height: 12px; margin: 6px 0; }
.b-skeleton--title { height: 22px; width: 55%; }
.b-skeleton--circle { border-radius: 50%; }

.b-empty { display: grid; place-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--text-muted); }
.b-empty__art { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-sunken); color: var(--text-subtle); margin-bottom: var(--sp-2); }
.b-empty__art .b-icon { width: 36px; height: 36px; stroke-width: 1.5; }
.b-empty__art--brigada { background: var(--action-soft); color: var(--brand); } /* tudo feito */
.b-empty__art--danger { background: var(--danger-soft); color: var(--danger); }  /* não carregou */
.b-empty__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text); margin: 0; }
.b-empty p { margin: 0; max-width: 42ch; font-size: var(--fs-sm); }
.b-empty .b-btn { margin-top: var(--sp-3); }

/* ---------- 17. Avatar, etapas, acordeão, linha do tempo ---------- */
.b-avatar {
  --_s: 40px; position: relative; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%;
  display: inline-grid; place-items: center; overflow: visible;
  background: var(--avatar-bg); color: var(--comanda-100);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: calc(var(--_s) * 0.38); letter-spacing: -0.01em;
}
.b-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.b-avatar--brasa { background: var(--action); color: var(--text-on-action); } /* Brasa 600 + branco: 5,1:1 */
.b-avatar--comanda { background: var(--comanda-200); color: var(--carvao-900); }
.b-avatar--sm { --_s: 28px; } .b-avatar--lg { --_s: 56px; } .b-avatar--xl { --_s: 80px; }
.b-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.b-avatar-group { display: flex; }
.b-avatar-group .b-avatar { box-shadow: 0 0 0 2px var(--surface); }
.b-avatar-group .b-avatar + .b-avatar { margin-left: calc(var(--_s) * -0.15); } /* 30% cortava as iniciais do anterior */

.b-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.b-steps li { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); counter-increment: step; }
.b-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--bg-sunken); transition: background-color var(--dur-slow) var(--ease-standard); }
.b-steps li[data-state="done"]::before { background: var(--text); }
.b-steps li[aria-current="step"]::before { background: var(--brand); }
.b-steps li[aria-current="step"] { color: var(--text); }
.b-steps li span::before { content: counter(step) ". "; }

.b-accordion { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.b-accordion details + details { border-top: 1px solid var(--border); }
.b-accordion summary {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); cursor: pointer; list-style: none;
  font-weight: var(--fw-semibold);
}
.b-accordion summary::-webkit-details-marker { display: none; }
.b-accordion summary::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; border: 2px solid var(--text-muted); border-top: 0; border-left: 0;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-base) var(--ease-brasa);
}
.b-accordion details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.b-accordion summary:hover { background: var(--surface-hover); }
.b-accordion__body { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.b-accordion details[open] .b-accordion__body { animation: b-fade-up var(--dur-base) var(--ease-enter); }
@supports (interpolate-size: allow-keywords) {
  .b-accordion { interpolate-size: allow-keywords; }
  .b-accordion details::details-content { height: 0; overflow: clip; transition: height var(--dur-base) var(--ease-standard), content-visibility var(--dur-base) allow-discrete; }
  .b-accordion details[open]::details-content { height: auto; }
}

.b-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.b-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.b-timeline li { position: relative; padding: 0 0 var(--sp-5) 36px; }
.b-timeline li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.b-timeline li[data-kind="done"]::before { background: var(--success); border-color: var(--success); }
.b-timeline li[data-kind="alert"]::before { background: var(--danger); border-color: var(--danger); }
.b-timeline li[data-kind="brigada"]::before { background: var(--brand); border-color: var(--brand); box-shadow: var(--glow-brasa); }
.b-timeline__time { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-timeline__text { font-size: var(--fs-sm); }

/* ---------- 18. Produto ---------- */
/* Kanban (CRM) */
.b-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; }
.b-column { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--bg-sunken); border-radius: var(--r-md); min-height: 240px; scroll-snap-align: start; transition: background-color var(--dur-fast), box-shadow var(--dur-fast); }
.b-column[data-over="true"] { background: var(--action-soft); box-shadow: inset 0 0 0 2px var(--action); }
.b-column__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: var(--sp-1) var(--sp-1) var(--sp-2); }
.b-column__head .b-count { background: var(--surface); color: var(--text-muted); }
.b-kcard {
  padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); cursor: grab; font-size: var(--fs-sm);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base), opacity var(--dur-fast);
}
.b-kcard:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.b-kcard[data-dragging="true"] { cursor: grabbing; opacity: 0.55; transform: rotate(-2deg) scale(1.02); box-shadow: var(--shadow-lg); }
.b-kcard__title { font-weight: var(--fw-semibold); margin-bottom: 4px; }
.b-kcard__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--sp-2); }

/* Avaliação OUVIR: 5 rostos em traço (substitui emoji; mesmos valores 1–5) */
.b-rating { display: flex; gap: var(--sp-2); justify-content: space-between; max-width: 420px; container-type: inline-size; }
.b-rating label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: clamp(10px, 3.7cqi, var(--fs-xs)); font-weight: var(--fw-semibold); color: var(--text-muted); } /* "Contente" cabe em 5 colunas até 320 px */
.b-rating input { position: absolute; opacity: 0; pointer-events: none; }
.b-rating label > span:last-child { text-align: center; line-height: 1.2; }
.b-rating__face { /* encolhe junto em tela de 320 a 360 px */
  width: 100%; max-width: 56px; height: auto; aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface); color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-brasa), background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.b-rating__face svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-rating label:hover .b-rating__face { transform: translateY(-3px); border-color: var(--border-strong); color: var(--text); }
.b-rating input:focus-visible + .b-rating__face { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-rating input:checked + .b-rating__face { transform: scale(1.12); border-color: var(--_c); background: color-mix(in srgb, var(--_c) 14%, var(--surface)); color: var(--_c); }
.b-rating input:checked ~ span { color: var(--text); }
.b-rating label:nth-child(1) { --_c: var(--rubi-600); }
.b-rating label:nth-child(2) { --_c: #C9641B; }
.b-rating label:nth-child(3) { --_c: var(--inox-700); }
.b-rating label:nth-child(4) { --_c: #4F8A3A; }
.b-rating label:nth-child(5) { --_c: var(--verde-600); }
[data-theme="dark"] .b-rating label:nth-child(1) { --_c: var(--rubi-300); }
[data-theme="dark"] .b-rating label:nth-child(3) { --_c: var(--inox-500); }
[data-theme="dark"] .b-rating label:nth-child(5) { --_c: var(--verde-400); }

/* Divisas: patente/nível (1 a 3). Linguagem do produto, não é o logo. */
.b-divisas { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-subtle); }
.b-divisas i { display: block; width: 11px; height: 11px; border: 3px solid currentColor; border-bottom: 0; border-right: 0; border-radius: 2px 0 0 0; transform: rotate(45deg); margin-bottom: -5px; transition: color var(--dur-slow) var(--ease-standard); }
.b-divisas { padding-top: 4px; }
.b-divisas--lg i { width: 18px; height: 18px; border-width: 4px; margin-bottom: -8px; }
.b-divisas[data-n] i { color: var(--border-strong); }
.b-divisas[data-n="1"] i:nth-last-child(-n+1),
.b-divisas[data-n="2"] i:nth-last-child(-n+2),
.b-divisas[data-n="3"] i:nth-last-child(-n+3) { color: var(--brand); }
.b-level { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.b-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.b-rank li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
/* pódio: li[data-pos="1|2|3"]; sem data-pos, os 3 primeiros de um <ol> sem start (lista que começa no 15º não ganha pódio) */
.b-rank li:where(.b-rank:not([start]) > :nth-child(-n+3):not([data-pos]), [data-pos="1"], [data-pos="2"], [data-pos="3"]) { background: var(--surface); border: 1px solid var(--border); }
.b-rank__pos { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: var(--fw-bold); font-size: var(--fs-sm); background: var(--bg-sunken); color: var(--text-muted-sunken); font-variant-numeric: tabular-nums; flex: none; }
.b-rank li:where(.b-rank:not([start]) > :nth-child(1):not([data-pos]), [data-pos="1"]) .b-rank__pos { background: var(--gema); color: var(--carvao-900); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gema) 25%, transparent); }
.b-rank li:where(.b-rank:not([start]) > :nth-child(2):not([data-pos]), [data-pos="2"]) .b-rank__pos { background: var(--inox-300); color: var(--carvao-900); }
.b-rank li:where(.b-rank:not([start]) > :nth-child(3):not([data-pos]), [data-pos="3"]) .b-rank__pos { background: #C58A5A; color: var(--carvao-900); }
.b-rank__name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); }
.b-rank__pts { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-family: var(--font-display); }

/* Conquista (Gema) */
.b-medal {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFD98A, var(--gema-500) 55%, #C98A12);
  color: var(--carvao-900); box-shadow: 0 6px 18px -6px rgb(242 179 61 / 0.7), inset 0 -3px 0 rgb(0 0 0 / 0.12);
}
.b-medal .b-icon { width: 32px; height: 32px; }
.b-medal--locked { background: var(--bg-sunken); color: var(--text-subtle); box-shadow: inset 0 0 0 2px var(--border-strong); } /* ainda não conquistou */
.b-medal--locked::after { display: none; }
.b-medal--shine { overflow: hidden; }
.b-medal--shine::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.6) 50%, transparent 60%); animation: b-medal-shine 2.8s var(--ease-standard) infinite; }

/* Post do feed da casa */
.b-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.b-post__head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.b-post__who { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.b-post__when { font-size: var(--fs-xs); color: var(--text-muted); }
.b-post__actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.b-react { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.b-react:hover { background: var(--surface-hover); color: var(--text); }
.b-react[aria-pressed="true"] { color: var(--link); } /* texto: tom de link (AA); o ícone segue a marca */
.b-react[aria-pressed="true"] .b-icon { color: var(--brand); }
.b-react[aria-pressed="true"] .b-icon { animation: b-pop var(--dur-slow) var(--ease-brasa); }
/* preenche só ícone de forma fechada; hand-heart preenchido vira borrão */
.b-react[aria-pressed="true"] .b-icon:is(.lucide-heart, .lucide-star, .lucide-thumbs-up, [data-fill]) { fill: currentColor; }
.b-post--recognition { border-color: color-mix(in srgb, var(--gema) 45%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--gema) 10%, var(--surface)), var(--surface) 55%); }

/* Etiqueta de validade térmica · MODELO APROVADO pelo Júlio em 30/09/2026 (lote MT-3009-02, APROVADOS.md).
   Uma marcação e um CSS só, em mm, para a prévia na tela e para o papel (templates/etiquetas/imprimir.html inclui
   tokens/django/_etiqueta_css.html, que carrega este arquivo). Preto puro no branco: a cabeça térmica só liga ou
   desliga o ponto (cinza vira retícula suja). Nada de cor da marca, logo ou sombra no papel.
   Ordem: casa · praça (caixa alta, fio embaixo) · [texto fixo do tipo] · produto em destaque · dados (Manipulado,
   Conservação, Responsável, Lote…) com o QR à direita e o lote embaixo dele · faixa preta VALIDADE com data e hora.
   Tamanhos: --60x40 (padrão) e --60x60 (larga, térmica de mesa); --48x40, --48x48 e --48x55 (estreita: página útil
   de 48 mm da térmica portátil de 58 mm; o 48 × 55 é a 48 × 40 com 15 mm em branco para destacar).
   Encaixe: Brigada.etiqueta(el) ajusta --kf (a faixa de validade, pela largura, até 1,6) e depois --k (o resto, de
   0,3 a 2,6) para o texto ocupar a área útil; casa, lote do QR e rodapé não escalam. Piso de qualquer texto: 1,4 mm de corpo (maiúscula de 1 mm). QR: módulo de 0,375 mm (3 pontos a
   203 dpi), versão 3 + zona quieta = 31 módulos = 11,625 mm.
   Na tela: .b-label-print--tela amplia com transform (--b-label-zoom, padrão 1,5), sem mexer na medida do encaixe.
   data-faixa="contorno": faixa vazada (fio de 0,35 mm) para a impressora que não aguentar a faixa sólida. */
.b-label-print {
  --k: 1; --w: 60mm; --h: 40mm; --sobra: 0mm;
  --pad-x: 2mm; --pad-y: 2mm; --pad-pe: 1mm; --qr: 11.625mm; --gap: 1.5mm;
  --corpo-casa: 2.1mm; --corpo-tipo: 3.2mm; --corpo-produto: 4.47mm; --corpo-dado: 2.79mm; --corpo-faixa: 3.91mm; --corpo-rodape: 2.1mm;
  box-sizing: border-box; width: var(--w); height: var(--h); flex: none;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-pe) + var(--sobra));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #000; font-family: var(--font-body); font-weight: 400; line-height: 1.18; letter-spacing: 0;
  font-size: max(1.4mm, calc(var(--corpo-dado) * var(--k))); font-variant-numeric: tabular-nums; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.b-label-print > * { flex: none; min-width: 0; }
.b-label-print--60x60 { --h: 60mm; }
.b-label-print:is(.b-label-print--48x40, .b-label-print--48x48, .b-label-print--48x55) { --w: 48mm; --pad-x: 1mm; --gap: 1.2mm; --corpo-casa: 1.9mm; --corpo-produto: 4.8mm; }
.b-label-print--48x48 { --h: 48mm; }
.b-label-print--48x55 { --h: 55mm; --sobra: 15mm; }
/* etiqueta alta: o produto parte de um corpo maior e os dados respiram mais (o encaixe continua mandando) */
.b-label-print:is(.b-label-print--60x60, .b-label-print--48x48) { --corpo-produto: 6.4mm; --corpo-tipo: 3.8mm; --gap-dados: 1mm; }
.b-label-print__casa {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap);
  padding-bottom: 0.5mm; margin-bottom: 0.8mm; border-bottom: 0.3mm solid #000;
  font-size: var(--corpo-casa); font-weight: 700; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase;
}
.b-label-print__casa > :last-child { flex: none; white-space: nowrap; }
.b-label-print__tipo { margin-bottom: 0.3mm; font-size: max(1.4mm, calc(var(--corpo-tipo) * var(--k))); font-weight: 700; line-height: 1.1; text-transform: uppercase; } /* "EM DESCONGELAMENTO" */
.b-label-print__product {
  margin: 0 0 0.9mm; font-family: var(--font-display); font-size: max(1.4mm, calc(var(--corpo-produto) * var(--k)));
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; text-transform: none;
}
.b-label-print__mid { margin-bottom: 0.8mm; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); align-items: start; }
.b-label-print__mid:not(:has(.b-label-print__qr)) { grid-template-columns: minmax(0, 1fr); }
.b-label-print__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-dados, 0.35mm) 1.4mm; margin: 0; }
.b-label-print__grid dt { font-weight: 700; }
.b-label-print__grid dd { margin: 0; overflow-wrap: anywhere; }
.b-label-print__legal { margin: -0.4mm 0 0.8mm; font-size: var(--corpo-rodape); line-height: 1.15; } /* CNPJ, quando a loja liga */
.b-label-print__qr { min-width: var(--qr); display: grid; justify-items: center; gap: 0.4mm; font-size: var(--corpo-rodape); font-weight: 700; line-height: 1; white-space: nowrap; }
.b-label-print__qr > :first-child { display: block; width: var(--qr); height: var(--qr); }
.b-label-print__qr svg { display: block; width: 100%; height: 100%; }
.b-label-print__exp {
  margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap);
  padding: 0.6mm 1.2mm; background: #000; color: #fff;
  font-family: var(--font-display); font-size: max(1.4mm, calc(var(--corpo-faixa) * var(--kf, var(--k)))); font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.b-label-print__exp > :first-child { text-transform: uppercase; letter-spacing: 0.04em; }
.b-label-print[data-faixa="contorno"] .b-label-print__exp { background: none; color: #000; box-shadow: inset 0 0 0 0.35mm #000; }
@media screen {
  .b-label-print { box-shadow: 0 0 0 1px #000, var(--shadow-sm); border-radius: 1mm; }
  .b-label-print--tela { transform: scale(var(--b-label-zoom, 1.5)); transform-origin: 0 0; margin: 0 calc(var(--w) * (var(--b-label-zoom, 1.5) - 1)) calc(var(--h) * (var(--b-label-zoom, 1.5) - 1)) 0; }
  .b-label-print[data-cabe="0"] { box-shadow: 0 0 0 2px var(--danger); } /* não coube nem no piso: a emissão avisa antes de imprimir */
}

/* Grafismo: divisa gigante, tom sobre tom, sangrando pela borda */
.b-divisa-bg { position: relative; overflow: hidden; isolation: isolate; }
.b-divisa-bg::before {
  content: ""; position: absolute; z-index: -1; aspect-ratio: 1;
  right: var(--divisa-x, -12%); bottom: var(--divisa-y, -30%); width: var(--divisa-w, 70%); /* ajuste por peça sem reescrever o ::before */
  background: var(--divisa-gigante);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M144.5 68.9c0 2.6-2.8 4.2-5 2.8-9.4-5.9-18-11.3-26.5-16.8-11-7-22-14-32.8-21.2-3.6-2.4-6.2-2.4-9.8 0-18.9 12.7-38 25.1-57 37.6-.6.4-1.1.7-1.7 1-2.2 1.3-4.9-.3-4.9-2.8-.1-6.7-.1-13 .2-19.3.1-1.8 2.2-3.8 3.9-5C30.4 30.6 50.1 16.1 69.7 1.6c3.2-2.4 5.9-3.6 9.8-.8 19.2 14 38.5 27.9 58 41.6 4.8 3.4 7.2 7.5 7.1 13.3-.1 4.2-.1 8.4-.1 13.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M144.5 68.9c0 2.6-2.8 4.2-5 2.8-9.4-5.9-18-11.3-26.5-16.8-11-7-22-14-32.8-21.2-3.6-2.4-6.2-2.4-9.8 0-18.9 12.7-38 25.1-57 37.6-.6.4-1.1.7-1.7 1-2.2 1.3-4.9-.3-4.9-2.8-.1-6.7-.1-13 .2-19.3.1-1.8 2.2-3.8 3.9-5C30.4 30.6 50.1 16.1 69.7 1.6c3.2-2.4 5.9-3.6 9.8-.8 19.2 14 38.5 27.9 58 41.6 4.8 3.4 7.2 7.5 7.1 13.3-.1 4.2-.1 8.4-.1 13.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.b-divisa-bg--brasa, .b-card--brand.b-divisa-bg { --divisa-gigante: var(--divisa-brasa); } /* peça em fundo Brasa */
.b-card.b-divisa-bg:not(.b-card--inverse, .b-card--brand, .b-card--sunken) { --divisa-gigante: var(--divisa-card); } /* no escuro, --surface = carvao-800 e a divisa sumia */

/* Logo fora da sidebar: o container dá a altura (ex.: style="height:40px") e o svg acompanha */
.b-logo-box { display: block; }
.b-logo-box > svg { display: block; height: 100%; width: auto; }
/* Tamanho do SVG do logo (partial _brigada_logo.html e brigada-logo.js: svg.b-logo, sem width/height).
   Regra única: o container dá a ALTURA e a largura sai da proporção. Sem altura no container, o SVG ocupa
   a largura toda: por isso todo logo fica num .b-logo-box (ou .b-sidebar__brand, .b-site-top__logo…) com altura. */
:where(svg.b-logo) { display: block; height: 100%; width: auto; } /* :where: a regra do container (.b-sidebar__brand svg, .b-site-top__logo svg…) sempre vence */

/* ---------- 19. Movimento ---------- */
@keyframes b-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes b-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes b-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes b-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes b-spin { to { transform: rotate(360deg); } }
@keyframes b-shimmer { to { transform: translateX(100%); } }
@keyframes b-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes b-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes b-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes b-draw { to { stroke-dashoffset: 0; } }
@keyframes b-spark { to { transform: translate(-50%, -50%) scale(28); opacity: 0; } }
@keyframes b-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes b-live { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes b-critical { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 22%, transparent); } }
@keyframes b-timer { from { width: 100%; } to { width: 0; } }
@keyframes b-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes b-modal-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes b-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes b-drawer-out { to { transform: translateX(100%); } }
@keyframes b-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes b-sheet-out { to { transform: translateY(100%); } }
@keyframes b-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes b-toast-in { from { opacity: 0; transform: translateX(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes b-toast-out { to { opacity: 0; transform: translateX(24px); height: 0; margin: 0; padding: 0; } }
@keyframes b-medal-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes b-flame { 0%, 100% { transform: scaleY(1) skewX(0); } 35% { transform: scaleY(1.06) skewX(-2deg); } 70% { transform: scaleY(0.97) skewX(1.5deg); } }
@keyframes b-rise { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes b-ignite { 0% { opacity: 0; transform: translateY(30%) scale(0.4); filter: blur(4px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes b-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* entrada de conteúdo: aplique .b-enter; em lista, defina style="--i:0..n" */
.b-enter { animation: b-fade-up var(--dur-slower) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.b-enter-scale { animation: b-scale-in var(--dur-slow) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
/* revelar ao rolar (brigada.js adiciona .is-in) */
.b-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slower) var(--ease-enter), transform var(--dur-slower) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.b-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .b-reveal { opacity: 1; transform: none; } }

/* Marca viva: logo que acende (carregamento, splash, fim de tarefa) */
.b-logo-live .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: b-ignite var(--dur-slower) var(--ease-brasa) both, b-flame 2.6s ease-in-out calc(var(--dur-slower) + 200ms) infinite; }
.b-logo-live .chev-1 { animation: b-rise var(--dur-slow) var(--ease-enter) both 120ms; }
.b-logo-live .chev-2 { animation: b-rise var(--dur-slow) var(--ease-enter) both 0ms; }
.b-logo-live .name { animation: b-fade var(--dur-slower) var(--ease-standard) both 260ms; }
.b-loader { display: grid; place-items: center; gap: var(--sp-3); }
.b-loader svg { width: 56px; height: auto; }
.b-loader .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: b-flame 1.2s ease-in-out infinite; }
.b-loader .chev-1 { animation: b-loader-chev 1.2s var(--ease-standard) infinite; }
.b-loader .chev-2 { animation: b-loader-chev 1.2s var(--ease-standard) infinite 0.15s; }
@keyframes b-loader-chev { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* o símbolo nunca vai solto: no carregamento fica dentro deste quadrado */
.b-loader__mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--r-lg); background: var(--surface-inverse); --logo-chev: var(--text-inverse); }
/* espera de tela inteira (troca de loja, primeira abertura) */
.b-loader-tela { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--bg); animation: b-fade var(--dur-base) var(--ease-standard); }

/* Celebração "brigada!": confete curto de divisas (brigada.js cria as peças) */
.b-confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
.b-confetti i { position: absolute; width: 10px; height: 10px; border: 3px solid var(--_c); border-bottom: 0; border-right: 0; transform-origin: center; animation: b-confetti 1100ms var(--ease-exit) forwards; }

/* Transição de página (MPA: Chrome/Edge 126+; nos outros, troca normal) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: b-vt-out var(--dur-base) var(--ease-exit) both; }
::view-transition-new(root) { animation: b-vt-in var(--dur-slow) var(--ease-enter) both; }
@keyframes b-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes b-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 20. Transição de marca: popup da troca de nome ---------- */
.b-rebrand { width: min(520px, calc(100vw - var(--sp-8))); border-radius: var(--r-xl); border: 1px solid var(--border); }
.b-rebrand .b-modal__foot { background: var(--surface); } /* no escuro o --bg-sunken some no fundo escurecido */
.b-rebrand__stage {
  position: relative; height: 200px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--carvao-900); color: var(--comanda-100);
  --logo-chev: var(--comanda-100); --logo-name: var(--comanda-100); /* palco Carvão nos dois temas: logo sempre claro */
}
.b-rebrand__stage::after { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(closest-side, rgb(236 74 39 / 0.35), transparent); opacity: 0; animation: b-fade 1.2s var(--ease-standard) 1.1s forwards; }
.b-rebrand__old {
  position: absolute; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--inox-500);
  animation: b-rebrand-old 1.1s var(--ease-exit) 0.5s forwards;
}
.b-rebrand__new { position: relative; z-index: 1; width: 230px; opacity: 0; animation: b-fade 10ms linear 1.2s forwards; }
.b-rebrand__new .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: b-ignite 700ms var(--ease-brasa) 1.35s both, b-flame 2.6s ease-in-out 2.2s infinite; }
.b-rebrand__new .chev-1 { animation: b-rise var(--dur-slow) var(--ease-enter) 1.3s both; }
.b-rebrand__new .chev-2 { animation: b-rise var(--dur-slow) var(--ease-enter) 1.2s both; }
.b-rebrand__new .name { animation: b-fade 600ms var(--ease-standard) 1.5s both; }
@keyframes b-rebrand-old { 0% { opacity: 1; filter: blur(0); letter-spacing: -0.02em; } 100% { opacity: 0; filter: blur(8px); letter-spacing: 0.3em; transform: scale(0.94); } }
.b-rebrand .b-modal__body { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.b-rebrand__keep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.b-rebrand__keep li { display: flex; gap: var(--sp-2); align-items: center; }
.b-rebrand__keep .b-icon { color: var(--success); width: 18px; height: 18px; }
.b-rebrand__more { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.b-rebrand__more > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--link); list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.b-rebrand__more > summary::-webkit-details-marker { display: none; }
.b-rebrand__more > summary .b-icon { transition: transform var(--dur-base) var(--ease-brasa); }
.b-rebrand__more[open] > summary .b-icon { transform: rotate(180deg); }
.b-rebrand__concept { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); animation: b-fade-up var(--dur-base) var(--ease-enter); }
.b-rebrand__concept h4 { font-family: var(--font-display); color: var(--text); font-size: var(--fs-md); margin: 0 0 4px; letter-spacing: -0.01em; }
.b-rebrand__concept p { margin: 0; }
.b-rebrand__sense { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.b-rebrand__sense > div { padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-muted-sunken); }
.b-rebrand__sign { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -0.01em; }
.b-rebrand__sign b { color: var(--link); font-weight: inherit; } /* texto em Brasa: tom de link (contraste AA) */
@media (max-width: 480px) { .b-rebrand__keep, .b-rebrand__sense { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .b-rebrand__old { display: none; } .b-rebrand__new { opacity: 1; } }

/* ---------- 21. Rotina: checklists, linha do tempo, lojas ----------
   Contrato completo (HTML, data-*, estados, JS) em _build/componentes-novos.md.
   Cores de estado são da camada funcional: feito = verde, atraso/fora da faixa = rubi, atenção = ocre.
   Brasa só no "Agora" da linha do tempo, no próximo passo e nos pontos ganhos: um destaque por tela. */

@property --up { syntax: "<number>"; inherits: true; initial-value: 0; }        /* progresso do envio da foto, 0–100 */
@property --b-giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; } /* anel "Otimizando" */

/* --- 21.1 Lista "Hoje": grupo e card de checklist --- */
.b-clgroup { display: grid; gap: var(--sp-3); min-width: 0; }
.b-clgroup + .b-clgroup { margin-top: var(--sp-6); }
.b-clgroup__head { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; flex-wrap: wrap; }
.b-clgroup__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.2; }
.b-clgroup__hint { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-clgroup[data-tone="late"] .b-clgroup__title { color: var(--danger); }
.b-clgroup__list { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.b-clgroup__sub { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--text-muted); }
.b-clgroup__sub:first-child { margin-top: 0; }
.b-clgroup__sub small { font-size: var(--fs-xs); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; }
/* "Feitos" recolhido: <details class="b-clgroup"> com <summary class="b-clgroup__head"> */
details.b-clgroup > summary { list-style: none; cursor: pointer; border-radius: var(--r-sm); }
details.b-clgroup > summary::-webkit-details-marker { display: none; }
details.b-clgroup > summary::after {
  content: ""; width: 8px; height: 8px; margin: 0 6px 3px 2px; border: 2px solid var(--text-muted); border-top: 0; border-left: 0;
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-brasa);
}
details.b-clgroup[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
details.b-clgroup > summary:hover .b-clgroup__title { text-decoration: underline; text-underline-offset: 4px; }
details.b-clgroup[open] > .b-clgroup__list { animation: b-fade-up var(--dur-base) var(--ease-enter); }

.b-clcard {
  --_c: var(--text-muted);  /* cor da linha de status */
  --_bar: transparent;      /* faixa da esquerda */
  --_pc: var(--text);       /* cor do progresso */
  container: b-clcard / inline-size;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-height: 76px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), background-color var(--dur-base);
}
.b-clcard::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--_bar); }
@media (hover: hover) { .b-clcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(var(--lift)); } }
.b-clcard:active { transform: scale(0.99); box-shadow: none; }
.b-clcard:focus-visible { outline-offset: 2px; border-radius: var(--r-md); }
.b-clcard__body { display: grid; gap: 3px; min-width: 0; }
.b-clcard__title {
  font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.b-clcard__status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--_c); font-variant-numeric: tabular-nums; line-height: 1.35; }
.b-clcard__status .b-icon { width: 16px; height: 16px; flex: none; }
.b-clcard__foot { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: 5px; font-size: var(--fs-xs); color: var(--text-muted); }
.b-clcard__progress { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-muted); }
.b-clcard__bar { width: 64px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; flex: none; }
.b-clcard__bar > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--_pc); transition: width var(--dur-slower) var(--ease-enter); }
/* chip pequeno e neutro: só o que muda a decisão (horário do irmão, "Coletivo", pontos) */
.b-clcard__chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--border); font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-clcard__chip .b-icon { width: 12px; height: 12px; }
.b-clcard__team { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-clcard__team .b-avatar { --_s: 22px; font-size: 9px; }
/* à direita: seta, ou texto + seta; --primary (Brasa) só no card do próximo passo, um por tela */
.b-clcard__go { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
.b-clcard__go .b-icon { width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-brasa); }
.b-clcard:hover .b-clcard__go .b-icon { transform: translateX(3px); }
/* card estreito (menos de 340 px): o texto da ação some, fica a seta; o botão Brasa mantém o texto */
@container b-clcard (max-width: 340px) { .b-clcard__go:not(.b-clcard__go--primary) { font-size: 0; gap: 0; } }
.b-clcard__go--primary { height: 40px; padding: 0 var(--sp-2) 0 var(--sp-3); border-radius: var(--r-sm); background: var(--action); color: var(--text-on-action); }
.b-clcard__go--primary .b-icon { color: inherit; }
.b-clcard:hover .b-clcard__go--primary { background: var(--action-hover); }
/* estados: data-state = late | soon | now | later | waiting | paused | finish | done | partial | expired
   partial = finalizado com pendência ("Feito às 09:50 com 1 pendência"): vai para Feitos, com o status em ocre */
.b-clcard[data-state="late"] { --_c: var(--danger); --_bar: var(--danger); --_pc: var(--danger); }
.b-clcard[data-state="soon"] { --_c: var(--warning); --_bar: var(--warning); }
.b-clcard[data-state="now"] { --_c: var(--text); }
.b-clcard[data-state="now"] .b-clcard__status { font-weight: var(--fw-semibold); }
.b-clcard[data-state="finish"] { --_c: var(--warning); --_bar: var(--warning); --_pc: var(--warning); }
.b-clcard:is([data-state="waiting"], [data-state="paused"]) { background: transparent; border-style: dashed; border-color: var(--border-strong); }
.b-clcard[data-state="done"] { --_c: var(--success); --_pc: var(--success); background: transparent; }
.b-clcard[data-state="partial"] { --_c: var(--warning); --_pc: var(--warning); background: transparent; }
.b-clcard:is([data-state="done"], [data-state="partial"], [data-state="expired"]) .b-clcard__title { color: var(--text-muted); font-weight: var(--fw-medium); }
.b-clcard[data-state="expired"] { --_c: var(--danger); background: transparent; }

/* --- 21.2 Execução: raiz .b-run, barra do topo, barra segmentada --- */
.b-run { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.b-run__items { display: grid; gap: var(--sp-2); min-width: 0; }
.b-run__pager { display: flex; gap: var(--sp-2); }
.b-run__pager .b-btn { flex: 1; }

.b-runbar {
  --_c: var(--text-muted);
  position: sticky; top: var(--b-sticky-top, 0px); z-index: var(--z-sticky);
  display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.b-runbar__row { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.b-runbar__title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.b-runbar__title > b, .b-runbar__title > h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-runbar__time { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--_c); font-variant-numeric: tabular-nums; }
.b-runbar__time .b-icon { width: 14px; height: 14px; }
.b-runbar[data-tone="late"] { --_c: var(--danger); }
.b-runbar[data-tone="soon"] { --_c: var(--warning); }
.b-runbar[data-tone="done"] { --_c: var(--success); }
.b-runbar__count { flex: none; font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-runbar__count b { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text); letter-spacing: -0.02em; }
.b-runbar__tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.b-runbar__tools > .b-segmented { margin-left: auto; }
/* chip "Fazendo como" + Lista | Um por vez na mesma linha em 360 px: o alternador aperta o respiro */
.b-runbar__tools:has(> .b-person-chip) > .b-segmented :is(button, label) { padding-inline: var(--sp-2); }

.b-seg-progress { display: flex; gap: 3px; height: 6px; }
.b-seg-progress > i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--border-strong); transition: background-color var(--dur-slow) var(--ease-standard), box-shadow var(--dur-fast); }
.b-seg-progress > i[data-s="done"] { background: var(--success); animation: b-seg-done var(--dur-slow) var(--ease-brasa); }
.b-seg-progress > i[data-s="photo"] { background: repeating-linear-gradient(-45deg, var(--warning) 0 3px, color-mix(in srgb, var(--warning) 35%, transparent) 3px 6px); }
.b-seg-progress > i[aria-current="step"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
@keyframes b-seg-done { from { transform: scaleY(2.2); filter: brightness(1.3); } }

/* --- 21.3 Item do checklist --- */
.b-item {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  scroll-margin: calc(var(--b-sticky-top, 0px) + 132px) 0 140px; /* rolar até o item não deixa ele embaixo da barra do topo nem do Finalizar */
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-fast), box-shadow var(--dur-slow);
}
.b-item:has(> .b-item__ref) { grid-template-columns: 48px minmax(0, 1fr) auto; }
.b-item:hover { border-color: var(--border-strong); }
/* check grande de tamanho fixo: área 48, círculo 32. Nunca muda de tamanho. */
.b-item__check {
  display: grid; place-items: center; width: 48px; height: 48px; margin: -4px 0; padding: 0; border: 0; border-radius: var(--r-md);
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b-item__check::before, .b-item__check::after { content: ""; grid-area: 1 / 1; }
.b-item__check::before {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-input); background: var(--surface-2);
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base), box-shadow var(--dur-fast);
}
.b-item__check::after {
  width: 13px; height: 7px; border: 2.5px solid var(--on-status); border-top: 0; border-right: 0;
  transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform var(--dur-base) var(--ease-brasa);
}
.b-item__check:hover::before { border-color: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.b-item__check:focus-visible { outline-offset: -2px; }
.b-item__check[aria-checked="true"]::before { background: var(--success); border-color: var(--success); animation: b-item-pop var(--dur-slow) var(--ease-brasa); }
.b-item__check[aria-checked="true"]::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.b-item__check[aria-disabled="true"] { cursor: default; }
.b-item__check[aria-disabled="true"]::before { border-style: dashed; background: transparent; box-shadow: none; }
@keyframes b-item-pop { 0% { transform: scale(0.82); } 100% { transform: scale(1); } }

.b-item__body { min-width: 0; padding-top: 9px; }
.b-item__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; transition: color var(--dur-base); }
.b-item__desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }
/* tipo explícito antes de interagir */
.b-item__types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.b-item__type {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-xs);
  background: var(--bg-sunken); color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.b-item__type .b-icon { width: 14px; height: 14px; color: var(--text-muted); }
.b-item__ref {
  grid-column: 3; grid-row: 1; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-subtle); cursor: zoom-in;
}
.b-item__ref img { width: 100%; height: 100%; object-fit: cover; }
.b-item__done { display: none; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--success); font-variant-numeric: tabular-nums; }
.b-item__done::before { content: ""; width: 8px; height: 4.5px; margin-bottom: 2px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.b-item__need { margin-top: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.b-item__need .b-icon { width: 14px; height: 14px; }
/* área de trabalho do item (foto, temperatura, relatório): ocupa a largura toda embaixo do título */
.b-item__work { grid-column: 2 / -1; display: grid; gap: var(--sp-3); margin-top: var(--sp-3); min-width: 0; }
.b-item__report { display: grid; gap: var(--sp-2); }
.b-item__report .b-textarea { field-sizing: content; min-height: 88px; max-height: 320px; resize: vertical; }
.b-item__report-foot { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; flex-wrap: wrap; }
.b-item__report-foot > .b-hint { flex: 1 1 180px; } /* a dica encolhe; o Enviar fica na mesma linha */

/* estados: data-state = pending | done | missing (falta foto ou leitura) | locked (ainda não abriu) */
.b-item[data-state="done"] { background: color-mix(in srgb, var(--success-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--success) 22%, var(--border)); }
.b-item[data-state="done"] .b-item__title { color: var(--text-muted); }
.b-item[data-state="done"] .b-item__done { display: flex; }
.b-item[data-state="done"] .b-item__need { display: none; }
.b-item[data-state="missing"] { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); box-shadow: inset 3px 0 0 var(--warning); }
.b-item[data-state="missing"] .b-item__need { color: var(--warning); }
.b-item[data-state="missing"] .b-item__check::before { border-color: var(--warning); }
.b-item[data-state="locked"] { background: transparent; border-style: dashed; border-color: var(--border-strong); }
.b-item[data-state="locked"] :is(.b-item__title, .b-item__desc) { color: var(--text-muted); }
/* destaque de 1 s ao chegar no próximo pendente (brigada.js põe data-flash) */
.b-item[data-flash] { animation: b-item-flash 1s var(--ease-standard); }
@keyframes b-item-flash { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); border-color: var(--brand); } 100% { box-shadow: 0 0 0 3px transparent; } }
[data-shake] { animation: b-shake 360ms var(--ease-standard); } /* brigada.js: item que ainda pede prova, campo que falta */
/* Um por vez: só o item atual aparece, grande */
.b-run__items[data-vista="um"] > .b-item:not([aria-current="step"]) { display: none; }
.b-run__items[data-vista="um"] > .b-item { padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-3); min-height: 280px; align-content: start; animation: b-fade-up var(--dur-base) var(--ease-enter); }
.b-run__items[data-vista="um"] .b-item__title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: -0.015em; }
.b-run__items[data-vista="um"] .b-item__desc { font-size: var(--fs-md); }

/* --- 21.4 Foto: área de tirar e miniatura com anel de envio --- */
.b-photo-take {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 2px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.b-photo-take:hover { border-color: var(--action); }
.b-photo-take:active { background: var(--action-soft); }
.b-photo-take input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.b-photo-take:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-photo-take .b-icon-tile { width: 48px; height: 48px; }
.b-photo-take b { display: block; font-size: var(--fs-md); }
.b-photo-take small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.b-item[data-state="missing"] .b-photo-take { border-color: var(--warning); background: var(--warning-soft); }

.b-photo { --_s: 64px; --_rc: var(--action); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-width: 0; } /* celular estreito: o Remover desce em vez de espremer o texto */
.b-photo__thumb {
  position: relative; flex: none; width: var(--_s); height: var(--_s); padding: 0; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md); cursor: zoom-in; color: var(--text-subtle);
  background: linear-gradient(135deg, var(--comanda-300), var(--carvao-400));
}
.b-photo__thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-base); }
/* anel de envio: gradiente cônico recortado em moldura de 3 px */
.b-photo__thumb::after {
  content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(var(--_rc) calc(var(--up) * 1%), rgb(255 255 255 / 0.55) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--dur-base), --up var(--dur-slow) var(--ease-standard);
}
/* selo de pronto no canto */
.b-photo__thumb::before {
  content: ""; position: absolute; right: 4px; bottom: 4px; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  background: var(--success) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px var(--surface); transform: scale(0); transition: transform var(--dur-base) var(--ease-brasa);
}
[data-theme="dark"] .b-photo__thumb::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.b-photo__info { flex: 1 1 96px; display: grid; min-width: 0; line-height: 1.3; }
.b-photo__status { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.b-photo__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.b-photo__remove { margin-left: auto; }
/* data-state = optimizing | uploading (style="--up:43") | done | error */
.b-photo:is([data-state="optimizing"], [data-state="uploading"]) .b-photo__thumb img { opacity: 0.55; }
.b-photo:is([data-state="optimizing"], [data-state="uploading"], [data-state="error"]) .b-photo__thumb::after { opacity: 1; }
.b-photo[data-state="optimizing"] .b-photo__thumb::after { background: conic-gradient(from var(--b-giro), var(--_rc) 0 22%, rgb(255 255 255 / 0.55) 0); animation: b-giro 1s linear infinite; }
.b-photo[data-state="done"] .b-photo__thumb::before { transform: scale(1); }
.b-photo[data-state="error"] { --_rc: var(--danger-solid); --up: 100; }
.b-photo[data-state="error"] .b-photo__status { color: var(--danger); }
@keyframes b-giro { to { --b-giro: 360deg; } }

/* --- 21.5 Temperatura: número grande, ±, régua com a faixa --- */
.b-temp { --_v: var(--text); --_b: var(--border-input); display: grid; gap: var(--sp-3); min-width: 0; }
.b-temp__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.b-temp__entry {
  display: inline-flex; align-items: stretch; width: fit-content; height: 64px; overflow: hidden;
  border: 2px solid var(--_b); border-radius: var(--r-md); background: var(--surface-2);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.b-temp__entry:focus-within { border-color: color-mix(in srgb, var(--_b) 40%, var(--action)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 20%, transparent); }
.b-temp__sign { width: 56px; flex: none; border: 0; border-right: 1px solid var(--border); background: var(--bg-sunken); color: var(--text); font-size: 22px; font-weight: var(--fw-bold); cursor: pointer; }
.b-temp__sign:hover { background: var(--surface-hover); }
.b-temp__input {
  width: 4.6ch; min-width: 0; padding: 0 var(--sp-2); border: 0; background: none; outline: none; text-align: center;
  font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--_v);
}
.b-temp__input::placeholder { color: var(--text-subtle); font-weight: var(--fw-semibold); }
.b-temp__unit { display: grid; place-items: center; padding: 0 var(--sp-4) 0 var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-muted); }
/* régua (o brigada.js desenha a partir de data-min / data-max / data-warn-max) */
.b-temp__scale { position: relative; padding: 26px 0 20px; max-width: 420px; }
.b-temp__track { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.b-temp__band { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); background: color-mix(in srgb, var(--success) 26%, transparent); box-shadow: inset 2px 0 0 var(--_l, var(--success)), inset -2px 0 0 var(--_r, var(--success)); }
.b-temp__band[data-side="start"] { --_l: transparent; border-radius: 5px 0 0 5px; }
.b-temp__band[data-side="end"] { --_r: transparent; border-radius: 0 5px 5px 0; }
.b-temp__band--warn { background: color-mix(in srgb, var(--warning) 26%, transparent); --_l: transparent; --_r: var(--warning); }
.b-temp__marker {
  position: absolute; top: -5px; bottom: -5px; left: var(--x, 50%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--_v);
  transition: left var(--dur-slow) var(--ease-brasa), background-color var(--dur-fast);
}
.b-temp__marker b {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--_v); color: var(--bg); font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.b-temp:not([data-state]) .b-temp__marker, .b-temp[data-state="empty"] .b-temp__marker { opacity: 0; }
.b-temp__ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.b-temp__ticks span { position: absolute; left: var(--x); transform: translateX(-50%); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-temp__msg { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); display: flex; gap: 6px; align-items: flex-start; }
.b-temp__fix { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; animation: b-fade-up var(--dur-base) var(--ease-enter); }
.b-temp__fix > legend { padding: 0; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.b-temp__fix .b-chip { height: 40px; }
.b-temp__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.b-temp__foot .b-btn--primary { margin-left: auto; }
.b-temp__saved { display: none; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* data-state = empty | ok | warn (congelado acima de -18) | out | free (medição sem faixa: valor neutro, sem régua,
   "Sem faixa: só registre o valor."); data-saved = já registrada (não dá para alterar) */
.b-temp[data-state="ok"] { --_v: var(--success); --_b: var(--success); }
.b-temp[data-state="ok"] .b-temp__msg { color: var(--success); }
.b-temp[data-state="warn"] { --_v: var(--warning); --_b: var(--warning); }
.b-temp[data-state="warn"] .b-temp__msg { color: var(--warning); }
.b-temp[data-state="out"] { --_v: var(--danger); --_b: var(--danger); }
.b-temp[data-state="out"] .b-temp__msg { color: var(--danger); }
.b-temp[data-saved] .b-temp__entry { border-style: dashed; background: var(--bg-sunken); }
.b-temp[data-saved] :is(.b-temp__sign, .b-temp__foot, .b-temp__fix) { display: none; }
.b-temp[data-saved] .b-temp__saved { display: block; }

/* --- 21.6 Barra de finalizar: fixa embaixo (celular e tablet), na coluna lateral no PC --- */
.b-finishbar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); box-shadow: 0 -10px 24px -16px rgb(0 0 0 / 0.28);
}
.b-finishbar__msg { flex: 1 1 140px; min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-finishbar__msg .b-icon { width: 16px; height: 16px; flex: none; }
.b-finishbar > .b-btn { --_h: var(--ctl-lg); font-size: var(--fs-md); flex: 1 1 auto; max-width: 100%; }
.b-finishbar [data-show] { display: none; }
.b-finishbar[data-state="pending"] [data-show~="pending"],
.b-finishbar[data-state="photo"] [data-show~="photo"],
.b-finishbar[data-state="ready"] [data-show~="ready"],
.b-finishbar[data-state="done"] [data-show~="done"] { display: inline-flex; }
.b-finishbar[data-state="photo"] .b-finishbar__msg { color: var(--warning); }
.b-finishbar[data-state="ready"] .b-finishbar__msg { color: var(--success); }
/* ficou pronto: um pulso só */
.b-finishbar[data-state="ready"] .b-btn--primary { animation: b-finish-pulse 1.2s var(--ease-standard) 1; }
@keyframes b-finish-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--action) 55%, transparent); transform: scale(1); } 30% { transform: scale(1.03); } 100% { box-shadow: 0 0 0 14px transparent; transform: scale(1); } }
/* "Próximo pendente": flutua acima da barra quando o pendente está fora da tela */
.b-finishbar__next { position: absolute; left: 50%; bottom: calc(100% + var(--sp-3)); translate: -50% 0; /* translate, não transform: a entrada (b-fade-up) e o aperto do .b-btn mexem no transform sem tirar o botão do centro */ background: var(--surface-2); color: var(--text); border-color: var(--neutral-btn); box-shadow: var(--shadow-lg); animation: b-fade-up var(--dur-base) var(--ease-enter); }
.b-finishbar__next:hover { background: var(--surface-hover); }
.b-finishbar__next[data-dir="up"] .b-icon { transform: rotate(180deg); }
/* PC: na coluna lateral fixa */
.b-finishbar--side { position: static; flex-direction: column; align-items: stretch; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.b-finishbar--side .b-finishbar__msg { flex: none; } /* na vertical, a base de 140 px virava altura */
.b-finishbar--side > .b-btn { width: 100%; }
.b-finishbar--side .b-finishbar__next { position: static; translate: none; box-shadow: none; animation: none; }

/* --- 21.7 Conclusão: "Brigada, Joana!" --- */
.b-done {
  container-type: inline-size; /* o título mede a largura da própria tela (cqi), não a da janela: certo também em moldura e coluna */
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); text-align: center;
  min-height: 100%; padding: var(--sp-12) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.b-done::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: -35%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 20%, transparent), transparent); animation: b-fade var(--dur-hero) var(--ease-standard) both; }
.b-done--overlay { position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; }
.b-done > * { animation: b-fade-up var(--dur-slower) var(--ease-enter) both; }
.b-done > :nth-child(2) { animation-delay: 80ms; } .b-done > :nth-child(3) { animation-delay: 160ms; } .b-done > :nth-child(4) { animation-delay: 240ms; }
.b-done > :nth-child(5) { animation-delay: 320ms; } .b-done > :nth-child(6) { animation-delay: 400ms; } .b-done > :nth-child(n+7) { animation-delay: 480ms; }
.b-done__mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--success); color: var(--on-status); box-shadow: 0 0 0 10px color-mix(in srgb, var(--success) 16%, transparent); animation: b-done-mark var(--dur-slower) var(--ease-brasa) both; }
.b-done__mark svg { width: 44px; height: 44px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.b-done__mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: b-draw var(--dur-slower) var(--ease-enter) 260ms forwards; }
.b-done--other .b-done__mark { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: 0 0 0 10px var(--bg-sunken); }
@keyframes b-done-mark { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.b-done__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 3cqi, 3.25rem); line-height: 1.02; font-weight: var(--fw-bold); letter-spacing: -0.035em; text-wrap: balance; }
.b-done__lead { margin: calc(var(--sp-3) * -1) 0 0; max-width: 34ch; font-size: var(--fs-lg); color: var(--text-muted); text-wrap: pretty; }
.b-done__points { display: grid; justify-items: center; gap: 2px; min-width: 200px; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.b-done__pts { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.04em; color: var(--brand); font-variant-numeric: tabular-nums; }
.b-done__base { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.b-done__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.b-done__facts li { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.b-done__facts .b-icon { width: 16px; height: 16px; }
.b-done__facts .b-done__streak { color: var(--text); font-weight: var(--fw-semibold); }
.b-done__facts .b-done__streak .b-icon { color: var(--brand); }
.b-done__next { display: flex; align-items: center; gap: var(--sp-3); width: min(100%, 380px); padding: var(--sp-3) var(--sp-4); text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.b-done__next > span { display: grid; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; }
.b-done__next b { font-size: var(--fs-md); }
.b-done__actions { display: grid; gap: var(--sp-2); width: min(100%, 380px); }
.b-done__actions .b-btn { --_h: var(--ctl-lg); font-size: var(--fs-md); }

/* --- 21.8 Quem está fazendo: chip e grade de avatares --- */
.b-person-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; max-width: 100%; padding: 0 var(--sp-3) 0 6px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.b-person-chip:hover { border-color: var(--text-muted); }
.b-person-chip .b-avatar { --_s: 32px; }
.b-person-chip__txt { display: grid; min-width: 0; text-align: left; line-height: 1.15; }
.b-person-chip__txt small { color: var(--text-muted); font-size: 11px; font-weight: var(--fw-medium); }
.b-person-chip__txt b { overflow: hidden; text-overflow: ellipsis; }
.b-person-chip > .b-icon { width: 16px; height: 16px; color: var(--text-muted); }
.b-person-chip--lg { height: 56px; font-size: var(--fs-md); padding-left: 8px; }
.b-person-chip--lg .b-avatar { --_s: 40px; }

.b-person-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.b-person {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 116px; padding: var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-md); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.b-person input { position: absolute; opacity: 0; pointer-events: none; }
.b-person:hover { background: var(--surface-hover); }
.b-person .b-avatar { --_s: 56px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-brasa); }
.b-person__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; }
.b-person__role { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.2; }
.b-person:has(input:checked) { background: var(--action-soft); border-color: color-mix(in srgb, var(--action) 35%, transparent); }
.b-person:has(input:checked) .b-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--action); transform: scale(1.04); }
.b-person:has(input:checked)::after {
  content: ""; position: absolute; top: 8px; right: calc(50% - 38px); width: 20px; height: 20px; border-radius: 50%;
  background: var(--action) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px var(--bg); animation: b-pop var(--dur-slow) var(--ease-brasa);
}
.b-person:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-person:has(input:disabled) { cursor: not-allowed; opacity: 0.5; }
.b-person:has(input:disabled):hover { background: none; }
.b-person--all .b-avatar { background: var(--bg-sunken); color: var(--text); box-shadow: inset 0 0 0 2px var(--border-strong); }

/* --- 21.9 Modo cozinha: tablet fixo compartilhado --- */
/* Alvo de 56 em TUDO que se toca no modo cozinha (botão de qualquer tamanho, ícone, alternador, chip, aba, campo,
   menu, fechar). Os <dialog> do modo cozinha ficam DENTRO do .b-kitchen: na camada de topo eles continuam herdando daqui. */
.b-kitchen {
  --ctl-sm: var(--touch-kitchen); --ctl-md: var(--touch-kitchen); --ctl-lg: var(--touch-kitchen);
  display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); font-size: var(--fs-lg);
}
.b-kitchen .b-btn:not(.b-btn--link) { --_h: var(--touch-kitchen); }
.b-kitchen .b-btn--icon { padding-inline: 0; } /* o padding de 20 px espremia o ícone do botão quadrado */
.b-kitchen :is(.b-chip, .b-tab, .b-person-chip, .b-segmented button, .b-segmented label) { height: var(--touch-kitchen); }
.b-kitchen :is(.b-menu__item, .b-input, .b-select) { min-height: var(--touch-kitchen); }
.b-kitchen .b-close { width: var(--touch-kitchen); height: var(--touch-kitchen); margin: -10px -12px 0 0; }
.b-kitchen__head {
  position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6); background: var(--surface); border-bottom: 1px solid var(--border);
}
.b-kitchen__clock { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.b-kitchen__where { display: grid; min-width: 0; line-height: 1.25; }
.b-kitchen__where b { font-size: var(--fs-lg); }
.b-kitchen__where small { font-size: var(--fs-sm); color: var(--text-muted); }
.b-kitchen__head > .b-person-chip { margin-left: auto; }
.b-kitchen__body { flex: 1; display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-6); }
.b-kitchen .b-btn { font-size: var(--fs-md); padding-inline: var(--sp-5); }
.b-kitchen .b-item { grid-template-columns: 56px minmax(0, 1fr) auto; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-3); }
.b-kitchen .b-item__check { width: 56px; height: 56px; }
.b-kitchen .b-item__check::before { width: 40px; height: 40px; }
.b-kitchen .b-item__check::after { width: 16px; height: 9px; border-width: 3px; }
.b-kitchen .b-item__body { padding-top: 12px; }
.b-kitchen .b-item__title { font-size: var(--fs-lg); }
.b-kitchen .b-clcard { min-height: 88px; }
.b-kitchen .b-clcard__title { font-size: var(--fs-lg); }
.b-kitchen .b-person-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.b-kitchen .b-person { min-height: 136px; }
.b-kitchen .b-person .b-avatar { --_s: 72px; }
.b-kitchen .b-person__name { font-size: var(--fs-md); }
.b-kitchen .b-person:has(input:checked)::after { right: calc(50% - 46px); }
.b-kitchen .b-segmented :is(button, label) { padding: 0 var(--sp-4); font-size: var(--fs-md); }

/* --- 21.10 Linha do tempo do dia (painel do gestor), no traço "Sincronizado" --- */
.b-daytl {
  --_dot: 18px; --_rail: 28px; --daytl-bg: var(--bg);
  container: b-daytl / inline-size; position: relative; list-style: none; margin: 0; padding: 0;
}
.b-card .b-daytl { --daytl-bg: var(--surface); }
.b-daytl::before { content: ""; position: absolute; left: calc(var(--_rail) / 2 - 1px); top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--border); transition: background-color var(--dur-slower) var(--ease-standard); }
.b-daytl[data-all-done]::before { background: var(--success); }
.b-daytl__item { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--_rail) minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: start; padding: var(--sp-2) var(--sp-2) var(--sp-3) 0; }
/* a linha inteira é clicável (o .b-daytl__hit se estende por cima); fundo de hover fora da coluna do ponto */
.b-daytl__item::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 calc(var(--_rail) + 4px); border-radius: var(--r-md); transition: background-color var(--dur-fast); }
.b-daytl__item:hover::before { background: color-mix(in srgb, var(--surface-hover) 65%, transparent); }
.b-daytl__dot {
  position: relative; z-index: 1; grid-column: 1; justify-self: center; display: grid; place-items: center;
  width: var(--_dot); height: var(--_dot); margin-top: -1px; border-radius: 50%; pointer-events: none;
  background: var(--daytl-bg); border: 2px solid var(--border-strong);
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.b-daytl__dot::after { content: ""; }
.b-daytl__main { display: grid; min-width: 0; line-height: 1.35; }
.b-daytl__time { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-daytl__hit {
  justify-self: start; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35;
}
.b-daytl__hit::after { content: ""; position: absolute; inset: 0; }
.b-daytl__hit:focus-visible { outline: none; }
.b-daytl__hit:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-md); }
.b-daytl__meta { font-size: var(--fs-xs); color: var(--text-muted); }
/* ponto que não abre nada (mini linha do tempo, resumo): título em texto, sem o clique que cobre a linha */
.b-daytl__text { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.35; color: var(--text); }
.b-daytl__item:has(> .b-daytl__main > .b-daytl__text):not(:has(.b-daytl__hit)):hover::before { background: none; }
.b-daytl__flag { font-weight: var(--fw-semibold); }
.b-daytl__end { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; padding-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-daytl__end .b-icon { width: 15px; height: 15px; }
.b-daytl__at { font-weight: var(--fw-semibold); color: var(--text); }
.b-daytl__val { font-weight: var(--fw-semibold); color: var(--text); }
.b-daytl__end .b-btn { position: relative; z-index: 1; } /* "Cobrar" fica por cima da linha clicável */
/* estados do ponto: data-state = done | late-done | late | out | waiting | paused */
.b-daytl__item:is([data-state="done"], [data-state="late-done"]) .b-daytl__dot { background: var(--_k); border-color: var(--_k); }
.b-daytl__item:is([data-state="done"], [data-state="late-done"]) .b-daytl__dot::after { width: 8px; height: 4.5px; margin-top: -2px; border: 2px solid var(--on-status); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.b-daytl__item[data-state="done"] { --_k: var(--success); }
.b-daytl__item[data-state="late-done"] { --_k: var(--warning); }
.b-daytl__item[data-state="late-done"] :is(.b-daytl__at, .b-daytl__flag) { color: var(--warning); }
.b-daytl__item[data-state="late"] .b-daytl__dot { background: var(--danger); border-color: var(--danger); animation: b-daytl-late 1.6s var(--ease-standard) infinite; }
.b-daytl__item[data-state="late"] .b-daytl__flag { color: var(--danger); }
.b-daytl__item[data-state="out"] .b-daytl__dot { background: var(--danger); border-color: var(--danger); }
.b-daytl__item[data-state="out"] .b-daytl__dot::after { content: "!"; color: var(--on-status); font-size: 11px; font-weight: 800; line-height: 1; }
.b-daytl__item[data-state="out"] :is(.b-daytl__val, .b-daytl__flag) { color: var(--danger); }
.b-daytl__item[data-state="paused"] .b-daytl__dot { border-style: dashed; background: var(--daytl-bg); }
.b-daytl__item[data-state="paused"] :is(.b-daytl__hit, .b-daytl__time) { color: var(--text-muted); font-weight: var(--fw-medium); }
@keyframes b-daytl-late { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
/* "Agora": Brasa com halo, na hora atual; gruda no topo quando passa (brigada.js põe no lugar) */
.b-daytl__now {
  position: sticky; top: var(--b-sticky-top, 0px); z-index: 2; display: grid; grid-template-columns: var(--_rail) minmax(0, 1fr); column-gap: var(--sp-3); align-items: center;
  margin: 2px 0 var(--sp-2); padding: 4px 0;
  background: linear-gradient(90deg, transparent var(--_rail), var(--daytl-bg) var(--_rail)); /* a linha segue visível atrás do ponto */
}
.b-daytl__now .b-daytl__dot { width: 14px; height: 14px; margin: 0; border: 0; background: var(--brand); box-shadow: var(--glow-brasa); }
.b-daytl__now::after { content: ""; position: absolute; left: calc(var(--_rail) + var(--sp-3)); right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: linear-gradient(90deg, var(--brand), transparent); }
.b-daytl__now-label { position: relative; z-index: 1; justify-self: start; padding-right: var(--sp-2); background: var(--daytl-bg); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--link); font-variant-numeric: tabular-nums; }
/* tudo feito: a linha fica verde e o fim ganha o agradecimento */
.b-daytl__end-note { position: relative; display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--success-soft); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.b-daytl__end-note .b-icon { color: var(--success); }
/* mini: dentro do bloco da pessoa */
.b-daytl--mini { --_dot: 12px; --_rail: 18px; }
.b-daytl--mini .b-daytl__item { padding: 4px 0 var(--sp-2); column-gap: var(--sp-2); }
.b-daytl--mini .b-daytl__dot { margin-top: 2px; border-width: 1.5px; }
.b-daytl--mini .b-daytl__item:is([data-state="done"], [data-state="late-done"]) .b-daytl__dot::after { width: 6px; height: 3px; margin-top: -1px; border-width: 1.5px; }
.b-daytl--mini .b-daytl__item[data-state="out"] .b-daytl__dot::after { font-size: 8px; }
.b-daytl--mini .b-daytl__main { grid-template-columns: auto 1fr; column-gap: var(--sp-2); align-items: baseline; }
.b-daytl--mini .b-daytl__meta { grid-column: 2; }
.b-daytl--mini .b-daytl__item { grid-template-columns: var(--_rail) minmax(0, 1fr) auto; }
.b-daytl--mini .b-daytl__end { grid-column: auto; margin-top: 0; padding-top: 0; }
@container b-daytl (max-width: 460px) {
  .b-daytl__item { grid-template-columns: var(--_rail) minmax(0, 1fr); }
  .b-daytl__end { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; white-space: normal; }
}

/* --- 21.11 Raias por loja: eixo de horas e "Agora" vertical --- */
.b-lanes { --start: 6; --end: 24; --_head: 176px; --_span: calc(var(--end) - var(--start)); overflow-x: auto; min-width: 0; padding-right: var(--sp-6); scrollbar-width: thin; }
.b-lanes__grid { position: relative; min-width: 720px; }
@media (max-width: 767px) { .b-lanes { --_head: 116px; } } /* no celular a raia rola de lado; a tela certa ali é a lista agrupada por loja */
.b-lanes__axis { position: relative; height: 28px; margin-left: var(--_head); border-bottom: 1px solid var(--chart-grid); }
.b-lanes__axis span { position: absolute; bottom: 6px; left: calc((var(--t) - var(--start)) / var(--_span) * 100%); transform: translateX(-50%); font-size: 11px; color: var(--chart-axis); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-lanes__lane { display: grid; grid-template-columns: var(--_head) minmax(0, 1fr); align-items: stretch; min-height: 60px; border-bottom: 1px solid var(--border); }
.b-lanes__head { display: grid; align-content: center; gap: 1px; min-width: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; color: var(--text); text-decoration: none; line-height: 1.3; }
.b-lanes__head b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-lanes__head small { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-lanes__head small em { font-style: normal; font-weight: var(--fw-semibold); color: var(--danger); }
a.b-lanes__head:hover b { text-decoration: underline; text-underline-offset: 3px; }
.b-lanes__track {
  position: relative;
  background-image: linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: calc(100% / var(--_span)) 100%;
}
.b-lanes__pt {
  --_k: var(--border-strong);
  position: absolute; top: 50%; left: calc((var(--t) - var(--start)) / var(--_span) * 100%);
  width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center;
}
.b-lanes__pt::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--daytl-bg, var(--bg)); border: 2px solid var(--_k); box-shadow: 0 0 0 2px var(--bg); transition: transform var(--dur-base) var(--ease-brasa); }
.b-lanes__pt:hover::before { transform: scale(1.3); }
.b-lanes__pt:is([data-state="done"], [data-state="late-done"], [data-state="late"], [data-state="out"])::before { background: var(--_k); }
.b-lanes__pt[data-state="done"] { --_k: var(--success); }
.b-lanes__pt[data-state="late-done"] { --_k: var(--warning); }
.b-lanes__pt:is([data-state="late"], [data-state="out"]) { --_k: var(--danger); }
.b-lanes__pt[data-state="late"]::before { animation: b-daytl-late 1.6s var(--ease-standard) infinite; }
.b-lanes__pt[data-state="paused"]::before { border-style: dashed; }
.b-lanes__now { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; pointer-events: none; background: var(--brand); left: calc(var(--_head) + (100% - var(--_head)) * (var(--t) - var(--start)) / var(--_span)); transition: left var(--dur-slower) var(--ease-standard); }
.b-lanes__now::before { content: ""; position: absolute; top: 22px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--brand); box-shadow: var(--glow-brasa); }
.b-lanes__now span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: var(--r-xs); background: var(--action); color: var(--text-on-action); font-size: 11px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-lanes__now[hidden] { display: none; }

/* --- 21.12 Lojas: seletor e selo de contexto --- */
.b-store-switch { position: relative; display: block; }
.b-store-switch > summary { list-style: none; }
.b-store-switch > summary::-webkit-details-marker { display: none; }
.b-store-switch__btn {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: none; color: var(--text); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.b-store-switch__btn:hover, .b-store-switch[open] > .b-store-switch__btn { background: var(--surface-hover); border-color: var(--border-strong); }
.b-store-switch__mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text); }
.b-store-switch__mark[data-alerta]::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger-solid); box-shadow: 0 0 0 2px var(--surface); }
.b-store-switch__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.b-store-switch__txt b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-store-switch__txt small { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-store-switch__btn > .b-icon:last-child { width: 16px; height: 16px; color: var(--text-muted); }
details.b-store-switch > .b-menu { left: 0; right: auto; min-width: max(100%, 264px); transform-origin: top left; }
.b-sidebar details.b-store-switch > .b-menu { min-width: 100%; } /* a sidebar rola (overflow auto): menu mais largo que ela sai cortado */
.b-store-switch__search { margin: var(--sp-1) var(--sp-1) var(--sp-2); width: calc(100% - var(--sp-2)); }
.b-store-switch .b-menu__item[aria-current="true"] { font-weight: var(--fw-semibold); }
.b-store-switch .b-menu__item[aria-current="true"]::after { content: ""; flex: none; width: 10px; height: 6px; margin-left: var(--sp-2); border: 2px solid currentColor; border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.b-store-switch__signal { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-store-switch__signal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-store-switch__signal--late { color: var(--danger); }
.b-store-switch__signal--ok { color: var(--success); }
/* nome inteiro numa linha; sem espaço, o sinal desce para a linha de baixo */
.b-store-switch .b-menu__item:has(.b-store-switch__signal) { flex-wrap: wrap; }
.b-store-switch__nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no trilho do tablet: só o quadrado; o menu abre para a direita */
.b-store-switch--rail { width: 100%; display: flex; justify-content: center; margin: 0 0 var(--sp-1); }
.b-store-switch--rail > .b-store-switch__btn { width: 56px; min-height: 52px; padding: 0; justify-content: center; border-color: transparent; }
.b-store-switch--rail :is(.b-store-switch__txt, .b-store-switch__btn > .b-icon:last-child) { display: none; }
.b-store-switch--rail .b-store-switch__mark { width: 44px; height: 44px; }
details.b-store-switch--rail > .b-menu { top: 0; left: calc(100% + var(--sp-2)); width: 288px; min-width: 0; }
/* no cabeçalho do celular: botão compacto que abre a bottom sheet (data-open) */
.b-store-switch--header { display: inline-flex; min-width: 0; }
.b-store-switch--header > .b-store-switch__btn { width: auto; min-height: 44px; padding: 2px var(--sp-2) 2px 2px; gap: var(--sp-2); border-color: transparent; }
.b-store-switch--header .b-store-switch__mark { width: 32px; height: 32px; }
.b-store-switch--header .b-store-switch__txt small { display: none; }

.b-scope {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--info) 32%, transparent); background: var(--info-soft);
  color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.b-scope .b-icon { width: 14px; height: 14px; color: var(--info); flex: none; }
.b-scope b { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }

/* --- 21.13 Ações em lista e card de gestão: linha clicável + 1 ação com texto + menu "⋯" ---
   Nunca fileira de botões só de ícone. O link principal (.b-stretch) cobre a linha ou o card;
   as ações ficam por cima. No celular, o menu "⋯" sobe como bottom sheet (só CSS). */
.b-stretch { color: inherit; text-decoration: none; }
.b-stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.b-stretch:focus-visible { outline: none; }
.b-stretch:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
tr:has(> td .b-stretch) { position: relative; cursor: pointer; }
.b-table tbody tr:has(> td .b-stretch):hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
.b-card:has(.b-stretch) { cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-standard); }
@media (hover: hover) { .b-card:has(.b-stretch):hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.b-row-actions, .b-card-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--sp-1); }
.b-row-actions { justify-content: flex-end; white-space: nowrap; }
.b-card-actions { justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
:is(.b-row-actions, .b-card-actions):has(details[open]) { z-index: var(--z-modal); }
:is(.b-row-actions, .b-card-actions) details.b-dropdown > summary { cursor: pointer; }
@media (max-width: 767px) {
  :is(.b-row-actions, .b-card-actions) details.b-dropdown[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); cursor: default; animation: b-fade var(--dur-slow) var(--ease-standard);
  }
  :is(.b-row-actions, .b-card-actions) details.b-dropdown > .b-menu {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); min-width: 0; max-height: 80dvh; overflow-y: auto;
    padding: var(--sp-3) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: b-sheet-in var(--dur-slow) var(--ease-enter);
  }
  :is(.b-row-actions, .b-card-actions) details.b-dropdown > .b-menu::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--sp-2); border-radius: 2px; background: var(--border-strong); }
  :is(.b-row-actions, .b-card-actions) .b-menu__item { min-height: 52px; font-size: var(--fs-md); }
}
/* a mesma sheet quando a tela de celular mora num .b-shell estreito (moldura, painel lateral) */
@container b-shell (max-width: 767px) {
  :is(.b-row-actions, .b-card-actions) details.b-dropdown[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); cursor: default; animation: b-fade var(--dur-slow) var(--ease-standard);
  }
  :is(.b-row-actions, .b-card-actions) details.b-dropdown > .b-menu {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-modal); min-width: 0; max-height: 80dvh; overflow-y: auto;
    padding: var(--sp-3) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: b-sheet-in var(--dur-slow) var(--ease-enter);
  }
  :is(.b-row-actions, .b-card-actions) details.b-dropdown > .b-menu::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--sp-2); border-radius: 2px; background: var(--border-strong); }
  :is(.b-row-actions, .b-card-actions) .b-menu__item { min-height: 52px; font-size: var(--fs-md); }
}
/* celular: nenhum alvo de ação de gestão abaixo de 44 (o .b-btn--sm tem 32) */
@media (max-width: 767px) { :is(.b-row-actions, .b-card-actions, .b-bulkbar) .b-btn--sm { --_h: var(--touch-min); } }
@container b-shell (max-width: 767px) { :is(.b-row-actions, .b-card-actions, .b-bulkbar) .b-btn--sm { --_h: var(--touch-min); } }

/* Seleção múltipla: a caixa fica por cima do .b-stretch (senão o clique dela abre a linha).
   <td class="b-check-cell"><label class="b-check"><input type="checkbox" aria-label="Selecionar Abertura da cozinha"></label></td>
   No card: <span class="b-check-cell">…</span> no canto, antes do link. Linha marcada: <tr aria-selected="true">. */
.b-check-cell { position: relative; z-index: 1; }
.b-table :is(th, td).b-check-cell { width: 48px; padding-right: 0; }
.b-table tr[aria-selected="true"] td.b-check-cell { box-shadow: inset 3px 0 0 var(--action); }
/* Barra de ações em lote: aparece (hidden some) quando há 1 ou mais selecionados, logo acima da lista.
   <div class="b-bulkbar" role="region" aria-label="Ações em lote" hidden><b>2 selecionados</b>
     <button class="b-btn b-btn--secondary b-btn--sm">Pausar</button> <button class="b-btn b-btn--ghost b-btn--sm">Limpar</button></div> */
.b-bulkbar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 56px; margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-inverse); color: var(--text-inverse); font-size: var(--fs-sm);
  animation: b-fade-up var(--dur-base) var(--ease-enter);
}
.b-bulkbar > b { margin-right: auto; font-variant-numeric: tabular-nums; }
.b-bulkbar .b-btn--secondary { --neutral-btn: var(--text-inverse); }
.b-bulkbar .b-btn--ghost { color: var(--text-inverse); }
.b-bulkbar .b-btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--text-inverse) 12%, transparent); }
.b-bulkbar :focus-visible { outline-color: var(--text-inverse); }

/* Situação em texto fora do card de checklist (tabela de gestão, central, lojas): cor + ícone + palavra, sem pílula.
   <span class="b-sit" data-s="late"><i data-lucide="alert-circle" class="b-icon"></i>1 atrasado</span>
   data-s = late (rubi) | warn (ocre) | done (verde) | wait (neutro, peso normal); sem data-s = texto. */
.b-sit { --_c: var(--text); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--_c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-sit .b-icon { width: 16px; height: 16px; flex: none; }
.b-sit[data-s="late"] { --_c: var(--danger); }
.b-sit[data-s="warn"] { --_c: var(--warning); }
.b-sit[data-s="done"] { --_c: var(--success); }
.b-sit[data-s="wait"] { --_c: var(--text-muted); font-weight: var(--fw-medium); }

/* Vazio compacto de bloco (painel, card, coluna): uma linha, sem arte grande; diz o que falta e, se houver, a ação.
   <div class="b-empty b-empty--compact"><i data-lucide="cake" class="b-icon"></i><span><b>Nenhum aniversário em outubro</b>
     Cadastre as datas para lembrar a equipe. <a class="b-btn b-btn--link" href="…">Cadastrar datas</a></span></div>
   data-tone="ok": a falta é boa notícia ("Nada atrasado agora"): ícone verde. */
.b-empty--compact {
  --text-muted: var(--text-muted-sunken);
  display: flex; place-items: normal; align-items: flex-start; justify-content: flex-start; gap: var(--sp-3); text-align: left;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-sunken);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted);
}
.b-empty--compact > .b-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-subtle); }
.b-empty--compact[data-tone="ok"] > .b-icon { color: var(--success); }
.b-empty--compact > span { min-width: 0; }
.b-empty--compact b { display: block; color: var(--text); font-weight: var(--fw-semibold); }
.b-empty--compact .b-btn { margin-top: var(--sp-2); }
.b-empty--compact .b-btn--link { margin-top: 0; }

/* --- 21.14 Cabeçalho do dia da lista Hoje: anel + contagem + atrasados ---
   <div class="b-dayhead"><div class="b-ring" data-v="23" role="img" aria-label="3 de 13 feitos hoje">…<b>3/13</b></div>
     <div class="b-dayhead__txt"><b>3 de 13 feitos</b>
       <span class="b-dayhead__late"><span class="b-count b-count--danger">1</span>atrasado <small>· 2 para agora</small></span></div></div>
   Sem atrasados: troque o __late por <span class="b-dayhead__ok">Nada atrasado</span>. */
.b-dayhead { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.b-dayhead > .b-ring { --_s: 60px; --_c: var(--success); flex: none; }
.b-dayhead__txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.b-dayhead__txt > b { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; }
.b-dayhead__late, .b-dayhead__ok { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.b-dayhead__late { color: var(--danger); }
.b-dayhead__ok { color: var(--success); }
.b-dayhead small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
/* abas com uma ação à direita ("Ordenar", "Filtros"): a linha de base é uma só */
.b-tabrow { display: flex; align-items: flex-end; gap: var(--sp-2); border-bottom: 1px solid var(--border); min-width: 0; }
.b-tabrow > .b-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.b-tabrow > :not(.b-tabs) { flex: none; margin-bottom: 4px; }

/* --- 21.15 Execução como tela: respiro, Finalizar no pé, 2 colunas no PC ---
   .b-run--tela é a raiz da tela de execução (dentro do .b-shell__main ou do .b-kitchen):
     respiro lateral de 16 (24 no tablet e no PC), a .b-finishbar desce para o pé mesmo com 2 itens,
     e a lista ganha 64 embaixo para o "Próximo pendente" flutuante não cobrir o último item.
   PC (≥ 1200, medido pelo .b-shell): .b-run__cols põe os itens (até 720) e a .b-run__side (300, gruda abaixo da
   barra) lado a lado; a coluna leva o resumo, o "Fazendo como", o alternador e a .b-finishbar--side.
   Abaixo de 1200 a coluna some: o mesmo resumo vai para a sheet e o Finalizar para a .b-finishbar do pé.
   Renderize as duas barras; o CSS mostra a certa.
   <div class="b-run b-run--tela">
     <header class="b-runbar">…</header>
     <div class="b-runbar__tools">…</div>
     <div class="b-run__cols">
       <div class="b-run__items" data-vista="lista">…</div>
       <aside class="b-run__side" aria-label="Resumo do checklist">… <div class="b-finishbar b-finishbar--side">…</div></aside>
     </div>
     <div class="b-finishbar" data-state="pending">…</div>
   </div> */
.b-run--tela { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 100%; }
:is(.b-shell__main, .b-kitchen) > .b-run--tela { flex: 1 0 auto; min-height: 0; }
.b-run--tela > :not(.b-runbar, .b-finishbar, .b-run__cols), .b-run__cols { padding-inline: var(--sp-4); }
.b-run--tela > .b-finishbar { margin-top: auto; }
.b-run--tela > .b-run__items, .b-run--tela > .b-run__cols > .b-run__items { padding-bottom: 64px; }
.b-kitchen > .b-run--tela > :not(.b-runbar, .b-finishbar, .b-run__cols), .b-kitchen > .b-run--tela > .b-run__cols { padding-inline: var(--sp-6); }
.b-run__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); min-width: 0; }
.b-run__side { display: none; }
@container b-shell (min-width: 768px) {
  .b-run--tela > :not(.b-runbar, .b-finishbar, .b-run__cols), .b-run__cols { padding-inline: var(--sp-6); }
}
@container b-shell (min-width: 1200px) {
  .b-run__cols { grid-template-columns: minmax(0, 720px) 300px; justify-content: center; align-items: start; padding-bottom: var(--sp-8); }
  .b-run__cols > .b-run__items { padding-bottom: 0; }
  .b-run__side { position: sticky; top: calc(var(--b-sticky-top, 0px) + var(--b-runbar-h, 108px)); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  .b-run__side > .b-card { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
  .b-run--tela:has(.b-run__side) > .b-finishbar:not(.b-finishbar--side) { display: none; }
}

/* ---------- 22. Site público: landing, cadastro, termos, erro ----------
   Peças das páginas antes do login (usebrigada.com.br). Documentação e exemplos: design-system/site.html.
   Vieram da landing aprovada (_build/landing/landing-brigada.html), que passou a usar estas classes; o que é só
   da landing (palco do celular, cenas, telas de cada pilar) continua lá com o prefixo lp-.
   Tema: a página pública segue o aparelho. Topo, hero, fechamento e rodapé são sempre Carvão (data-theme="dark").
   Celular compacto: o bloco @media (max-width: 640px) no fim desta seção deixa lado a lado o que é curto
   (pilares 2 × 2, conquistas em 3, "é / não é" em 2, planos em linhas) e esconde o que repete.
   Regras de conteúdo (decisões do Júlio): a landing não cita etiquetas de validade; cada loja é uma assinatura
   (nunca "várias lojas" num plano); o Pro é "equipe sem limite de pessoas"; sem dados legais até existirem. */
.b-site-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.b-site-section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.b-site-section--sunken { background: var(--bg-sunken); }
.b-site-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--link); margin-bottom: 14px; }
.b-site-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 16px; text-wrap: balance; }
.b-site-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--text-muted); margin: 0; text-wrap: pretty; max-width: 62ch; }
.b-site-center { text-align: center; }
.b-site-center .b-site-lead { margin-inline: auto; }
.b-site-top { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--carvao-900) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--comanda-100) 8%, transparent); color: var(--comanda-100); }
.b-site-top .b-site-wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.b-site-top__logo { display: block; height: 26px; color: var(--comanda-100); --logo-chev: var(--comanda-100); --logo-name: var(--comanda-100); }
.b-site-top__logo svg { height: 100%; width: auto; display: block; }
.b-site-top nav { display: flex; gap: 4px; margin-left: 24px; }
.b-site-top nav a { color: var(--inox-500); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; padding: 8px 10px; border-radius: var(--r-sm); transition: color var(--dur-fast), background-color var(--dur-fast); }
.b-site-top nav a:hover { color: var(--comanda-100); background: color-mix(in srgb, var(--comanda-100) 6%, transparent); }
.b-site-top__login { color: var(--comanda-100); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; padding: 8px 10px; }
.b-site-top__login:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .b-site-top nav { display: none; }
}
@media (max-width: 480px) {
  .b-site-top__cta-text { display: none; }
  .b-site-top .b-btn { padding: 0 12px; }
}
.b-site-hero { background: var(--carvao-900); color: var(--comanda-100); padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); overflow: hidden; position: relative; isolation: isolate; --logo-chev: var(--comanda-100); --logo-name: var(--comanda-100); }
.b-site-hero::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--brasa-500) 22%, transparent), transparent 70%); pointer-events: none; }
.b-site-hero .b-site-wrap { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) {
  .b-site-hero .b-site-wrap { grid-template-columns: minmax(0,1fr); }
}
.b-site-hero__over { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--inox-500); margin-bottom: 16px; display: block; }
.b-site-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem); line-height: .98; letter-spacing: -0.045em; font-weight: 700; margin: 0 0 22px; text-wrap: balance; }
.b-site-hero h1 em { font-style: normal; color: var(--brasa-500); }
.b-site-hero__sub { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--comanda-300); max-width: 34em; margin: 0 0 32px; }
.b-site-hero__sub b { color: var(--comanda-100); font-weight: 600; }
.b-site-hero .b-btn--secondary { --neutral-btn: var(--comanda-100); }
.b-site-reducer { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--inox-500); }
.b-site-reducer li { display: inline-flex; gap: 6px; align-items: center; }
.b-site-reducer .b-icon { width: 16px; height: 16px; color: var(--verde-400); }
.b-site-trust { border-bottom: 1px solid var(--border); background: var(--surface); }
.b-site-trust .b-site-wrap { display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; justify-content: center; padding-block: 22px; }
.b-site-trust__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--text-muted); }
.b-site-trust__item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: var(--text); }
.b-site-trust__item small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0; }
.b-site-trust__item .b-icon { color: var(--text-muted); }
@media (max-width: 560px) {
  .b-site-trust .b-site-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .b-site-trust__item { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: center; }
  .b-site-trust__item small { grid-column: 2; }
}
.b-site-highlight { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; letter-spacing: -0.025em; margin: 44px 0 0; padding-left: 20px; border-left: 4px solid var(--brand); max-width: 30em; text-wrap: balance; }
.b-site-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; counter-reset: s; }
@media (max-width: 1040px) {
  .b-site-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .b-site-steps { grid-template-columns: 1fr; }
}
.b-site-step { position: relative; padding: 26px 22px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base), border-color var(--dur-fast); }
.b-site-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.b-site-step__link { color: inherit; text-decoration: none; }
.b-site-step__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.b-site-step__n { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--brand) 32%, transparent); transition: color var(--dur-base) var(--ease-standard); }
.b-site-step:hover .b-site-step__n { color: color-mix(in srgb, var(--brand) 70%, transparent); }
.b-site-step h3 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; margin: 6px 0 0; }
.b-site-step p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: var(--fs-sm); }
.b-site-step__ui { margin-top: auto; padding-top: 12px; }
.b-site-step__extra { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--success-soft); color: var(--text) !important; font-size: var(--fs-xs) !important; line-height: 1.45 !important; }
.b-site-step__extra .b-icon { color: var(--success); width: 16px; height: 16px; flex: none; margin-top: 1px; }
.b-site-step__extra b { font-weight: 600; }
.b-site-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 72px) 0; }
.b-site-feature + .b-site-feature { border-top: 1px solid var(--border); }
.b-site-feature--flip .b-site-feature__text { order: 2; }
@media (max-width: 900px) {
  .b-site-feature { grid-template-columns: 1fr; }
  .b-site-feature--flip .b-site-feature__text { order: 0; }
}
.b-site-feature h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.b-site-feature p { color: var(--text-muted); line-height: 1.65; margin: 0 0 16px; max-width: 46ch; }
.b-site-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.b-site-checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.b-site-checks .b-icon { color: var(--success); flex: none; margin-top: 2px; width: 18px; height: 18px; }
.b-site-visual { border-radius: var(--r-xl); background: var(--bg-sunken); border: 1px solid var(--border); padding: clamp(18px, 3vw, 32px); position: relative; overflow: hidden; }
.b-site-visual--ink { background: var(--carvao-900); border-color: transparent; }
.b-site-visual--ink .b-timeline { --_ink: var(--comanda-100); }
.b-site-visual--ink .b-timeline__text { color: var(--comanda-100); }
.b-site-visual--ink .b-timeline__time { color: var(--inox-500); }
.b-site-visual--ink .b-timeline::before { background: var(--carvao-600); }
.b-site-visual--ink .b-timeline li::before { background: var(--carvao-900); border-color: var(--carvao-500); }
.b-site-visual--ink .b-timeline li[data-kind="done"]::before { background: var(--verde-400); border-color: var(--verde-400); }
.b-site-visual--ink .b-timeline li[data-kind="alert"]::before { background: var(--rubi-300); border-color: var(--rubi-300); }
.b-site-visual--ink .b-timeline li[data-kind="brigada"]::before { background: var(--brasa-500); border-color: var(--brasa-500); }
.b-site-proof { display: grid; grid-template-columns: 360px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) {
  .b-site-proof { grid-template-columns: 1fr; }
}
.b-site-video { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--carvao-950); aspect-ratio: 9 / 16; box-shadow: var(--shadow-lg); max-width: 360px; width: 100%; margin-inline: auto; }
.b-site-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-site-video__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--carvao-950) 65%, transparent)); color: var(--branco); }
.b-site-video__play > span:first-child { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--brasa-600); box-shadow: 0 0 0 10px color-mix(in srgb, var(--brasa-500) 25%, transparent); transition: transform var(--dur-base) var(--ease-brasa); }
.b-site-video__play:hover > span:first-child { transform: scale(1.08); }
.b-site-video__play .b-icon { width: 30px; height: 30px; margin-left: 4px; fill: var(--branco); }
.b-site-video__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; text-align: left; font-size: var(--fs-sm); line-height: 1.35; pointer-events: none; }
.b-site-video__cap b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.b-site-video__note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin-top: 10px; }
.b-site-quotes { display: grid; gap: 16px; }
.b-site-quote { margin: 0; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative; }
.b-site-quote::before { content: "“"; position: absolute; top: -18px; left: 16px; font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--brand); }
.b-site-quote p { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.b-site-quote--big p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.b-site-who { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.b-site-who b { display: block; }
.b-site-who span { font-size: var(--fs-sm); color: var(--text-muted); }
.b-site-transcript { margin-top: 4px; }
.b-site-transcript summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--link); }
.b-site-transcript p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.b-site-objs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 900px) {
  .b-site-objs { grid-template-columns: 1fr; }
}
.b-site-obj { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.b-site-obj__q { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; color: var(--text-muted); }
.b-site-obj__q::before { content: "“"; color: var(--brand); }
.b-site-obj__q::after { content: "”"; color: var(--brand); }
.b-site-obj p { margin: 0; line-height: 1.6; }
.b-site-obj p b { font-weight: 600; }
.b-site-compare { margin-top: 40px; }
.b-site-compare .b-table th:last-child, .b-site-compare .b-table td:last-child { background: color-mix(in srgb, var(--action-soft) 70%, transparent); }
.b-site-compare .b-table th:last-child { color: var(--on-action-soft); }
.b-site-compare .b-table td { font-size: var(--fs-sm); }
.b-site-yes, .b-site-no, .b-site-meh { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.b-site-yes { color: var(--success); }
.b-site-no { color: var(--text-subtle); }
.b-site-meh { color: var(--warning); }
.b-site-yes .b-icon, .b-site-no .b-icon, .b-site-meh .b-icon { width: 18px; height: 18px; }
.b-site-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
@media (max-width: 760px) {
  .b-site-fit { grid-template-columns: 1fr; }
}
.b-site-fit .b-card { padding: 26px; }
.b-site-fit h3 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 16px; display: flex; gap: 10px; align-items: center; }
.b-site-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.b-site-fit li { display: flex; gap: 10px; line-height: 1.5; }
.b-site-fit li .b-icon { flex: none; margin-top: 2px; width: 18px; height: 18px; }
.b-site-fit__yes .b-icon { color: var(--success); }
.b-site-fit__no .b-icon { color: var(--text-subtle); }
.b-site-billing { display: flex; justify-content: center; margin: 32px 0 12px; }
.b-site-billing-note { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 36px; min-height: 1.5em; }
.b-site-billing-note b { color: var(--success); }
.b-site-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 960px) {
  .b-site-plan { padding: 24px 18px; }
  .b-site-price b { font-size: 2.3rem; }
}
@media (max-width: 699px) {
  .b-site-plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
.b-site-plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.b-site-plan--pick { border: 2px solid var(--brand); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--brasa-500) 55%, transparent); }
.b-site-plan__tag { position: absolute; top: -13px; left: 24px; }
.b-site-plan h3 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.02em; margin: 0; }
.b-site-plan__for { font-size: var(--fs-sm); color: var(--text-muted); margin: -10px 0 0; }
.b-site-price { display: flex; align-items: baseline; gap: 6px; }
.b-site-price b { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.b-site-price small { color: var(--text-muted); font-size: var(--fs-sm); }
.b-site-price-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: -8px; min-height: 2.6em; line-height: 1.4; }
.b-site-price-sub s { color: var(--text-subtle); }
.b-site-plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; font-size: var(--fs-sm); }
.b-site-plan li { display: flex; gap: 8px; align-items: flex-start; }
.b-site-plan li .b-icon { color: var(--success); width: 16px; height: 16px; flex: none; margin-top: 2px; }
.b-site-plan .b-btn-group { margin-top: auto; display: grid; gap: 8px; }
.b-site-plans-cta { display: none; }
.b-site-plans-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; margin-top: 28px; font-size: var(--fs-sm); color: var(--text-muted); }
.b-site-plans-foot span { display: inline-flex; align-items: center; gap: 6px; }
.b-site-plans-foot .b-icon { width: 16px; height: 16px; color: var(--success); }
.b-site-plans-foot b { color: var(--text); font-weight: 600; }
.b-site-faq { max-width: 820px; margin: 40px auto 0; }
.b-site-faq .b-accordion summary { font-size: 1.02rem; padding: 18px 20px; }
.b-site-faq .b-accordion__body { font-size: var(--fs-md); line-height: 1.65; padding: 0 20px 20px; }
.b-site-close { background: var(--carvao-900); color: var(--comanda-100); overflow: hidden; isolation: isolate; position: relative; --logo-chev: var(--comanda-100); --logo-name: var(--comanda-100); }
.b-site-close::before { content: ""; position: absolute; inset: -30% auto auto -15%; width: 60%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--brasa-500) 18%, transparent), transparent 70%); }
.b-site-close .b-site-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) {
  .b-site-close .b-site-wrap { grid-template-columns: 1fr; }
}
.b-site-close .b-site-h2 { color: var(--comanda-100); }
.b-site-close .b-site-lead { color: var(--comanda-300); }
.b-site-sign { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; margin-top: 40px; }
.b-site-sign span { color: var(--brasa-500); }
.b-site-form { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--carvao-950) 70%, transparent); display: grid; gap: 14px; }
.b-site-form h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; margin: 0; }
.b-site-form .b-check { font-size: var(--fs-sm); }
.b-site-form__or { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.b-site-form__or::before, .b-site-form__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.b-site-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.b-site-wa { background: var(--verde-600); color: var(--branco); } /* WhatsApp: verde funcional, não é cor de marca */
.b-site-wa:hover:not(:disabled) { background: color-mix(in srgb, var(--verde-600) 82%, var(--carvao-900)); }
.b-site-foot { background: var(--carvao-950); color: var(--inox-500); padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); --logo-chev: var(--comanda-100); --logo-name: var(--comanda-100); }
.b-site-foot .b-site-wrap { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; justify-content: space-between; }
.b-site-foot__logo { display: block; height: 24px; }
.b-site-foot__logo svg { height: 100%; width: auto; display: block; }
.b-site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-sm); }
.b-site-foot a { color: var(--inox-300); text-decoration: none; }
.b-site-foot a:hover { color: var(--comanda-100); text-decoration: underline; text-underline-offset: 3px; }
.b-site-foot small { font-size: var(--fs-xs); }
.b-site-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-enter); }
.b-site-mbar.is-on { transform: none; }
.b-site-mbar .b-btn { flex: 1; min-width: 0; }
.b-site-mbar .b-btn--icon { flex: none; }
@media (max-width: 760px) {
  .b-site-mbar { display: flex; }
}
@media (max-width: 560px) {
  .b-site-hero .b-btn-group, .b-site-form .b-btn { width: 100%; }
  .b-site-hero .b-btn-group .b-btn, .b-site-form .b-btn { width: 100%; }
}
.b-site-feature .b-site-checks li span b { font-weight: 600; }
.b-site-feature .b-site-checks .b-icon { color: var(--link); }
@media (max-width: 640px) {
  .b-site-wrap { padding: 0 14px; }
  .b-site-section { padding: 44px 0; }
  .b-site-h2 { font-size: 1.6rem; margin-bottom: 10px; }
  .b-site-lead { font-size: .98rem; }
  .b-site-kicker { margin-bottom: 8px; font-size: 11px; }
  .b-site-top .b-site-wrap { height: 56px; }
  .b-site-top__logo { height: 22px; }
  .b-site-hero { padding: 24px 0 36px; }
  .b-site-hero__over { font-size: 10.5px; margin-bottom: 10px; }
  .b-site-hero h1 { font-size: 2.15rem; margin-bottom: 14px; }
  .b-site-hero__sub { font-size: .98rem; margin-bottom: 20px; }
  .b-site-hero .b-btn-group { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
  .b-site-hero .b-btn-group .b-btn { width: auto; font-size: 14px; min-height: 48px; padding: 8px 10px; }
  .b-site-reducer { gap: 4px 12px; font-size: 12.5px; margin-top: 12px; }
  .b-site-trust .b-site-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-block: 16px; align-items: start; }
  .b-site-trust__label { grid-column: 1 / -1; }
  .b-site-trust__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .82rem; line-height: 1.2; }
  .b-site-trust__item small { font-size: 10.5px; line-height: 1.25; }
  .b-site-highlight { font-size: 1.2rem; margin-top: 24px; padding-left: 14px; }
  .b-site-steps { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .b-site-step { padding: 14px 12px; gap: 6px; }
  .b-site-step h3 { font-size: 1.05rem; margin-top: 2px; }
  .b-site-step p { font-size: 12.5px; line-height: 1.45; }
  .b-site-step__n { font-size: 1.6rem; top: 12px; right: 12px; }
  .b-site-step .b-icon-tile { width: 32px; height: 32px; }
  .b-site-step__ui, .b-site-step__extra { display: none; }
  .b-site-feature { padding: 32px 0; gap: 18px; }
  .b-site-feature h3 { font-size: 1.35rem; }
  .b-site-feature p { font-size: .95rem; margin-bottom: 12px; }
  .b-site-checks { gap: 8px; }
  .b-site-checks li { font-size: .9rem; }
  .b-site-visual { padding: 12px; border-radius: var(--r-lg); }
  .b-site-proof { grid-template-columns: 1fr; gap: 16px; }
  .b-site-video { max-width: 220px; }
  .b-site-quotes { gap: 0; padding-top: 14px; }
  .b-site-quotes .b-site-quote:not(.b-site-quote--big) { display: none; }
  .b-site-quote { padding: 16px; }
  .b-site-quote--big p, .b-site-quote p { font-size: .98rem; line-height: 1.45; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
  .b-site-objs { gap: 8px; margin-top: 18px; }
  .b-site-obj { padding: 12px 14px; }
  .b-site-obj__q { font-size: .95rem; margin-bottom: 6px; }
  .b-site-obj p { font-size: .82rem; line-height: 1.45; }
  .b-site-compare { margin-top: 20px; }
  .b-site-compare .b-table th, .b-site-compare .b-table td { padding: 9px 6px !important; }
  .b-site-compare .b-table th[scope="col"] { font-size: 0; letter-spacing: 0; text-align: center; }
  .b-site-compare .b-table th[scope="col"]::after { content: attr(data-short); font-size: 10.5px; letter-spacing: .04em; }
  .b-site-compare .b-table { table-layout: fixed; }
  .b-site-compare .b-table thead th:first-child { width: 48%; }
  .b-site-compare .b-table th[scope="row"] { font-size: 12.5px !important; line-height: 1.3; width: 46%; white-space: normal; }
  .b-site-compare .b-table td { text-align: center; }
  .b-site-compare .b-site-yes, .b-site-compare .b-site-no, .b-site-compare .b-site-meh { font-size: 0; justify-content: center; }
  .b-site-compare .b-site-yes .b-icon, .b-site-compare .b-site-no .b-icon, .b-site-compare .b-site-meh .b-icon { width: 20px; height: 20px; }
  .b-site-fit { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .b-site-fit .b-card { padding: 12px; }
  .b-site-fit h3 { font-size: .95rem; gap: 6px; margin-bottom: 10px; }
  .b-site-fit h3 .b-icon-tile { width: 26px; height: 26px; }
  .b-site-fit li { font-size: 12px; gap: 6px; }
  .b-site-fit li .b-icon { width: 14px; height: 14px; }
  .b-site-billing { margin: 16px 0 6px; }
  .b-site-billing-note { margin-bottom: 14px; font-size: 12px; }
  .b-site-plans { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: none; margin: 0; }
  .b-site-plan { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome preco" "para assinar"; align-items: center; gap: 2px 12px; padding: 14px 14px; border-radius: var(--r-lg); }
  .b-site-plan h3 { grid-area: nome; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
  .b-site-plan__for { grid-area: para; margin: 0; font-size: 12.5px; }
  .b-site-price { grid-area: preco; justify-self: end; gap: 3px; }
  .b-site-price b { font-size: 1.5rem; }
  .b-site-price small { font-size: 11.5px; }
  .b-site-price-sub, .b-site-plan ul { display: none; }
  .b-site-plan .b-btn-group { grid-area: assinar; justify-self: end; margin: 0; display: block; }
  .b-site-plan .b-btn-group .b-btn:not(.b-btn--link) { display: none; }
  .b-site-plan .b-btn--link { font-size: 12.5px; }
  .b-site-plan--pick { box-shadow: none; }
  .b-site-plan__tag { display: none; }
  .b-site-plan--pick h3::after { content: attr(data-destaque); display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: var(--action); color: var(--text-on-action); font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
  .b-site-plans-cta { display: flex; margin-top: 12px; }
  .b-site-plans-foot { gap: 4px 12px; font-size: 11.5px; margin-top: 10px; }
  .b-site-faq .b-accordion summary { padding: 14px 14px; font-size: .95rem; }
  .b-site-close .b-site-wrap { gap: 20px; }
  .b-site-sign { margin-top: 16px; font-size: 1.4rem; }
  .b-site-form { padding: 16px; gap: 10px; }
  .b-site-form h3 { font-size: 1.1rem; }
  .b-site-form .b-form-row { grid-template-columns: 1.3fr 1fr; gap: 8px; }
}

@media print { .b-reveal { opacity: 1; transform: none; } }