/* ─────────────────────────────────────────────────────────────────────────
   VATSE Estoque · página de venda: O RAZÃO

   Arquétipo desta página: a folha de razão de um almoxarifado. A composição
   é de DUAS COLUNAS com a esquerda fixa (o argumento fica parado enquanto o
   razão rola do lado), e a lista de movimentações é o herói: entrada, saída,
   ajuste, saldo resultante. Kraft e âmbar, papel de depósito.
   ───────────────────────────────────────────────────────────────────────── */

.ves-sales {
    --ves: var(--sys-accent, #d97706);
    --ves-tinta: #1c1408;
    --ves-papel: #faf7f1;
    --ves-linha: #e8e0d1;
    --ves-suave: #756751;
    background: var(--ves-papel);
    color: #221a0d;
}
.ves-sales .sc-container { max-width: 1180px; }

/* ── Hero: texto à esquerda, razão vivo à direita ─────────────────────── */
.ves-hero {
    position: relative;
    background: linear-gradient(160deg, var(--ves-tinta) 25%, #33240d 100%);
    color: #fff;
    padding: 82px 0 88px;
    overflow: hidden;
}
.ves-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 100% 34px;
}
.ves-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px; align-items: center;
}
.ves-kicker {
    display: inline-block; font-size: 0.80rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ves) 70%, #fff);
}
.ves-hero h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.7rem);
    font-weight: 900; letter-spacing: -.045em; line-height: 1.03; margin: 18px 0 16px;
}
.ves-hero h1 em { font-style: normal; color: var(--ves); }
.ves-hero p { color: rgba(255, 255, 255, .78); line-height: 1.7; margin: 0 0 28px; max-width: 46ch; }
.ves-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ves-actions-center { justify-content: center; }
.ves-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 28px; border-radius: 10px; font-weight: 800; font-size: .95rem;
    text-decoration: none; transition: transform .18s ease;
}
.ves-btn:hover { transform: translateY(-2px); }
.ves-btn-primary { background: var(--ves); color: #1c1408; }
.ves-btn-ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.ves-btn-outline-light { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.ves-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; font-size: .83rem; color: rgba(255, 255, 255, .6); }
.ves-proof span { display: inline-flex; align-items: center; gap: 8px; }
.ves-proof i { color: var(--ves); }

/* O razão: a peça gráfica exclusiva desta vertical */
.ves-razao {
    background: #fffdf8; color: #221a0d; border-radius: 14px;
    box-shadow: 0 44px 90px -46px rgba(0, 0, 0, .9);
    overflow: hidden;
}
.ves-razao-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 16px 20px; border-bottom: 1px solid var(--ves-linha);
    background: #f6f1e6;
}
.ves-razao-head strong { font-size: .92rem; font-weight: 800; }
.ves-razao-head span { font-size: 0.80rem; color: var(--ves-suave); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ves-mov {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center;
    padding: 13px 20px; border-bottom: 1px solid var(--ves-linha); font-size: .87rem;
}
.ves-mov:last-child { border-bottom: 0; }
.ves-mov .tipo {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
    font-size: 0.80rem; font-weight: 900;
}
.ves-mov .tipo.entrada { background: #e8f6ec; color: #166534; }
.ves-mov .tipo.saida { background: #fee2e2; color: #b42318; }
.ves-mov .tipo.ajuste { background: #fef3c7; color: #92400e; }
.ves-mov .quem { min-width: 0; }
.ves-mov .quem b { display: block; font-weight: 700; }
.ves-mov .quem small { color: var(--ves-suave); font-size: 0.80rem; }
.ves-mov .delta { font-weight: 900; white-space: nowrap; }
.ves-mov .delta.mais { color: #166534; }
.ves-mov .delta.menos { color: #b42318; }
.ves-mov .saldo {
    font-size: 0.80rem; color: var(--ves-suave); white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Miolo: coluna fixa à esquerda, telas rolando à direita ───────────── */
.ves-dupla { padding: 80px 0; }
.ves-dupla-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ves-fixa { position: sticky; top: 96px; }
.ves-section-tag {
    display: block; font-size: 0.80rem; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase;
    /* 80% do acento com preto ainda dava 4,42:1 sobre o papel tingido
       desta vertical. 72% fecha o AA sem mudar o tom da etiqueta. */
    color: color-mix(in srgb, var(--ves) 72%, #000); margin-bottom: 12px;
}
.ves-section-tag-light { color: color-mix(in srgb, var(--ves) 60%, #fff); }
.ves-dupla h2, .ves-componente h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900;
    letter-spacing: -.04em; line-height: 1.1; margin: 0 0 14px;
}
.ves-componente-apoio, .ves-fixa p { color: var(--ves-suave); line-height: 1.75; margin: 0 0 22px; }
.ves-marcas { display: grid; gap: 12px; }
.ves-marca { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.ves-marca i { color: var(--ves); margin-top: 4px; }

.ves-telas { display: grid; gap: 22px; }
.ves-tela {
    background: #fff; border: 1px solid var(--ves-linha); border-radius: 14px; overflow: hidden;
    box-shadow: 0 26px 56px -46px rgba(28, 20, 8, .8);
}
.ves-tela img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--ves-linha); }
.ves-tela figcaption { padding: 16px 20px 18px; }
.ves-tela h3 { font-size: .98rem; font-weight: 800; margin: 0 0 5px; }
.ves-tela p { font-size: .88rem; line-height: 1.6; color: var(--ves-suave); margin: 0; }

/* ── Faixa ────────────────────────────────────────────────────────────── */
.ves-strip { background: var(--ves-tinta); color: #fff; padding: 34px 0; }
.ves-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ves-strip-grid > div { padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, .1); }
.ves-strip-grid > div:last-child { border-right: 0; }
.ves-strip-grid strong { display: block; font-size: 1.7rem; font-weight: 900; color: var(--ves); letter-spacing: -.03em; }
.ves-strip-grid span { font-size: .82rem; color: rgba(255, 255, 255, .58); }

.ves-paper { background: var(--ves-papel); }
.ves-componente { padding: 72px 0; }
.ves-componente-justa { padding-top: 0; }
.ves-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ves-chip {
    background: #fff; border: 1px solid var(--ves-linha); border-radius: 999px;
    padding: 10px 18px; font-size: .88rem; font-weight: 600; color: #4a3f2c;
}

.ves-final { background: var(--ves-tinta); color: #fff; padding: 80px 0; text-align: center; }
.ves-final h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; margin: 0 0 26px; }

@media (max-width: 1024px) {
    .ves-hero-grid, .ves-dupla-grid { grid-template-columns: 1fr; gap: 40px; }
    .ves-fixa { position: static; }
}
@media (max-width: 640px) {
    .ves-hero { padding: 54px 0 60px; }
    .ves-mov { grid-template-columns: auto 1fr auto; }
    .ves-mov .saldo { display: none; }
    .ves-strip-grid { grid-template-columns: 1fr; gap: 22px; }
    .ves-strip-grid > div { border-right: 0; }
    .ves-dupla, .ves-componente { padding: 48px 0; }
}


/* -------------------------------------------------------------------------
   Átomos do núcleo em superfície clara
   -------------------------------------------------------------------------
   Planos e dúvidas vêm de core.css, desenhados sobre fundo escuro. Aqui eles
   caem sobre papel, e sem estas duas linhas o botão de vidro fica com tinta
   #f0f0f0 sobre um cartão quase branco: razão 1,01, ou seja, texto invisível
   num botão que vende. `--sv-accent-ink` é o acento já escurecido o bastante
   para ser lido como texto, medido contra o fundo real desta página.
   ------------------------------------------------------------------------- */
[data-venda="inventory"] .sc-btn-glass{background:#fff;color:#16273d;border:1px solid rgba(22,39,61,.18)}
[data-venda="inventory"] .sc-btn-glass:hover{background:#f3f6fa;color:#16273d;border-color:rgba(22,39,61,.32)}