/* ===== VaultTCG — marca "Slate Pro" (ardósia + 1 azul elétrico) ===== */

/* Tema claro (padrão) */
:root {
  color-scheme: light;    /* UA/scrollbar nativa de fallback segue o tema (inclui PWA instalado) */
  --page: #F3F5F8;        /* Mist 50 — fundo do app (marca nova) */
  --surface: #FFFFFF;     /* branco: cards, header, modal */
  --surface2: #EDF1F6;    /* preenchimento sutil (placeholder de imagem) */
  --line: #E2E6ED;        /* Line — hairline (cartões separam por sombra; inputs por borda) */
  --line-soft: #EFF2F6;
  --ink: #0B1120;         /* Ink 950 — títulos/texto principal */
  --ink2: #3A475F;        /* Neutro 600 — corpo */
  --muted: #5B667A;       /* Slate 500 — secundário (5,9:1 no branco) */
  --accent: #1F5FE0;      /* Blue 600 — ação, link, foco (marca nova) */
  --accent-hover: #1747B0;/* Blue 800 */
  --accent-soft: #EAF1FF; /* Blue 50 */
  --success: #15803D;     /* Pago */
  --success-dot: #22C55E;
  --foil: #F2B632;        /* Brass 400 — ouro (raridade/destaque) */
  --danger: #C62828;      /* Vencido */
  --avisado: #6D3FD6;     /* Avisado — cobrança enviada (marca nova) */
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 2px 5px rgba(16,24,40,.06);
  --shadow-pop: 0 6px 16px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --warning: #B45309;     /* Atenção — estoque baixo */
  --ring: 0 0 0 3px var(--accent-soft);   /* anel de foco padrão dos controles */
  --r-sm: .5rem; --r-md: .7rem; --r-lg: 1.1rem; --r-pill: 999px;   /* escala de raio */

  /* ===== Identidade v2 (design-reference/tokens.css) — vocabulário oficial da marca =====
     Aditivo: os tokens acima (--accent/--page/--ink…) seguem valendo e já apontam p/ estes valores
     (v242). As telas do redesenho referenciam os nomes --vt-*; não renomear. */
  --vt-ink-950: #0B1120;   --vt-ink-800: #1B2438;   --vt-ink-600: #3A475F;
  --vt-slate-500: #5B667A; --vt-slate-300: #A9B2C1; --vt-line: #E2E6ED;
  --vt-mist: #F3F5F8;      --vt-white: #FFFFFF;
  --vt-blue-800: #1747B0;  --vt-blue-600: #1F5FE0;  --vt-blue-500: #2F6BFF;
  --vt-blue-400: #4F83FF;  --vt-blue-100: #DCE6FF;  --vt-blue-50: #EAF1FF;
  --vt-gold-400: #F2B632;
  --vt-success: #15803D;   --vt-danger: #C62828;    --vt-warning: #B45309;  --vt-notified: #6D3FD6;
  /* Condição da carta = rampa de qualidade da Liga (verde→vermelho conforme piora); espelha COND_COR do app.js.
     SP/MP escurecidos p/ contraste AA de texto branco. NÃO usar azul aqui (azul é ação, não qualidade). */
  --vt-cond-nm: #16A34A;   --vt-cond-sp: #4D7C0F;   --vt-cond-mp: #A16207;
  --vt-cond-hp: #EA580C;   --vt-cond-d: #EF4444;
  /* fontes da marca (título de modal, ⌘K, toasts usam estes tokens) */
  --vt-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --vt-font-body: "Manrope", system-ui, sans-serif;
  --vt-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --vt-radius-sm: 8px; --vt-radius-md: 12px; --vt-radius-lg: 16px; --vt-radius-xl: 24px;
  --vt-control-h: 44px;
  --vt-shadow-1: 0 1px 2px rgba(11,17,32,.06); --vt-shadow-2: 0 12px 32px rgba(11,17,32,.10);
  --vt-ease: cubic-bezier(.55,0,.25,1); --vt-loader-cycle: 2.8s;
  /* tokens da sidebar escura (menu lateral v2) */
  --vt-nav-bg: #0B1120; --vt-nav-item: #C9D0DC; --vt-nav-icon: #8A94A7;
  --vt-nav-active-bg: #1B2438; --vt-nav-sec: #5B667A;

  /* Scrollbar (tema) — FINA e num AZUL-SLATE da marca (eco do azul do menu), sofisticada; cor sólida
     (sem color-mix) = melhor no Safari 12. Claro: azul-slate suave; escuro/menu: azul mais fundo. */
  --sb-size: 9px;             /* largura/altura da barra principal (o thumb ainda perde ~5px de borda) */
  --sb-size-thin: 7px;        /* barra fina dentro de menus/listas */
  --sb-track: transparent;
  --sb-thumb: #93A6CB;        /* azul-slate suave (echo do #4F83FF, mas discreto no fundo claro) */
  --sb-thumb-hover: #7389B4;
  --sb-thumb-active: #6E86B8;
}

/* Modo escuro (azul-tinta da marca nova — Ink 950/800; azul mais claro como acento) */
.dark {
  color-scheme: dark;
  /* Escada de tinta da MARCA (design-reference): menu #0B1120 < conteúdo #131B2E < cards #1B2438.
     #131B2E é o valor da referência (cartão "Caixa hoje" sobre o menu) — separa sidebar × conteúdo. */
  --page: #131B2E;        /* fundo do conteúdo — distinto do menu #0B1120, abaixo dos cards */
  --surface: #1B2438;     /* Neutro 800 — header, cards, modal */
  --surface2: #232E44;    /* preenchimento sutil */
  --line: #2A3550;        /* hairline 1px */
  --ink: #F3F5F8;         /* Mist — títulos */
  --ink2: #C7CEDA;
  --muted: #A9B2C1;       /* Slate 300 */
  --accent: #2F6BFF;      /* Blue 500 — acento no escuro */
  --accent-hover: #4F83FF;/* Blue 400 */
  --accent-soft: rgba(47, 107, 255, .18);
  --success: #22C55E;
  --success-dot: #22C55E;
  --foil: #F2B632;        /* Brass 400 */
  --danger: #F87171;
  --avisado: #A78BFA;     /* Avisado (claro no escuro) */
  --warning: #FBBF24;     /* âmbar de aviso mais claro no escuro */
  --shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* Scroll suave SÓ no desktop com mouse: no celular, o `smooth` transforma o auto-scroll do
   navegador (ao focar um input, subir o campo acima do teclado) numa ANIMAÇÃO lenta = "travadinha". */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) { html { scroll-behavior: smooth; } }
/* Tira a espera por double-tap/zoom no toque → resposta imediata ao tocar botões/campos no celular.
   (.drag-grip mantém touch-action:none pela regra própria, mais específica.) */
button, a, input, select, textarea, label, [role="button"], summary { touch-action: manipulation; }

/* Tipografia (marca nova): Manrope no corpo/números (tabular), Bricolage Grotesque
   em títulos/botões, JetBrains Mono em códigos (SKU, nº da carta, chave NF-e, txid). */
body {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-feature-settings: "tnum" 1;        /* algarismos tabulares por toda a UI */
  transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3, h4, h5, .font-display, button {
  font-family: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  letter-spacing: -.02em;                 /* display da marca respira apertado */
}
.tnum { font-variant-numeric: tabular-nums; }
/* Códigos monoespaçados (ligados por classe onde aparecem: SKU/nº/chave/txid) */
.mono, code, kbd, samp { font-family: "JetBrains Mono", ui-monospace, "Space Mono", monospace; }

/* Wordmark "VaultTCG" — Vault (ink) + TCG (azul de ação), Bricolage 800 */
.wordmark { font-family: "Bricolage Grotesque", "Outfit", sans-serif; letter-spacing: -.025em; }
.wordmark .w1 { font-weight: 800; color: var(--ink); }
.wordmark .w2 { font-weight: 800; color: var(--accent); }

/* ===== Scrollbar no tema — vale p/ navegador e p/ app instalado (standalone) =====
   Firefox e padrão CSS: scrollbar-width/color no <html>.
   Chrome/Edge/PWA desktop e WebView: regras ::-webkit-scrollbar abaixo. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-corner { background: var(--sb-track); }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid transparent;   /* moldura transparente => folga ao redor do thumb */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-active); background-clip: padding-box; }
/* modo escuro: thumb azul-slate mais fundo (eco do azul do menu no #0B1120) */
.dark { --sb-thumb: #3C5385; --sb-thumb-hover: #50699E; --sb-thumb-active: #50699E; }

i[class^="ph"], i[class*=" ph"] { line-height: 1; vertical-align: -0.125em; }
img { image-rendering: auto; }

/* Dropdown custom (modelo melhor, com cores por condição) */
/* max-width: um rótulo longo (ex.: lote "Aporte · Fulano · 2026-06-30") NÃO pode alargar o
   botão além do contêiner/tela do celular — o .lbl tem ellipsis, que só age com teto. */
.cselect { position: relative; display: inline-block; max-width: 100%; min-width: 0; }
.cselect-btn {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .62rem .85rem; font-family: "Manrope", sans-serif; font-size: .9rem; line-height: 1.25rem; font-weight: 500;
  cursor: pointer; outline: none; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.cselect-btn:hover { border-color: var(--accent); }
.cselect-btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.cselect.open .cselect-btn { border-color: var(--accent); box-shadow: var(--ring); }
.cselect-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-btn .car { margin-left: auto; color: var(--muted); transition: transform .15s; }
.cselect.open .cselect-btn .car { transform: rotate(180deg); }
.cselect-menu {
  position: absolute; z-index: 40; left: 0; min-width: 100%; margin-top: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: .85rem;
  box-shadow: var(--shadow); padding: .3rem; max-height: 17rem; overflow: auto;
  max-width: calc(100vw - 1rem);
}
.cselect-menu.align-right { left: auto; right: 0; }
/* Dentro de modal o menu NUNCA pode ser mais largo que o select (senão o corpo do modal ganha
   barra de rolagem HORIZONTAL — bug relatado 28/08). Opção longa quebra linha em vez de esticar. */
.modal .cselect-menu { max-width: 100%; box-sizing: border-box; }
.modal .cselect-opt { white-space: normal; word-break: break-word; }
.modal-scroll > .modal-body { overflow-x: hidden; }
/* Modal NUNCA rola na horizontal (28/08): o card corta o excesso, filhos de grid podem encolher
   (min-width:0 — sem isso um texto/select longo estica a coluna) e imagem/tabela cabem na largura. */
.modal-card { overflow-x: hidden; }
.modal-card .grid > *, .modal-card .flex > * { min-width: 0; }
.modal-card img, .modal-card table, .modal-card pre, .modal-card canvas { max-width: 100%; }
.modal-card .vt-inp, .modal-card .cselect { max-width: 100%; box-sizing: border-box; }
.modal-footer { flex-wrap: wrap; }              /* 3 botões no celular: quebra linha em vez de vazar */
.modal-footer > * { min-width: 0; }
/* Menu abre pra CIMA quando não cabe embaixo (ex.: select perto do fim de um modal) — evita corte. */
.cselect-menu.flip-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: .35rem; }
.cselect-opt {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  border-radius: .55rem; cursor: pointer; font-size: .9rem; white-space: nowrap; color: var(--ink);
}
.cselect-opt.cselect-oculto { display: none; }   /* filtro por display (sem re-parsear a lista a cada tecla) */
.cselect-opt:hover, .cselect-opt.is-active { background: var(--surface2); }
.cselect-opt.is-active { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.cselect-opt.is-sel { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.cdot { width: .62rem; height: .62rem; border-radius: 999px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.cflag { width: 1.05rem; height: .7rem; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: inline-block; vertical-align: middle; }


/* ============================================================
   Layout novo (Controle) — design system polido
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: Manrope, system-ui, sans-serif; }
/* Mata rolagem horizontal no mobile (sidebar off-canvas, grids largos). clip não quebra o topo sticky.
   Fallback `hidden` ANTES: Safari 12–15 não conhece `clip` e descartava a linha inteira —
   justamente o iPad-alvo ficava SEM a trava (o header lá é fixed, então hidden não quebra nada). */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
/* O fundo da página fica no <html> também, senão a área de overscroll/rubber-band
   (e o canvas além do conteúdo) aparece preto ao rolar com muitas cartas. */
html { background: var(--page); min-height: 100%; }
#main-wrap, main, .page { min-width: 0; max-width: 100%; }
body { overscroll-behavior-y: contain; }

/* Pull-to-refresh (arrastar pra baixo no app atualiza) */
#ptr { position: fixed; top: 10px; left: 50%; z-index: 60;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(15,23,42,.18);
  display: grid; place-items: center; color: var(--accent);
  opacity: 0; transform: translate(-50%, -60px); transition: opacity .12s; }
#ptr.show { opacity: 1; }
#ptr.ready { color: var(--success); }
#ptr.spin > i { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* Loader da marca = "PASSAR CARTA" (idêntico ao splash e ao quadro 06 do design "06 · Movimento"):
   4 versos da carta VaultTCG empilhados; sem parar, a carta do topo sai p/ a direita girando 18° e
   volta ao fundo do monte (como quem passa as cartas na mão). Ciclo 2,8s. Escala por font-size (em):
   ~15px em botão … ~44px no page-loader. Botão/espaço apertado usa 1 carta girando no eixo (.vt-flip).
   Compat Safari 12: só transform/opacity, sem inset shorthand, sem gap de flex, sem color-mix.
   Markup via vtLoad() no app.js (as cartas são o MESMO SVG do #splash). */
.vt-load { display: inline-flex; align-items: center; justify-content: center;
  font-size: 1em; line-height: 0; vertical-align: middle; }
/* deck com folga p/ a carta deslizar p/ a direita sem colidir com o texto ao lado (proporção 60:84) */
.vt-deck { position: relative; width: 1.95em; height: 1.5em; }
.vt-card { position: absolute; left: 0; top: .05em; width: 1.07em; height: 1.5em; transform-origin: 50% 90%;
  filter: drop-shadow(0 .08em .14em rgba(11,17,32,.35));
  animation: vt-passar 2.8s cubic-bezier(.55,0,.25,1) infinite; }
.vt-card svg { display: block; width: 100%; height: 100%; }
.vt-c1 { animation-delay: -.7s; } .vt-c2 { animation-delay: -1.4s; } .vt-c3 { animation-delay: -2.1s; }
/* a carta do topo (z:4) sai p/ a direita girando, cai atrás (z:0) e volta subindo o monte */
@keyframes vt-passar {
  0%   { transform: translate(0, 0) rotate(-2deg); z-index: 4; }
  11%  { transform: translate(92%, -14%) rotate(18deg); z-index: 4; }
  13%  { transform: translate(92%, -12%) rotate(18deg); z-index: 0; }
  25%  { transform: translate(-10%, 8%) rotate(-11deg); z-index: 1; }
  50%  { transform: translate(-7%, 5%) rotate(-8deg); z-index: 2; }
  75%  { transform: translate(-3.5%, 2.5%) rotate(-5deg); z-index: 3; }
  100% { transform: translate(0, 0) rotate(-2deg); z-index: 4; }
}
/* botão / espaço apertado: UMA carta só gira no eixo Y (como quem vira a carta p/ ver a frente) */
.vt-flip { display: inline-block; width: .72em; height: 1em; vertical-align: middle;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  animation: vt-virar 1.2s cubic-bezier(.6,0,.3,1) infinite; }
.vt-flip svg { display: block; width: 100%; height: 100%; }
@keyframes vt-virar {
  0%   { transform: perspective(200px) rotateY(0); }
  50%  { transform: perspective(200px) rotateY(180deg); }
  100% { transform: perspective(200px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* movimento reduzido: monte parado num leque leve + carta do botão sem girar (spec do design) */
  .vt-card, .vt-flip { animation: none; }
  .vt-c0 { transform: rotate(-6deg) translateX(-.06em); } .vt-c1 { transform: rotate(-2deg); }
  .vt-c2 { transform: rotate(2deg); } .vt-c3 { transform: rotate(6deg) translateX(.06em); }
}
/* Scrollbar fina dentro de menus / dropdowns / listas roláveis (fundo = surface) */
.cselect-menu, .navsub, #sidebar,
[class*="overflow-y-auto"], [class*="overflow-auto"], .vt-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
/* Momentum de rolagem no iOS 12 (iPad mini 3) p/ TODAS as áreas roláveis internas — inclusive
   as horizontais (abas do Financeiro, tabelas), que a regra acima não cobria. */
.cselect-menu, .navsub, #sidebar, .vt-scroll,
[class*="overflow-y-auto"], [class*="overflow-auto"], [class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
}
.cselect-menu::-webkit-scrollbar,
.navsub::-webkit-scrollbar,
#sidebar::-webkit-scrollbar,
[class*="overflow-y-auto"]::-webkit-scrollbar,
[class*="overflow-auto"]::-webkit-scrollbar,
.vt-scroll::-webkit-scrollbar { width: var(--sb-size-thin); height: var(--sb-size-thin); }
.cselect-menu::-webkit-scrollbar-thumb,
.navsub::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-auto"]::-webkit-scrollbar-thumb,
.vt-scroll::-webkit-scrollbar-thumb { border-width: 2px; }

/* ---- Inputs / selects ---- */
.vt-inp { width: 100%; border-radius: .7rem; background: var(--surface); border: 1px solid var(--line);
  padding: .62rem .85rem; font-size: .9rem; line-height: 1.25rem; color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.vt-inp::placeholder { color: var(--muted); opacity: .8; }
/* iOS/Safari dá ZOOM ao focar um input com font-size < 16px (o "PWA dando zoom" no celular).
   Em telas de TOQUE, os campos vão a 16px — some o zoom automático, sem tirar o pinch-zoom.
   `pointer: coarse` funciona no Safari 12 e cobre celular e iPad. */
@media (pointer: coarse) {
  .vt-inp, input, select, textarea { font-size: 16px; }
}
.vt-inp:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.vt-inp:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
select.vt-inp { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem; }
.lbl { font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--muted); display: block; text-transform: none; }

/* ---- Plano B de imagem: placeholder quando a carta não carrega (automático via onerror) ---- */
/* Placeholder de carta SEM imagem — vira ARTE tipográfica: nome grande + tom por jogo + monograma
   d'água. (Antes era um ícone cinza fraco que "esvaziava" a grade.) Tudo rgba → Safari 12 ok. */
.vt-img-ph { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  gap: .15rem; text-align: left; padding: .6rem .58rem .55rem; overflow: hidden; color: var(--ink);
  border: 1px solid var(--line);
  background:
    radial-gradient(130% 90% at 78% -8%, var(--ph-tint, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface2), var(--surface)); }
.vt-img-ph > i { position: absolute; top: -.35rem; right: -.35rem; margin: 0; font-size: 3.4rem;
  line-height: 1; opacity: .10; color: currentColor; pointer-events: none; }
.vt-ph-nome { font-family: var(--vt-font-display), system-ui, sans-serif; font-weight: 800; font-size: .95rem;
  line-height: 1.06; letter-spacing: -.01em; color: var(--ink); max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.vt-ph-num { font-size: .66rem; font-weight: 700; color: var(--muted); }
.vt-ph-ed  { font-size: .62rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ph-cond { align-self: flex-start; margin-top: .2rem; font-size: .58rem; font-weight: 800;
  padding: .05rem .34rem; border-radius: .35rem; color: #fff; background: var(--cond, var(--muted)); }
/* Tom por jogo (subtil, claro e escuro) */
.vt-img-ph[data-tcg="pokemon"]    { --ph-tint: rgba(245,158,11,.16); }
.vt-img-ph[data-tcg="magic"]      { --ph-tint: rgba(161,98,7,.18); }
.vt-img-ph[data-tcg="yugioh"]     { --ph-tint: rgba(124,58,237,.16); }
.vt-img-ph[data-tcg="onepiece"]   { --ph-tint: rgba(220,38,38,.15); }
.vt-img-ph[data-tcg="lorcana"]    { --ph-tint: rgba(14,165,233,.15); }
.vt-img-ph[data-tcg="digimon"]    { --ph-tint: rgba(37,99,235,.15); }
.vt-img-ph[data-tcg="dragonball"] { --ph-tint: rgba(234,88,12,.16); }
.vt-img-ph[data-tcg="riftbound"]  { --ph-tint: rgba(5,150,105,.15); }
/* Miniaturas pequenas: só um ícone central discreto (sem a arte tipográfica) */
.vt-img-ph.w-6, .vt-img-ph.w-7, .vt-img-ph.w-8, .vt-img-ph.w-9, .vt-img-ph.w-11, .vt-img-ph.w-14 {
  display: grid; place-items: center; padding: 0; background: var(--surface2); }
.vt-img-ph.w-6 > span, .vt-img-ph.w-7 > span, .vt-img-ph.w-8 > span, .vt-img-ph.w-9 > span,
.vt-img-ph.w-11 > span, .vt-img-ph.w-14 > span { display: none; }
.vt-img-ph.w-6 > i, .vt-img-ph.w-7 > i, .vt-img-ph.w-8 > i, .vt-img-ph.w-9 > i,
.vt-img-ph.w-11 > i, .vt-img-ph.w-14 > i { position: static; font-size: 1rem; opacity: .45; margin: 0; }
.abs-ico { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sec-label { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem; }

/* Heading de seção "herói" (só nos títulos de dashboard de topo: Início/Financeiro) — badge de ícone da marca.
   Aditivo: não mexe no .sec-label base usado em modais/painéis densos. */
.sec-label.hero { font-family: var(--vt-font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; text-transform: none; color: var(--ink); gap: .6rem; }
.sec-label.hero > i:first-child { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent);
  font-size: 17px; flex: 0 0 auto; }
.sec-label.hero > span { letter-spacing: 0; }

/* ---- Sub-abas do Financeiro ---- */
.fin-tab { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .55rem .85rem; font-size: .88rem; font-weight: 600; color: var(--muted);
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
  transition: color .15s, border-color .15s; }
.fin-tab:hover { color: var(--ink2); }
.fin-tab.ativo { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Botões ---- */
.btn-accent { display: inline-flex; align-items: center; gap: .45rem; border-radius: .7rem;
  background: var(--accent); color: #fff; padding: .62rem 1rem; font-size: .9rem; font-weight: 600; line-height: 1.25rem;
  border: 1px solid var(--accent); transition: .15s; white-space: nowrap; box-shadow: 0 1px 2px rgba(15,23,42,.06); cursor: pointer; }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0); }
.btn-line { display: inline-flex; align-items: center; gap: .45rem; border-radius: .7rem;
  background: var(--surface); color: var(--ink2); padding: .62rem .9rem; font-size: .9rem; font-weight: 600; line-height: 1.25rem;
  border: 1px solid var(--line); transition: .15s; white-space: nowrap; cursor: pointer; }
.btn-line:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.icon-btn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2); transition: .15s; cursor: pointer; }
.icon-btn > i { line-height: 1; display: block; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---- Arrastar para reordenar (sortable, mouse + toque) ---- */
/* Alça de arrastar (reordenar) — chip DISCRETO no canto, no lugar da caixa preta agressiva.
   Translúcido (adapta claro/escuro), realça no hover do card e no próprio hover. Estilo único do site. */
.drag-grip { position: absolute; z-index: 20; width: 1.8rem; height: 1.8rem; display: inline-grid;
  place-items: center; border-radius: .55rem; font-size: .95rem; line-height: 1;
  background: rgba(255,255,255,.80); color: var(--muted); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,.14);
  touch-action: none; cursor: grab; opacity: .6;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
.dark .drag-grip { background: rgba(15,23,42,.70); }
.group:hover .drag-grip, .card-hover:hover .drag-grip { opacity: 1; }   /* card em hover → alça nítida */
.drag-grip:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
.drag-grip:active { cursor: grabbing; opacity: 1; color: var(--accent); }
/* Arraste direto por TOQUE LONGO (sem alça): feedback discreto de "peguei" e véu na carta arrastada.
   No uso normal o tile é arte pura; segurar ~0,3s (ou arrastar no mouse) inicia a reordenação. */
.sortable-liftcue { outline: 2px solid var(--accent); outline-offset: -2px; }
html.sortable-dragging, html.sortable-dragging * { cursor: grabbing !important; }
/* Arrasto mais suave (menos "salto"): elevação e escala contidas. */
.sortable-drag { box-shadow: 0 10px 26px rgba(15,23,42,.22) !important; transform: scale(1.02); opacity: .98; }
.sortable-ph { border: 2px dashed rgba(45,127,249,.55); border-radius: .9rem; background: var(--accent-soft);
  box-sizing: border-box; }

/* ===== Fichário / Binders — "álbum" com <details> (colapsa sem JS; Safari 12 ok) ===== */
.binder-card { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg, .9rem);
  background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color .15s ease, box-shadow .16s ease; }
.binder-card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-pop); }
.binder-summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: .8rem; padding: .7rem .85rem; padding-right: 5.2rem; }   /* respiro p/ as ações no canto */
.binder-summary::-webkit-details-marker { display: none; }
.binder-summary:hover { background: var(--surface2); }
.binder-capa { position: relative; width: 3.6rem; height: 3rem; flex: 0 0 auto; }
.binder-capa-img { position: absolute; top: 50%; margin-top: -1.47rem; left: calc(var(--k) * .95rem);
  width: 2.1rem; height: 2.94rem; object-fit: cover; border-radius: .28rem;
  border: 1.5px solid var(--surface); background: var(--surface2);
  box-shadow: 0 1px 3px rgba(15,23,42,.28);
  transform: rotate(calc((var(--k) - 1) * 5deg)); }
.vt-img-ph.binder-capa-img { display: grid; place-items: center; padding: 0; }
.vt-img-ph.binder-capa-img > span { display: none; }
.vt-img-ph.binder-capa-img > i { position: static; font-size: .8rem; opacity: .4; margin: 0; }
.binder-capa-vazia { display: grid; place-items: center; width: 3rem; height: 100%;
  border-radius: .45rem; background: var(--surface2); color: var(--muted); }
.binder-capa-vazia > i { font-size: 1.5rem; opacity: .5; }
.binder-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .28rem; }
.binder-nome { font-weight: 700; font-size: .95rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binder-count { align-self: flex-start; background: var(--accent-soft); color: var(--accent); }
.binder-caret { color: var(--muted); flex: 0 0 auto; transition: transform .18s ease; }
.binder-card[open] .binder-caret { transform: rotate(180deg); }
.binder-acoes { position: absolute; top: .55rem; right: .6rem; z-index: 5; display: flex; gap: .3rem; }
.icon-btn--sm { width: 2rem; height: 2rem; }
/* No dedo, 32px colados (Renomear ao lado de Excluir, sobre o summary clicável) erravam fácil:
   alvo de ≥40px + mais respiro no celular. */
@media (max-width: 767px) {
  .icon-btn--sm { width: 2.5rem; height: 2.5rem; }
  .binder-acoes { gap: .45rem; }
}
/* Grade de cartas (aberta): auto-fill → cartas grandes e consistentes, sem 12 colunas fixas */
.binder-cartas { display: grid; grid-gap: .5rem; gap: .5rem; padding: .25rem .85rem .9rem;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
@media (min-width: 640px)  { .binder-cartas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }
@media (min-width: 1024px) { .binder-cartas { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } }
.binder-carta { position: relative; display: block; border-radius: .5rem; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .16s ease, transform .16s ease; }
.binder-carta:hover { border-color: var(--accent); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.binder-qtd { position: absolute; top: .2rem; left: .2rem; z-index: 2; line-height: 1.3;
  font-size: 9px; font-weight: 800; color: #fff; background: rgba(0,0,0,.65);
  padding: .05rem .3rem; border-radius: .3rem; }
.binder-vazio { font-size: 12px; color: var(--muted); padding: .1rem .85rem .9rem; }

/* Card = a própria ARTE (tile uniforme); nome/condição/idioma/valor num degradê SOBRE a imagem.
   Tap no card abre o painel de detalhes. Todos os tiles têm a mesma altura → mural limpo, sem masonry. */
.est-scrim { background: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 100%); }
.est-nome { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.est-num { text-shadow: 0 1px 3px rgba(0,0,0,.6); }   /* código da carta ao lado do nome */
.est-preco { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* ===== Lista de detalhes (rótulo → valor) — padrão único p/ dados só-de-leitura =====
   Usada nos painéis de detalhe (estoque/vault/pessoal) e no resultado da NF. */
.vt-dl { display: flex; flex-direction: column; gap: 5px; }
.vt-dl .dl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.25; }
.vt-dl .dl-k { color: var(--muted); flex: none; }
.vt-dl .dl-v { color: var(--ink2); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.vt-dl .dl-v.pos { color: var(--success); font-weight: 700; }
.vt-dl .dl-v.warn { color: var(--warning); font-weight: 700; }
/* Valor no tile: passo de tamanho por comprimento (Safari-12-safe; px fixo, sem clamp/min/max).
   O valor e o custo NUNCA quebram nem somem — quem cede é a condição/idioma à esquerda (.est-meta clipa). */
.est-val { max-width: 66%; }                       /* teto rígido: o bloco do valor nunca passa de 2/3 do tile */
.est-val .est-preco { font-size: 14px; }           /* val-lg (padrão) */
.est-val.val-md .est-preco { font-size: 12px; }
.est-val.val-sm .est-preco { font-size: 10.5px; }
.est-val.val-xs .est-preco { font-size: 9px; }
.est-val .est-sub { font-size: 9px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.est-val.val-sm .est-sub, .est-val.val-xs .est-sub { font-size: 8px; }
.est-val .val-rot { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin-right: .1rem; }
.est-meta { flex: 0 1 auto; }                       /* a esquerda pode encolher e cortar; o valor (shrink-0) não */
/* "Virtualização-lite": o navegador pula layout/paint dos cards FORA da tela (grade grande de estoque
   renderiza tudo de uma vez). contain-intrinsic-size reserva o espaço p/ o scroll não pular; `auto`
   memoriza o tamanho real após 1ª renderização. Safari 12 ignora (renderiza tudo, como hoje). */
.est-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.est-scrim .cflag { width: 1.05rem; height: .7rem; border-radius: 2px; display: block; }
/* Carta SEM imagem dentro do tile: mostra só um monograma (o degradê já carrega nome/condição/preço). */
.est-card .vt-img-ph { justify-content: center; align-items: center; padding: 0; }
.est-card .vt-img-ph > span { display: none; }
.est-card .vt-img-ph > i { position: static; opacity: .16; font-size: 3rem; margin: 0; }

/* ---- Sidebar / nav ---- */
#sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: .9rem .75rem; gap: .15rem; }
#sidebar .wordmark { letter-spacing: -.01em; }
.navlink { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: .7rem;
  font-size: .92rem; font-weight: 600; color: var(--ink2); transition: .13s; white-space: nowrap; position: relative; }
.navlink i { font-size: 1.2rem; opacity: .85; }
.navlink:hover { background: var(--surface2); color: var(--ink); }
.navlink.ativo { background: var(--accent-soft); color: var(--accent); }
.navlink.ativo i { opacity: 1; }
body.layout-sidebar #sidebar .navlink.ativo::before { content: ""; position: absolute; left: -.75rem; top: 18%; bottom: 18%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }

/* ---- Tabs (menu em cima) ---- */
#tabs { gap: .25rem; padding: 0 .5rem; }
#tabs .navlink { border-radius: 0; padding: .8rem .9rem; border-bottom: 2px solid transparent; background: transparent; }
#tabs .navlink:hover { background: transparent; color: var(--ink); }
#tabs .navlink.ativo { background: transparent; border-bottom-color: var(--accent); color: var(--accent); }
#tabs .navlink.ativo::before { display: none; }

/* ===== Menu lateral ESCURO — identidade v2 (só a casca; rotas/handlers intactos) =====
   Escopo em #sidebar: NÃO afeta o layout "Abas" (#tabs) nem o wordmark do cabeçalho/login. */
#sidebar { background: var(--vt-nav-bg); border-right: 0; padding: 1.25rem .875rem 1.125rem; gap: 2px; }
#sidebar .wordmark .w1 { color: var(--vt-mist); }
#sidebar .wordmark .w2 { color: var(--vt-blue-400); }
#sidebar .loja-nome { color: var(--vt-nav-icon); }
/* rótulo de seção: Operação / Gestão / Conta */
#sidebar .navsection { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vt-nav-sec); padding: .9rem .75rem .35rem; user-select: none; }
#sidebar .navsection:first-of-type { padding-top: .25rem; }
/* itens do menu escuro */
#sidebar .navlink { color: var(--vt-nav-item); font-weight: 500; font-size: .9rem;
  border-radius: .625rem; padding: 0 .75rem; height: 40px; gap: .75rem; }
#sidebar .navlink i { color: var(--vt-nav-icon); opacity: 1; }
#sidebar .navlink:hover { background: var(--vt-nav-active-bg); color: #fff; }
#sidebar .navlink:hover i { color: var(--vt-slate-300); }
#sidebar .navlink.ativo { background: var(--vt-nav-active-bg); color: #fff; font-weight: 700; }
#sidebar .navlink.ativo i { color: var(--vt-blue-400); opacity: 1; }
/* traço dourado do item ativo — dentro do item (o overflow-y do #nav-side corta a calha externa) */
body.layout-sidebar #sidebar .navlink.ativo::before { background: var(--vt-gold-400); left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; }
#sidebar .navgroup.open > .flex .navlink, #sidebar .navgroup.open > .navlink { color: #fff; }
/* v283: os itens do menu NUNCA encolhem — quando um submenu aberto passa da altura, o #nav-side rola
   (antes os links de 1º nível eram esmagados de 40px p/ 22px pelo flex, e os do submenu não). */
#sidebar #nav-side > * { flex-shrink: 0; }
/* Submenu (Cartas/Produtos/Compras…) igual à referência do designer (Tela-05): recuado 20px, 36px de
   altura, fonte 14px, ícone 17px, cantos 9px, cor mais apagada — e com id na regra, senão o
   `#sidebar .navlink` acima ganha e o recuo some (foi o que aconteceu na v274). */
#sidebar .navsub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px; }
#sidebar .navsub.hidden { display: none; }
#sidebar .navsub .navlink { height: 36px; margin-left: 20px; padding: 0 12px; border-radius: 9px; font-size: .875rem; gap: 10px; color: var(--vt-slate-300); }
#sidebar .navsub .navlink i { font-size: 17px; }
#sidebar .navsub .navlink:hover, #sidebar .navsub .navlink.ativo { color: #fff; }
/* barra de rolagem da sidebar escura — azul-slate da marca (eco do #4F83FF), fina e sofisticada */
#sidebar { scrollbar-color: #3C5385 transparent; }
#sidebar #nav-side::-webkit-scrollbar-thumb, #sidebar::-webkit-scrollbar-thumb { background: #3C5385; border: 2px solid transparent; background-clip: padding-box; }
#sidebar #nav-side::-webkit-scrollbar-thumb:hover, #sidebar::-webkit-scrollbar-thumb:hover { background: #50699E; }
/* nav rola; rodapé (Caixa hoje + usuário) fica fixo no pé.
   scrollbar-gutter: stable RESERVA o espaço da barra SEMPRE — assim abrir um submenu (que faz o
   conteúdo passar da altura) não empurra os itens p/ o lado (mantém o alinhamento). No Safari 12/iOS
   a barra já é sobreposta (não empurra), então ali é inócuo. */
body.layout-sidebar #sidebar #nav-side { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: var(--vt-ink-600) transparent; }
#side-footer { flex: none; }
.side-caixa { background: #131B2E; border: 1px solid var(--vt-ink-800); border-radius: 12px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.side-caixa-lbl { display: flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; color: var(--vt-nav-icon); }
.side-caixa-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--vt-gold-400); }
.side-caixa-val { font-weight: 800; font-size: 1.05rem; color: var(--vt-mist); }
.side-caixa-sub { font-size: .72rem; color: var(--vt-nav-icon); }
.side-user { border-top: 1px solid var(--vt-ink-800); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.side-user-ini { width: 34px; height: 34px; border-radius: 50%; background: var(--vt-blue-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.side-user-txt { display: flex; flex-direction: column; min-width: 0; }
.side-user-nome { font-size: .83rem; font-weight: 700; color: var(--vt-mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-papel { font-size: .72rem; color: var(--vt-nav-icon); }
/* o rodapé é só do menu LATERAL — some no modo Abas (nav no topo) e no bottom-nav do celular */
body:not(.layout-sidebar) #side-footer { display: none; }
/* rótulos de seção não fazem sentido na barra de ABAS horizontal */
#tabs .navsection { display: none; }

/* ===== Topo (identidade v2) — busca em pill + Nova venda escuro. Só casca. ===== */
#page-titulo { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
#page-eyebrow { letter-spacing: .1em; color: var(--vt-slate-500); }
.vt-tb-label { display: none; }
.vt-kbd { display: none; }
@media (min-width: 860px) {
  .vt-tb-label { display: inline; }
  /* busca vira pill com rótulo e atalho ⌘K */
  #btn-busca.vt-tb-search { width: auto; min-width: 258px; display: inline-flex; justify-content: flex-start;
    align-items: center; gap: .55rem; padding: 0 .8rem; background: var(--page); color: var(--muted);
    font-size: .85rem; font-weight: 600; }
  #btn-busca.vt-tb-search i { font-size: 1.05rem; }
  #btn-busca.vt-tb-search:hover { color: var(--ink2); border-color: var(--accent); background: var(--accent-soft); }
  .vt-kbd { display: inline; margin-left: auto; font-family: var(--vt-font-mono); font-size: .68rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
  /* venda rápida vira o botão primário "Nova venda" (ink + raio dourado) */
  #venda-rapida-btn.vt-tb-venda { width: auto; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .9rem; gap: .5rem; background: var(--vt-ink-950); color: #fff; border-color: var(--vt-ink-950);
    font-weight: 700; font-size: .9rem; }
  #venda-rapida-btn.vt-tb-venda i { color: var(--vt-gold-400); }
  #venda-rapida-btn.vt-tb-venda:hover { background: var(--vt-ink-800); border-color: var(--vt-ink-800); color: #fff; }
}

/* ===== KPI cards do Início (identidade v2) ===== */
.text-warning { color: var(--vt-warning); }   /* garante o âmbar da marca (A entregar / estoque baixo) */
#fav-painel { gap: .75rem; }
.vt-kpi { text-align: left; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--vt-radius-lg);
  padding: 15px 14px; position: relative; overflow: hidden; cursor: pointer; transition: .13s; }
.vt-kpi-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-kpi-lbl i { font-size: 1rem; color: var(--muted); flex: none; }
.vt-kpi-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
  white-space: nowrap; max-width: 100%; }
.vt-kpi-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* primeiro card (Vendas hoje): ink com aba dourada */
.vt-kpi--dark { background: var(--vt-ink-950); border-color: var(--vt-ink-950); }
.vt-kpi--dark::before { content: ""; position: absolute; left: 17px; top: 0; width: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--vt-gold-400); }
.vt-kpi--dark .vt-kpi-lbl, .vt-kpi--dark .vt-kpi-sub { color: var(--vt-slate-300); }
.vt-kpi--dark .vt-kpi-lbl i { color: var(--vt-gold-400); }
.vt-kpi--dark .vt-kpi-val { color: #fff; }
/* celular: cards menores + colunas que NUNCA estouram (minmax 0) — sem rolagem horizontal */
@media (max-width: 640px) {
  #fav-painel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
  .vt-kpi { padding: 12px 13px; }
  .vt-kpi-val { font-size: 1.3rem; }
  .vt-kpi-lbl { font-size: .62rem; }
}

/* ===== Componentes (identidade v2) — cascateia em TODAS as telas. Só casca. ===== */
.btn-accent, .btn-line { border-radius: var(--vt-radius-md); font-weight: 700; }
.icon-btn { border-radius: var(--vt-radius-md); }
.vt-inp, select.vt-inp, .cselect-btn { border-radius: var(--vt-radius-md); }
/* avatar de iniciais do card de cliente (identidade v2) */
.cli-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--vt-blue-50);
  color: var(--vt-blue-800); font-weight: 800; font-size: .9rem; display: grid; place-items: center; }

/* Financeiro · painel "Este mês" (identidade v2) — faixa ink escura + traço dourado + 3 colunas */
.fin-mes { background: var(--vt-ink-950); border-radius: var(--vt-radius-lg); padding: 18px 20px;
  position: relative; overflow: hidden; }
.fin-mes::before { content: ""; position: absolute; left: 20px; top: 0; width: 32px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--vt-gold-400); }
.fin-mes-lbl { display: block; margin-bottom: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vt-slate-300); }
.fin-mes-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-mes-col { padding: 0 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  border-left: 1px solid var(--vt-ink-800); }
.fin-mes-col:first-child { padding-left: 0; border-left: 0; }
.fin-mes-k { font-size: .8rem; color: var(--vt-slate-300); }
.fin-mes-vrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-mes-ic { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--vt-ink-800);
  display: grid; place-items: center; font-size: .82rem; }
.fin-mes-v { font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fin-mes-frase { font-size: .8rem; color: var(--vt-slate-300); margin-top: 14px; line-height: 1.5; }
.fin-mes .text-success { color: #4ADE80; }
.fin-mes .text-danger { color: #F87171; }
.fin-mes b { color: #fff; }
@media (max-width: 640px) { .fin-mes-v { font-size: 1.25rem; } .fin-mes-col { padding: 0 10px; } }

/* Cabeçalho do dia na Agenda (Início) — sentence-case + chip "Hoje" (mockup, não uppercase) */
.fav-diahead { font-family: var(--vt-font-display), sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fav-hoje-chip { font-family: var(--vt-font-body), sans-serif; font-size: .72rem; font-weight: 700;
  color: var(--vt-blue-800); background: var(--vt-blue-50); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; }

/* A Receber · fileira de 4 cards de resumo (identidade v2) — mesmo padrão dos KPI do Início */
.ar-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ar-card { text-align: left; display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--vt-radius-lg); padding: 14px 16px; position: relative;
  overflow: hidden; cursor: pointer; transition: .13s; }
.ar-card-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.ar-card-v { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.ar-card-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-card--dark { background: var(--vt-ink-950); border-color: var(--vt-ink-950); }
.ar-card--dark::before { content: ""; position: absolute; left: 16px; top: 0; width: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--vt-gold-400); }
.ar-card-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--vt-gold-400); }
.ar-card--dark .ar-card-lbl, .ar-card--dark .ar-card-sub { color: var(--vt-slate-300); }
.ar-card--dark .ar-card-v { color: #fff; }
.ar-card--on { border-color: var(--accent); box-shadow: var(--ring); }
button.ar-card:hover { border-color: var(--accent); }
@media (max-width: 640px) { .ar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-card-v { font-size: 1.25rem; } }

/* ===== Modal de atualização (identidade v2) — cabeçalho ink com a marca ===== */
.modal-card.atz-card { padding: 0; overflow: hidden; }
.atz-hero { background: var(--vt-ink-950); color: #fff; padding: 22px 24px; display: flex; align-items: center; gap: 14px; position: relative; }
.atz-hero::before { content: ""; position: absolute; left: 24px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--vt-gold-400); }
.atz-hero-logo { width: 46px; height: 46px; flex: none; }
.atz-hero-eyebrow { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-gold-400); }
.atz-hero-title { font-family: var(--vt-font-display), sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; margin: 3px 0 0; line-height: 1.05; color: #fff; }
.atz-hero-sub { font-size: .8rem; color: var(--vt-slate-300); margin: 3px 0 0; }
.atz-body { padding: 20px 24px 24px; }

/* ---- Header ---- */
/* Sem backdrop-filter no header: num header fixo, o filtro repinta a cada rolagem da página
   (custo de GPU no celular). O fundo sólido do header já basta. */

/* ---- Cards / superfícies ---- (.shadow-soft e .card-hover: def única mais abaixo, base em tokens) */
/* Cursor de "clicável" (mãozinha) em tudo que age ao clicar: botões, links, cards, role=button.
   Especificidade baixa de propósito → regras específicas (ex.: .drag-grip = grab) prevalecem. */
button, a, [role="button"], .card-hover { cursor: pointer; }
button:disabled, .pointer-events-none, [aria-disabled="true"] { cursor: default; }

/* ---- Menu do perfil ---- */
.menu-item { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: .6rem; font-size: .9rem; font-weight: 500; text-align: left; color: var(--ink2); cursor: pointer; }
.menu-item:hover { background: var(--surface2); color: var(--ink); }
/* Controle segmentado (menu do perfil: Tema / Layout) — mostra as opções com a ATIVA destacada,
   em vez de um botão-toggle ambíguo. */
.seg { display: flex; gap: .2rem; background: var(--surface2); border: 1px solid var(--line);
  border-radius: .7rem; padding: .2rem; }
.seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .4rem .55rem; border-radius: .5rem; font-size: .8rem; font-weight: 600; white-space: nowrap;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--accent-soft); color: var(--accent); }
.seg-btn i { font-size: 1rem; }

/* ---- Modais ---- */
/* ---- Busca global (command-palette ⌘K) ---- */
.busca-card { background: var(--surface); width: 100%; max-width: 40rem; margin: 4vh auto 0;
  border-radius: 1rem; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15,23,42,.35);
  display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;
  animation: vt-pop .16s cubic-bezier(.2,.9,.3,1); }
.busca-top { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.busca-top input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1rem; color: var(--ink); }
.busca-esc { font-size: .7rem; border: 1px solid var(--line); border-radius: .4rem; padding: .15rem .4rem;
  color: var(--muted); background: var(--surface2); cursor: pointer; }
.busca-result { overflow-y: auto; padding: .35rem; min-height: 3.5rem; }
.busca-grupo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: .6rem .65rem .25rem; display: flex; align-items: center; gap: .4rem; }
.busca-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: .6rem; cursor: pointer; }
.busca-item.ativo { background: var(--accent-soft); }
.busca-item .bi-ic { width: 1.9rem; height: 1.9rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: .5rem; background: var(--surface2); color: var(--accent); }
.busca-item .bi-tx { min-width: 0; flex: 1; }
.busca-item .bi-tit { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item .bi-sub { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-foot { display: flex; gap: 1.1rem; padding: .5rem .9rem; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); }
.busca-foot kbd, .busca-foot span > kbd { font-family: inherit; }
.busca-foot kbd { font-size: .68rem; border: 1px solid var(--line); border-radius: .35rem; padding: .02rem .3rem; background: var(--surface2); }
/* estado "sem resultados" da paleta ⌘K (Tela-27b): ícone + título + dica de grafia/número */
.busca-vazio { padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.busca-vazio-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--surface2); color: var(--muted); font-size: 1.5rem; margin-bottom: .7rem; }
.busca-vazio-tit { font-family: var(--vt-font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0 0 .25rem; }
.busca-vazio-dica { font-size: .82rem; color: var(--muted); margin: 0; }
/* Assistente da paleta ⌘K: cartão de resposta acima dos resultados (mesmos tokens da busca) */
.busca-assist { margin: .2rem .15rem .5rem; padding: .7rem .8rem; border-radius: .8rem;
  background: var(--accent-soft); }
.busca-assist .ba-topo { display: flex; align-items: flex-start; gap: .6rem; }
.busca-assist .ba-ic { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: .6rem; background: var(--accent); color: #fff; font-size: 1.1rem; }
.busca-assist .ba-tx { min-width: 0; flex: 1; }
.busca-assist .ba-fala { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.busca-assist .ba-det { font-size: .78rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; }
.busca-assist .ba-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.busca-assist-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700;
  min-height: 2rem; padding: .3rem .75rem; border-radius: 999px; background: var(--accent); color: #fff; cursor: pointer; }
.busca-assist-btn:hover { filter: brightness(.95); }
.busca-assist-btn.ativo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* SEM backdrop-filter: blur() aqui — o overlay é o container de rolagem (overflow-y:auto) e,
   no celular, rolar com backdrop-blur repinta o desfoque a cada quadro (rolagem "engasgada").
   O fundo escuro semitransparente dá o mesmo efeito de foco sem custo de GPU. */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center;
  background: rgba(15,23,42,.55); overflow-y: auto;
  /* Respeita a safe-area (notch/barra de gestos) no celular — o fim do modal/botão não encosta na barra.
     Fallback SEM max() antes: Safari 12 (iPad-alvo) não conhece min()/max() e descartava a linha
     inteira — o overlay ficava com padding 0 e o card colava nas bordas. */
  padding: 1.5rem 1rem;
  padding: max(1.5rem, var(--sat)) 1rem max(1.5rem, calc(1rem + var(--sab)));
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal:not(.hidden) { display: flex; animation: vt-fade .14s ease; }
/* Confirmação, senha e input rápido são sobreposições — ficam acima de outro modal aberto */
#m-confirm, #m-senha, #m-input { z-index: 95; }
/* Picker de cliente e editor de cliente são abertos POR CIMA de outro modal (ex.: lote →
   escolher fornecedor). Sem isto ficam atrás do modal-base (mesmo z-index, mas depois no DOM)
   e a lista "não aparece". Ficam abaixo dos overlays de senha/input (95). */
#m-cliente-pick { z-index: 93; }
#m-cliente { z-index: 94; }
/* Acessibilidade: foco visível por teclado em qualquer alvo interativo (não afeta clique) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
/* Sombra com blur MENOR (era 60px): num overlay que rola, uma sombra de blur grande repinta uma
   area enorme a cada quadro no celular (rolagem "engasgada" dentro do modal). 30px mantem o efeito. */
.modal-card { background: var(--surface); color: var(--ink); border-radius: var(--vt-radius-xl); width: 100%;
  padding: 1.6rem; position: relative; box-shadow: 0 12px 30px rgba(15,23,42,.24); margin: 2.5rem auto;
  border: 1px solid var(--line); }
.modal-x { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; display: grid;
  place-items: center; border-radius: .6rem; border: 1px solid var(--line); color: var(--muted); cursor: pointer; transition: .15s; }
.modal-x:hover { border-color: var(--danger); color: var(--danger); }
.modal-title { font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: .55rem; font-family: var(--vt-font-display), sans-serif; letter-spacing: -.02em; }
/* Largura dos MODAIS (34rem dá respiro ao m-conta e afins). Escopado ao .modal-card: redefinir
   a utilitária global mudava o max-w-lg do Tailwind (32rem) p/ qualquer uso futuro fora de modal. */
.modal-card.max-w-lg { max-width: 34rem; } .modal-card.max-w-md { max-width: 28rem; } .modal-card.max-w-sm { max-width: 24rem; }
/* Variantes RESPONSIVAS (lg:max-w-*) redefinidas AQUI, com a MESMA especificidade das regras acima e
   DEPOIS delas. Sem isso `.modal-card.max-w-md` (0,2,0) vence o `.lg\:max-w-4xl` (0,1,0) do Tailwind e
   o modal "Nova venda" encolhia p/ 28rem no desktop (regressão da v226 — "modais de venda estreitos").
   De quebra cobre o Tailwind ESTÁTICO (Safari 12), que não traz essas variantes. */
@media (min-width: 1024px) {
  .modal-card.lg\:max-w-2xl { max-width: 42rem; }
  .modal-card.lg\:max-w-3xl { max-width: 48rem; }
  .modal-card.lg\:max-w-4xl { max-width: 56rem; }
  /* Modais de VENDA (Nova venda): duas colunas — cesta + pagamento — precisam de respiro de verdade. */
  .modal-card.modal--venda { max-width: min(66rem, calc(100vw - 3rem)); }
}
/* Detalhe da COMPRA: modal bem largo no desktop (grade de itens + tabela de lucro respiram);
   no celular segue a regra geral de largura quase cheia. */
@media (min-width: 1024px) {
  .modal-card.modal--lote { max-width: min(78rem, calc(100vw - 3rem)); }
}
@keyframes vt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vt-zoom { from { opacity: 0; transform: scale(.90); } to { opacity: 1; transform: none; } }
/* Abertura FLUIDA: a animação só existe enquanto a classe `mc-abrindo` está no card (adicionada no
   abrirModal, removida no `animationend`). Durante a abertura ela FORÇA a camada de GPU (will-change +
   backface → o scale vira composição pura) e SUPRIME a box-shadow — que, num card grande, repintava a
   CADA frame durante o scale (o "engasgo"). Em repouso o card volta ao normal (sombra de volta, sem
   camada/will-change presos na memória). */
.modal-card.mc-abrindo { animation: vt-pop .16s cubic-bezier(.2,.9,.3,1);
  will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: none;
  /* CLIP durante a abertura: no WebKit/iOS o backface-visibility:hidden + border-radius SEM overflow:hidden
     faz o fundo branco vazar pelos cantos arredondados (canto quadrado "ultrapassando" o modal). Só existe
     enquanto a classe está no card (~.18s); no repouso o overflow volta a visible (dropdowns dos selects ok). */
  overflow: hidden; }
/* "cresce do ponto clicado": transform-origin setado inline no abrirModal; escala de .90 a partir dali. */
.modal-card.mc-abrindo.vt-de-tap { animation: vt-zoom .18s cubic-bezier(.2,.9,.3,1); }
/* Device fraco (dual-core, ex.: iPad mini 3): abertura = só um fade curto, sem scale/movimento. */
.perf-baixa .modal-card.mc-abrindo, .perf-baixa .modal-card.mc-abrindo.vt-de-tap { animation: vt-fade .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .modal-card.mc-abrindo, .modal-card.mc-abrindo.vt-de-tap { animation: vt-fade .08s ease; }
  .modal:not(.hidden) { animation: vt-fade .08s ease; }
}

/* ---- Rodapé de ação FIXO (M1): a barra Confirmar/Receber cola no fim e nunca some abaixo da dobra.
   O overlay (.modal) é o scroller → position:sticky (ok no Safari 6.1+). Sangra até as bordas do card
   (margens negativas comem o padding 1.6rem) e ganha fundo opaco + hairline no topo. Em modal curto que
   cabe na tela o sticky NÃO dispara → sem regressão no desktop. ---- */
.modal-footer { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 3; display: flex;
  gap: .5rem; margin: 1rem -1.6rem -1.6rem; padding: .8rem 1.6rem calc(.8rem + var(--sab));
  background: var(--surface); border-top: 1px solid var(--line);
  border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 1.1rem; }
.modal-footer > * + * { margin-left: .5rem; }                 /* fallback de gap p/ Safari 12 */
@supports (gap: 1rem) { .modal-footer > * + * { margin-left: 0; } }

/* Enquanto um modal está aberto, a página de trás NÃO rola. Safari 12 ignora overscroll-behavior;
   overflow:hidden no html/body é o fallback confiável (preserva o scrollTop, só congela). */
html.modal-aberto, html.modal-aberto body { overflow: hidden; }

/* ---- Modal ALTO (M3): card com teto de altura; só o CORPO rola, header/X e rodapé ficam PARADOS.
   Opt-in via `modal-scroll` no .modal-card + envolver o conteúdo num `.modal-body`. O X (absolute no
   card) fica pinado porque o card não rola. dvh com fallback vh p/ Safari 12. ---- */
.modal-scroll { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin: 0 auto;
  /* Teto = altura da tela MENOS o padding do overlay e a safe-area (notch/gestos), senão o card fica mais
     alto que o espaço e empurra header/rodapé pra fora. As duas 1ªs linhas (dvh/vh) são só FALLBACK para
     engines que ignoram % em flex-item; a última (100%) é a que MANDA. */
  max-height: calc(100vh - 3rem - var(--sat) - var(--sab));
  max-height: calc(100dvh - 3rem - var(--sat) - var(--sab));
  /* ROBUSTO (raiz do "estouro" no iOS/PWA): o teto vira relativo AO PRÓPRIO overlay `.modal` (que é
     `fixed; inset:0` = a área REALMENTE visível, com padding já descontando a safe-area). `100%` não
     depende de dvh/vh — que no iOS/PWA divergem do visível e deixavam o card MAIOR que a tela, fazendo o
     overlay rolar e o branco passar dos limites (topo/base). Agora o card nunca ultrapassa; só o corpo rola. */
  max-height: 100%; }
.modal-scroll > .modal-title { margin: 0; padding: 1.3rem 1.6rem .7rem;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-scroll > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: .9rem 1.6rem; }
.modal-scroll > .modal-footer { position: static; margin: 0; border-radius: 0;
  padding: .8rem 1.6rem calc(.8rem + var(--sab)); }

/* customSelect: largura cheia em modais + busca interna sticky */
.cselect-full { display: block; width: 100%; }
.cselect-busca { position: sticky; top: -.3rem; background: var(--surface); padding-bottom: .35rem; margin-bottom: .1rem; z-index: 1; }
.cselect-btn { border-radius: .7rem; padding: .62rem .85rem; min-height: 2.55rem; }


/* Leitura: mais peso e contraste nos textos secundários */
.text-muted { font-weight: 500; }
.text-\[10px\], .text-\[11px\] { letter-spacing: .005em; }

/* ============================================================
   Cartões: branco + elevação suave (em vez de borda cinza no fundo cinza)
   Referência: dashboards Linear / Stripe / Vercel
   ============================================================ */
[class*="rounded-xl"][class~="border-line"],
[class*="rounded-2xl"][class~="border-line"] {
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
/* No escuro os cards não usam a sombra clara, mas precisam de UMA sombra sutil: só a borda
   (--line) sobre o fundo escuro é fraca demais e cards vizinhos "borram". */
.dark [class*="rounded-xl"][class~="border-line"],
.dark [class*="rounded-2xl"][class~="border-line"] { box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.shadow-soft { box-shadow: var(--shadow-card); }
/* Definição ÚNICA do card-hover (havia duplicata acima): borda accent + elevação no hover. */
.card-hover { transition: border-color .15s ease, box-shadow .16s ease, transform .16s ease; }
/* Só em aparelho com mouse: no toque o ":hover" fica "grudento" e repinta a grade inteira. */
@media (hover: hover) { .card-hover:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-pop); transform: translateY(-2px); } }
/* Retorno tátil ao TOCAR/clicar um card (no toque não há hover) — leve afundada, como um botão. */
.card-hover:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .card-hover:active { transform: none; } }
/* Selo/pílula PADRÃO (unifica os badges antes montados inline de vários jeitos). A COR vem das
   utilitárias (bg-*-500/15 text-*-700); a variante --bordered usa a cor do texto na borda. */
.pill { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .125rem .5rem; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; line-height: 1.5; }
.pill--bordered { border: 1px solid currentColor; }
/* Faixa fixa "AMBIENTE DE TESTE" da gêmea de homologação (v237): âmbar nos dois temas, acima de
   tudo (toasts 130 > faixa 120 > modais 90/95 > login 100…); ocupa o notch — o header, o menu
   lateral e o login descem a altura dela (--faixa-h, medida no app.js). */
.faixa-homolog { position: fixed; top: 0; left: 0; right: 0; z-index: 120; display: flex; align-items: center;
  justify-content: center; gap: .35rem; padding: calc(var(--sat, 0px) + 4px) 1rem 4px;
  background: #F2B632; color: #1c1917; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  line-height: 1.3; text-align: center; text-transform: uppercase; }
.faixa-homolog.hidden { display: none; }
/* Nome da loja (v237) ao lado da marca VaultTCG (menu lateral e cabeçalho) — gancho do JS;
   min-width 0 deixa o `truncate` valer dentro do flex. */
.loja-nome { display: block; min-width: 0; }
/* Fundos/bordas translúcidos das cores de MARCA (bg-success/15 etc.): o Tailwind com cor em
   var() não gera o modificador /N em runtime, e o CSS estático do Safari 12 nem os tem — as
   pills ficavam SEM fundo. Fallback explícito p/ todas as variantes usadas (auditoria 01/09). */
.bg-accent\/5 { background-color: rgba(45, 127, 249, .05); }
.bg-accent\/10 { background-color: rgba(45, 127, 249, .10); }
.bg-accent\/15 { background-color: rgba(45, 127, 249, .15); }
.bg-accent\/20 { background-color: rgba(45, 127, 249, .20); }
.bg-accent\/25 { background-color: rgba(45, 127, 249, .25); }
.border-accent\/40 { border-color: rgba(45, 127, 249, .40); }
.bg-success\/5 { background-color: rgba(22, 163, 74, .05); }
.bg-success\/10 { background-color: rgba(22, 163, 74, .10); }
.bg-success\/15 { background-color: rgba(22, 163, 74, .15); }
.bg-success\/20 { background-color: rgba(22, 163, 74, .20); }
.bg-success\/25 { background-color: rgba(22, 163, 74, .25); }
.bg-success\/85 { background-color: rgba(22, 163, 74, .85); }
.border-success\/40 { border-color: rgba(22, 163, 74, .40); }
.dark .bg-success\/5 { background-color: rgba(34, 197, 94, .07); }
.dark .bg-success\/10 { background-color: rgba(34, 197, 94, .12); }
.dark .bg-success\/15 { background-color: rgba(34, 197, 94, .18); }
.dark .bg-success\/20 { background-color: rgba(34, 197, 94, .22); }
.dark .bg-success\/25 { background-color: rgba(34, 197, 94, .28); }
.dark .bg-success\/85 { background-color: rgba(34, 197, 94, .85); }
.dark .border-success\/40 { border-color: rgba(34, 197, 94, .40); }
.bg-danger\/5 { background-color: rgba(198, 40, 40, .05); }
.bg-danger\/10 { background-color: rgba(198, 40, 40, .10); }
.bg-danger\/15 { background-color: rgba(198, 40, 40, .15); }
.bg-danger\/20 { background-color: rgba(198, 40, 40, .20); }
.bg-danger\/25 { background-color: rgba(198, 40, 40, .25); }
.border-danger\/40 { border-color: rgba(198, 40, 40, .40); }
.border-danger\/50 { border-color: rgba(198, 40, 40, .50); }
.dark .bg-danger\/5 { background-color: rgba(248, 113, 113, .08); }
.dark .bg-danger\/10 { background-color: rgba(248, 113, 113, .13); }
.dark .bg-danger\/15 { background-color: rgba(248, 113, 113, .18); }
.dark .bg-danger\/20 { background-color: rgba(248, 113, 113, .22); }
.dark .bg-danger\/25 { background-color: rgba(248, 113, 113, .28); }
.dark .border-danger\/40 { border-color: rgba(248, 113, 113, .40); }
.dark .border-danger\/50 { border-color: rgba(248, 113, 113, .50); }
/* v232: variantes /N que o build estático não gera p/ cor em var() — o runtime também nunca as
   gerou (ficavam sem efeito); agora têm fallback explícito. */
.bg-surface2\/40 { background-color: rgba(238, 241, 246, .40); }
.bg-surface2\/60 { background-color: rgba(238, 241, 246, .60); }
.dark .bg-surface2\/40 { background-color: rgba(28, 28, 31, .40); }
.dark .bg-surface2\/60 { background-color: rgba(28, 28, 31, .60); }
.border-accent\/30 { border-color: rgba(45, 127, 249, .30); }
.text-accent\/70 { color: rgba(45, 127, 249, .70); }
.hover\:bg-accent\/10:hover { background-color: rgba(45, 127, 249, .10); }
.hover\:bg-danger\/20:hover { background-color: rgba(198, 40, 40, .20); }
.hover\:bg-danger\/25:hover { background-color: rgba(198, 40, 40, .25); }
.hover\:bg-success\/25:hover { background-color: rgba(22, 163, 74, .25); }
.from-accent\/15 { --tw-gradient-from: rgba(45, 127, 249, .15) var(--tw-gradient-from-position); --tw-gradient-to: rgba(45, 127, 249, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-accent\/5 { --tw-gradient-to: rgba(45, 127, 249, .05) var(--tw-gradient-to-position); }
/* v233: `ph-spin` é usado nos "Apurando…/Montando…" (ph-circle-notch) mas nunca existiu no Phosphor
   nem aqui — o ícone ficava parado. Giro simples, desligado com prefers-reduced-motion. */
.ph-spin { display: inline-block; animation: ph-spin 1s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-spin { animation: none; } }
/* Mini-botão de ação (PDF/XML/reemitir/CCe…) — agora tokenizado (era montado inline ~18x). */
.btn-mini { display: inline-flex; align-items: center; gap: .3rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); padding: .125rem .5rem;
  font-size: 11px; font-weight: 600; color: var(--ink2); transition: .15s; cursor: pointer; min-height: 1.9rem; }
.btn-mini:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-mini--danger:hover { border-color: var(--danger); color: var(--danger); background: transparent; }
/* Caixa de aviso (callout) — unifica raio/opacidade/borda antes divergentes (rounded-md vs -lg,
   bg /5 vs /10, borda /30 vs /40). Cor pelo modificador; estrutura pela base. rgba p/ Safari 12. */
.callout { border-radius: var(--r-md); border: 1px solid; padding: .5rem .65rem; font-size: 11px; line-height: 1.45; }
.callout--warn { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.42); }
.callout--ok   { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.34); }
.callout--danger { background: rgba(198,40,40,.08); border-color: rgba(198,40,40,.40); }
/* T-4: aviso de responsabilidade fiscal (obrigatório e BEM grande — plano §9) */
.aviso-fiscal { border-width: 3px; border-color: rgba(198,40,40,.75); font-size: 14px; }
.dark .callout--danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.40); }
/* Inputs/selects com borda um tom mais visível que os cards (campo precisa de limite claro) */
.vt-inp, .cselect-btn { border-color: #D6DDE8; }
.dark .vt-inp, .dark .cselect-btn { border-color: var(--line); }
/* Contraste no escuro: textos amber-700/sky-700 ("a pagar"/"a receber"/status de entrega) ficam
   escuros demais sobre o fundo dark. Clareia p/ a faixa 400 — cobre TODOS de uma vez (parte dos
   lugares já fazia caso a caso com dark:text-amber-400; aqui fica uniforme). */
.dark .text-amber-700 { color: #fbbf24; }   /* amber-400 */
.dark .text-sky-700 { color: #38bdf8; }     /* sky-400 */
/* Idem p/ os demais tons 700 usados nos selos de entrega/cliente (Recebido/Enviado/Retirado
   etc.) — sem isso ficavam ~2:1 de contraste no escuro (quase invisíveis à noite). */
.dark .text-emerald-700 { color: #34d399; } /* emerald-400 */
.dark .text-violet-700  { color: #a78bfa; } /* violet-400 */
.dark .text-slate-700   { color: #94a3b8; } /* slate-400 */
.dark .text-indigo-700  { color: #818cf8; } /* indigo-400 */
/* Faltavam no remap (ficavam com contraste ruim no escuro): laranja (selo "Reconectar"/atividade)
   e os tons -600 usados em avisos (estoque baixo, Bonificação, ABC, atenção). */
.dark .text-orange-700  { color: #fdba74; } /* orange-300 */
.dark .text-orange-600  { color: #fdba74; }
.dark .text-amber-600   { color: #fbbf24; } /* amber-400 */
.dark .text-emerald-600 { color: #34d399; } /* emerald-400 */
/* Completam o remap (v225): eram os 3 tons que ainda dependiam de dark:text-* caso a caso no
   app.js — agora TODO ajuste de contraste do escuro mora aqui (fonte única; Safari 12 só tem esta via). */
.dark .text-violet-600  { color: #a78bfa; } /* violet-400 */
.dark .text-sky-600     { color: #38bdf8; } /* sky-400 */
.dark .text-slate-500   { color: #94a3b8; } /* slate-400 */


/* ============================================================
   Melhorias de UX/UI (aditivas) — toasts, skeleton, tipografia,
   polimento de botões/nav, alvos de toque e modal no mobile.
   ============================================================ */

/* ---- 1) Toasts (avisos rápidos) ----
   Container fixo no canto inferior direito (no mobile vai pro centro,
   acima da bottom-nav, respeitando a safe-area var(--sab)). */
#toast-root {
  position: fixed;
  right: 1rem; bottom: 1rem; left: auto;
  z-index: 130;                 /* acima dos modais (90/95) */
  display: flex; flex-direction: column; gap: .55rem;
  align-items: flex-end;
  max-width: min(24rem, calc(100% - 2rem));
  pointer-events: none;         /* o container não bloqueia cliques */
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: .8rem; padding: .7rem .9rem;
  box-shadow: var(--shadow-pop);
  font-family: var(--vt-font-display), system-ui, sans-serif;
  font-size: .9rem; font-weight: 600; line-height: 1.25rem;
  max-width: 100%;
  animation: toast-in .2s cubic-bezier(.2,.9,.3,1);
}
.toast i { font-size: 1.15rem; flex: 0 0 auto; }
.toast.ok   { border-left-color: var(--success); }
.toast.ok i { color: var(--success); }
.toast.err  { border-left-color: var(--danger); }
.toast.err i { color: var(--danger); }
.toast.info { border-left-color: var(--accent); }
.toast.info i { color: var(--accent); }
.toast.saindo { animation: toast-out .2s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
/* No mobile: centralizado; só sobe acima da bottom-nav quando ela EXISTE (layout abas) —
   no layout lateral (padrão) flutuava 82px no ar cobrindo botões do rodapé. */
@media (max-width: 767px) {
  #toast-root {
    right: .75rem; left: .75rem;
    bottom: calc(.75rem + var(--sab));
    align-items: center;
    max-width: none;
  }
  body.layout-tabs #toast-root { bottom: calc(82px + var(--sab)); }
  .toast { width: 100%; max-width: 28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.saindo { animation: none; }
}

/* ---- 2) Skeleton (carregando) — brilho deslizante ---- */
.skel {
  border-radius: .6rem;
  background: linear-gradient(90deg,
    var(--surface2) 25%,
    color-mix(in srgb, var(--surface2) 55%, var(--surface)) 37%,
    var(--surface2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ---- 3) Escala tipográfica utilitária (rótulos) ---- */
.u-label-xs   { font-size: 10px; font-weight: 600; }
.u-label-sm   { font-size: 11px; font-weight: 600; }
.u-label-base { font-size: 12px; font-weight: 600; }

/* ---- 4) Polimento do botão de ícone ---- */
.icon-btn { transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.icon-btn:hover i { color: var(--accent); }

/* ---- 5) Bottom-nav: item ativo = SÓ a cor azul (ícone+texto), sem pílula de fundo (igual ao mockup) ---- */
.bn-item.ativo { background: transparent; }

/* ---- 6) Alvos de toque confortáveis (mínimo 40x40) ---- */
.u-tap { min-width: 2.5rem; min-height: 2.5rem; display: inline-grid; place-items: center; }
/* Botões X pequenos (miniatura/rascunho): mantém o visual de 24px mas amplia a ÁREA de toque
   (o botão é absolute, então o ::after estendido não afeta o layout ao redor). */
.x-tap::after { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }

/* ---- 7) Carrinho aberto: a pilha de miniatura/rascunhos sobe p/ cima da barra (não empilha).
   (No modo abas/celular há uma regra mais específica no index.html que soma o bottom-nav.) ---- */
body.carrinho-aberto #canto-cards { bottom: 84px; }   /* classe no body (Safari 12 não tem :has()) */

/* ---- 7) Modal no mobile: largura quase cheia, sem cortar a ação ---- */
@media (max-width: 767px) {
  .modal-card { width: calc(100% - .75rem); max-width: none; padding: 1.25rem 1rem; }
  /* Menos margem interna no celular: 1.6rem de cada lado comia ~50px de um ecrã de 360px — os campos
     de pagamento (Pix/Cartão/Dinheiro lado a lado) e as linhas da cesta ficavam espremidos. */
  .modal-scroll { padding: 0; }
  .modal-scroll > .modal-title { padding: 1.1rem 1rem .65rem; }
  .modal-scroll > .modal-body { padding: .8rem 1rem; }
  .modal-scroll > .modal-footer { padding: .7rem 1rem calc(.7rem + var(--sab)); }
  /* Alvo de toque confortável (≥44px) dentro dos modais no celular — vence o py-1 inline dos selects. */
  .modal-card .btn-accent, .modal-card .btn-line,
  .modal-card .vt-inp, .modal-card select.vt-inp { min-height: 2.75rem; }
  .modal-x { width: 2.75rem; height: 2.75rem; }
  /* X maior pode invadir títulos longos — reserva a faixa dele. */
  .modal-title { padding-right: 3rem; }
  /* Micro-links "resto" (joga o que falta na forma) — área de toque maior no dedo. */
  .modal-card [data-resto] { min-height: 1.9rem; display: inline-flex; align-items: center; }
  /* Chips de filtro (.opt) e segmentado (.seg-btn) — alvo de toque ≥44px no celular. */
  .opt { min-height: 2.6rem; }
  .seg-btn { min-height: 2.6rem; }
}
/* Mini-botões (PDF/XML/Atualizar/Desfazer…): no toque, sobe de ~30px para ≥40px — dois deles
   lado a lado com 4px de vão era erro de toque garantido (auditoria UX 01/09). */
@media (pointer: coarse) {
  .btn-mini { min-height: 2.5rem; padding: .4rem .75rem; }
}
/* Barras de abas que ROLAM (7 abas do Financeiro; 4 abas do detalhe da compra): sem a barra
   de scroll nativa (colava por baixo das abas) e com as abas da compra SEMPRE à vista
   (sticky no scroller do modal). */
#fin-tabs { scrollbar-width: none; }
#fin-tabs::-webkit-scrollbar { display: none; }
#lote-det-abas { position: -webkit-sticky; position: sticky; top: 0; z-index: 5;
  background: var(--surface); box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#lote-det-abas::-webkit-scrollbar { display: none; }
#lote-det-abas .seg-btn { flex: 1 0 auto; }
/* Cor única dos micro-links "resto" (o de Dinheiro vinha cinza — agora todos accent). */
[data-resto] { color: var(--accent); }


/* ===== Compat Safari < 14.1 (iPad mini 3 / iOS 12) — fallback de `inset` (shorthand) ===== */
/* O `inset` só existe no Safari 14.1+; em posicionados usa-se longhand (funciona em todos). */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.inset-6 { top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; }

/* Início: no desktop o calendário fica com largura fixa (~21rem) e o painel do dia preenche o
   resto — sem isto o calendário esticava p/ metade da tela larga, com células muito largas. */
@media (min-width: 768px) {
  #agenda-cal { flex: 0 0 21rem; max-width: 21rem; border-right: 1px solid var(--line); padding-right: 1rem; }
  #agenda-dia { flex: 1 1 0; min-width: 0; }
}
/* No celular (empilhado) o divisor vira uma linha embaixo do calendário. */
@media (max-width: 767px) {
  #agenda-card #agenda-cal { border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: .25rem; }
}

/* Início: conteúdo com largura confortável (não espalha pela tela larga deixando muito vão). */
#page-favoritos { max-width: 64rem; margin-left: auto; margin-right: auto; }
/* Rodapé do Início: Favoritos vira coluna fixa de 360px ao lado das Tarefas (desktop); no celular
   empilha (w-full). Largura por id porque o Tailwind estático não tem o valor arbitrário. */
@media (min-width: 1024px) { #fav-bloco { width: 360px; flex: 0 0 360px; } }

/* Seletor de TOM do modal de reconectar (win-back): pills escolhíveis. */
.opt { border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .3rem .75rem;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; cursor: pointer; }
.opt:hover { border-color: var(--accent); color: var(--accent); }
.opt.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Página Contador: alvos de toque >=40px nos botões de ação (fora de modal, o min-height
   do .modal-card não vale; o admin usa PDF/CSV/zip pelo celular). */
#page-contador .btn-line, #page-contador .btn-accent { min-height: 2.5rem; }

/* Safari 12 (iPad mini 3) não tem aspect-ratio: os tiles de carta (filhos 100% absolute)
   colapsavam em altura 0 — a grade inteira sumia. Fallback clássico de padding-top
   (342/245 = 139,59%) via ::before, só onde aspect-ratio não existe. Em <img> o ::before
   não renderiza (elemento substituído) — e lá a foto já dá a altura natural ~245/342. */
@supports not (aspect-ratio: 1 / 1) {
  .aspect-\[245\/342\] { position: relative; }
  .aspect-\[245\/342\]::before { content: ""; display: block; padding-top: 139.59%; }
}

/* ===== Modal de Conta / Retirada de sócio (m-conta) — v216 ==============================
   O modal de despesa virou o formulário de DOIS lançamentos (conta a pagar e retirada de
   sócio) + modo edição. Só o que está abaixo é novo: .seg/.opt/.vt-inp/.modal-scroll já
   existiam e são reaproveitados. ========================================================= */

/* Segmentado em tamanho de ESCOLHA PRINCIPAL (o .seg base nasceu pequeno, no menu do perfil).
   No claro a opção ativa vira "pastilha branca sobre trilho cinza"; no escuro `--surface`
   sobre `--surface2` teria contraste quase nulo → volta pro accent-soft. */
.seg--lg .seg-btn { padding: .6rem .5rem; font-size: .88rem; font-weight: 700; min-height: 2.75rem; }
.seg--lg .seg-btn i { font-size: 1.15rem; }
.seg--lg .seg-btn.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.dark .seg--lg .seg-btn.is-on { background: var(--accent-soft); box-shadow: none; }

/* Campo de dinheiro em DESTAQUE: é o número que o lojista confere antes de salvar.
   O "R$" é prefixo fixo (não faz parte do valor — a mascaraReal continua só com dígitos). */
.vt-money { position: relative; display: block; margin-top: .25rem; min-width: 0; }
.vt-money.relative { margin-top: 0; }          /* wrapper antigo (.relative.mt-1) já tem a margem */
.vt-money > .vt-inp { width: 100%; }
.vt-money-pre { position: absolute; left: .85rem; top: 50%; -webkit-transform: translateY(-50%);
  transform: translateY(-50%); font-size: 1rem; font-weight: 700; color: var(--muted); pointer-events: none; }
.vt-inp-xl { font-family: var(--vt-font-display), system-ui, sans-serif; font-size: 1.5rem; line-height: 2rem;
  font-weight: 800; padding: .5rem .85rem; padding-left: 2.6rem; }
.vt-inp-xl::placeholder { font-weight: 700; opacity: .55; }

/* Erro POR CAMPO (antes só existia uma linha de erro geral no fim do modal, longe do campo).
   Em select embrulhado pelo customSelect a classe vai no <label> (wrapper) → cai no .cselect-btn. */
.vt-inp.is-erro, .is-erro > .cselect > .cselect-btn { border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(198,40,40,.16); }
.cselect.is-erro .cselect-btn { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(198,40,40,.16); }
.vt-erro { display: block; margin-top: .25rem; font-size: 11px; font-weight: 600; color: var(--danger); }

/* Chips de sugestão (usa o .opt que já existe). MARGEM em vez de gap: o polyfill de flex-gap
   do Safari 12 só aplica margin-left em row — com flex-wrap as linhas quebradas colariam. */
.chips { display: flex; flex-wrap: wrap; margin: .35rem -.35rem -.35rem 0; }
.chips > .opt { margin: 0 .35rem .35rem 0; }

/* Micro-link de texto ("Escrever outra…") — menor que .btn-line, some no meio do form. */
.lnk-mini { font-size: 11px; font-weight: 700; color: var(--accent); background: none; border: 0;
  padding: .3rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.lnk-mini:hover { text-decoration: underline; }

/* Bloco recolhível "Mais opções" — tira parcelas/banco/compra do caminho do caso comum.
   O resumo à direita evita o clássico "tem coisa configurada aí dentro e eu não vejo". */
.disc { border-top: 1px solid var(--line); }
.disc-btn { width: 100%; display: flex; align-items: center; gap: .45rem; padding: .7rem 0;
  font-size: .82rem; font-weight: 700; color: var(--muted); background: none; border: 0;
  text-align: left; cursor: pointer; transition: color .15s; }
.disc-btn:hover { color: var(--accent); }
.disc-resumo { margin-left: auto; max-width: 55%; font-size: 11px; font-weight: 600; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-btn .car { margin-left: .35rem; transition: transform .15s; }
.disc.aberto .disc-btn .car { transform: rotate(180deg); }
.disc-corpo { padding-bottom: .4rem; }
@media (max-width: 767px) { .disc-btn { min-height: 2.75rem; } }

/* Caixa "conta paga" — fundo próprio porque ali se mexe em dinheiro que JÁ saiu. */
.box-pago { margin-top: .9rem; padding: .65rem .7rem; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface2); }

/* Rodapé com 3 ações (excluir + cancelar + salvar): o ícone não estica junto com os outros. */
.modal-footer .icon-btn { flex: 0 0 auto; }
.modal-footer .icon-btn:hover { border-color: var(--danger); color: var(--danger); background: transparent; }
.modal-footer .icon-btn:hover i { color: var(--danger); }
@media (max-width: 767px) { .modal-footer .icon-btn { width: 2.75rem; height: 2.75rem; } }

/* ===== Conferência de pedido (m-pedido-conf) ============================================ */
.pconf-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; }
.pconf-item img { width: 2.4rem; aspect-ratio: 245/342; object-fit: cover; border-radius: .35rem;
  background: var(--surface2); flex: 0 0 auto; }
.pconf-item .pconf-qtd { width: 4.2rem; text-align: center; padding: .35rem .4rem; }
.pconf-item.falta .pconf-qtd { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.pconf-item .pconf-custo { width: 6.5rem; text-align: right; padding: .35rem .5rem; }
/* Celular estreito: "Retirada de sócio" não cabe em 2 botões de 44px sem apertar a fonte. */
@media (max-width: 420px) { .seg--lg .seg-btn { font-size: .78rem; padding: .6rem .3rem; } .seg--lg .seg-btn i { font-size: 1rem; } }

/* v222 — tabela "Lucro por carta" no detalhe da compra */
.lc-tab th, .lc-tab td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lc-tab thead th { background: var(--surface2); font-weight: 700; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.lc-tab tbody tr:last-child td { border-bottom: 0; }
.lc-tab th.text-right, .lc-tab td.text-right { text-align: right; }
/* 1ª coluna fixa: no celular a tabela rola de lado e a carta continua visível (pista de rolagem). */
.lc-tab th:first-child, .lc-tab td:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.lc-tab thead th:first-child { background: var(--surface2); }
/* Zebra + rodapé de TOTAIS (v226): tabela grande fica legível linha a linha; o total do que
   está filtrado fecha a conta sem sair da tela. A 1ª célula sticky acompanha a zebra. */
.lc-tab tbody tr:nth-child(even) td, .lc-tab tbody tr:nth-child(even) td:first-child { background: var(--surface2); }
.lc-tab tbody tr:hover td, .lc-tab tbody tr:hover td:first-child { background: var(--accent-soft); }
.lc-tab tfoot td, .lc-tab tfoot td:first-child { background: var(--surface2); font-weight: 700; border-top: 2px solid var(--line); }

/* ===== Splash de carregamento — identidade VaultTCG (as cartas SÃO a marca) =====
   "Passar carta": um bolo de cartas (em leque) onde, sem parar, a carta do topo arqueia p/ o lado
   e volta (como dar/passar as cartas), com o mostrador do cofre em azul na base. Só transform de
   DIV; inset→longhand e gap com fallback (compat Safari 12). Polido pela revisão UI/UX 23/09. */
#splash {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: #0B1120;   /* abertura ink escura (Tela-31 do design) */
  opacity: 1; transition: opacity .5s ease, visibility .5s ease;
  /* rede de segurança: some sozinho depois de 14s mesmo que o JS não rode */
  animation: sp-safety .6s ease 14s forwards;
}
#splash.splash-out { opacity: 0; visibility: hidden; pointer-events: none; }
/* fallback de gap p/ Safari 12 (mesmo padrão do .modal-footer) */
#splash > * + * { margin-top: 28px; }
.sp-dots > * + * { margin-left: 4px; }
@supports (gap: 1rem) { #splash > * + * { margin-top: 0; } .sp-dots > * + * { margin-left: 0; } }
/* ABERTURA DO APP = LOGO ANIMADA (idêntico à Tela-31 "Abertura do App" do design): o leque de 4
   cartas da marca VaultTCG "respira" (cada carta balança levemente no eixo da base) e o disco do
   cofre da carta da frente gira 360°. Fundo ink escuro, wordmark, texto + dots e barra de progresso.
   É o loader de ABERTURA — diferente do "passar carta" (loader de SEÇÃO, ver .vt-card acima). */
.sp-logo { display: block; }
.sp-lg { transform-box: fill-box; transform-origin: 50% 100%;
  animation-duration: 2.4s; animation-timing-function: cubic-bezier(.55,0,.25,1); animation-iteration-count: infinite; }
.sp-lg1 { animation-name: sp-lq1; } .sp-lg2 { animation-name: sp-lq2; }
.sp-lg3 { animation-name: sp-lq3; } .sp-lg4 { animation-name: sp-lq4; }
@keyframes sp-lq1 { 0%, 100% { transform: rotate(0); } 35%, 62% { transform: rotate(-16deg) translateX(-1px); } }
@keyframes sp-lq2 { 0%, 100% { transform: rotate(0); } 35%, 62% { transform: rotate(-9deg); } }
@keyframes sp-lq3 { 0%, 100% { transform: rotate(0); } 35%, 62% { transform: rotate(-3deg) translateY(-1px); } }
@keyframes sp-lq4 { 0%, 100% { transform: rotate(0); } 35%, 62% { transform: rotate(9deg) translateY(-3px); } }
/* disco do cofre (na carta da frente) gira */
.sp-dial { transform-box: fill-box; transform-origin: 50% 56%; animation: sp-gira 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes sp-gira { 0%, 30% { transform: rotate(0); } 75%, 100% { transform: rotate(360deg); } }
/* wordmark no fundo escuro */
.sp-word { opacity: 0; font-size: 30px; line-height: 1; animation: sp-rise .5s ease .45s forwards; }
#splash .sp-word .w1 { color: #F3F5F8; } #splash .sp-word .w2 { color: #4F83FF; }
/* texto + dots + barra de progresso */
.sp-load { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; animation: sp-rise .5s ease .6s forwards; }
.sp-txt { font-size: 15px; font-weight: 600; color: #C9D0DC; display: inline-flex; align-items: baseline; }
.sp-dots { display: flex; gap: 4px; margin-left: 4px; }
.sp-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35;
  animation: sp-dot 1.4s ease-in-out infinite; }
.sp-dots i:nth-child(2) { animation-delay: .2s; }
.sp-dots i:nth-child(3) { animation-delay: .4s; }
.sp-track { width: 220px; height: 4px; border-radius: 4px; background: #1B2438; overflow: hidden; }
.sp-bar { width: 8%; height: 4px; border-radius: 4px; background: #4F83FF; animation: sp-barra 2.8s cubic-bezier(.55,0,.25,1) infinite; }
.sp-ver { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 12.5px; font-weight: 600; color: #8A94A7; }
@keyframes sp-barra { 0% { width: 8%; } 60% { width: 78%; } 100% { width: 96%; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sp-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes sp-safety { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  /* NÃO tira a animação do #splash: sp-safety (o failsafe de 14s) não tem movimento e precisa seguir */
  .sp-lg, .sp-dial, .sp-bar, .sp-dots i { animation: none; }
  .sp-word, .sp-load { animation: none; opacity: 1; transform: none; }
  .sp-bar { width: 64%; }
}

/* ===== LOGIN split-panel da marca (Tela-00/00b) — NÃO é modal: painel ESCURO com a marca + QR à
   esquerda, formulário no lado CLARO à direita. Todos os campos/fluxo são os mesmos (só a casca).
   overlay() liga 'flex' no #auth-overlay. Safari 12: sem gap de flex (margens + @supports), sem inset. */
/* preenche a tela INTEIRA sem cinza em volta (inset explícito p/ o Safari 12, que ignora `inset:0`);
   o fundo é o próprio ink do painel escuro, então não sobra moldura cinza mesmo se algo não encostar. */
#auth-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #0B1120; overflow-x: hidden; }
.auth-split { flex: 1 1 auto; display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 100%; align-items: stretch; }
.auth-brand { position: relative; overflow: hidden; flex: 0 0 46%; max-width: 680px; min-width: 300px; box-sizing: border-box;
  background: #0B1120; color: #F3F5F8;
  display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; }
/* marca d'água = TEXTURA sutil no canto (não um gráfico em primeiro plano); opacidade baixa p/ não parecer "bugada" */
.auth-brand-wm { position: absolute; right: -130px; top: -110px; opacity: .16; pointer-events: none; z-index: 0; }
.auth-brand-top, .auth-brand-mid, .auth-qr-card, .auth-brand-foot { position: relative; z-index: 1; }
.auth-brand > * + * { margin-top: 22px; }   /* fallback de gap (Safari 12) */
.auth-brand-top { display: flex; align-items: center; }
.auth-brand-wm-txt { margin-left: 12px; font-size: 26px; }
#auth-overlay .auth-brand-wm-txt .w1, #auth-overlay .auth-brand-foot .w1 { color: #F3F5F8; }
#auth-overlay .auth-brand-wm-txt .w2, #auth-overlay .auth-brand-foot .w2 { color: #4F83FF; }
.auth-brand-h { font-family: var(--vt-font-display); font-weight: 800; font-size: 34px; line-height: 1.07;
  letter-spacing: -.03em; max-width: 12em; }
.auth-brand-p { font-size: 15px; color: #A9B2C1; line-height: 1.55; max-width: 30em; margin-top: 12px; }
.auth-brand-foot { display: flex; align-items: center; font-size: 12.5px; color: #8A94A7; }
.auth-brand-foot .wordmark { font-size: 14px; margin-right: 5px; }
/* QR no painel escuro (mesmos ids/fluxo; só o visual muda) */
.auth-qr-card { background: #131B2E; border: 1px solid #1B2438; border-radius: 20px; padding: 20px 22px; }
.auth-qr-title { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #F2B632; }
.auth-qr-desc { font-size: 13px; color: #A9B2C1; line-height: 1.5; margin: 10px 0 14px; }
.auth-qr-btn { height: 44px; width: 100%; border: 1px solid #2B3752; border-radius: 12px; cursor: pointer;
  background: #1B2438; color: #F3F5F8; font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .13s; }
.auth-qr-btn:hover { background: #22304a; }
.auth-qr-box { display: flex; align-items: center; margin-top: 14px; }
.auth-qr-box > * + * { margin-left: 18px; }
.auth-qr-img { width: 168px; height: 168px; flex: none; background: #fff; border-radius: 12px;
  display: grid; place-items: center; padding: 8px; box-sizing: border-box; }
.auth-qr-img svg, .auth-qr-img img { width: 100%; height: 100%; display: block; }
.auth-qr-steps { font-size: 12.5px; color: #C9D0DC; line-height: 1.5; min-width: 0; }
.auth-qr-steps b { color: #fff; }
.auth-qr-status { color: #A9B2C1; margin-top: 8px; min-height: 14px; }
.auth-qr-cancel { background: none; border: 0; color: #8A94A7; text-decoration: underline; cursor: pointer;
  margin-top: 6px; font-size: 12px; padding: 0; }
/* lado claro — formulário */
.auth-form-wrap { flex: 1 1 0; min-width: 0; max-width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 40px; box-sizing: border-box; background: var(--page); }
.auth-form { width: 100%; max-width: 400px; min-width: 0; box-sizing: border-box; }
.auth-form .vt-inp { max-width: 100%; box-sizing: border-box; }
.auth-form-head { margin-bottom: 20px; }
#auth-titulo { font-family: var(--vt-font-display); font-weight: 800; font-size: 32px; letter-spacing: -.025em;
  line-height: 1.05; margin: 0; }
#auth-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
/* erro do login = caixa vermelha ACIMA dos campos (Tela-00b); vazia → some (não ocupa espaço) */
.auth-form .auth-msg { display: none; }
.auth-form .auth-msg:not(:empty) { display: block; background: rgba(198,40,40,.08);
  border: 1px solid rgba(198,40,40,.40); color: var(--danger); border-radius: 12px;
  padding: 10px 13px; font-size: 13px; font-weight: 600; line-height: 1.4; margin: -6px 0 16px; }
/* "Manter conectado" + "Esqueci a senha" na mesma linha (Tela-00b) */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.auth-esqueci { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.auth-esqueci:hover { color: var(--accent-hover); }
/* elementos que aparecem SÓ no celular (no desktop o QR fica no card do painel escuro) */
.auth-brand-qr, .auth-qr-link, .auth-cli-note { display: none; }
.auth-brand-qr { height: 36px; padding: 0 12px; border: 1px solid #2B3752; border-radius: 10px; box-sizing: border-box;
  background: #131B2E; color: #F3F5F8; align-items: center; font-weight: 700; font-size: 13px; cursor: pointer; }
.auth-brand-qr i { color: #F2B632; font-size: 15px; margin-right: 6px; }
.auth-qr-link { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
.auth-qr-link a { font-weight: 700; color: var(--accent); text-decoration: none; }
.auth-cli-note { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px;
  font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
/* ===== CELULAR (Tela-00b): login COMPACTO que cabe inteiro em 360×600 sem rolar =====
   Faixa da marca de 60px (logo + botão QR Code), título, campos, "Manter/Esqueci" na mesma linha,
   Entrar, link de QR e aviso do cliente no rodapé. Acima de 700px fica o split de 2 colunas. */
@media (max-width: 700px) {
  .auth-split { flex-direction: column; }
  /* faixa da marca = 60px */
  .auth-brand { flex: none; width: 100%; max-width: none; min-width: 0; height: 60px;
    flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 12px 0 18px; }
  .auth-brand > * + * { margin-top: 0; }
  .auth-brand-wm, .auth-brand-mid, .auth-brand-foot { display: none; }
  .auth-brand-top { flex: 1 1 auto; width: 100%; display: flex; align-items: center; }
  .auth-brand-top > svg { width: 30px; height: 30px; flex: none; }
  .auth-brand-wm-txt { font-size: 19px; margin-left: 8px; }
  .auth-brand-qr { display: inline-flex; margin-left: auto; }
  /* card do QR do desktop sai do fluxo; a CAIXA do QR vira overlay quando aberta (botão/​link do celular) */
  #auth-qr-wrap.auth-qr-card { position: absolute; left: 0; top: 0; width: 0; height: 0;
    padding: 0; margin: 0; background: none; border: 0; overflow: visible; }
  .auth-qr-title, .auth-qr-desc, .auth-qr-btn { display: none; }
  #auth-qr-box:not(.hidden) { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
    background: #0B1120; margin: 0; padding: 28px; flex-direction: column; align-items: center; justify-content: center; }
  #auth-qr-box:not(.hidden) .auth-qr-steps { color: #C9D0DC; margin-left: 0; margin-top: 16px; text-align: center; }
  /* form compacto que preenche a altura (rodapé do cliente colado embaixo) */
  .auth-form-wrap { flex: 1 1 auto; padding: 16px 18px; align-items: stretch; }
  .auth-form { max-width: none; display: flex; flex-direction: column; min-height: 100%; }
  #auth-sub { display: none; }
  .auth-form-head { margin-bottom: 12px; }
  #auth-titulo { font-size: 24px; }
  .auth-field { margin-bottom: 10px; }
  .auth-row { margin-top: 6px; }
  .auth-qr-link, .auth-cli-note { display: block; }
}
/* Fallback de gap (Safari 12) p/ os flex novos do splash/login (o resto do painel já usa margens) */
.sp-load > * + * { margin-top: 14px; }
.auth-qr-title > i + *, .auth-qr-btn > i + * { margin-left: 8px; }
@supports (gap: 1rem) {
  .sp-load > * + * { margin-top: 0; }
  .auth-qr-title > i + *, .auth-qr-btn > i + * { margin-left: 0; }
}
/* campo do login com ícone à esquerda + rótulo no padrão da marca (.vt-label) */
.auth-form .auth-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.auth-field { position: relative; display: block; margin-bottom: 14px; }
.auth-field > i { position: absolute; left: 12px; top: 50%; margin-top: -9px; font-size: 18px; color: var(--muted); pointer-events: none; }
.auth-field .vt-inp { padding-left: 38px; }