:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #111827;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #e4e7ec;
  --line-strong: #cfd6df;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-ink: #1e3a8a;
  --primary-soft: #eff6ff;
  --green: #16a34a;
  --green-soft: #ecfdf3;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --dark: #101828;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(16, 24, 40, .10);
  --shadow-soft: 0 10px 28px rgba(16, 24, 40, .07);
}

* { box-sizing: border-box; }

/* O atributo `hidden` tem que ganhar de qualquer `display` de classe. Sem isto,
   um `.client-layout { display: grid }` deixa a seção visível mesmo com
   `hidden` no HTML — foi o que fazia o catálogo aparecer antes de a unidade da
   venda ser escolhida. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding-inline: 24px;
}

.client-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(228,231,236,.82);
  backdrop-filter: blur(14px);
}

.client-topbar__inner {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-lockup__mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
  flex: 0 0 auto;
}

/* O SVG herda a cor branca do selo (currentColor). */
.brand-lockup__mark svg { width: 26px; height: 26px; display: block; }

.brand-lockup strong { display: block; font-size: 15px; line-height: 1.15; }
.brand-lockup span { display: block; color: var(--muted); font-size: 12px; line-height: 1.25; }

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  padding: 0 14px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.cart-pill strong {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
}

.client-page { padding-top: 28px; padding-bottom: 56px; }

.client-hero {
  min-height: 250px;
  border-radius: 30px;
  padding: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(circle at 85% 10%, rgba(37, 99, 235, .30), transparent 34%),
    linear-gradient(135deg, #101828, #1d2939);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 28px;
  align-items: end;
  box-shadow: var(--shadow);
}

/* Ícone de traço (helpers.php::icon()). Tamanho por CSS, cor herdada do
   texto ao redor — o mesmo ícone funciona claro ou escuro sem variação. */
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: -4px;
}

.icon--sm { width: 15px; height: 15px; vertical-align: -3px; }
.icon--lg { width: 24px; height: 24px; vertical-align: -6px; }

.eyebrow {
  display: inline-flex;
  color: var(--primary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  margin-bottom: 8px;
}

.client-hero h1,
.admin-header h1,
.login-card h1 {
  margin: 0;
  font-size: clamp(30px, 4.3vw, 54px);
  line-height: .98;
  letter-spacing: -.05em;
}

.client-hero p {
  margin: 18px 0 0;
  max-width: 650px;
  color: #d0d5dd;
  line-height: 1.55;
}

.hero-card {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  padding: 22px;
}

.hero-card span, .hero-card small { display: block; color: #d0d5dd; font-size: 13px; }
.hero-card strong { display: block; font-size: 34px; margin: 8px 0; color: #fff; letter-spacing: -.04em; }

.client-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.client-layout--catalog-only {
  grid-template-columns: 1fr;
}

.catalog-column, .checkout-column { min-width: 0; }
.checkout-column { display: grid; gap: 18px; position: sticky; top: 94px; }

.filter-card,
.panel,
.metric-card,
.orders-list-panel,
.order-detail-panel,
.login-card,
.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.filter-card {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* O `display: flex` acima é regra de autor e ganha do `[hidden]` do navegador,
   então um campo com o atributo hidden continuaria aparecendo (é o caso das
   "Parcelas do boleto", que só existem quando a forma de pagamento é boleto). */
.field[hidden] { display: none; }
.field label { color: #344054; font-size: 12px; font-weight: 800; }
.field small { color: var(--muted); font-size: 12px; }

/* Aviso do CPF/CNPJ do boleto, abaixo do seletor de parcelas. */
.installments-doc { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.installments-doc--warn { color: #b54708; }

/* Campos de acréscimo e desconto lado a lado. */
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; min-width: 0; }

/* Resumo do total com acréscimo/desconto (só aparece quando há ajuste). */
.order-total-readout {
  background: #f8fafc; border: 1px dashed var(--line-strong); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.order-total-readout strong { color: var(--ink); }

@media (max-width: 520px) {
  .field-row { flex-direction: column; gap: 12px; }
}

/* Retorno da busca de CEP no cadastro de clientes. Vazio nao ocupa espaco. */
.field-note:empty { display: none; }
.field-note--loading { color: var(--muted); }
.field-note--ok { color: #0a7d3f; font-weight: 700; }
.field-note--warn { color: #b54708; font-weight: 700; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  color: var(--ink);
}

.field textarea { min-height: 92px; resize: vertical; }

/* Acréscimo e desconto: um seletor curto de R$/% colado num campo de valor,
   os dois formando uma caixa só.

   Grid com duas colunas fixas (74px + o resto) em vez de flex: o par
   select+input mora dentro de ".field", que por sua vez pode estar num
   ".field-row" empilhado (celular) ou lado a lado (tela larga) — em algum
   desses contextos aninhados o flex com `flex: 1 1 auto` no input podia
   herdar uma base de cálculo ambígua e encolher a ponto de desaparecer.
   Grid com colunas fixas não depende de flex-basis calculado a partir do
   conteúdo, então não tem essa ambiguidade: a segunda coluna é sempre
   "o que sobrar", ponto. */
.adjust-input { display: grid; grid-template-columns: 74px minmax(0, 1fr); }

.adjust-input select {
  width: 100%;              /* Preenche a coluna de 74px — não precisa de flex. */
  padding: 0 6px 0 12px;
  border-radius: 12px 0 0 12px;
  border-right: 0;
  background: var(--surface-soft);
  font-weight: 800;
}

.adjust-input input {
  width: 100%;               /* Preenche a coluna que sobrar. */
  min-width: 0;
  border-radius: 0 12px 12px 0;
  text-align: right;           /* Valor alinhado à direita, como em calculadora. */
  font-weight: 700;
}

/* O contorno de foco por cima do vizinho, para a borda compartilhada não
   ficar pela metade. */
.adjust-input select:focus,
.adjust-input input:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.section-title-row,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-title-row h2,
.panel-head h2 { margin: 0; line-height: 1.1; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.product-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.product-media {
  height: 150px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(37, 99, 235, .18), transparent 36%),
    linear-gradient(135deg, #f8fafc, #eef2f6);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}

.product-media img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.product-placeholder { display: grid; place-items: center; color: var(--primary-ink); }
.product-placeholder .icon { width: 40px; height: 40px; }

.product-content { padding: 16px; display: grid; gap: 10px; flex: 1; }

.product-tag {
  width: fit-content;
  background: var(--primary-soft);
  color: var(--primary-ink);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}

.product-content h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.product-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; min-height: 38px; }

.product-bottom { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; }
.product-price strong { display: block; font-size: 19px; letter-spacing: -.03em; }
.product-price span { display: block; color: var(--muted); font-size: 11px; }

.button, .add-button {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  gap: 8px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover, .add-button:hover { transform: translateY(-1px); }
.add-button, .button--dark { background: var(--dark); color: #fff; }
.button--primary { background: var(--primary); color: #fff; box-shadow: 0 12px 24px rgba(37, 99, 235, .22); }
.button--primary:hover { background: var(--primary-dark); }
.button--whatsapp { background: var(--green); color: #fff; box-shadow: 0 12px 24px rgba(22, 163, 74, .22); }
.button--secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
.button--info { background: var(--blue); color: #fff; }
.button--danger { background: var(--red); color: #fff; }
.button--ghost-danger { background: var(--red-soft); color: var(--red); }
.button--sm { min-height: 34px; padding-inline: 10px; font-size: 12px; }
.button[disabled], .add-button[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

.panel { padding: 18px; }
.stack-form { display: grid; gap: 13px; }

.cart-list,
.orders-list {
  display: grid;
  gap: 12px;
  max-height: 410px;
  overflow: auto;
  padding-right: 3px;
}

.cart-empty,
.empty-state,
.microcopy,
.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cart-line {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.cart-line__top,
.edit-item__top,
.order-card__top { display: flex; justify-content: space-between; gap: 12px; }

.cart-line__title,
.edit-item__title { font-weight: 900; font-size: 14px; }

.cart-line__meta,
.order-meta { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 3px; }

.icon-button { background: transparent; color: var(--red); font-size: 20px; font-weight: 900; }

.cart-tools { display: inline-flex; gap: 6px; }

.icon-button--tool {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
}

.icon-button--tool.is-active { background: var(--red-soft); border-color: var(--red); }
.icon-button--tool:disabled { opacity: .3; cursor: not-allowed; }

/* Aba Catalogos: um cartao por selecao salva. */
.catalog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.catalog-card-item { display: flex; flex-direction: column; gap: 10px; }
.catalog-card-item__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* -------- Explorador de Catálogos (pastas / catálogos / arquivos) -------- */
.explorer-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 14px; font-size: 14px;
}
.explorer-crumbs a { color: var(--primary, #2563eb); text-decoration: none; font-weight: 700; }
.explorer-crumbs a:hover { text-decoration: underline; }
.explorer-crumbs__sep { color: var(--muted); }

.explorer-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px;
}
.explorer-toolbar__view { margin-left: auto; }
.explorer-tool { position: relative; }
.explorer-tool > summary { list-style: none; cursor: pointer; }
.explorer-tool > summary::-webkit-details-marker { display: none; }
.explorer-tool__form {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); min-width: 260px;
}
.explorer-tool__form input[name="name"] {
  flex: 1; min-width: 160px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}

/* Container: vira grade ou lista conforme a classe (o botão troca no JS). */
.explorer { list-style: none; margin: 0; padding: 0; }
.explorer--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.explorer--list { display: flex; flex-direction: column; gap: 8px; }

.explorer-item { border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; }
.explorer-item--folder { background: #fffdf5; }
.explorer-item__main { display: flex; text-decoration: none; color: inherit; min-width: 0; }
.explorer-item__icon { line-height: 1; flex: 0 0 auto; }
.explorer-item__text { display: flex; flex-direction: column; min-width: 0; }
.explorer-item__name { font-weight: 800; letter-spacing: -.01em; }
.explorer-item--folder .explorer-item__name { color: #1f2937; }
.explorer-item__meta { color: var(--muted); font-size: 12px; font-weight: 700; }
.explorer-item__warn { color: #b91c1c; font-style: normal; }

/* --- Modo GRADE: cartão com ícone grande e nome embaixo (tipo Windows) --- */
.explorer--grid .explorer-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px 12px; text-align: center;
}
.explorer--grid .explorer-item:hover { border-color: var(--primary, #2563eb); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.explorer--grid .explorer-item__main { flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.explorer--grid .explorer-item__icon { font-size: 54px; }
.explorer--grid .explorer-item__text { align-items: center; width: 100%; }
.explorer--grid .explorer-item__name {
  width: 100%; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.explorer--grid .explorer-item__meta { margin-top: 2px; }
.explorer--grid .explorer-item__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }

/* --- Modo LISTA: linha com ícone à esquerda e ações à direita --- */
.explorer--list .explorer-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.explorer--list .explorer-item__main { align-items: center; gap: 12px; flex: 1; }
.explorer--list .explorer-item__icon { font-size: 24px; }
.explorer--list .explorer-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer--list .explorer-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* Renomear / Mover / Excluir só existem no modo de edição (botão ✏️ Editar na
   barra de cima). Fora dele o cartão fica com o essencial — abrir, compartilhar,
   baixar — e o "Excluir" vermelho não fica a um toque de distância no celular. */
.explorer-item__edit { display: none; }
body.explorer-editing .explorer-item__edit { display: contents; }

/* Ações (Renomear/Mover/Excluir) — iguais nos dois modos */
.explorer-action { position: relative; }
.explorer-action > summary {
  list-style: none; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; font-weight: 800; color: var(--muted); background: #fff; white-space: nowrap;
}
.explorer-action > summary::-webkit-details-marker { display: none; }
.explorer-action > summary:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }
.explorer-action__form {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); min-width: 240px;
}
.explorer-action__form input,
.explorer-action__form select {
  flex: 1; min-width: 150px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}

@media (max-width: 640px) {
  /* 150px em vez de 120: no celular isso dá duas colunas em vez de três, e o
     cartão fica largo o bastante para o nome e para "Compartilhar" caberem
     numa linha só. */
  .explorer--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .explorer--list .explorer-item { align-items: flex-start; }
  .explorer--list .explorer-item__actions { width: 100%; margin-left: 0; }
  .explorer-tool__form, .explorer-action__form { left: 0; right: auto; min-width: min(280px, 90vw); }
}

.catalog-card-item__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}

.catalog-card-item__foot form { margin: 0; display: flex; gap: 6px; }

/* Campo de renomear: linha propria, aberta pelo botao Renomear. */
.catalog-card-item__rename { display: flex; gap: 6px; margin: 8px 0 0; }
.catalog-card-item__rename[hidden] { display: none; }
.catalog-card-item__rename input[name="name"] { flex: 1; min-width: 0; }
.catalog-card-item__date { color: var(--muted); font-size: 11px; }

/* Setas de subir/descer na lista de categorias. */
.order-controls { display: inline-flex; align-items: center; gap: 6px; }
.order-controls .icon-button--tool { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.order-controls__position { min-width: 30px; text-align: center; font-weight: 800; color: var(--muted); font-size: 13px; }

.cart-selectbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-soft);
}

.cart-selectbar[hidden] { display: none; }
.cart-selectbar__actions { display: inline-flex; gap: 8px; }

.cart-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; cursor: pointer; }
.cart-check input, .cart-line__check { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

.cart-line__info { display: flex; align-items: flex-start; gap: 10px; }
.cart-line.is-selected { border-color: var(--primary); background: #fff; }

.cart-step__cta { width: 100%; margin-top: 14px; }
.cart-step__cta[hidden] { display: none; }

.total-strip--compact { border-top: 0; margin-top: 0; padding-top: 0; margin-bottom: 14px; }
.total-strip--compact strong { font-size: 20px; }

.select-col[hidden] { display: none !important; }
.row-actions { display: flex; align-items: center; gap: 10px; }
.row-actions .icon-button { font-size: 16px; line-height: 1; }

.cart-line__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.quantity-stepper { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; }
.quantity-stepper button { width: 36px; height: 36px; background: #fff; color: var(--ink); font-weight: 900; }
.quantity-stepper span { min-width: 58px; padding: 0 6px; display: grid; place-items: center; font-weight: 900; }
.quantity-stepper input {
  width: 64px;
  height: 36px;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0 4px;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  -moz-appearance: textfield;
}
.quantity-stepper input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.quantity-stepper input::-webkit-outer-spin-button,
.quantity-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Caixa de quantidade aberta pelo botao "Adicionar" do catalogo. */
.qty-modal { position: fixed; inset: 0; z-index: 120; display: none; }
.qty-modal.open { display: grid; place-items: center; padding: 18px; }
.qty-modal__backdrop { position: absolute; inset: 0; width: 100%; background: rgba(15, 23, 42, .55); border: 0; cursor: pointer; }
.qty-modal__box {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qty-modal__box h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.qty-modal__close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 22px; cursor: pointer;
}
.qty-modal__meta { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.qty-modal__price { display: flex; flex-direction: column; gap: 6px; }
.qty-modal__price > span {
  color: var(--muted); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.qty-modal__price-field {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px 12px;
}
.qty-modal__price-field:focus-within { border-color: var(--green); }
.qty-modal__price-symbol { color: var(--muted); font-weight: 800; }
.qty-modal__price-field input {
  border: 0; outline: 0; width: 100%; padding: 0;
  background: transparent; font-size: 18px; font-weight: 800; color: inherit;
}
.qty-modal__stepper { align-self: center; }
.qty-modal__stepper button { width: 48px; height: 48px; font-size: 20px; }
.qty-modal__stepper input { width: 92px; height: 48px; font-size: 20px; }
/* Dentro da caixa o espaçamento quem dá é o gap de .qty-modal__fields. */
.qty-modal .qty-presets { justify-content: center; margin-top: 0; }
.qty-modal__total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--line-strong); padding-top: 12px; margin-top: 4px;
}
.qty-modal__total span { color: var(--muted); font-weight: 800; }
.qty-modal__total strong { color: var(--green); font-size: 22px; letter-spacing: -.03em; }

.qty-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qty-presets .qty-preset {
  min-width: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.qty-presets .qty-preset:hover:not(:disabled) { border-color: var(--green); }
.qty-presets .qty-preset:disabled { opacity: .35; cursor: not-allowed; }
.qty-presets .qty-preset.active { background: var(--green); border-color: var(--green); color: #fff; }

.total-strip {
  border-top: 1px dashed var(--line-strong);
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.total-strip span { color: var(--muted); font-weight: 800; }
.total-strip strong { color: var(--green); font-size: 26px; letter-spacing: -.04em; }

.message-preview {
  display: none;
  white-space: pre-wrap;
  background: #111827;
  color: #f9fafb;
  border-radius: 14px;
  padding: 14px;
  font-family: Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  max-height: 290px;
  overflow: auto;
}

/* ADMIN */
:root { --admin-topbar-h: 70px; }

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--admin-topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 70;
}
.admin-topbar .brand-lockup strong { color: var(--ink); }
.admin-menu-toggle {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--line); font-size: 18px;
  display: none;
}
.admin-nav-backdrop { display: none; }

.admin-body { display: flex; flex-direction: column; min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); flex: 1; min-width: 0; }
.admin-sidebar { position: sticky; top: var(--admin-topbar-h); align-self: start; height: calc(100vh - var(--admin-topbar-h)); background: #0b1220; color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 26px; z-index: 60; }
.admin-sidebar__brand { display: flex; align-items: center; gap: 12px; }
.admin-sidebar__brand span { display: block; color: #98a2b3; font-size: 12px; }

.admin-sidebar__actions { margin: 0 0 0 auto; }

.admin-bottom-nav { display: none; }

/* No desktop a barra do topo só repetia logo e nome que já aparecem na
   primeira linha do menu lateral — duas marcas empilhadas por cima da
   mesma tela. Ela existe de verdade só no celular, onde o menu vira gaveta
   e o hambúrguer precisa de um lugar fixo para abrir. */
@media (min-width: 1025px) {
  .admin-topbar { display: none; }
  .admin-body { --admin-topbar-h: 0px; }
}

.admin-nav { display: grid; gap: 4px; }
.admin-nav a { display: flex; align-items: center; gap: 12px; color: #cbd5e1; padding: 11px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; transition: background .15s, color .15s; }
.admin-nav a .icon, .admin-nav a > svg { color: #7c8aa0; transition: color .15s; }
.admin-nav a.active, .admin-nav a:hover { background: var(--primary); color: #fff; }
.admin-nav a.active .icon, .admin-nav a.active > svg,
.admin-nav a:hover .icon, .admin-nav a:hover > svg { color: #fff; }

.admin-nav__logout { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); color: #94a3b8 !important; }
.admin-nav__logout:hover { background: rgba(239, 68, 68, .16) !important; color: #fca5a5 !important; }
.admin-nav__logout:hover .icon { color: #fca5a5; }

.admin-content { padding: 28px; min-width: 0; }
/* ---------------------------------------------------------------------------
   Login do painel.

   Tela dividida: marca à esquerda (fundo escuro), formulário à direita. A
   coluna da marca é a primeira a cair no responsivo — abaixo de 900px sobra
   só o formulário, centralizado, para o teclado do celular não empurrar
   conteúdo decorativo para fora da dobra.
   -------------------------------------------------------------------------*/
.login-body { margin: 0; background: var(--bg); }

.login-split {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 44px;
  color: #fff;
  background: radial-gradient(120% 100% at 0% 0%, #1d2939 0%, var(--dark) 55%, #05070d 100%);
}

/* Brilho diagonal: dá profundidade ao bloco escuro sem pesar no carregamento
   (é gradiente, não imagem). */
.login-brand::after {
  content: "";
  position: absolute;
  inset: -30% -45% auto auto;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .38) 0%, rgba(37, 99, 235, 0) 68%);
  pointer-events: none;
}

.login-brand > * { position: relative; z-index: 1; }

.login-brand__top { display: flex; align-items: center; gap: 14px; }
.login-brand__logo { width: 46px; height: 46px; color: #f59e0b; flex: none; }

.login-brand__name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
}

.login-brand__pitch h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.login-brand__pitch p {
  margin: 16px 0 0;
  max-width: 42ch;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.6;
}

.login-brand__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: #e2e8f0;
  font-size: 14px;
}

.login-brand__list li { display: flex; align-items: center; gap: 11px; }

.login-brand__list li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: rgba(37, 99, 235, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.login-brand__foot { margin: 0; color: #94a3b8; font-size: 12.5px; }

.login-form-side {
  display: grid;
  place-items: center;
  padding: 40px 24px;
  /* Item de grid tem min-width:auto (= min-content). Sem zerar, o card nao
     encolhe abaixo da largura natural do input e vaza a tela no celular. */
  min-width: 0;
}

.login-card {
  width: min(430px, 100%);
  padding: 36px 34px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.login-card__mark {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid #dbeafe;
}

.login-card__mark svg { width: 30px; height: 30px; }

.login-card h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.032em;
}

.login-card__sub { margin: 9px 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.login-card .stack-form { gap: 16px; }
.login-submit { width: 100%; min-height: 48px; margin-top: 6px; font-size: 15px; }

.login-card__note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.login-card__note strong { color: var(--ink); }

/* Campo com botão encostado à direita (usado no "Mostrar" da senha). O padding
   do input abre espaço para o botão não cobrir o texto digitado. */
.input-affix { position: relative; display: flex; min-width: 0; }
.input-affix input { padding-right: 84px; min-width: 0; }

.input-affix__button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 7px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.input-affix__button:hover { color: var(--primary); background: var(--primary-soft); }

.input-affix__button:focus-visible,
.login-submit:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  /* minmax(0, 1fr) e nao 1fr: o minimo automatico de 1fr e o min-content da
     coluna, e o input (tamanho padrao + espaco do botao "Mostrar") empurrava
     o card para alem da tela no celular. */
  .login-split { grid-template-columns: minmax(0, 1fr); }
  .login-brand { display: none; }
  .login-form-side { padding: 28px 18px; }
}

@media (max-width: 420px) {
  .login-card { padding: 28px 22px 24px; border-radius: 18px; }
}

.admin-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.admin-header h1 { font-size: clamp(28px, 3vw, 42px); color: var(--ink); }
.admin-header p { color: var(--muted); margin: 9px 0 0; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { padding: 16px; }
.metric-card span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; margin-bottom: 9px; }
.metric-card strong { font-size: 24px; letter-spacing: -.04em; }

.orders-workspace { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.orders-list-panel, .order-detail-panel { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }

.order-card { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; color: var(--ink); }
.order-card.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.order-card strong { font-size: 14px; }

.status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 999px; padding: 4px 9px; background: var(--blue-soft); color: #1d4ed8; font-size: 10px; text-transform: uppercase; font-weight: 900; white-space: nowrap; }
.status-pill.em_atendimento { background: #fef3c7; color: #92400e; }
.status-pill.separado, .status-pill.active { background: var(--green-soft); color: #047857; }
.status-pill.entregue { background: #dcfce7; color: #166534; }
.status-pill.cancelado, .status-pill.inactive { background: var(--red-soft); color: #991b1b; }

.order-total { color: var(--green); font-size: 17px; font-weight: 900; }

.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.detail-box { border: 1px solid var(--line); background: var(--surface-soft); border-radius: 14px; padding: 12px; }
.detail-box span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; margin-bottom: 5px; }
.detail-box strong { font-size: 13px; word-break: break-word; }
.detail-box--wide { grid-column: 1 / -1; }

.search-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.search-bar input[type="search"] { flex: 1 1 240px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 14px; }
.search-bar select { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 12px; background: #fff; }

.field--span2 { grid-column: span 2; }
.required { color: var(--red); }

.section-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.section-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.segmented label { display: flex; align-items: center; gap: 6px; padding: 11px 16px; font-weight: 800; font-size: 13px; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--primary); color: #fff; }
.segmented input { margin: 0; }

.segmented__option {
  border: 0;
  background: transparent;
  padding: 11px 16px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.segmented__option + .segmented__option { border-left: 1px solid var(--line-strong); }
.segmented__option.active { background: var(--primary); color: #fff; }

.order-items-toggle { margin-bottom: 16px; }
.order-items-toggle > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); font-weight: 900; }
.order-items-toggle > summary::-webkit-details-marker { display: none; }
.order-items-toggle > summary::before { content: '▸'; }
.order-items-toggle[open] > summary::before { content: '▾'; }
.order-items-toggle .edit-list { margin-top: 14px; }

.stock-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.stock-badge--ok { background: var(--green-soft); color: #047857; }
.stock-badge--out { background: var(--red-soft); color: #991b1b; }
.product-tags-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.product-card--out { opacity: .68; }

.customer-preview:empty { display: none; }

.quote-actions { display: flex; justify-content: center; gap: 12px; padding: 16px; }

.detail-form-grid { display: grid; grid-template-columns: 1fr 190px; gap: 12px; margin-bottom: 16px; }
.edit-list { display: grid; gap: 12px; }
.edit-item { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 12px; }
.edit-item__grid { display: grid; grid-template-columns: 110px 140px minmax(120px, 1fr) auto; gap: 10px; align-items: end; }
.remove-item { min-height: 44px; border-radius: 12px; padding: 0 12px; background: var(--red-soft); color: var(--red); font-weight: 900; }

.document-actions { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-top: 16px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; padding: 10px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-actions-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions-inline a, .admin-actions-inline button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line); font-weight: 800; }

/* "Imprimir" na lista de pedidos: azul para separar da ação neutra "Abrir". */
.admin-actions-inline a.action-print {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.admin-actions-inline a.action-print:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* Links de ação dentro de tabela ("Editar"): texto solto dá um alvo de ~19px,
   pequeno demais para o dedo. Vira pill com a mesma altura mínima dos botões. */
.admin-table td[data-label="Ações"] > a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-weight: 800;
}

/* Abas de Configurações (Dados da loja / Produtos / Categorias). No celular
   rolam na horizontal em vez de quebrar linha — barra de abas quebrada em duas
   fileiras fica confusa. */
.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar { display: none; }

.settings-tabs a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.settings-tabs a:hover { background: var(--surface-soft); color: var(--ink); }
.settings-tabs a.active { background: var(--primary); color: #fff; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.alert { border-radius: 12px; padding: 12px; margin-bottom: 16px; font-size: 14px; }
.alert--success { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
.alert--danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* =========================================================================
   Roteiros de entrega
   =========================================================================
   A tela do dia é usada em pé, na rua, com uma mão só. Daí as decisões: a
   próxima parada é um cartão grande e isolado, os botões de ação têm altura
   de dedo (e não de mouse), e o que já foi entregue sai do caminho. */

.text-muted { color: var(--muted); }
.route-counter { color: var(--muted); font-size: 13px; font-weight: 700; }

/* Região + dia: as duas escolhas que definem qual roteiro está na tela. */
.run-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.run-picker .settings-tabs { flex: 1; min-width: 200px; margin-bottom: 0; }

.run-date { display: flex; align-items: center; gap: 8px; }
.run-date label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.run-date input {
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: #fff;
  font-weight: 700; color: var(--ink);
}

/* --- Progresso do dia --- */
.run-progress {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 18px; margin-bottom: 18px;
}
.run-progress__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.run-progress__head strong { display: block; font-size: 15px; }
.run-progress__head span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.run-progress__percent { font-size: 26px; font-weight: 900; color: var(--primary); line-height: 1; }

.run-bar { height: 10px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin: 12px 0 10px; }
.run-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s ease; }

.run-progress__tally { display: flex; flex-wrap: wrap; gap: 6px; }
.tally { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.tally--pending { background: #fef3c7; color: #92400e; }
.tally--delivered { background: #dcfce7; color: #166534; }
.tally--failed { background: var(--red-soft); color: #991b1b; }

.run-progress__maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --- Próxima parada: o centro da tela --- */
.run-next { margin-bottom: 18px; }
.run-next__label {
  font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px;
}
.run-next__card {
  background: #fff; border: 2px solid var(--primary); border-radius: 20px;
  padding: 18px; box-shadow: 0 10px 30px rgba(23, 54, 93, .10);
}
.run-next__top { display: flex; align-items: flex-start; gap: 12px; }
.run-next__number {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 18px; font-weight: 900;
}
.run-next__card h2 { font-size: 20px; margin: 0; line-height: 1.2; }
.run-next__phone { margin: 2px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.run-next__address { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.run-next__order {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 13px;
}
.run-next__order a { font-weight: 800; }
.run-next__order span { color: var(--muted); font-weight: 700; }

/* Alvo de dedo, dois por linha no celular. O form vira "display: contents"
   para o botão participar da grade, e não o formulário em volta dele. */
.run-next__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.run-next__actions form { display: contents; }
.run-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 62px; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: #fff;
  color: var(--ink); font-size: 13px; font-weight: 800; text-align: center; cursor: pointer;
}
.run-action span { font-size: 20px; line-height: 1; }
.run-action:hover { border-color: var(--primary); color: var(--primary); }
.run-action--go { background: var(--primary); border-color: var(--primary); color: #fff; }
.run-action--go:hover { color: #fff; opacity: .92; }
.run-action--done { background: #dcfce7; border-color: #86efac; color: #166534; }
.run-action--done:hover { color: #166534; border-color: #16a34a; }
.run-action--fail { background: var(--red-soft); border-color: #fecaca; color: #991b1b; }
.run-action--fail:hover { color: #991b1b; border-color: #ef4444; }

/* --- Lista do que vem depois --- */
.run-list { margin-bottom: 18px; }
.run-list__title { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.run-list__title span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  margin-left: 6px; padding: 2px 6px; border-radius: 999px;
  background: var(--surface-soft); color: var(--ink); font-size: 12px;
}

.run-stops { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.run-stop {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
}
.run-stop--delivered { background: #f0fdf4; border-color: #bbf7d0; }
.run-stop--failed { background: #fef2f2; border-color: #fecaca; }

.run-stop__number {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-soft); color: var(--muted); font-size: 13px; font-weight: 900;
}
.run-stop--delivered .run-stop__number { background: #dcfce7; color: #166534; }
.run-stop--failed .run-stop__number { background: var(--red-soft); color: #991b1b; }

.run-stop__body { flex: 1; min-width: 0; }
.run-stop__body strong { display: block; font-size: 14px; }
.run-stop__address, .run-stop__order { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.run-stop__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.run-stop__tools select { min-height: 32px; font-size: 12px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 10px; }

.run-stop__side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.run-stop__side .icon-button { color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 8px; }
.run-stop__side .icon-button:hover { color: var(--ink); }

/* --- Concluídas: recolhidas, porque não servem mais para dirigir --- */
.run-done { margin-bottom: 18px; }
.run-done > summary {
  list-style: none; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); font-size: 14px; font-weight: 800; color: var(--muted);
}
.run-done > summary::-webkit-details-marker { display: none; }
/* Sem seta, nada indica que o bloco abre — o marcador nativo foi escondido. */
.run-done > summary::after { content: '  ▾'; }
.run-done[open] > summary::after { content: '  ▴'; }
.run-done[open] > summary { margin-bottom: 8px; }

/* --- Estados de tela inteira --- */
.run-empty, .run-finished {
  text-align: center; padding: 40px 24px;
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 18px;
  margin-bottom: 18px;
}
.run-empty__icon, .run-finished span { display: block; font-size: 44px; margin-bottom: 10px; }
.run-empty h2, .run-finished h2 { font-size: 18px; margin: 0 0 6px; }
.run-empty p, .run-finished p { color: var(--muted); font-size: 14px; margin: 0 auto 16px; max-width: 460px; }
.run-finished { background: #f0fdf4; border-color: #bbf7d0; border-style: solid; }
.run-finished p { margin-bottom: 0; }

/* --- Ponto de partida: define a ordem das paradas --- */
.run-origin { margin-bottom: 16px; }

.run-origin__form, .run-origin__set {
  border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 14px 16px; background: var(--surface);
}
.run-origin__form label { display: block; font-size: 14px; font-weight: 800; }
.run-origin__hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 4px 0 12px; }
.run-origin__row { display: flex; gap: 8px; margin-bottom: 10px; }
.run-origin__row input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-soft);
}
.run-origin__row input:focus { outline: none; border-color: var(--primary); background: #fff; }
.run-origin__form .field-note { display: block; margin-top: 8px; }

.run-origin__set { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.run-origin__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-origin__label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.run-origin__info strong { font-size: 14.5px; overflow-wrap: anywhere; }
.run-origin__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .run-origin__row { flex-direction: column; }
  .run-origin__row .button, .run-origin__actions .button, .run-origin__actions form { width: 100%; }
  .run-origin__actions { flex-direction: column; align-items: stretch; }
}

/* --- Folha do roteiro para o papel (route_sheet.php) --- */
.sheet-body { margin: 0; background: var(--bg); color: #111827; }

.sheet-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}

.route-sheet { width: 210mm; max-width: 100%; margin: 18px auto; background: #fff; padding: 12mm; }

.route-sheet__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 10px; border-bottom: 2px solid #17365d;
}
.route-sheet__head h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.route-sheet__head p { margin: 2px 0 0; color: #4b5563; font-size: 13px; }
.route-sheet__store { text-align: right; font-size: 12px; line-height: 1.4; }
.route-sheet__store strong { display: block; font-size: 13px; }

.route-sheet__origin { margin: 12px 0 0; font-size: 13px; }
.route-sheet__summary { margin: 6px 0 14px; font-size: 13px; color: #4b5563; }
.route-sheet__empty { margin: 24px 0; color: #6b7280; font-size: 14px; }

.route-sheet__list { list-style: none; margin: 0; padding: 0; }
.route-sheet__stop {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #e5e7eb;
  /* Uma parada nunca parte no meio ao virar a página. */
  break-inside: avoid; page-break-inside: avoid;
}
.route-sheet__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #17365d; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.route-sheet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.route-sheet__name { font-size: 14px; }
.route-sheet__tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border: 1px solid #17365d; border-radius: 999px;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.route-sheet__address { font-size: 12.5px; color: #1f2937; overflow-wrap: anywhere; }
.route-sheet__meta { font-size: 12px; color: #6b7280; }
.route-sheet__check { flex: none; width: 20px; height: 20px; border: 1.5px solid #9ca3af; border-radius: 4px; margin-top: 3px; }

.route-sheet__notes { margin-top: 18px; break-inside: avoid; page-break-inside: avoid; }
.route-sheet__notes strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: 10px; }
.route-sheet__notes span { display: block; border-bottom: 1px solid #d1d5db; height: 22px; }

.route-sheet__foot { margin-top: 18px; padding-top: 8px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 11px; text-align: center; }

@media print {
  .sheet-body { background: #fff; }
  .sheet-toolbar { display: none !important; }
  .route-sheet { width: auto; margin: 0; padding: 0; }
  .route-sheet__num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 12mm; }
}

/* --- Montar roteiro: recolhido enquanto o dia está em andamento --- */
.run-build > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px;
  background: var(--surface);
}
.run-build > summary::-webkit-details-marker { display: none; }
.run-build > summary span { font-size: 15px; font-weight: 800; }
.run-build > summary small { color: var(--muted); font-size: 13px; }
.run-build[open] > summary { border-radius: 16px 16px 0 0; border-bottom: 0; }

/* Uma caixa só para o conteúdo aberto: dentro dela vão as duas listas (as
 * entregas de pedido e as visitas sem pedido), separadas por divisórias. */
.run-build[open] > .run-build__body {
  border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 16px 16px;
  padding: 16px; background: #fff;
}
.run-build__empty { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.run-build__hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.run-build__hint a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* A primeira divisória não precisa do respiro de cima: já está colada no topo
 * da caixa. */
.section-divider.run-build__first { margin-top: 0; }

.run-build__search { margin-bottom: 12px; }
.run-build__search input {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-soft);
}
.run-build__search input:focus { outline: none; border-color: var(--primary); background: #fff; }

.run-picklist li[hidden] { display: none; }

/* Selo da parada de visita: o que diferencia dela para uma entrega na lista. */
.run-tag {
  display: inline-block; align-self: flex-start;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
}
.run-tag--visit { background: var(--blue-soft); color: var(--primary-ink); }

.run-picklist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.run-picklist label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.run-picklist label:hover { border-color: var(--primary); }
.run-picklist input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.run-picklist__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-picklist__text strong { font-size: 14px; }
.run-picklist__text small { color: var(--muted); font-size: 12.5px; }

@media (min-width: 700px) {
  .run-next__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.status-pill.pending { background: #fef3c7; color: #92400e; }
.status-pill.delivered { background: #dcfce7; color: #166534; }
.status-pill.failed { background: var(--red-soft); color: #991b1b; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(28px);
  opacity: 0;
  pointer-events: none;
  background: #111827;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  z-index: 50;
  transition: .22s;
  max-width: calc(100vw - 28px);
  text-align: center;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Confirmação de "foi pro carrinho": verde, curta e discreta. */
.toast--success {
  background: var(--green);
  padding: 9px 16px;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .3);
}

/* Documento profissional */
.quote-body { margin: 0; background: #eef2f7; color: #071321; font-family: Arial, Helvetica, sans-serif; }
.quote-page { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; padding: 9mm; }
.quote-sheet { width: 100%; border: 2px solid #17365d; border-radius: 3px; overflow: hidden; background: #fff; }

.quote-top { display: grid; grid-template-columns: 1fr 128px 138px; border-bottom: 1px solid #17365d; }
.quote-sheet { --pdf-font-size: 9px; --pdf-items-font-size: 9px; }
.quote-title { padding: 7px 9px; font-size: calc(var(--pdf-font-size) * 1.56); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; border-right: 1px solid #17365d; }
.quote-number, .quote-date { min-height: 32px; border-right: 1px solid #17365d; display: grid; grid-template-rows: auto 1fr; }
.quote-date { border-right: 0; }
.quote-number small, .quote-date small { display: block; padding: 4px 6px 0; color: #0f2f57; font-size: calc(var(--pdf-font-size) * .89); text-transform: uppercase; font-weight: 900; }
.quote-number strong { color: #e11d48; font-size: calc(var(--pdf-font-size) * 1.11); line-height: 1.15; padding: 0 6px 4px; align-self: center; overflow-wrap: anywhere; }
.quote-date strong { color: #111827; font-size: calc(var(--pdf-font-size) * 1.11); line-height: 1.15; padding: 0 6px 4px; align-self: center; }

.quote-header-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #17365d; }
.quote-company, .quote-client { min-height: 104px; padding: 8px 10px; }
.quote-company { border-right: 1px solid #17365d; }
.quote-company small, .quote-client small { display: block; color: #0f2f57; font-size: calc(var(--pdf-font-size) * .89); text-transform: uppercase; font-weight: 900; margin-bottom: 4px; }
.quote-company h1 { margin: 0 0 6px; font-size: calc(var(--pdf-font-size) * 1.85); line-height: 1.15; text-transform: uppercase; }
.quote-company p { margin: 3px 0; font-size: calc(var(--pdf-font-size) * 1.45); line-height: 1.3; }

.quote-client-row { display: grid; grid-template-columns: 112px 1fr; gap: 5px; margin-bottom: 4px; align-items: end; }
.quote-label { font-weight: 900; font-size: calc(var(--pdf-font-size) * 1.11); }
.quote-line { display: block; min-height: 14px; border-bottom: 1px solid #17365d; font-size: calc(var(--pdf-font-size) * 1.11); font-weight: 700; padding-left: 2px; }

.quote-section-title { background: #eaf0f7; border-bottom: 1px solid #17365d; padding: 6px 8px; color: #0f2f57; font-size: calc(var(--pdf-font-size) * 1.11); text-transform: uppercase; font-weight: 900; }

.quote-minihead { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; padding: 9px 10px; background: #eaf0f7; border-bottom: 2px solid #17365d; text-align: left; }
.quote-minihead .quote-client-row { grid-template-columns: 116px 1fr; margin-bottom: 4px; }
.quote-minihead .quote-label { color: #0f2f57; text-transform: uppercase; font-weight: 900; font-size: calc(var(--pdf-font-size) * 1.11); }
.quote-minihead .quote-line { min-height: 18px; border-bottom: 1px solid #17365d; font-size: calc(var(--pdf-font-size) * 1.45); font-weight: 900; text-transform: none; }

/* Faixa repetida no topo de cada folha: so o vendedor. Vive no <thead> porque so o
   cabecalho da tabela repete a cada pagina impressa. Altura fixa: .quote-table sobe
   exatamente --repeat-head-h para que ela fique atras do cabecalho da primeira folha. */
.quote-sheet { --repeat-head-h: 30px; }
.quote-table .quote-head-row th { padding: 0; border-right: 0; background: transparent; }
.quote-minihead--repeat { box-sizing: border-box; height: var(--repeat-head-h); overflow: hidden; grid-template-columns: minmax(0, 360px); align-items: center; gap: 0; padding: 0 10px; border-bottom: 1px solid #17365d; }
.quote-minihead--repeat .quote-client-row { margin-bottom: 0; align-items: center; }
.quote-minihead--repeat .quote-line { min-height: 0; border-bottom: 0; }

.quote-minihead--first { position: relative; z-index: 1; }
.quote-table--repeat-head { position: relative; z-index: 0; margin-top: calc(-1 * var(--repeat-head-h)); }

/* Marca d'agua de folha. Mesma tecnica do vendedor: o carimbo --first aparece so na
   1a folha; o --repeat vive no thead (repete a cada pagina) e na 1a folha fica escondido
   atras do bloco --first, opaco. Assim "1a FOLHA" sai so na primeira e "2a FOLHA" nas demais. */
.sheet-mark { position: absolute; top: 2px; right: 6px; pointer-events: none; white-space: nowrap;
  font-size: calc(var(--pdf-font-size) * .95); font-weight: 900; letter-spacing: .04em; line-height: 1;
  text-transform: uppercase; color: rgba(23, 54, 93, .55); }
.quote-minihead--repeat { position: relative; }
.quote-minihead--repeat .sheet-mark { top: 50%; transform: translateY(-50%); }

/* Campo editavel do cliente: parece a mesma linha do resto, mas da pra digitar. */
.quote-line--input { box-sizing: border-box; width: 100%; padding: 0 2px; background: transparent;
  border: 0; border-bottom: 1px solid #17365d; border-radius: 0; color: #0f2f57; outline: none; font: inherit; }
.quote-line--input::placeholder { color: #9bb0cc; font-weight: 400; }

.quote-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--pdf-font-size); }
.quote-table th { background: #dfe8f3; color: #0f2f57; text-transform: uppercase; font-size: calc(var(--pdf-font-size) * .89); padding: 6px 4px; border-right: 1px solid #17365d; border-bottom: 1px solid #17365d; line-height: 1.15; }
.quote-table th:last-child { border-right: 0; }
.quote-table tbody td { font-size: var(--pdf-items-font-size); }
.quote-table td { min-height: 25px; padding: 6px 4px; border-right: 1px solid #17365d; border-bottom: 1px solid #17365d; line-height: 1.25; vertical-align: middle; }
.quote-table td:last-child { border-right: 0; }
.quote-table .quote-group-sep td { background: #eaf0f7; height: 10px; padding: 0; border-right: 0; }
.quote-table .quote-category-row td { background: #eaf0f7; color: #0f2f57; font-weight: 900; text-transform: uppercase; font-size: calc(var(--pdf-font-size) * .89); padding: 5px 6px; border-right: 0; }
.quote-table .quote-page-total .label { background: #17365d; color: #fff; font-weight: 900; text-transform: uppercase; text-align: right; font-size: calc(var(--pdf-font-size) * 1.11); height: 26px; }
.quote-table .quote-page-total .value { background: #fff; }
.quote-table .center { text-align: center; }
.quote-table .right { text-align: right; }
.quote-table .desc { overflow-wrap: anywhere; }

.quote-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 225px; border-bottom: 1px solid #17365d; }
.quote-bottom--notes-only { grid-template-columns: minmax(0, 1fr); }
.quote-bottom--notes-only .quote-bottom-left { min-height: 72px; border-right: 0; }
.quote-bottom-left { min-height: 126px; border-right: 1px solid #17365d; }
.quote-payment { padding: 8px; min-height: 54px; border-bottom: 1px solid #d0d7e2; }
.quote-payment strong, .quote-notes strong { display: block; font-size: var(--pdf-font-size); text-transform: uppercase; color: #0f2f57; margin-bottom: 5px; }
.quote-payment p { margin: 0; font-size: calc(var(--pdf-font-size) * 1.11); }
.quote-notes { padding: 8px; min-height: 72px; }
.quote-notes p {
  margin: 0;
  /* Observação digitada sem espaço nenhum (um texto colado, uma sequência de
     letras repetidas) não pode empurrar a caixa pra fora da folha — quebra
     no meio da palavra se precisar, em vez de vazar a borda impressa. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.quote-note-line { height: 14px; border-bottom: 1px solid #111827; }

.quote-pix-note {
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--pix-note-font-size, calc(var(--pdf-font-size) * 1.22));
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}
.quote-pix-note strong {
  /* Sem isto, o "PAGAMENTO VIA PIX" herdava o tamanho pequeno de
     .quote-notes strong (a regra de "Observações"/"Forma de pagamento"),
     ficando menor que o resto do aviso — aqui ele acompanha o mesmo
     tamanho configurado em Configurações. Também herdava margin-bottom:5px
     daquela mesma regra, que somada à quebra de linha do bloco criava um
     espaço grande demais antes da chave — reduzido aqui. */
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.quote-totals { width: 100%; border-collapse: collapse; font-size: var(--pdf-font-size); }
.quote-totals td { min-height: 30px; padding: 7px 8px; border-bottom: 1px solid #17365d; }
.quote-totals tr:last-child td { border-bottom: 0; }
.quote-totals .label { background: #f8fafc; color: #0f2f57; font-weight: 900; text-transform: uppercase; text-align: right; }
.quote-totals .value { width: 94px; text-align: right; font-weight: 900; }
.quote-totals .grand-label, .quote-totals .grand-value { background: #17365d; color: #fff; font-size: calc(var(--pdf-font-size) * 1.33); text-transform: uppercase; }
.quote-validity { text-align: center; font-size: calc(var(--pdf-font-size) * .89); color: #475467; padding: 8px 6px; }

.quote-footer { display: grid; grid-template-columns: 1fr 1fr; min-height: 68px; padding: 20px 34px 8px; gap: 34px; }
.quote-sign { align-self: end; border-top: 1px solid #111827; text-align: center; font-size: calc(var(--pdf-font-size) * .89); color: #475467; padding-top: 5px; }
.separation-caption { padding: 6px 8px; background: #fff; border-bottom: 1px solid #17365d; font-size: var(--pdf-font-size); font-weight: 700; }

/* Rodape com uma assinatura so (comanda do cliente): a linha nao pode esticar
   a folha inteira, senao vira um tracinho perdido no meio do papel. */
.quote-footer--single { grid-template-columns: minmax(0, 300px); justify-content: end; padding-right: 34px; }

/* Dados ja impressos: rotulo pequeno em cima, valor em destaque embaixo. Sem a
   linha pontilhada de preencher, que so faz sentido em folha em branco. */
.quote-data { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.quote-data__row { min-width: 0; }
.quote-data dt { color: #5b6b80; font-size: calc(var(--pdf-font-size) * .89); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }
.quote-data dd { margin: 1px 0 0; color: #111827; font-size: calc(var(--pdf-font-size) * 1.22); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
/* Nome do cliente no mesmo tamanho do nome da loja: sao os dois nomes da
   folha, um de cada lado, e devem ter o mesmo peso. */
.quote-data__strong { font-size: calc(var(--pdf-font-size) * 2.3) !important; font-weight: 900 !important; line-height: 1.12; }

/* Nome do cliente ocupa a linha inteira: e o dado mais lido da folha. */
.quote-data__row:first-child { grid-column: 1 / -1; }

/* Segunda via: existe so no papel. */
.quote-copy { display: none; }

@media print {
  .quote-sheet, .quote-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .quote-body { background: #fff; }
  .quote-line--input::placeholder { color: transparent; }
  .quote-page { width: auto; min-height: auto; margin: 0; padding: 0; }
  @page { size: A4; margin: 8mm; }

  .no-print,
  .quote-actions,
  .admin-topbar,
  .admin-sidebar,
  .admin-nav-backdrop,
  button {
    display: none !important;
  }

  .quote-table thead { display: table-header-group; }
  .quote-table tfoot { display: table-footer-group; }
  /* A linha nunca parte ao meio, mas o bloco pode continuar na folha seguinte:
     senao o bloco inteiro desceria e deixaria um vao no fim da pagina. */
  .quote-table tr { break-inside: avoid; }
  .quote-table tbody { orphans: 2; widows: 2; }
  .quote-table .quote-group-sep { break-after: avoid; }
  .quote-table .quote-category-row { break-after: avoid; }

  /* A 2a via entra aqui e sempre começando folha nova. */
  .quote-copy { display: block; break-before: page; page-break-before: always; }
}

@media (max-width: 1180px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .orders-workspace { grid-template-columns: 330px minmax(0, 1fr); }
  .metrics-grid, .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit-item__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet (768-1024px): menu lateral admin recolhido em off-canvas para aproveitar a largura */
@media (max-width: 1024px) {
  .client-layout, .orders-workspace { grid-template-columns: 1fr; }
  .checkout-column { position: static; }

  .admin-topbar { padding: 0 16px; }
  .admin-menu-toggle { display: grid; place-items: center; }

  .admin-shell { display: block; }
  .admin-content { padding: 18px; }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 82vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 90;
  }

  body.admin-nav-open .admin-sidebar { transform: translateX(0); }

  .admin-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  body.admin-nav-open .admin-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.admin-nav-open { overflow: hidden; }
}

@media (max-width: 767px) {
  .app-shell { padding-inline: 14px; }
  .client-topbar__inner { height: auto; min-height: 70px; padding-block: 12px; flex-direction: column; align-items: stretch; }
  .cart-pill { width: 100%; justify-content: space-between; }
  .client-hero { grid-template-columns: 1fr; border-radius: 22px; padding: 24px; }
  .client-hero h1 { font-size: 31px; }
  .filter-card, .form-grid { grid-template-columns: 1fr; }
  .field--span2 { grid-column: 1; }
  .products-grid, .metrics-grid, .detail-grid, .detail-form-grid, .edit-item__grid, .document-actions { grid-template-columns: 1fr; }
  .detail-box--wide { grid-column: 1; }
  .product-bottom, .cart-line__bottom, .total-strip, .edit-item__top { flex-direction: column; align-items: stretch; }
  .add-button, .remove-item { width: 100%; }
  .admin-content { padding: 14px; padding-bottom: 84px; }
  .admin-header { flex-direction: column; }
  .admin-header > a, .admin-header > .button { width: 100%; text-align: center; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; justify-content: center; text-align: center; }
  /* Empilhado, o `flex: 1 1 240px` do campo de busca passa a valer como
     ALTURA (o basis segue o eixo principal) e o input virava uma caixa de
     240px. Trava a altura e desliga o crescimento. */
  .search-bar { flex-direction: column; }
  .search-bar input, .search-bar select, .search-bar button { width: 100%; }
  .search-bar input[type="search"] { flex: 0 0 auto; height: 46px; }

  /* Barra de navegação inferior (padrão mobile de apps) */
  .admin-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
    z-index: 75;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .admin-bottom-nav a, .admin-bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; color: var(--muted); font-size: 10px; font-weight: 800;
    padding: 6px 1px; border-radius: 12px;
    line-height: 1.2; text-align: center;
  }
  .admin-bottom-nav a span, .admin-bottom-nav button span { display: flex; }
  .admin-bottom-nav a.active { color: var(--primary); background: var(--primary-soft); }

  /* Sobe o aviso acima da barra fixa: no rodapé ele ficava atrás dela. */
  .toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* Tabelas administrativas viram cards empilhados no celular */
  .admin-table--cards thead { display: none; }
  .admin-table--cards, .admin-table--cards tbody, .admin-table--cards tr, .admin-table--cards td { display: block; width: 100%; }
  .admin-table--cards tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
  }
  .admin-table--cards td {
    border-bottom: 1px dashed var(--line);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  .admin-table--cards td:last-child { border-bottom: 0; }
  .admin-table--cards td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
  }
}



/* Carrinho lateral/modal */
body.cart-open {
  overflow: hidden;
}

/* Catálogo público: uma coluna só, sem a divisão antiga em "catálogo +
   checkout" lado a lado — o carrinho vira o painel deslizante abaixo, aberto
   só quando a pessoa clica. */
.client-layout--catalog-only {
  grid-template-columns: 1fr !important;
}

.client-layout--catalog-only .catalog-column {
  width: 100% !important;
}

.client-layout--catalog-only .checkout-column {
  display: none !important;
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.cart-drawer.open {
  pointer-events: auto;
  visibility: visible;
}

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .52);
  opacity: 0;
  transition: opacity .2s ease;
}

.cart-drawer.open .cart-backdrop {
  opacity: 1;
}

.cart-panel {
  position: relative;
  width: min(480px, calc(100vw - 18px));
  height: 100vh;
  overflow: auto;
  background: #f8fafc;
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 50px rgba(15, 23, 42, .22);
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
  transform: translateX(105%);
  transition: transform .24s ease;
}

.cart-drawer.open .cart-panel {
  transform: translateX(0);
}

.cart-panel__header {
  position: sticky;
  top: -18px;
  z-index: 2;
  background: rgba(248, 250, 252, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  margin: -18px -18px 0;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.cart-panel__header h2 {
  margin: 0;
}

.cart-panel__close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.cart-panel__section {
  box-shadow: none;
}

@media (max-width: 1180px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-layout--catalog-only {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .cart-panel {
    width: 100vw;
    padding: 14px;
  }

  .cart-panel__header {
    margin: -14px -14px 0;
    padding: 14px;
  }
}

.product-media { cursor: zoom-in; }
.product-media img { object-fit: contain; background: #fff; }

/* Lightbox de imagem do produto */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}

.image-lightbox.open {
  pointer-events: auto;
  visibility: visible;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, .82);
  opacity: 0;
  transition: opacity .2s ease;
}

.image-lightbox.open .image-lightbox__backdrop {
  opacity: 1;
}

.image-lightbox__box {
  position: relative;
  width: min(720px, 92vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  place-items: center;
  transform: scale(.94);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.image-lightbox.open .image-lightbox__box {
  transform: scale(1);
  opacity: 1;
}

.image-lightbox__box img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.image-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 767px) {
  .image-lightbox__box {
    width: 94vw;
    padding: 10px;
    border-radius: 16px;
  }

  .image-lightbox__close {
    top: 8px;
    right: 8px;
  }
}

/* Nova venda (admin): cart sempre visível ao lado do catálogo em telas maiores */
.new-order-layout .checkout-column { display: grid; }

@media (max-width: 1024px) {
  .new-order-layout { grid-template-columns: 1fr; }
  .new-order-layout .checkout-column { position: static; }
}

/* Toolbar do catálogo: favoritos, ordenação, grade/lista */
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.toolbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.toolbar-chip.active {
  background: var(--red-soft);
  color: var(--red);
  border-color: #fecaca;
}

.toolbar-row__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sort-field { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.sort-field select { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 10px; background: #fff; color: var(--ink); }

.view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; }
.view-toggle button { width: 40px; height: 40px; background: #fff; color: var(--muted); font-size: 16px; }
.view-toggle button.active { background: var(--primary); color: #fff; }

.product-media { position: relative; }
.favorite-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--muted-2);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.favorite-button.is-favorite { color: var(--red); }
.favorite-button.is-favorite .icon { fill: currentColor; }

.products-grid--list { grid-template-columns: 1fr !important; }
.products-grid--list .product-card { flex-direction: row; }
.products-grid--list .product-media { width: 130px; height: auto; flex: 0 0 130px; border-bottom: 0; border-right: 1px solid var(--line); }
.products-grid--list .product-content { flex: 1; }

@media (max-width: 767px) {
  .toolbar-row { gap: 10px; }
  .toolbar-row__right { width: 100%; justify-content: space-between; }
  .products-grid--list .product-media { width: 92px; flex-basis: 92px; }
}

/* Prévia da imagem atual no formulário de produto */
.pf-current-image {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pf-current-image img {
  height: 90px;
  width: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e4e7ec;
  background: #f2f4f7;
}
.pf-remove-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* Miniatura de foto na lista de produtos */
.prod-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  display: inline-block;
  vertical-align: middle;
}
.prod-thumb--empty {
  display: inline-grid;
  place-items: center;
  background: #f2f4f7;
  color: #98a2b3;
  font-size: 20px;
}
.img-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.img-flag--missing {
  background: #fef3f2;
  color: #d92d20;
}

/* ---- Carrinho da Nova venda (admin) ----
   O painel deslizante e o mesmo da loja (.cart-drawer). A diferenca esta no
   gatilho: no celular o botao do carrinho sai do topo e vira flutuante logo
   acima da barra de abas, para ficar ao alcance do polegar enquanto se rola
   o catalogo. z-index 76 fica acima da .admin-bottom-nav (75) e bem abaixo
   do drawer, que sobe para 9999 quando abre. */
.admin-header .cart-pill {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

@media (max-width: 767px) {
  .admin-header .cart-pill {
    position: fixed;
    /* width/justify-content anulam o `.cart-pill { width: 100% }` do mobile,
       que existe para a barra da loja e aqui esticaria o botao flutuante. */
    width: auto;
    left: auto;
    justify-content: center;
    right: 14px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 76;
    height: 52px;
    padding: 0 18px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .34);
  }

  /* Com o botao flutuante, o rotulo escrito vira ruido. */
  .admin-header .cart-pill span { display: none; }

  body.cart-open .admin-header .cart-pill { display: none; }
}

/* ---- Catalogo da Nova venda (admin) ----
   No balcao o nome do produto e o que se procura com o olho, muitas vezes de
   longe e no meio do atendimento. Aumenta so no admin: a loja do cliente
   continua com a hierarquia dela, onde a foto e que puxa a atencao. */
.admin-content .product-content h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.admin-content .products-grid--list .product-content h3 {
  font-size: 24px;
}

@media (max-width: 767px) {
  .admin-content .product-content h3,
  .admin-content .products-grid--list .product-content h3 {
    font-size: 19px;
  }
}

/* ==========================================================================
   Carrinho — acabamento visual (loja e balcao usam o mesmo painel)

   O total e o "Prosseguir" saem do fim da rolagem e viram um rodape colado
   na base do painel (.cart-footer). No celular o painel passa a ser uma tela
   inteira de app: cabecalho fixo, lista rolando no meio, rodape fixo embaixo.
   ========================================================================== */

.cart-footer[hidden] { display: none; }

.cart-footer {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

.total-strip--footer {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.cart-step__cta { margin-top: 0; }

/* Cartao do item: fundo branco sobre o painel cinza, para o item ter corpo
   proprio em vez de se dissolver no fundo. */
.cart-line {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cart-line:hover { border-color: var(--line-strong); }

.cart-line__top { align-items: flex-start; }

.cart-line__title {
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.cart-line__meta { font-weight: 600; }

/* Miniatura do produto no carrinho: pequena, so para conferir de relance que o
   item certo entrou. Clicar abre a imagem grande. */
.cart-line__thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  cursor: pointer;
}

.cart-line__thumb--empty {
  display: grid;
  place-items: center;
  color: var(--muted-2);
  cursor: default;
}
.cart-line__thumb--empty .icon { width: 20px; height: 20px; }

.cart-line__total {
  font-size: 17px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* O "x" vermelho grande competia com o preco. Vira um botao discreto que so
   fica vermelho quando o dedo/mouse encosta. */
.icon-button--remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: -4px -4px 0 0;
  border-radius: 999px;
  color: var(--muted-2);
  font-size: 19px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}

.icon-button--remove:hover,
.icon-button--remove:focus-visible {
  background: var(--red-soft);
  color: var(--red);
}

/* Atalhos de quantidade em uma linha unica que desliza no dedo: quebrando em
   duas fileiras eles dobravam a altura de cada item da lista. */
.qty-presets {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.qty-presets::-webkit-scrollbar { display: none; }
.qty-presets .qty-preset { flex: 0 0 auto; }
.qty-modal .qty-presets { border-top: 0; padding-top: 0; margin-top: 0; flex-wrap: wrap; }

.cart-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--surface-soft);
  text-align: center;
}

@media (max-width: 767px) {
  /* Painel em tela cheia: cabecalho / lista rolando / rodape fixo. 100dvh
     acompanha a barra do navegador do celular, que 100vh ignora. */
  .cart-panel {
    width: 100vw;
    height: 100dvh;
    padding: 0;
    gap: 0;
    background: #fff;
    border-left: 0;
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .cart-panel__header {
    position: static;
    margin: 0;
    padding: 14px 16px;
    align-items: center;
    background: #fff;
  }

  .cart-panel__header h2 { font-size: 21px; letter-spacing: -.02em; }

  .cart-panel__close {
    width: 36px;
    height: 36px;
    font-size: 22px;
    background: var(--surface-soft);
    color: var(--ink);
  }

  .cart-panel__section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-y: auto;
  }

  /* O `display: flex` acima e regra de autor e ganha do `[hidden]` do
     navegador: sem isto a etapa 1 continua na tela por tras da etapa 2. */
  .cart-panel__section[hidden] { display: none; }

  /* A etapa 1 nao rola inteira: quem rola e a lista, para o rodape ficar. */
  #cartStepItems { overflow: hidden; }

  .cart-panel__section > .panel-head,
  .cart-panel__section > .cart-selectbar,
  .cart-panel__section > .total-strip,
  .cart-panel__section > .stack-form { margin-inline: 16px; }

  .cart-panel__section > .panel-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  /* O titulo do painel ja diz onde se esta; repetir "Carrinho" logo abaixo so
     empurra a lista para baixo. Fica a etapa, que informa. */
  #cartStepItems > .panel-head h2 { display: none; }

  /* Fundo cinza atras dos cartoes brancos: sem isso, com o painel branco, o
     item so se distinguia pela borda de 1px. */
  #cartContent {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
    background: var(--surface-soft);
    border-block: 1px solid var(--line);
  }

  .cart-list { max-height: none; overflow: visible; padding-right: 0; }

  .cart-footer {
    margin-top: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .07);
  }

  .cart-footer .total-strip { flex-direction: row; align-items: center; }
  .cart-footer .total-strip strong { font-size: 24px; }
  .cart-step__cta { min-height: 52px; font-size: 16px; }

  /* Quantidade e preco continuam lado a lado: empilhados (regra geral do
     mobile) o item ficava com o dobro da altura e o preco solto. */
  .cart-line__bottom { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  .quantity-stepper { flex: 0 0 auto; }
  .quantity-stepper button { width: 40px; height: 40px; font-size: 18px; }
  .quantity-stepper input { width: 56px; height: 40px; }

  .cart-panel__section > .stack-form { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Catálogos salvos no celular ----
   Aqui se escolhe qual catálogo abrir para imprimir/salvar em PDF, entao
   "Abrir" ganha a largura toda e as acoes de manutencao (renomear, excluir)
   descem para uma linha secundaria em vez de disputar espaco com ele. */
@media (max-width: 767px) {
  .catalog-cards { grid-template-columns: 1fr; gap: 12px; }

  .catalog-card-item__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .catalog-card-item__foot > .button {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    font-size: 15px;
    order: -1;
  }

  .catalog-card-item__foot form { width: 100%; }
  .catalog-card-item__rename { min-width: 0; }
  .catalog-card-item__rename input { min-width: 0; }
}

/* =========================================================================
   Compartilhar catálogo (QR Code)
   ========================================================================= */

.share-off p { color: var(--muted); font-size: 14px; margin: 6px 0 16px; }

.share-panel { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }

.share-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.share-qr svg { width: 100%; height: auto; max-width: 300px; }
.share-qr strong { font-size: 15px; margin-top: 8px; }
.share-qr span { color: var(--muted); font-size: 12px; }

.share-info {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.share-info h2 { font-size: 16px; margin: 0 0 12px; }

.share-link { display: flex; gap: 8px; }
.share-link input {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-soft);
  font-size: 13px;
}

.share-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 900px) {
  .share-panel { grid-template-columns: minmax(0, 1fr); }
}

/* Mandar em PDF: os três passos (gerar, abrir a conversa, anexar). */
.share-pdf { margin-top: 20px; }
.share-pdf h2 { font-size: 16px; margin: 0 0 4px; }
.share-pdf .button small { font-weight: 600; opacity: .75; }

.share-steps { counter-reset: share-step; list-style: none; margin: 18px 0 0; padding: 0; }
.share-steps li {
  counter-increment: share-step;
  position: relative;
  padding: 0 0 20px 42px;
  border-left: 2px solid var(--line);
  margin-left: 13px;
}
.share-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.share-steps li::before {
  content: counter(share-step);
  position: absolute; left: -14px; top: -2px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-soft); border: 1px solid var(--line);
  font-size: 13px; font-weight: 900;
}
.share-steps strong { display: block; font-size: 14px; }
.share-steps span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.share-steps .share-link { max-width: 420px; margin-top: 12px; }

/* Impressão do QR: sai só o cartão, do tamanho de um adesivo de balcão. */
@media print {
  body.printing-qr .admin-topbar,
  body.printing-qr .admin-sidebar,
  body.printing-qr .admin-bottom-nav,
  body.printing-qr .admin-header,
  body.printing-qr .share-info,
  body.printing-qr .share-pdf,
  body.printing-qr .alert { display: none !important; }

  body.printing-qr .share-panel { display: block; }
  body.printing-qr .share-qr { border: none; padding: 0; }
}

/* =========================================================================
   Catálogo público (o que abre pelo QR Code) — nunca mostra preço
   =========================================================================
   Quem chega aqui apontou a câmera para um QR: está em pé, no celular, e não
   pediu nada além de "me mostra o que vocês têm". Então a página abre com uma
   capa da marca, entrega busca e categorias grudadas no topo, e mantém o
   WhatsApp sempre a um toque. */

.pub-body { background: var(--surface-soft); min-height: 100vh; padding-bottom: 84px; }

/* Dificulta selecionar/arrastar no computador. Não impede print de tela:
   nenhuma página de navegador consegue — ver o comentário no catalogo.php. */
.pub-body--protected,
.pub-body--protected img {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Imprimir pelo menu do navegador não leva o catálogo junto. */
@media print {
  .pub-body--protected .pub-main,
  .pub-body--protected .pub-cover,
  .pub-body--protected .pub-filters,
  .pub-body--protected .pub-footer,
  .pub-body--protected .pub-cta { display: none !important; }
}

.pub-shield {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; text-align: center; padding: 24px;
}
.pub-shield[hidden] { display: none; }
.pub-shield strong { display: block; font-size: 20px; }
.pub-shield span { display: block; font-size: 14px; opacity: .85; margin-top: 8px; }

/* --- Capa --- */
.pub-cover {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 52vh; padding: 26px 22px 32px;
  background: linear-gradient(160deg, #1e4a7d 0%, var(--primary) 55%, #0f2748 100%);
  color: #fff;
  overflow: hidden;
}

/* Brilho diagonal discreto: dá profundidade sem virar enfeite. */
.pub-cover::after {
  content: '';
  position: absolute; top: -30%; right: -25%;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.pub-cover > * { position: relative; z-index: 1; }

.pub-cover__brand { display: flex; align-items: center; gap: 10px; }
.pub-cover__mark { width: 38px; flex: none; }
.pub-cover__mark svg { width: 100%; height: auto; }
.pub-cover__store { font-size: 15px; font-weight: 800; letter-spacing: .01em; }

.pub-cover__eyebrow {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.pub-cover__title h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
.pub-cover__title p { margin: 12px 0 0; font-size: 15px; opacity: .82; font-weight: 600; }

.pub-cover__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pub-cover__foot .button { background: #fff; color: var(--primary); border-color: #fff; min-height: 50px; padding: 0 24px; font-size: 15px; }
.pub-cover__hint { font-size: 13px; opacity: .8; }

/* --- Busca e categorias, grudadas no topo ao rolar --- */
.pub-filters {
  position: sticky; top: 0; z-index: 40;
  padding: 12px 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.pub-search { position: relative; display: flex; align-items: center; }
.pub-search > span { position: absolute; left: 14px; font-size: 15px; opacity: .55; pointer-events: none; }
.pub-search input {
  width: 100%; min-height: 46px;
  padding: 0 42px 0 40px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-soft); color: var(--ink); font-size: 15px;
  outline: none;
}
.pub-search input:focus { border-color: var(--primary); background: #fff; }
.pub-search input::-webkit-search-cancel-button { display: none; }
.pub-search button {
  position: absolute; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--line); color: var(--ink); font-size: 13px; font-weight: 900; cursor: pointer;
}

.pub-chips { display: flex; gap: 7px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pub-chips::-webkit-scrollbar { display: none; }
.pub-chip {
  flex: none; min-height: 34px; padding: 0 15px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--muted);
  font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.pub-chip:hover { border-color: var(--primary); color: var(--primary); }
.pub-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Conteúdo --- */
.pub-main { padding: 20px 16px 40px; max-width: 1180px; margin: 0 auto; }

.pub-count { margin: 0 0 16px; color: var(--muted); font-size: 13px; font-weight: 700; }

.pub-category { margin-bottom: 32px; }
.pub-category[hidden] { display: none; }
.pub-category__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; margin: 0 0 14px; letter-spacing: -.01em;
}
.pub-category__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pub-category__title span {
  order: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 800;
}

.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

.pub-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub-card[hidden] { display: none; }
.pub-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 10px 26px rgba(15, 23, 42, .10); }

/* flex: none é o que garante a foto sempre quadrada. Sem isso o cartão (que é
   um flex column esticado pela grade) encolhe a área da imagem para compensar
   nomes de duas linhas, e as fotos saem de tamanhos diferentes na mesma
   fileira. Quem estica é o corpo do cartão, embaixo. */
.pub-card__image {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* min-height: 0 é obrigatório aqui. Sem ele o "tamanho mínimo automático"
     do flex deixa a foto (que é retrato, 720x900) esticar a caixa, o
     aspect-ratio é ignorado e cada cartão da fileira fica com a imagem de um
     tamanho. overflow evita qualquer sobra. */
  min-height: 0;
  overflow: hidden;
}
.pub-card__image img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.pub-card__placeholder { width: 44%; color: var(--line); }
.pub-card__placeholder svg { width: 100%; height: auto; }

.pub-card__body { flex: 1; padding: 12px 13px 14px; }

/* Nome preso em duas linhas: mantém todos os cartões da fileira com a mesma
   altura, que é o que faz a grade parecer alinhada em vez de remendada. */
.pub-card__body h3 {
  font-size: 13.5px; line-height: 1.35; margin: 0; font-weight: 800;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(13.5px * 1.35 * 2);
}
.pub-card__unit { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }

.pub-noresult { text-align: center; padding: 50px 24px; }
.pub-noresult span { display: block; font-size: 42px; margin-bottom: 12px; }
.pub-noresult h2 { font-size: 18px; margin: 0 0 6px; }
.pub-noresult p { color: var(--muted); font-size: 14px; margin: 0; }

/* --- Rodapé --- */
.pub-footer {
  padding: 34px 20px 40px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--line);
}
.pub-footer__mark { width: 40px; margin: 0 auto 10px; color: var(--primary); }
.pub-footer__mark svg { width: 100%; height: auto; }
.pub-footer strong { display: block; font-size: 16px; }
.pub-footer p { color: var(--muted); font-size: 13.5px; margin: 8px auto 18px; max-width: 380px; line-height: 1.5; }

/* Barra fixa: o WhatsApp nunca fica a mais de um toque de distância. */
.pub-cta {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; border-radius: 999px;
  background: #128c7e; color: #fff;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 10px 26px rgba(18, 140, 126, .34);
}
.pub-cta span { font-size: 18px; }
.pub-cta:hover { opacity: .94; }

.pub-empty { padding: 70px 24px; text-align: center; }
.pub-empty__mark { width: 52px; margin: 0 auto 16px; color: var(--primary); }
.pub-empty__mark svg { width: 100%; height: auto; }
.pub-empty h1, .pub-empty h2 { font-size: 21px; margin: 0 0 8px; }
.pub-empty p { color: var(--muted); font-size: 14.5px; margin: 0 auto 20px; max-width: 380px; line-height: 1.55; }

/* --- Auto-cadastro do cliente (cadastro.php) ---
 *
 * Mesma linguagem visual da capa do catálogo: faixa azul com o degradê e o
 * brilho diagonal da marca, e o conteúdo num cartão branco que sobe por cima
 * dela. Nada de cor nova — só as variáveis do sistema. */
/* A faixa é curta e larga, ao contrário da capa do catálogo, que ocupa meia
 * tela. O mesmo degradê de lá termina quase preto e, espremido nesta altura,
 * vira uma tarja escura atravessada. Aqui ele fecha no azul profundo da paleta
 * (--primary-ink), que continua da família e não faz sombra dura. */
.pub-signup-head {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #2f6ac4 0%, var(--primary) 45%, var(--primary-ink) 100%);
  color: #fff; padding: 26px 22px 74px;
}
.pub-signup-head::after {
  content: '';
  position: absolute; top: -45%; right: -20%;
  width: 75%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.pub-signup-head > * { position: relative; z-index: 1; }

.pub-signup-head__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.pub-signup-head__mark { width: 36px; flex: none; }
.pub-signup-head__mark svg { width: 100%; height: auto; }
.pub-signup-head__store { font-size: 15px; font-weight: 800; }

.pub-signup-head__eyebrow {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.pub-signup-head h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.12; margin: 0; letter-spacing: -.02em; }
.pub-signup-head p { font-size: 14.5px; line-height: 1.55; margin: 12px 0 0; max-width: 460px; opacity: .84; font-weight: 600; }

/* Página inteira em coluna: com pouco conteúdo (a tela de "cadastro recebido")
 * o rodapé desce para o fim da tela em vez de flutuar no meio do vazio. */
.pub-body--signup { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0; }
.pub-body--signup .pub-signup { flex: 1 0 auto; }
.pub-body--signup .pub-signup-foot { margin-top: auto; }

/* Sobe sobre a faixa azul: o formulário é o assunto da página.
 *
 * O z-index não é enfeite: a faixa acima tem position:relative (por causa do
 * brilho em ::after), e elemento posicionado pinta por cima de elemento sem
 * posição — mesmo vindo antes no HTML. Sem isto o cartão sobe, mas fica
 * ESCONDIDO atrás da faixa, e o que aparece na tela é uma tarja escura no lugar
 * do topo arredondado do cartão. */
.pub-signup { position: relative; z-index: 1; padding: 0 16px 40px; margin-top: -46px; }
.pub-signup .alert { max-width: 620px; margin: 0 auto 14px; }
.pub-signup__card {
  max-width: 620px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px 24px;
  box-shadow: var(--shadow);
}

/* Título de bloco com o número do passo: dá ordem ao formulário sem enfeite. */
.pub-signup__step { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
/* A linha separadora só entre um passo e o seguinte. Um ":not(:first-child)"
 * aqui pegaria o passo 1 também, porque antes dele vêm o campo do token e a
 * armadilha de spam — invisíveis na tela, mas irmãos no HTML. */
.pub-signup__step ~ .pub-signup__step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pub-signup__step-num {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink);
  font-size: 13px; font-weight: 900;
}
.pub-signup__step h2 { font-size: 15px; font-weight: 900; margin: 0; letter-spacing: -.01em; }
.pub-signup__step span.pub-signup__optional {
  margin-left: auto; flex: none;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-soft); border: 1px solid var(--line);
  color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}

.pub-signup__legal {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 0; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.pub-signup__legal span { flex: none; }

.pub-signup__card .form-actions { margin-top: 22px; }
.pub-signup__card .form-actions .button { width: 100%; min-height: 52px; font-size: 15px; }

.pub-signup__done { text-align: center; padding: 34px 22px 30px; }
.pub-signup__check {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--green-soft); color: var(--green);
  font-size: 30px; font-weight: 900;
  box-shadow: 0 0 0 8px rgba(22, 163, 74, .07);
}
.pub-signup__done h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.pub-signup__done p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 auto 22px; max-width: 400px; }

.pub-signup-foot { text-align: center; padding: 4px 22px 36px; color: var(--muted); font-size: 12.5px; }
.pub-signup-foot strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }

/* Armadilha de spam: fora da tela, mas ainda no formulário para o robô achar. */
.pub-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 760px) {
  .pub-signup-head { padding: 34px 40px 86px; }
  .pub-signup { padding: 0 40px 56px; margin-top: -56px; }
  .pub-signup__card { padding: 28px 30px 30px; }
  .pub-signup__card .form-actions { display: flex; justify-content: center; }
  .pub-signup__card .form-actions .button { width: auto; min-width: 260px; }
}

@media (min-width: 760px) {
  .pub-cover { min-height: 380px; padding: 34px 40px 40px; }
  .pub-filters { padding: 14px 40px; }
  .pub-main { padding: 28px 40px 48px; }
  .pub-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

  /* No computador a barra fixa vira um botão discreto no canto. */
  .pub-cta { left: auto; right: 28px; bottom: 28px; padding: 0 22px; }
  .pub-body { padding-bottom: 0; }
}


/* =============================================================================
   UNIDADES (branches) — seletor da venda, cadastro do produto e etiquetas.
   ============================================================================= */

/* Etapa 1 da nova venda. Cobre a tela inteira de propósito: enquanto a unidade
   não for escolhida não existe catálogo, menu nem carrinho na tela — a escolha
   é a única coisa possível, e por isso não passa despercebida. */
.branch-picker {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg);
}

.branch-picker__card {
  width: min(760px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 36px 24px;
}

/* Enquanto a etapa 1 está aberta a página de trás não rola. */
body.branch-locked { overflow: hidden; }

/* A barra de abas do celular continua por cima da etapa 1: sem ela, quem abriu
   a venda por engano ficaria preso na pergunta, sem caminho para Pedidos ou
   Clientes. */
body.branch-locked .admin-bottom-nav { z-index: 600; }

@media (max-width: 767px) {
  .branch-picker { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Trava de venda em andamento ----
   Com itens no carrinho o menu fica com cara de desativado (e o clique cai no
   aviso, pelo JS). Nao usamos pointer-events: none aqui de proposito — sem
   clique nao haveria como explicar o motivo, e o toque pareceria a tela travada
   por defeito. */
body.sale-locked .admin-bottom-nav a:not(.active),
body.sale-locked .admin-nav a:not(.active) {
  opacity: .42;
  cursor: not-allowed;
}

.sale-guard {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 22px;
}

.sale-guard__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(16, 24, 40, .55);
  backdrop-filter: blur(2px);
  border: 0;
}

.sale-guard__box {
  position: relative;
  width: min(430px, 100%);
  background: var(--surface);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 28px 24px 22px;
  text-align: center;
}

.sale-guard__mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--primary-soft);
  font-size: 26px;
}

.sale-guard__box h3 { margin: 6px 0 8px; font-size: 1.28rem; letter-spacing: -.02em; }
.sale-guard__box > p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.sale-guard__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 12px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 800;
}

.sale-guard__summary span { color: var(--muted); font-size: .88rem; }
.sale-guard__summary strong { font-size: 1.1rem; letter-spacing: -.02em; }

.sale-guard__actions { display: grid; gap: 10px; }
.sale-guard__actions .button { width: 100%; justify-content: center; }

.sale-guard__discard { color: var(--red); }
.sale-guard__discard:hover { border-color: var(--red); background: var(--red-soft); }

.sale-guard__note {
  margin: 14px 0 0;
  color: var(--muted-2);
  font-size: .78rem;
  line-height: 1.45;
}

body.sale-guard-open { overflow: hidden; }

.branch-picker__head { text-align: center; margin-bottom: 24px; }
.branch-picker__head h2 { margin: 6px 0 8px; font-size: 1.45rem; }
.branch-picker__head p { margin: 0; color: var(--muted); font-size: .92rem; }

.branch-picker__options {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

.branch-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.branch-card:hover,
.branch-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .14);
  transform: translateY(-1px);
}

.branch-card__mark {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
}

.branch-card__body { flex: 1; min-width: 0; }
.branch-card__body strong { display: block; font-size: 1.08rem; }
.branch-card__body small { color: var(--muted); font-size: .84rem; }
.branch-card__arrow { color: var(--primary); font-size: 1.3rem; }

/* Barra da unidade ativa: fica visível durante toda a venda. */
.branch-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-bottom: 18px;
  background: var(--primary-soft);
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 14px;
}

.branch-active__info { display: flex; align-items: center; gap: 12px; }
.branch-active__info strong { display: block; font-size: 1.05rem; color: var(--primary-ink); }

.branch-active__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .16);
}

.catalog-branch-tag { font-size: .78rem; font-weight: 600; color: var(--primary); }
.catalog-branch-tag:not(:empty)::before { content: "· "; color: var(--muted-2); }

/* Unidade repetida na etapa de finalização: última conferência antes de gravar. */
.checkout-branch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--primary-soft);
  border-radius: 12px;
  font-size: .9rem;
}

.checkout-branch span { color: var(--muted); }
.checkout-branch strong { color: var(--primary-ink); }

/* Etiqueta da unidade nas tabelas de pedido. */
.branch-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.detail-box--branch strong { color: var(--primary-ink); }

/* Carregando o catálogo da unidade. */
.catalog-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .branch-card { transition: none; }
}

/* ---- Preço/estoque por unidade no formulário do produto ---- */
.branch-stock {
  margin: 24px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.branch-stock__head h2 { margin: 4px 0 6px; font-size: 1.15rem; }
.branch-stock__head p { margin: 0 0 16px; color: var(--muted); font-size: .88rem; }

.branch-stock__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.branch-stock__card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 6px;
  margin: 0;
  background: var(--surface-soft);
  transition: border-color .15s, background .15s;
}

/* Unidade ligada ganha destaque: dá para ver de relance onde o produto vende. */
.branch-stock__card.is-on {
  border-color: rgba(37, 99, 235, .34);
  background: var(--surface);
}

.branch-stock__card legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 1rem;
}

.branch-stock__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: .7rem;
  font-weight: 600;
  vertical-align: middle;
}

.branch-stock__tag--off { background: var(--red-soft); color: var(--red); }

.branch-stock__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  cursor: pointer;
}

.branch-stock__toggle input { width: 18px; height: 18px; accent-color: var(--primary); }

.branch-stock__fields {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

/* ---- Coluna "preço e estoque por unidade" na lista de produtos ---- */
.branch-cell { display: grid; gap: 6px; }

.branch-cell__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .88rem;
}

.branch-cell__row--off { opacity: .55; }

.branch-cell__tag {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.branch-cell__stock { color: var(--muted); }
.branch-cell__off { color: var(--muted-2); font-style: italic; }


/* =============================================================================
   PAINEL DE VENDAS (dashboard.php)
   ============================================================================= */

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 18px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.dash-filters__group { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.dash-filters__group label { font-size: .8rem; font-weight: 600; color: var(--muted); }

.dash-filters__group input,
.dash-filters__group select {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  width: 100%;
}

.dash-filters__actions { display: flex; gap: 8px; flex: 0 0 auto; }

.dash-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: 20px;
}

.dash-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* O faturamento é o número que a pessoa abriu a tela para ver. */
.dash-card--primary {
  background: linear-gradient(135deg, #1d4ed8, #17365d);
  border-color: transparent;
  color: #fff;
}

.dash-card--primary .dash-card__label,
.dash-card--primary .dash-card__foot { color: rgba(255, 255, 255, .78); }

.dash-card__label { font-size: .82rem; font-weight: 600; color: var(--muted); }

.dash-card__value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  /* Valor grande em tela estreita não pode empurrar a página para o lado. */
  overflow-wrap: anywhere;
}

.dash-card__foot { font-size: .76rem; color: var(--muted-2); }

.dash-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

/* Cor + seta: quem não distingue verde de vermelho lê a direção pelo símbolo. */
.dash-trend--up { background: rgba(255, 255, 255, .16); color: #d6f5e2; }
.dash-trend--down { background: rgba(255, 255, 255, .16); color: #ffd9d9; }
.dash-trend--flat { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }

.dash-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}

.dash-panel { margin-bottom: 16px; }

.empty-state--dash { padding: 32px 20px; text-align: center; }
.empty-state--dash p { color: var(--muted); margin: 8px 0 16px; }

/* ---- Gráfico de barras do faturamento diário (só CSS, sem biblioteca) ---- */
.chart-wrap { overflow-x: auto; }

.chart {
  display: flex;
  gap: 12px;
  min-height: 220px;
  min-width: 100%;
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 26px;
  font-size: .72rem;
  color: var(--muted-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.chart-bar {
  flex: 1 1 0;
  min-width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.chart-bar__track {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: flex-end;
  background: var(--surface-soft);
  border-radius: 6px 6px 0 0;
}

.chart-bar__fill {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-radius: 6px 6px 0 0;
  transition: height .3s ease;
}

.chart-bar__fill--empty { background: var(--line); }

.chart-bar__label {
  font-size: .68rem;
  color: var(--muted-2);
  white-space: nowrap;
}

.chart-bar__label--hidden { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .chart-bar__fill { transition: none; }
}

/* ---- Vendas por unidade ---- */
.branch-bars { display: grid; gap: 18px; }

.branch-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.branch-bar__head strong { font-size: .96rem; }
.branch-bar__head span { font-weight: 700; color: var(--primary-ink); }

.branch-bar__track {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.branch-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width .3s ease;
}

.branch-bar small { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .branch-bar__fill { transition: none; }
}

.rank-pill {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 800;
  font-size: .82rem;
}

/* Tabela larga rola dentro do próprio quadro; a página nunca rola de lado. */
.table-scroll { overflow-x: auto; }

@media (min-width: 720px) {
  .branch-picker__options { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .branch-stock__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .branch-stock__fields { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .dash-grid { grid-template-columns: 1.6fr 1fr; }
}

/* Fora da vista, mas ainda no documento: continua alcançável pelo Tab e lido
   pelo leitor de tela. Usado no botão de enviar do filtro do painel, que só
   entra em ação quando o JavaScript não roda. `display:none` não serviria —
   tiraria o botão da navegação por teclado junto. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O "Mês atual" fica alinhado com os campos, não com os rótulos acima deles. */
.dash-filters__group--reset { justify-content: flex-end; flex: 0 0 auto; }
.dash-filters__group--reset .button { white-space: nowrap; }

/* -----------------------------------------------------------------------------
   PAINEL NO CELULAR

   O painel é consultado no balcão, no telefone, entre um atendimento e outro.
   Vale o mesmo corte de 767px que o resto do admin já usa.
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Filtros empilhados e de largura cheia. Sem botão "Aplicar" no caminho: o
     próprio campo recarrega ao mudar. */
  .dash-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .dash-filters__group { flex: 1 1 auto; width: 100%; }
  .dash-filters__group--reset .button { width: 100%; text-align: center; }

  /* Campo de data/seleção com altura de alvo de toque confortável. */
  .dash-filters__group input,
  .dash-filters__group select { height: 46px; }

  /* Um cartão por linha: dois lado a lado espremem o valor a ponto de
     "R$ 12.345,67" quebrar no meio. */
  .dash-cards { grid-template-columns: 1fr; gap: 12px; }
  .dash-card { padding: 16px; }
  .dash-card__value { font-size: 1.6rem; }

  /* Título e ação do quadro empilham em vez de disputar a mesma linha. */
  .dash-panel .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dash-panel .panel-head .button { width: 100%; text-align: center; }

  /* Gráfico: barras mais estreitas e mais baixas cabem mais dias antes de
     precisar rolar. O que passar disso rola na horizontal, dentro do quadro —
     a página em si nunca rola de lado. */
  .chart { gap: 8px; min-height: 170px; }
  .chart-bar { min-width: 11px; }
  .chart-bar__track { height: 130px; }
  .chart-bar__label { font-size: .62rem; }
  .chart-axis { font-size: .66rem; padding-bottom: 22px; }

  /* Aviso de que o gráfico rola. Só aparece no celular, onde a barra de rolagem
     não fica visível o tempo todo e a informação some sem o usuário perceber. */
  .chart-wrap::after {
    content: "← arraste para ver o mês inteiro →";
    display: block;
    padding-top: 8px;
    font-size: .7rem;
    color: var(--muted-2);
    text-align: center;
  }

  /* Ranking e vendas recentes viram cartões (regra .admin-table--cards já
     existente). O .table-scroll perde o overflow para o cartão não ficar preso
     numa caixa rolável dentro de outra. */
  .table-scroll { overflow-x: visible; }

  /* Etiqueta da unidade e posição do ranking no formato cartão. */
  .rank-pill { width: 24px; height: 24px; font-size: .76rem; }

  /* Barras de comparação por unidade: o valor desce para baixo do nome quando
     os dois não cabem lado a lado. */
  .branch-bar__head { flex-wrap: wrap; gap: 2px; }
}

/* Telefone estreito (iPhone SE e similares). */
@media (max-width: 380px) {
  .dash-card__value { font-size: 1.42rem; }
  .dash-trend { font-size: .76rem; }
  .chart-bar { min-width: 9px; }
}

/* Item de grid/flex tem `min-width: auto` por padrão, o que significa "nunca
   fique menor que meu conteúdo". Com o gráfico de 31 barras dentro, o quadro
   empurrava a coluna inteira e a PÁGINA passava a rolar de lado no celular —
   o gráfico rolava junto com o cabeçalho e os cartões. Zerar o min-width
   devolve o controle ao contêiner: o quadro respeita a tela e só o gráfico
   rola, dentro do próprio .chart-wrap. */
.dash-grid > *,
.dash-panel,
.chart-wrap { min-width: 0; }

/* Barra de "disponibilizar em lote" na lista de Produtos. Fica logo abaixo da
   barra de seleção e aparece junto com ela. */
.branch-bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -6px;
}

.branch-bulk__label { font-size: .82rem; font-weight: 600; color: var(--muted); }

.branch-bulk__select {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 600;
}

@media (max-width: 767px) {
  .branch-bulk { flex-direction: column; align-items: stretch; }
  .branch-bulk__select { width: 100%; }
  .branch-bulk .cart-selectbar__actions { flex-direction: column; }
  .branch-bulk .cart-selectbar__actions .button { width: 100%; }
}


/* =============================================================================
   VARIAÇÕES DE PRODUTO (cor) — cadastro e venda
   ============================================================================= */

/* ---- Editor de cores no formulário do produto ---- */

.variant-editor { display: grid; gap: 10px; }

.variant-editor__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.variant-editor__color input[type="color"] {
  width: 42px;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.variant-editor__name { flex: 1 1 180px; min-width: 140px; }
.variant-editor__stock { flex: 0 0 116px; }
.variant-editor__photo { flex: 1 1 210px; min-width: 190px; }
.variant-editor__row .field { margin: 0; }

/* ---- Foto de cada cor no cadastro ---- */

.variant-photo { display: flex; align-items: center; gap: 10px; }

.variant-photo__thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #fff;
}

/* Cor sem foto própria: o traço avisa que ela usa a foto do produto. */
.variant-photo__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--muted);
  font-weight: 800;
}

.variant-photo__controls { flex: 1; min-width: 0; }
.variant-photo__controls input[type="file"] { width: 100%; font-size: 12px; }

.variant-photo__remove {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.variant-editor__remove {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 38px;
}
.variant-editor__remove:hover { border-color: var(--red); color: var(--red); }

.variant-editor__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.variant-editor__hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* Campo que virou conta, não digitação. */
input.is-computed {
  background: #f1f5f9;
  color: var(--muted);
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .variant-editor__row { flex-wrap: wrap; }
  .variant-editor__name { flex: 1 1 100%; }
  .variant-editor__photo { flex: 1 1 100%; }
  .variant-editor__stock { flex: 1 1 calc(50% - 6px); }
}

/* ---- Chips de cor no catálogo da venda ---- */

.variant-row { display: flex; flex-wrap: wrap; gap: 6px; }

.variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #111;
  cursor: pointer;
}
.variant-chip:hover:not(:disabled) { border-color: var(--green); }
.variant-chip:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

.variant-chip__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .22);
  flex: 0 0 14px;
}

.variant-chip__qty { color: var(--muted); font-weight: 800; font-size: 11px; }

/* A cor aberta na caixa. Precisa ser óbvia: é ela que manda no estoque, na foto
   e no que vai para a comanda. */
.variant-chip--on {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  background: #f0fdf4;
}
.variant-chip--on .variant-chip__qty { color: #047857; }

/* O misto: tracejado porque não é mercadoria, é um jeito de pedir. */
.variant-chip--mixed { border-style: dashed; }
.variant-chip--mixed .variant-chip__dot { border-style: solid; }

/* ---- A caixa de quantidade: foto + nome + cores ---- */

/* Só o nome das cores no cartão do catálogo. O cartão não decide nada: quem
   escolhe é a caixa de quantidade. */
.product-variants-note {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.qty-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.qty-modal__head-text { min-width: 0; }
.qty-modal__head-text h3 { margin: 0; }
.qty-modal__head-text .qty-modal__meta { margin: 3px 0 0; }

.qty-modal__thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qty-modal__thumb-empty { display: grid; place-items: center; opacity: .5; }
.qty-modal__thumb-empty .icon { width: 22px; height: 22px; }

/* ---- Passo da cor + a trava de preço/quantidade ---- */

/* A cor é o primeiro passo e precisa parecer um passo: cartão próprio, com o
   rótulo em cima, em vez de uma fileira solta de botões. */
.qty-modal__step {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px 14px;
  background: #fbfcfe;
}

.qty-modal__step-label,
.qty-modal__field-label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.qty-modal__field-label { margin-bottom: 0; text-align: center; }

.qty-modal__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.qty-modal__lock::before { content: '🔒'; font-size: 14px; }

/* display:flex acima vence o [hidden] do HTML — sem isto o aviso nunca some. */
.qty-modal__lock[hidden] { display: none; }

/* Botões de cor dentro da caixa: maiores que os do catálogo, porque aqui eles
   são a decisão da tela e o alvo do dedo no balcão. */
.qty-modal__step .variant-chip {
  padding: 9px 14px 9px 10px;
  font-size: 13px;
}

.qty-modal__step .variant-chip__dot { width: 16px; height: 16px; flex-basis: 16px; }

.qty-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .15s ease;
}

/* Travado: apagado e sem clique. Continua visível de propósito — o vendedor
   precisa ver que existe preço e quantidade esperando por ele. */
.qty-modal__box--locked .qty-modal__fields {
  opacity: .42;
  pointer-events: none;
  filter: grayscale(1);
}

/* Enquanto está travada, a caixa chama atenção para as cores. */
.qty-modal__box--locked .qty-modal__step {
  border-color: var(--green);
  background: #f0fdf4;
}

.qty-modal__box--locked .qty-modal__total strong { color: var(--muted); }

@media (max-width: 720px) {
  /* Com o teclado aberto sobra pouca tela: a foto encolhe mas não some — ela é
     a única confirmação visual de que a cor certa está selecionada. */
  .qty-modal__thumb { width: 52px; height: 52px; flex: 0 0 52px; }
}

/* ---- Divisão do misto dentro da caixa de quantidade ---- */

.split-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafafa;
  margin-top: 12px;
}

.split-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.split-box__head span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.split-box__auto {
  border: 0;
  background: none;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.split-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.split-line:last-child { margin-bottom: 0; }

.split-line__name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.split-line__stock { color: var(--muted); font-weight: 600; font-size: 11px; }

.split-line input {
  width: 68px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  font-size: 14px;
  font-weight: 800;
}

.split-warn { margin: 10px 0 0; font-size: 12px; color: #991b1b; font-weight: 700; }
.split-ok { margin: 10px 0 0; font-size: 12px; color: #047857; font-weight: 700; }

/* ---- A divisão no carrinho e no detalhe do pedido ---- */

.cart-item__variants,
.order-item__variants {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}