/* ==========================================================================
MARIA FLOR JOIAS — Design Tokens
Paleta inspirada na logo: dourado (folhas do girassol), branco/creme (fundo),
blush pastel (respiro/apoio), grafite quente (texto).
Tipografia: serif elegante para display (eco do "Maria Flor" da logo) +
sans utilitária com tracking largo para rótulos (eco do "— JOIAS —").
========================================================================== */
/* Fonte carregada via + no
de cada página (não por @import aqui) — isso permite ao navegador
descobrir e começar a baixar a fonte em paralelo com o CSS, em vez de
esperar o CSS inteiro carregar pra só então descobrir que precisa buscar
a fonte (efeito cascata que atrasa a primeira renderização do texto). */
:root {
/* Cor */
--cream: #FCFAF5;
--cream-deep: #F6F1E7;
--blush: #F6E8DF;
--blush-soft: #FBF2EC;
--gold-deep: #A87B12;
--gold-mid: #C79A32;
--gold-light: #E8C979;
--gold-line: #D9B45F;
--charcoal: #362E24;
--charcoal-60: rgba(54, 46, 36, 0.62);
--charcoal-35: rgba(54, 46, 36, 0.35);
--error: #B24A3C;
--success-bg: #FBF7EC;
/* Tipografia */
--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
--font-body: 'Jost', 'Segoe UI', sans-serif;
/* Layout */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 22px;
--shadow-soft: 0 18px 44px rgba(168, 123, 18, 0.10), 0 2px 8px rgba(54,46,36,0.05);
--ring: 0 0 0 3px rgba(199, 154, 50, 0.28);
--max-w: 660px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--charcoal);
background:
radial-gradient(1200px 600px at 50% -10%, var(--blush-soft), transparent 60%),
var(--cream);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
::selection { background: var(--gold-light); color: var(--charcoal); }
:focus-visible {
outline: none;
box-shadow: var(--ring);
border-color: var(--gold-mid) !important;
}
/* ---------- Utilitários de rótulo (eco do "— JOIAS —") ---------- */
.eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
}
.eyebrow::before,
.eyebrow::after {
content: '';
flex: 0 0 34px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-line));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
/* ---------- Header / Hero ---------- */
.page {
max-width: var(--max-w);
margin: 0 auto;
padding: 56px 22px 90px;
position: relative;
}
.hero {
text-align: center;
margin-bottom: 40px;
}
.hero-mark {
width: 76px;
height: 76px;
margin: 0 auto 18px;
display: block;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(32px, 6vw, 44px);
margin: 6px 0 2px;
background: linear-gradient(120deg, var(--gold-deep), var(--gold-mid) 45%, var(--gold-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.01em;
}
.hero .subtitle {
font-family: var(--font-body);
font-weight: 300;
font-size: 15.5px;
color: var(--charcoal-60);
max-width: 440px;
margin: 14px auto 0;
}
/* ---------- Cartão do formulário ---------- */
.card {
background: #fff;
border: 1px solid rgba(199, 154, 50, 0.16);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: clamp(24px, 5vw, 46px);
position: relative;
}
.card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(90deg, var(--gold-light), var(--gold-deep), var(--gold-light));
}
/* ---------- Seções do formulário ---------- */
.f-section { margin-bottom: 34px; }
.f-section:last-of-type { margin-bottom: 0; }
.f-section-title {
margin: 0 0 20px;
text-align: left;
}
.f-section-title .eyebrow { justify-content: flex-start; }
.f-section-title .eyebrow::before { display: none; }
.f-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 16px;
margin-bottom: 22px;
}
.f-grid:last-child { margin-bottom: 0; }
.f-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) {
.f-grid { grid-template-columns: 1fr; }
}
/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
font-size: 13px;
font-weight: 500;
color: var(--charcoal);
letter-spacing: 0.01em;
}
.field .req { color: var(--gold-deep); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea {
font-family: var(--font-body);
/* 16px é o mínimo para o Safari do iOS não forçar zoom automático da
página ao focar o campo — abaixo disso, tocar no campo (principalmente
o de data, que já abre um seletor nativo próprio) deixa a tela "zoada". */
font-size: 16px;
color: var(--charcoal);
background: var(--cream-deep);
border: 1px solid rgba(54, 46, 36, 0.10);
border-radius: var(--radius-sm);
padding: 12px 14px;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
width: 100%;
}
.field input[type="date"] {
/* Altura/linha explícitas — o controle nativo de data tem métricas
internas próprias que variam entre iOS/Android e podem ficar
desalinhadas com os outros campos se não forem fixadas. */
min-height: 46px;
line-height: normal;
-webkit-appearance: none;
appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--charcoal-35); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(168,123,18,0.35); }
.field input:focus, .field select:focus, .field textarea:focus {
background: #fff;
border-color: var(--gold-mid);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A87B12' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.hint { font-size: 12px; color: var(--charcoal-35); margin-top: 2px; }
.error-msg {
font-size: 12px;
color: var(--error);
min-height: 15px;
display: none;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--error); background: #FBF1EF; }
.field.invalid .error-msg { display: block; }
/* ---------- Grupos de opção (radio) ---------- */
.option-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.option-pill {
position: relative;
}
.option-pill input {
position: absolute;
opacity: 0;
width: 1px; height: 1px;
}
.option-pill span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(54, 46, 36, 0.14);
background: var(--cream-deep);
font-size: 14px;
color: var(--charcoal-60);
cursor: pointer;
transition: all .16s ease;
user-select: none;
}
.option-pill span::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
border: 1.5px solid var(--gold-mid);
flex-shrink: 0;
transition: all .16s ease;
}
.option-pill input:checked + span {
background: linear-gradient(120deg, var(--gold-light), var(--gold-mid));
border-color: var(--gold-deep);
color: var(--charcoal);
font-weight: 500;
}
.option-pill input:checked + span::before {
background: var(--gold-deep);
box-shadow: 0 0 0 2px #fff inset;
}
.option-pill input:focus-visible + span { box-shadow: var(--ring); }
/* Campo condicional */
.conditional {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
margin-top: 0;
}
.conditional.open {
max-height: 160px;
opacity: 1;
margin-top: 12px;
}
/* ---------- Botão de envio ---------- */
.submit-row { margin-top: 36px; text-align: center; }
.btn-submit {
appearance: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(120deg, var(--gold-deep), var(--gold-mid));
padding: 15px 42px;
border-radius: 999px;
box-shadow: 0 12px 26px rgba(168, 123, 18, 0.32);
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
min-width: 240px;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(168, 123, 18, 0.4); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-submit .spinner {
display: none;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.5);
border-top-color: #fff;
border-radius: 50%;
margin-right: 8px;
animation: spin .7s linear infinite;
vertical-align: -2px;
}
.btn-submit.loading .spinner { display: inline-block; }
.btn-submit.loading .btn-label { opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-footnote {
text-align: center;
font-size: 11.5px;
color: var(--charcoal-35);
margin-top: 16px;
}
.submit-error {
display: none;
text-align: center;
color: var(--error);
font-size: 13px;
margin-top: 14px;
background: #FBF1EF;
border: 1px solid rgba(178, 74, 60, 0.25);
border-radius: var(--radius-sm);
padding: 10px 14px;
}
.submit-error.show { display: block; }
/* ---------- Modal de sucesso ---------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(54, 46, 36, 0.42);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
z-index: 100;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
background: #fff;
border-radius: var(--radius-lg);
padding: 40px 34px;
max-width: 420px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
text-align: center;
transform: translateY(14px) scale(0.98);
transition: transform .28s ease;
box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}
.modal-overlay.show .modal { transform: translateY(0) scale(1); }
/* Área de ações dos formulários longos (produto, cliente, acerto etc.) —
fica fixa na base do modal enquanto o conteúdo rola por trás, então os
botões continuam alcançáveis sem precisar rolar até o fim. Sem margem
negativa (isso causava sobreposição de texto em modais curtos — a
posição "sticky" acabava grudando cedo demais e cobria o conteúdo). */
.modal-actions {
position: sticky;
bottom: 0;
background: #fff;
margin-top: 22px;
padding-top: 14px;
border-top: 1px solid rgba(199,154,50,0.18);
}
/* Modais curtos (confirmação, detalhe de lead) não precisam de rodapé fixo
— só um espaçamento normal, sem "sticky" (que causava a sobreposição). */
.lead-modal-actions,
.modal-confirm-actions {
margin-top: 22px;
}
.modal-mark {
width: 58px; height: 58px;
margin: 0 auto 18px;
}
.modal h2 {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
color: var(--gold-deep);
margin: 0 0 12px;
}
.modal p {
font-size: 14.5px;
color: var(--charcoal-60);
line-height: 1.6;
margin: 0 0 24px;
}
.modal .btn-close {
appearance: none;
border: 1px solid rgba(168,123,18,0.4);
background: transparent;
color: var(--gold-deep);
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 11px 28px;
border-radius: 999px;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.modal .btn-close:hover { background: var(--gold-deep); color: #fff; }
/* ==========================================================================
ADMIN
========================================================================== */
.admin-page { max-width: 1080px; }
/* ==========================================================================
Login — painel institucional (desktop) + formulário centralizado
========================================================================== */
.login-shell {
min-height: 100dvh;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.login-shell { grid-template-columns: 1.05fr 1fr; }
}
.login-brand-panel {
display: none;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: 64px 56px;
background:
linear-gradient(150deg, rgba(168,123,18,0.88), rgba(199,154,50,0.82) 65%, rgba(224,184,102,0.78)),
url("https://images.unsplash.com/photo-1760784213113-e53f4b4c96c6?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat;
color: #fff;
position: relative;
}
@media (min-width: 900px) {
.login-brand-panel { display: flex; }
}
.login-brand-icon {
width: 58px; height: 58px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
margin-bottom: 6px;
}
.login-brand-icon img { width: 36px; height: 36px; }
.login-brand-eyebrow {
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.85); font-weight: 500; margin-bottom: -6px;
}
.login-brand-panel h1 {
font-family: var(--font-display); font-weight: 600; font-size: 28px; margin: 0; line-height: 1.25;
color: #fff; max-width: 420px;
}
.login-brand-tagline { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.9); max-width: 400px; margin: 0; }
.login-brand-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.login-brand-list li {
font-size: 13.5px; color: rgba(255,255,255,0.92);
padding-left: 22px; position: relative;
}
.login-brand-list li::before {
content: '✓'; position: absolute; left: 0; top: 0;
font-weight: 600;
}
.login-form-panel {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 20px;
}
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card-logo { width: 56px; height: 56px; display: block; margin: 0 auto 10px; }
.login-card h1 { font-family: var(--font-display); font-size: 26px; margin: 4px 0 20px; color: var(--charcoal); }
.login-card .field { text-align: left; margin-bottom: 16px; }
.password-field-wrap { position: relative; }
.password-field-wrap input { width: 100%; padding-right: 44px; }
.password-toggle {
position: absolute;
right: 4px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 50%;
color: var(--charcoal-35);
cursor: pointer;
transition: color .15s ease, background .15s ease;
}
.password-toggle:hover { color: var(--gold-deep); background: var(--cream-deep); }
.login-forgot-row { text-align: right; margin: -8px 0 18px; }
.login-forgot-row a {
font-size: 12.5px; color: var(--gold-deep); text-decoration: none; font-weight: 500;
}
.login-forgot-row a:hover { text-decoration: underline; }
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 26px;
flex-wrap: wrap;
}
.admin-topbar h1 {
font-family: var(--font-display);
font-size: 28px;
margin: 0;
color: var(--charcoal);
}
.admin-topbar .admin-sub { font-size: 12.5px; color: var(--charcoal-60); margin-top: 2px; }
.btn-secondary {
appearance: none;
border: 1px solid rgba(54,46,36,0.16);
background: #fff;
color: var(--charcoal-60);
font-family: var(--font-body);
font-size: 12.5px;
letter-spacing: 0.03em;
padding: 9px 18px;
border-radius: 999px;
cursor: pointer;
transition: all .16s ease;
}
.btn-secondary:hover { border-color: var(--gold-mid); color: var(--gold-deep); }
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.stat-card {
background: #fff;
border: 1px solid rgba(199,154,50,0.16);
border-radius: var(--radius-md);
padding: 16px 18px;
box-shadow: var(--shadow-soft);
}
.stat-card .num {
font-family: var(--font-body);
font-size: 26px;
font-weight: 600;
color: var(--gold-deep);
line-height: 1;
}
.stat-card .lbl {
font-size: 11.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--charcoal-60);
margin-top: 6px;
}
.admin-toolbar {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.admin-toolbar input[type="search"] {
flex: 1;
min-width: 200px;
font-family: var(--font-body);
font-size: 14px;
padding: 11px 16px;
border-radius: 999px;
border: 1px solid rgba(54,46,36,0.14);
background: #fff;
}
.admin-toolbar input[type="search"]:focus { border-color: var(--gold-mid); }
.table-wrap {
background: #fff;
border: 1px solid rgba(199,154,50,0.16);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
overflow: auto;
max-height: 68vh;
}
table.data-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
table-layout: fixed;
}
table.data-table thead th {
position: sticky;
top: 0;
background: var(--cream-deep);
text-align: left;
padding: 10px 12px;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-deep);
border-bottom: 1px solid rgba(199,154,50,0.25);
white-space: nowrap;
}
table.data-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid rgba(54,46,36,0.06);
color: var(--charcoal);
vertical-align: top;
/* Por padrão nenhuma célula quebra linha (data, valor, status etc. são
curtos e ficam feios quebrados) — só a coluna com nome de produto
(marcada com data-label="Item"/"Itens" logo abaixo) tem exceção, porque
ela genuinamente pode ser longa (vários produtos numa venda só). */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.data-table tbody td[data-label="Item"],
table.data-table tbody td[data-label="Itens"] {
white-space: normal;
overflow-wrap: break-word;
text-overflow: clip;
max-width: 260px;
}
table.data-table tbody tr:hover { background: var(--blush-soft); }
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.badge.yes { background: #EAF3E7; color: #4C7A3D; }
.badge.no { background: #F3E7E7; color: #A24A4A; }
.empty-state, .loading-state {
text-align: center;
padding: 60px 20px;
color: var(--charcoal-35);
font-size: 14px;
}
.admin-error {
background: #FBF1EF;
border: 1px solid rgba(178,74,60,0.3);
color: var(--error);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 13px;
margin-bottom: 16px;
display: none;
}
.admin-error.show { display: block; }
@media (max-width: 640px) {
.admin-topbar { align-items: flex-start; }
}
/* ==========================================================================
Tabelas responsivas — em telas estreitas cada linha vira um "card"
empilhado, com o nome da coluna (data-label) ao lado do valor, em vez de
forçar rolagem horizontal. O cabeçalho se torna supérfluo nesse
modo (a informação equivalente já vai em cada célula) e é escondido.
========================================================================== */
@media (max-width: 768px) {
.table-wrap { overflow: visible; max-height: none; }
table.data-table { min-width: 0; width: 100%; }
table.data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
table.data-table tr {
border: 1px solid rgba(199,154,50,0.18);
border-radius: var(--radius-md);
margin-bottom: 12px;
padding: 4px 14px;
background: #fff;
}
table.data-table tbody tr:hover { background: #fff; }
table.data-table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid rgba(54,46,36,0.06);
text-align: right;
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: none;
}
table.data-table td:last-child { border-bottom: none; }
table.data-table td::before {
content: attr(data-label);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: left;
flex-shrink: 0;
}
/* Colunas sem cabeçalho de texto (foto, botões de ação) — sem rótulo,
conteúdo alinhado à direita/centro em vez de espremido contra o rótulo. */
table.data-table td:not([data-label]),
table.data-table td[data-label=""] {
justify-content: flex-end;
}
table.data-table td:not([data-label])::before,
table.data-table td[data-label=""]::before {
display: none;
}
}
/* ==========================================================================
ERP — componentes adicionais (abas, formulários inline, cartões de fluxo)
========================================================================== */
.tabs {
display: flex;
gap: 6px;
border-bottom: 1px solid rgba(199,154,50,0.2);
margin-bottom: 22px;
flex-wrap: wrap;
}
@media (max-width: 640px) {
/* Quebrar em várias linhas desalinhadas ficava com espaçamento estranho.
Uma linha só, rolável, é o padrão mais comum e mais limpo pra barra de
abas no mobile — desliza pro lado em vez de empilhar. */
.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }
}
.tab-btn {
appearance: none;
border: none;
background: transparent;
padding: 10px 16px;
font-family: var(--font-body);
font-size: 13.5px;
color: var(--charcoal-60);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tab-btn:hover { color: var(--gold-deep); }
.tab-btn.active { color: var(--gold-deep); border-bottom-color: var(--gold-deep); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.inline-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
align-items: end;
background: var(--cream-deep);
border: 1px solid rgba(199,154,50,0.16);
border-radius: var(--radius-md);
padding: 18px;
margin-bottom: 20px;
}
.inline-form .field { margin: 0; }
.inline-form .field.full { grid-column: 1 / -1; }
.inline-form .field label { font-size: 12px; }
.inline-form input, .inline-form select {
font-family: var(--font-body);
font-size: 14px;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(54,46,36,0.14);
background: #fff;
width: 100%;
box-sizing: border-box;
}
.inline-form .btn-full-row { grid-column: 1 / -1; }
.btn-sm {
appearance: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(120deg, var(--gold-deep), var(--gold-mid));
color: #fff;
}
.btn-sm:hover { opacity: 0.92; }
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm.danger { background: linear-gradient(120deg, #A24A4A, #C4635D); }
.btn-sm.ghost { background: transparent; color: var(--gold-deep); border: 1px solid rgba(168,123,18,0.35); }
/* Feedback visual e bloqueio durante o registro de vendas */
.venda-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 142px;
transition: opacity .16s ease, background .2s ease;
}
.venda-submit-indicator {
display: none;
width: 14px;
height: 14px;
flex: 0 0 14px;
}
.venda-submit-btn.is-loading .venda-submit-indicator {
display: inline-block;
border: 2px solid rgba(255,255,255,.45);
border-top-color: #fff;
border-radius: 50%;
animation: spin .7s linear infinite;
}
.venda-submit-btn.is-success .venda-submit-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-basis: 18px;
}
.venda-submit-btn.is-success .venda-submit-indicator::before {
content: "✓";
font-size: 17px;
line-height: 1;
font-weight: 700;
}
.venda-submit-btn.is-success {
background: #3f8f62;
}
.leads-queue { display: flex; flex-direction: column; gap: 12px; }
.lead-card {
background: #fff;
border: 1px solid rgba(199,154,50,0.16);
border-radius: var(--radius-md);
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.lead-card .lead-info h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; color: var(--charcoal); }
.lead-card .lead-info p { margin: 2px 0; font-size: 12.5px; color: var(--charcoal-60); }
.lead-card .lead-actions { display: flex; gap: 8px; }
.credential-box {
background: var(--success-bg);
border: 1px solid rgba(168,123,18,0.3);
border-radius: var(--radius-md);
padding: 16px;
margin-top: 12px;
font-size: 13.5px;
}
.credential-box strong { color: var(--gold-deep); }
.credential-box code {
background: #fff;
padding: 2px 8px;
border-radius: 4px;
font-family: var(--font-mono, monospace);
}
.alert-box {
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 13px;
margin-bottom: 14px;
display: none;
}
.alert-box.show { display: block; }
.alert-box.error { background: #FBF1EF; border: 1px solid rgba(178,74,60,0.25); color: var(--error); }
.alert-box.success { background: var(--success-bg); border: 1px solid rgba(168,123,18,0.3); color: var(--gold-deep); }
.kv-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kv-list .row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgba(54,46,36,0.06); }
.kv-list .row .label { color: var(--charcoal-60); }
.kv-list .row .value { font-weight: 500; color: var(--charcoal); }
.stock-list { display: flex; flex-direction: column; gap: 8px; }
.stock-row {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--cream-deep);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 13.5px;
}
.stock-row .qty { font-weight: 500; color: var(--gold-deep); }
.low-stock { color: var(--error); font-weight: 500; }
.valor-negativo { color: var(--error); font-weight: 500; }
.valor-positivo { color: var(--charcoal); }
.nav-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.nav-top .brand { font-family: var(--font-display); font-size: 20px; color: var(--gold-deep); }
/* Sub-abas dentro do detalhe da revendedora (mesmo visual das abas principais) */
.subtab-btn {
appearance: none;
border: none;
background: transparent;
padding: 10px 16px;
font-family: var(--font-body);
font-size: 13.5px;
color: var(--charcoal-60);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.subtab-btn:hover { color: var(--gold-deep); }
.subtab-btn.active { color: var(--gold-deep); border-bottom-color: var(--gold-deep); font-weight: 500; }
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }
.lead-card { cursor: pointer; }
.lead-card .lead-actions button { cursor: pointer; }
.payment-row {
background: #fff;
border: 1px solid rgba(199,154,50,0.16);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: 10px;
}
.payment-row .payment-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.payment-row textarea {
width: 100%;
font-family: var(--font-body);
font-size: 13px;
padding: 8px 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(54,46,36,0.14);
background: var(--cream-deep);
resize: vertical;
min-height: 44px;
}
/* ==========================================================================
Toasts e diálogo de confirmação (substituem alert()/confirm() nativos)
========================================================================== */
#toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 340px;
}
.toast {
background: #fff;
border-radius: var(--radius-md);
padding: 13px 18px;
font-family: var(--font-body);
font-size: 13.5px;
box-shadow: 0 12px 28px rgba(0,0,0,0.16);
border-left: 4px solid var(--error);
color: var(--charcoal);
opacity: 0;
transform: translateX(20px);
transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-error { border-left-color: var(--error); }
.toast-success { border-left-color: var(--gold-deep); }
.modal-x {
position: absolute;
top: 14px;
right: 16px;
appearance: none;
border: none;
background: transparent;
font-size: 26px;
line-height: 1;
color: var(--charcoal-35);
cursor: pointer;
padding: 4px 8px;
border-radius: 50%;
transition: color .15s ease, background .15s ease;
}
.modal-x:hover { color: var(--charcoal); background: var(--cream-deep); }
.modal-confirm { position: relative; padding-top: 34px; }
.modal-confirm-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
color: var(--charcoal);
margin: 0 0 10px;
}
.modal-confirm-message {
font-size: 14px;
color: var(--charcoal-60);
line-height: 1.55;
margin: 0 0 22px;
}
.modal-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.escolher-opcao-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; text-align: left; }
.escolher-opcao-btn {
appearance: none;
width: 100%;
padding: 12px 16px;
border-radius: var(--radius-sm);
border: 1px solid rgba(199,154,50,0.3);
background: var(--cream-deep);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 14px;
text-align: left;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.escolher-opcao-btn:hover { background: #fff; border-color: var(--gold-mid); }
.escolher-opcao-btn:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 1px; }
/* Modal de detalhe do lead precisa de posição relativa para o X e espaço pros botões no rodapé */
#lead-modal .modal { position: relative; padding-top: 36px; }
.lead-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
/* Botões de ícone (editar/excluir) — mais intuitivos que texto */
.icon-btn {
appearance: none;
border: 1px solid rgba(54,46,36,0.14);
background: #fff;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover { transform: translateY(-1px); border-color: var(--gold-mid); background: var(--cream-deep); }
.icon-btn.danger:hover { border-color: rgba(178,74,60,0.4); background: #FBF1EF; }
.product-thumb {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
background: var(--cream-deep);
border: 1px solid rgba(199,154,50,0.16);
}
.product-thumb-wrap { position: relative; width: 40px; height: 40px; }
.product-thumb-wrap .product-thumb,
.product-thumb-wrap .product-thumb-placeholder { width: 40px; height: 40px; }
.product-thumb-remover {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.08);
background: #fff;
color: var(--error);
font-size: 10px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.product-thumb-remover:hover { background: var(--error); color: #fff; }
.product-thumb-placeholder {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--cream-deep);
border: 1px solid rgba(199,154,50,0.16);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--charcoal-35);
}
/* ==========================================================================
Cabeçalho de app (compartilhado entre admin e dashboard da revendedora)
========================================================================== */
.app-header {
background: linear-gradient(135deg, #fff 0%, var(--blush-soft) 100%);
border: 1px solid rgba(199,154,50,0.2);
border-radius: var(--radius-lg);
padding: 20px 26px;
margin-bottom: 26px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 18px;
box-shadow: var(--shadow-soft);
position: relative;
}
@media (max-width: 640px) {
/* Header mobile compacto: o botão Sair permanece no canto superior
direito sem criar uma faixa vazia acima da identidade da usuária. */
.app-header {
padding: 20px 18px;
padding-right: 76px;
min-height: 0;
flex-wrap: nowrap;
}
.app-header-left {
width: auto;
min-width: 0;
flex: 1;
}
.app-header #logout-btn {
position: absolute;
top: 16px;
right: 16px;
min-width: 0;
width: auto;
height: 34px;
padding: 0 13px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
white-space: nowrap;
box-shadow: none;
}
}
.app-header::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(90deg, var(--gold-light), var(--gold-deep), var(--gold-light));
}
.app-header-left { display: flex; align-items: center; gap: 16px; }
.app-header-icon {
width: 52px; height: 52px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(168,123,18,0.18);
flex-shrink: 0;
}
.app-header-icon img { width: 32px; height: 32px; }
.app-header-icon.has-profile-photo {
overflow: hidden;
padding: 0;
}
.app-header-icon.has-profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.app-header-titles h1 {
font-family: var(--font-display); font-weight: 600; font-size: 23px; margin: 0;
background: linear-gradient(120deg, var(--gold-deep), var(--gold-mid));
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1.15;
}
.app-header-titles .subtitle-line {
font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-deep); margin-top: 2px; font-weight: 500;
}
.app-header-greeting { font-size: 13.5px; color: var(--charcoal-60); margin-top: 8px; }
.app-header-greeting strong { color: var(--charcoal); font-weight: 600; }
.role-badge {
display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
background: linear-gradient(120deg, var(--gold-light), var(--gold-mid));
color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
margin-left: 9px; vertical-align: middle;
}
/* ==========================================================================
Upload de foto customizado (produto / perfil)
========================================================================== */
.photo-upload-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photo-upload-preview {
width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
border: 1.5px dashed rgba(199,154,50,0.45); background: var(--cream-deep);
display: flex; align-items: center; justify-content: center;
color: var(--charcoal-35); font-size: 20px; flex-shrink: 0;
}
.photo-upload-btn-label {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(168,123,18,0.35);
background: #fff; color: var(--gold-deep); font-size: 13px; font-weight: 500; cursor: pointer;
transition: background .15s ease, border-color .15s ease;
white-space: nowrap;
}
.photo-upload-btn-label:hover { background: var(--cream-deep); border-color: var(--gold-mid); }
.photo-upload-filename { font-size: 12px; color: var(--charcoal-60); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Select dentro de inline-form ganha a mesma seta customizada dos outros selects */
.inline-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A87B12' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 34px;
cursor: pointer;
}
.search-input {
width: 100%;
max-width: 360px;
font-family: var(--font-body);
font-size: 14px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(54,46,36,0.14);
background: #fff;
margin-bottom: 16px;
transition: border-color .15s ease;
}
.search-input:focus { border-color: var(--gold-mid); }
/* ==========================================================================
Venda estilo catálogo — busca de produto/cliente + carrinho
========================================================================== */
.busca-resultados {
position: absolute;
z-index: 50;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid rgba(199,154,50,0.25);
border-radius: var(--radius-md);
box-shadow: 0 14px 32px rgba(0,0,0,0.14);
max-height: 280px;
overflow-y: auto;
margin-top: 4px;
}
.busca-resultado-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(54,46,36,0.06);
}
.busca-resultado-item:last-child { border-bottom: none; }
.busca-resultado-item:hover { background: var(--cream-deep); }
.busca-resultado-info { display: flex; flex-direction: column; gap: 2px; }
.busca-resultado-nome { font-size: 13.5px; color: var(--charcoal); font-weight: 500; }
.busca-resultado-detalhe { font-size: 11.5px; color: var(--charcoal-60); }
.busca-resultado-vazio { padding: 12px; font-size: 13px; color: var(--charcoal-35); text-align: center; }
.busca-resultado-criar { color: var(--gold-deep); font-weight: 500; font-size: 13.5px; }
.carrinho { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.carrinho-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--cream-deep);
border-radius: var(--radius-sm);
padding: 8px 10px;
}
.carrinho-item-nome { flex: 1; font-size: 13.5px; color: var(--charcoal); }
.carrinho-item-qtd {
width: 56px;
text-align: center;
font-family: var(--font-body);
font-size: 13px;
padding: 6px 4px;
border-radius: var(--radius-sm);
border: 1px solid rgba(54,46,36,0.14);
}
.carrinho-item-subtotal { font-size: 13px; font-weight: 500; color: var(--gold-deep); min-width: 70px; text-align: right; }
.carrinho-total {
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: baseline;
font-size: 15px;
color: var(--charcoal);
padding: 10px 4px;
border-top: 1px solid rgba(199,154,50,0.2);
}
.carrinho-total strong { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--gold-deep); }
.cliente-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--success-bg);
border: 1px solid rgba(168,123,18,0.3);
border-radius: 999px;
padding: 4px 12px;
font-size: 12.5px;
color: var(--gold-deep);
}
/* Carrinhos crescem com o conteúdo; a rolagem só entra depois de vários itens. */
.carrinho { min-height: 0; height: auto; overflow: visible; }
.carrinho-scroll, #va-carrinho, #v-carrinho { max-height: min(52vh, 460px); overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.carrinho-item { min-height: 58px; flex-wrap: nowrap; }
.carrinho-item-nome { min-width: 0; overflow-wrap: anywhere; }
.catalogo-link-row { display:flex; gap:8px; flex-wrap:wrap; }
.catalogo-link-row input {
flex: 1;
min-width: 220px;
font-family: var(--font-body);
font-size: 16px;
color: var(--charcoal);
background: var(--cream-deep);
border: 1px solid rgba(54, 46, 36, 0.10);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.modal-wide { width:min(900px, 94vw); max-width:900px; max-height:90vh; overflow-y:auto; }
.acerto-itens { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.acerto-item { display:grid; grid-template-columns:2fr repeat(3, minmax(90px, 1fr)); gap:8px; align-items:end; padding:12px; border-radius:var(--radius-sm); background:var(--cream-deep); }
.acerto-item > strong, .acerto-item > .hint, .acerto-item > .full { grid-column:1 / -1; }
.catalogo-publico-page { background:var(--cream); }
.catalogo-publico { max-width:1120px; }
.catalogo-hero { text-align:center; margin:28px 0 32px; }
.catalogo-hero img { width:min(260px, 70vw); max-height:100px; object-fit:contain; }
.catalogo-hero p { color:var(--charcoal-60); }
.catalogo-busca-wrap { position: relative; max-width: 380px; margin: 0 auto 26px; }
.catalogo-busca-icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--charcoal-35); pointer-events: none; }
.catalogo-busca-wrap input[type="search"] {
width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 12px 16px 12px 40px;
border-radius: 999px;
border: 1px solid rgba(199,154,50,0.25);
background: #fff;
transition: border-color .15s ease;
}
.catalogo-busca-wrap input[type="search"]:focus { border-color: var(--gold-mid); }
.catalogo-paginacao {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 36px 0 10px;
flex-wrap: wrap;
}
.catalogo-pag-seta,
.catalogo-pag-numeros button {
appearance: none;
border: 1px solid rgba(199,154,50,0.25);
background: #fff;
color: var(--charcoal);
min-width: 38px;
height: 38px;
padding: 0 10px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 13.5px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.catalogo-pag-seta:hover,
.catalogo-pag-numeros button:hover { background: var(--cream-deep); border-color: var(--gold-mid); }
.catalogo-pag-seta:disabled { opacity: 0.35; cursor: not-allowed; background: #fff; border-color: rgba(199,154,50,0.25); }
.catalogo-pag-numeros { display: flex; align-items: center; gap: 6px; }
.catalogo-pag-numeros button.ativa {
background: var(--gold-deep);
border-color: var(--gold-deep);
color: #fff;
font-weight: 600;
cursor: default;
}
.catalogo-pag-numeros .catalogo-pag-reticencias {
min-width: auto;
border: none;
background: none;
cursor: default;
color: var(--charcoal-35);
padding: 0 2px;
}
.catalogo-pag-info { text-align: center; font-size: 13px; color: var(--charcoal-60); margin: 0 0 20px; }
.catalogo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; align-items:stretch; }
.catalogo-card {
overflow:hidden; background:#fff; border:1px solid rgba(199,154,50,.18); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
display: flex; flex-direction: column; height: 100%;
}
.catalogo-card > img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cream-deep); }
.catalogo-card-sem-foto {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 1/1; background: var(--cream-deep);
color: var(--charcoal-35);
}
.catalogo-card-body { padding:16px; display:flex; flex-direction:column; gap:9px; flex: 1; }
.catalogo-card h2 { font-family:var(--font-display); font-size:20px; margin:0; }
.catalogo-card p { font-size:13px; color:var(--charcoal-60); margin:0; }
.catalogo-card-controle { margin-top: auto; padding-top: 4px; }
.catalogo-preco { color:var(--gold-deep); font-size:20px; font-weight:600; }
.catalogo-whatsapp { text-align:center; text-decoration:none; margin-top:5px; }
/* ---------------- Botão "+" e stepper de quantidade no card ---------------- */
.catalogo-add-btn {
display: flex; align-items: center; justify-content: center;
gap: 6px; width: 100%; margin-top: 6px;
padding: 10px; border-radius: 999px; border: none;
background: var(--gold-deep); color: #fff;
font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.catalogo-add-btn:hover { background: var(--gold-mid); }
.catalogo-add-btn:active { transform: scale(0.97); }
.catalogo-add-btn:disabled { background: var(--charcoal-35); cursor: not-allowed; }
.catalogo-add-btn .icone-mais { font-size: 17px; line-height: 1; }
.catalogo-qtd-stepper {
display: flex; align-items: center; justify-content: space-between;
width: 100%; margin-top: 6px;
border: 1px solid rgba(199,154,50,0.35); border-radius: 999px; overflow: hidden;
}
.catalogo-qtd-stepper button {
appearance: none; border: none; background: var(--cream-deep); color: var(--gold-deep);
width: 38px; height: 38px; font-size: 18px; font-weight: 600; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.catalogo-qtd-stepper button:disabled { color: var(--charcoal-35); cursor: not-allowed; }
.catalogo-qtd-stepper span { font-size: 14px; font-weight: 600; color: var(--charcoal); }
/* ---------------- Barra de carrinho flutuante (mobile-first) ---------------- */
.carrinho-barra-flutuante {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
max-width: 480px; margin: 0 auto;
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-radius: 999px; border: none;
background: var(--gold-deep); color: #fff;
font-family: var(--font-body); font-size: 14px; font-weight: 500;
box-shadow: 0 14px 32px rgba(168,123,18,0.4);
cursor: pointer;
}
.carrinho-barra-contagem {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
background: #fff; color: var(--gold-deep); font-size: 12px; font-weight: 700;
}
#carrinho-barra-texto { flex: 1; text-align: left; }
.carrinho-barra-total { font-weight: 600; }
/* ---------------- Itens dentro do modal de carrinho ---------------- */
.carrinho-item-linha {
display: flex; align-items: center; gap: 12px;
padding: 12px 0; border-bottom: 1px solid rgba(54,46,36,0.08);
}
.carrinho-item-linha img, .carrinho-item-linha .sem-foto {
width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover;
background: var(--cream-deep); flex-shrink: 0;
}
.carrinho-item-info { flex: 1; min-width: 0; }
.carrinho-item-nome { font-size: 13.5px; font-weight: 500; color: var(--charcoal); }
.carrinho-item-detalhe { font-size: 12px; color: var(--charcoal-60); margin-top: 2px; }
.carrinho-item-linha .catalogo-qtd-stepper { width: auto; margin-top: 0; flex-shrink: 0; }
.carrinho-item-linha .catalogo-qtd-stepper button { width: 30px; height: 30px; }
.carrinho-item-remover {
appearance: none; border: none; background: transparent; color: var(--charcoal-35);
font-size: 18px; cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.carrinho-item-remover:hover { color: var(--error); }
@media (max-width: 480px) {
.carrinho-barra-flutuante { left: 10px; right: 10px; bottom: 10px; padding: 12px 16px; }
}
@media (max-width: 620px) {
.carrinho-item { display:grid; grid-template-columns:40px 1fr 38px; gap:8px; }
.carrinho-item-nome { grid-column:2 / 4; }
.carrinho-item-qtd { grid-column:2; width:64px; }
.carrinho-item-subtotal { grid-column:3; min-width:0; }
.carrinho-item .icon-btn { grid-column:3; grid-row:1; justify-self:end; }
.acerto-item { grid-template-columns:1fr; }
.acerto-item > strong, .acerto-item > .hint, .acerto-item > .full { grid-column:1; }
.catalogo-grid { grid-template-columns:1fr 1fr; gap:10px; }
.catalogo-card-body { padding:12px; }
}
@media (max-width: 390px) { .catalogo-grid { grid-template-columns:1fr; } }
/* ==========================================================================
Cabeçalho "Itens no mostruário" com busca — lado a lado no desktop,
empilhado (busca ocupando a largura toda) no mobile.
========================================================================== */
.mostruario-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.mostruario-busca-wrap {
position: relative;
width: 260px;
max-width: 100%;
}
.mostruario-busca-icone {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--charcoal-35);
pointer-events: none;
}
.mostruario-busca-wrap input[type="search"] {
width: 100%;
font-family: var(--font-body);
font-size: 14px;
padding: 9px 12px 9px 34px;
border-radius: 999px;
border: 1px solid rgba(54,46,36,0.14);
background: #fff;
transition: border-color .15s ease;
}
.mostruario-busca-wrap input[type="search"]:focus { border-color: var(--gold-mid); }
@media (max-width: 560px) {
.mostruario-header { flex-direction: column; align-items: stretch; }
.mostruario-busca-wrap { width: 100%; }
}
/* ==========================================================================
Painel da revendedora — tabela de vendas legível + ação de exclusão
========================================================================== */
.revendedora-page {
max-width: 1180px;
}
/* Em telas largas, a listagem usa espaço real para não cortar nomes, itens
e principalmente a coluna de ação. */
.vendas-table {
table-layout: auto;
min-width: 1000px;
}
.vendas-table th:nth-child(1), .vendas-table td:nth-child(1) { min-width: 132px; }
.vendas-table th:nth-child(2), .vendas-table td:nth-child(2) { min-width: 150px; }
.vendas-table th:nth-child(3), .vendas-table td:nth-child(3) { min-width: 220px; }
.vendas-table th:nth-child(4), .vendas-table td:nth-child(4) { min-width: 100px; }
.vendas-table th:nth-child(5), .vendas-table td:nth-child(5) { min-width: 120px; }
.vendas-table th:nth-child(6), .vendas-table td:nth-child(6) { min-width: 145px; }
.vendas-table th:nth-child(7), .vendas-table td:nth-child(7) { min-width: 105px; }
.vendas-table th:nth-child(8), .vendas-table td:nth-child(8) { width: 92px; min-width: 92px; text-align: center; }
.vendas-table td[data-label="Cliente"],
.vendas-table td[data-label="Itens"] {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
.venda-delete-btn {
appearance: none;
border: 1px solid rgba(178,74,60,0.28);
background: #fff;
color: var(--error);
border-radius: 999px;
min-height: 32px;
padding: 6px 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.venda-delete-btn:hover:not(:disabled) {
background: #FBF1EF;
border-color: rgba(178,74,60,0.48);
}
.venda-delete-btn:disabled { cursor: wait; opacity: .62; }
/* O painel costuma ser usado em notebooks/tablets. Nesse espaço oito colunas
ficam estreitas demais; cada venda vira um cartão, mantendo TODOS os dados
e o botão Excluir visíveis sem rolagem horizontal. */
@media (max-width: 1100px) {
.revendedora-page { max-width: 820px; }
#vendas-table { min-width: 0; width: 100%; }
#vendas-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
#vendas-table,
#vendas-table tbody,
#vendas-table tr,
#vendas-table td {
display: block;
width: 100%;
}
#vendas-table tr {
border: 1px solid rgba(199,154,50,0.18);
border-radius: var(--radius-md);
margin-bottom: 12px;
padding: 5px 14px;
background: #fff;
}
#vendas-table tbody tr:hover { background: #fff; }
#vendas-table td {
min-width: 0 !important;
width: 100% !important;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: start;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid rgba(54,46,36,0.06);
text-align: left !important;
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: none;
}
#vendas-table td:last-child { border-bottom: none; }
#vendas-table td::before {
content: attr(data-label);
font-weight: 500;
font-size: 10.5px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: left;
}
#vendas-table td[data-label="Ação"] { align-items: center; }
#vendas-table .venda-delete-btn { justify-self: start; }
#tab-vendas > .table-wrap { overflow: visible; max-height: none; background: transparent; border: 0; box-shadow: none; }
}
@media (max-width: 520px) {
#vendas-table td { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
}
/* ==========================================================================
Admin — vendas: layout compacto, legível e sem scroll horizontal
========================================================================== */
#tab-vendas > .table-wrap {
width: 100%;
max-width: 100%;
max-height: 68vh;
overflow-x: hidden;
overflow-y: auto;
}
.vendas-admin-table {
width: 100%;
min-width: 0 !important;
table-layout: fixed;
}
.vendas-admin-table th,
.vendas-admin-table td {
box-sizing: border-box;
}
/* Cinco grupos de informação. A coluna de ações recebe espaço suficiente
para manter os três controles sempre na mesma linha. */
.vendas-admin-table th:nth-child(1),
.vendas-admin-table td:nth-child(1) { width: 19%; }
.vendas-admin-table th:nth-child(2),
.vendas-admin-table td:nth-child(2) { width: 30%; }
.vendas-admin-table th:nth-child(3),
.vendas-admin-table td:nth-child(3) { width: 15%; }
.vendas-admin-table th:nth-child(4),
.vendas-admin-table td:nth-child(4) { width: 15%; }
.vendas-admin-table th:nth-child(5),
.vendas-admin-table td:nth-child(5) { width: 21%; }
.vendas-admin-table thead th {
white-space: nowrap;
padding-left: 14px;
padding-right: 14px;
}
.vendas-admin-table tbody td {
vertical-align: middle;
padding: 13px 14px;
white-space: normal;
overflow: hidden;
text-overflow: clip;
}
.venda-admin-primary,
.venda-admin-value,
.venda-admin-reference {
color: var(--text);
font-weight: 500;
line-height: 1.35;
}
.venda-admin-secondary {
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
/* Não quebrar palavras no meio. Textos extensos quebram apenas entre palavras. */
.venda-admin-primary,
.venda-admin-secondary,
.venda-admin-reference {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.venda-admin-items {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.venda-admin-reference {
overflow-wrap: anywhere;
font-size: 12px;
}
.venda-admin-referencia .badge {
display: inline-flex;
margin-top: 7px;
}
.vendas-admin-actions {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 6px;
white-space: nowrap;
overflow: visible !important;
}
.vendas-admin-actions .btn-sm {
flex: 0 0 auto;
white-space: nowrap;
padding: 7px 10px;
line-height: 1.2;
}
.vendas-admin-actions .icon-btn {
flex: 0 0 32px;
width: 32px;
height: 32px;
}
/* Notebook: mantém a tabela, mas comprime de forma controlada sem scroll lateral. */
@media (max-width: 1180px) {
.vendas-admin-table th:nth-child(1),
.vendas-admin-table td:nth-child(1) { width: 18%; }
.vendas-admin-table th:nth-child(2),
.vendas-admin-table td:nth-child(2) { width: 28%; }
.vendas-admin-table th:nth-child(3),
.vendas-admin-table td:nth-child(3) { width: 14%; }
.vendas-admin-table th:nth-child(4),
.vendas-admin-table td:nth-child(4) { width: 16%; }
.vendas-admin-table th:nth-child(5),
.vendas-admin-table td:nth-child(5) { width: 24%; }
.vendas-admin-table thead th,
.vendas-admin-table tbody td {
padding-left: 10px;
padding-right: 10px;
}
.vendas-admin-actions .btn-sm {
font-size: 11px;
padding: 8px 10px;
}
}
/* Tablet/celular: cards. Também não existe scroll horizontal. */
@media (max-width: 820px) {
#tab-vendas > .table-wrap {
max-height: none;
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
}
#vendas-admin-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
#vendas-admin-table,
#vendas-admin-table tbody,
#vendas-admin-table tr,
#vendas-admin-table td {
display: block;
width: 100%;
}
#vendas-admin-table tr {
margin-bottom: 12px;
padding: 14px;
border: 1px solid rgba(199,154,50,.18);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-soft);
}
#vendas-admin-table td {
width: 100% !important;
padding: 8px 0;
border-bottom: 1px solid rgba(54,46,36,.06);
overflow: visible;
}
#vendas-admin-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 4px;
color: var(--gold-deep);
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
#vendas-admin-table td:last-child { border-bottom: 0; }
#vendas-admin-table.vendas-admin-actions { display: flex; }
#vendas-admin-table .vendas-admin-actions::before { width: 100%; }
}
/* ==========================================================================
Vendas — uma linha por item (Admin + Revendedora)
========================================================================== */
.venda-admin-item-line {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
white-space: nowrap;
}
.venda-admin-item-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.venda-admin-qty {
flex: 0 0 auto;
color: var(--gold-deep);
font-weight: 600;
white-space: nowrap;
}
.vendas-rev-table {
width: 100%;
min-width: 0 !important;
table-layout: fixed;
}
.vendas-rev-table th:nth-child(1), .vendas-rev-table td:nth-child(1) { width: 18%; }
.vendas-rev-table th:nth-child(2), .vendas-rev-table td:nth-child(2) { width: 35%; }
.vendas-rev-table th:nth-child(3), .vendas-rev-table td:nth-child(3) { width: 17%; }
.vendas-rev-table th:nth-child(4), .vendas-rev-table td:nth-child(4) { width: 20%; }
.vendas-rev-table th:nth-child(5), .vendas-rev-table td:nth-child(5) { width: 10%; }
.vendas-rev-table .rev-venda-actions { justify-content: center; }
#vendas-table.vendas-rev-table th,
#vendas-table.vendas-rev-table td { min-width: 0; }
@media (max-width: 1100px) and (min-width: 821px) {
.revendedora-page { max-width: 1180px; }
#vendas-table.vendas-rev-table thead {
position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
}
#vendas-table.vendas-rev-table,
#vendas-table.vendas-rev-table tbody { display: table; width: 100%; }
#vendas-table.vendas-rev-table tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: transparent; }
#vendas-table.vendas-rev-table td { display: table-cell; width: auto !important; padding: 11px 10px; border-bottom: 1px solid var(--line); }
#vendas-table.vendas-rev-table td::before { content: none; }
}
@media (max-width: 820px) {
#vendas-table.vendas-rev-table thead {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
#vendas-table.vendas-rev-table,
#vendas-table.vendas-rev-table tbody,
#vendas-table.vendas-rev-table tr,
#vendas-table.vendas-rev-table td { display: block; width: 100%; }
#vendas-table.vendas-rev-table tr {
margin-bottom: 12px; padding: 14px; border: 1px solid rgba(199,154,50,.18); border-radius: var(--radius-md); background: #fff;
}
#vendas-table.vendas-rev-table td { width: 100% !important; padding: 8px 0; border-bottom: 1px solid rgba(54,46,36,.06); }
#vendas-table.vendas-rev-table td::before {
content: attr(data-label); display: block; margin-bottom: 4px; color: var(--gold-deep); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
#vendas-table.vendas-rev-table td:last-child { border-bottom: 0; }
#vendas-table.vendas-rev-table .rev-venda-actions { justify-content: flex-start; }
}
/* Histórico de devoluções de mostruário — painel da revendedora */
.showcase-return-wrap { overflow-x: hidden; }
.showcase-return-table { width: 100%; table-layout: fixed; }
.showcase-return-table th:nth-child(1) { width: 24%; }
.showcase-return-table th:nth-child(2) { width: 19%; }
.showcase-return-table th:nth-child(3) { width: 17%; }
.showcase-return-table th:nth-child(4) { width: 19%; }
.showcase-return-table th:nth-child(5) { width: 21%; }
.showcase-return-table td,
.showcase-return-table th { vertical-align: middle; }
.showcase-return-value { font-weight: 700; white-space: nowrap; }
.showcase-return-status { white-space: nowrap; display: inline-flex; }
.showcase-return-empty { text-align: center; color: var(--muted); padding: 22px 14px !important; }
@media (max-width: 760px) {
.showcase-return-table thead { display: none; }
.showcase-return-table,
.showcase-return-table tbody,
.showcase-return-table tr,
.showcase-return-table td { display: block; width: 100%; }
.showcase-return-table tr { padding: 12px 14px; border-bottom: 1px solid rgba(145, 108, 27, .12); }
.showcase-return-table td {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 6px 0 !important;
border: 0 !important;
text-align: right;
}
.showcase-return-table td::before {
content: attr(data-label);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--gold-deep);
text-align: left;
}
.showcase-return-empty { display: block !important; text-align: center !important; }
.showcase-return-empty::before { display: none; }
}
/* ==========================================================================
Mobile — padrão único de listagem compacta
Em vez de vários cards soltos, todas as tabelas viram uma lista contínua,
com rótulo + valor em linhas curtas. Isso reduz altura, ruído visual e
mantém Admin e Revendedora com a mesma linguagem no celular.
========================================================================== */
@media (max-width: 768px) {
.table-wrap,
#tab-vendas > .table-wrap,
.showcase-return-wrap {
width: 100%;
max-width: 100%;
max-height: none;
overflow: hidden !important;
border: 1px solid rgba(199,154,50,.16) !important;
border-radius: 14px !important;
background: #fff !important;
box-shadow: 0 8px 24px rgba(79,61,24,.06) !important;
}
table.data-table,
#vendas-admin-table,
#vendas-table.vendas-rev-table,
.showcase-return-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
table-layout: auto !important;
}
table.data-table thead,
#vendas-admin-table thead,
#vendas-table.vendas-rev-table thead,
.showcase-return-table thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
}
table.data-table tbody,
#vendas-admin-table tbody,
#vendas-table.vendas-rev-table tbody,
.showcase-return-table tbody {
display: block !important;
width: 100% !important;
}
table.data-table tbody tr,
#vendas-admin-table tbody tr,
#vendas-table.vendas-rev-table tbody tr,
.showcase-return-table tbody tr {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 9px 13px !important;
border: 0 !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(54,46,36,.08) !important;
background: #fff !important;
box-shadow: none !important;
}
table.data-table tbody tr:last-child,
#vendas-admin-table tbody tr:last-child,
#vendas-table.vendas-rev-table tbody tr:last-child,
.showcase-return-table tbody tr:last-child {
border-bottom: 0 !important;
}
table.data-table tbody tr:hover,
#vendas-admin-table tbody tr:hover,
#vendas-table.vendas-rev-table tbody tr:hover,
.showcase-return-table tbody tr:hover {
background: #fff !important;
}
table.data-table tbody td,
#vendas-admin-table tbody td,
#vendas-table.vendas-rev-table tbody td,
.showcase-return-table tbody td {
display: grid !important;
grid-template-columns: 104px minmax(0,1fr) !important;
align-items: start !important;
column-gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: 4px 0 !important;
border: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.35 !important;
}
table.data-table tbody td::before,
#vendas-admin-table tbody td::before,
#vendas-table.vendas-rev-table tbody td::before,
.showcase-return-table tbody td::before {
content: attr(data-label) !important;
display: block !important;
margin: 0 !important;
padding-top: 1px !important;
color: var(--charcoal-35) !important;
font-size: 9.5px !important;
font-weight: 600 !important;
letter-spacing: .045em !important;
line-height: 1.45 !important;
text-transform: uppercase !important;
text-align: left !important;
}
table.data-table tbody td:not([data-label])::before,
table.data-table tbody td[data-label=""]::before,
.showcase-return-empty::before {
display: none !important;
}
table.data-table tbody td:not([data-label]),
table.data-table tbody td[data-label=""] {
grid-template-columns: 1fr !important;
}
/* Textos longos ficam legíveis sem transformar o registro num cartão alto. */
table.data-table tbody td[data-label="Item"],
table.data-table tbody td[data-label="Itens"],
table.data-table tbody td[data-label="Cliente e item"],
table.data-table tbody td[data-label="Cliente e itens"] {
overflow-wrap: normal !important;
word-break: normal !important;
}
.venda-admin-primary,
.venda-admin-secondary,
.venda-admin-reference,
.venda-admin-item-line,
.venda-admin-item-name {
min-width: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.venda-admin-secondary {
margin-top: 2px !important;
font-size: 11px !important;
color: var(--charcoal-60) !important;
}
.venda-admin-item-line {
display: flex !important;
flex-wrap: wrap !important;
gap: 3px 6px !important;
}
.venda-admin-referencia .badge {
margin-top: 4px !important;
}
.vendas-admin-actions,
#vendas-table.vendas-rev-table .rev-venda-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 6px !important;
white-space: nowrap !important;
}
.vendas-admin-actions .btn-sm,
.venda-delete-btn {
min-height: 30px !important;
padding: 6px 9px !important;
font-size: 10.5px !important;
}
.vendas-admin-actions .icon-btn {
flex: 0 0 30px !important;
width: 30px !important;
height: 30px !important;
}
.showcase-return-empty {
display: block !important;
padding: 18px 10px !important;
text-align: center !important;
}
}
@media (max-width: 420px) {
table.data-table tbody tr,
#vendas-admin-table tbody tr,
#vendas-table.vendas-rev-table tbody tr,
.showcase-return-table tbody tr {
padding: 9px 11px !important;
}
table.data-table tbody td,
#vendas-admin-table tbody td,
#vendas-table.vendas-rev-table tbody td,
.showcase-return-table tbody td {
grid-template-columns: 88px minmax(0,1fr) !important;
column-gap: 9px !important;
}
}
/* ========================================================================== */
/* MOBILE 2026 — listas expansíveis compactas */
/* ========================================================================== */
@media (max-width: 760px) {
/* A tabela continua sendo usada no desktop. No mobile cada registro vira
uma linha-resumo compacta, com detalhes sob demanda. */
table.data-table tbody tr.mobile-accordion-row,
#vendas-admin-table tbody tr.mobile-accordion-row,
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row,
.showcase-return-table tbody tr.mobile-accordion-row {
padding: 0 !important;
background: #fff !important;
}
table.data-table tbody tr.mobile-accordion-row > td.mobile-row-summary,
#vendas-admin-table tbody tr.mobile-accordion-row > td.mobile-row-summary,
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row > td.mobile-row-summary,
.showcase-return-table tbody tr.mobile-accordion-row > td.mobile-row-summary {
display: block !important;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
.mobile-row-summary::before { display: none !important; }
.mobile-summary-button {
width: 100%;
min-height: 74px;
display: grid;
grid-template-columns: minmax(0,1fr) auto 24px;
align-items: center;
gap: 10px;
padding: 13px 12px 13px 14px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.mobile-summary-main { min-width: 0; }
.mobile-summary-title {
display: block;
margin: 0;
color: var(--charcoal);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-summary-subtitle {
display: block;
margin-top: 4px;
color: var(--charcoal-60);
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-summary-side {
min-width: 74px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.mobile-summary-value {
color: var(--charcoal);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.mobile-summary-status {
display: inline-flex;
align-items: center;
min-height: 22px;
max-width: 110px;
padding: 4px 8px;
border-radius: 999px;
background: var(--blush-soft, #f7e9e9);
color: #a84848;
font-size: 9.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-summary-status.is-success {
background: #eaf3e3;
color: #4f7d36;
}
.mobile-summary-chevron {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-deep);
font-size: 18px;
line-height: 1;
transition: transform .18s ease;
}
tr.mobile-accordion-row.is-open .mobile-summary-chevron { transform: rotate(180deg); }
/* Fechado: só aparece o resumo. */
table.data-table tbody tr.mobile-accordion-row:not(.is-open) > td:not(.mobile-row-summary),
#vendas-admin-table tbody tr.mobile-accordion-row:not(.is-open) > td:not(.mobile-row-summary),
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row:not(.is-open) > td:not(.mobile-row-summary),
.showcase-return-table tbody tr.mobile-accordion-row:not(.is-open) > td:not(.mobile-row-summary) {
display: none !important;
}
/* Aberto: detalhes em linhas curtas, nunca em cards gigantes. */
table.data-table tbody tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary),
#vendas-admin-table tbody tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary),
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary),
.showcase-return-table tbody tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary) {
display: grid !important;
grid-template-columns: 92px minmax(0,1fr) !important;
gap: 10px !important;
padding: 7px 14px !important;
background: #fffdfa !important;
}
table.data-table tbody tr.mobile-accordion-row.is-open > td:nth-last-child(1),
#vendas-admin-table tbody tr.mobile-accordion-row.is-open > td:nth-last-child(1),
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td:nth-last-child(1) {
padding-bottom: 13px !important;
}
tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary)::before {
color: var(--charcoal-35) !important;
font-size: 9px !important;
letter-spacing: .05em !important;
}
/* Nas vendas o cliente/item e o valor já estão no resumo. Ao expandir,
mostramos apenas os dados complementares e as ações. */
#vendas-admin-table tbody tr.mobile-accordion-row.is-open > td[data-label="Cliente e item"],
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Cliente e item"],
#vendas-admin-table tbody tr.mobile-accordion-row.is-open > td[data-label="Financeiro"],
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Financeiro"] {
display: none !important;
}
.vendas-admin-actions,
#vendas-table.vendas-rev-table .rev-venda-actions {
justify-content: flex-start !important;
gap: 8px !important;
}
.table-wrap {
border-radius: 14px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 7px 22px rgba(79,58,25,.06) !important;
}
}
/* ==========================================================================
REVENDEDORA MOBILE-FIRST 2026
A área da revendedora é tratada como aplicativo operacional no celular.
O Admin continua com o layout desktop próprio.
========================================================================== */
.mobile-user-copy,
.tab-icon,
.mobile-section-title,
.mobile-profile-logout { display: none; }
.rev-mobile-nav .tab-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.stock-product-row { align-items: center; }
.stock-product-media { display: none; }
.stock-product-info { flex: 1; min-width: 0; }
.stock-product-name { font-weight: 500; }
.stock-product-meta { display: none; }
.stock-product-stock { margin-left: auto; }
.stock-product-stock span { display: none; }
@media (max-width: 760px) {
html {
scroll-padding-top: 74px;
background: var(--cream);
}
body {
background: #fdfbf7;
overscroll-behavior-y: none;
}
.revendedora-page {
width: 100%;
max-width: none !important;
min-height: 100dvh;
margin: 0;
padding: 0 16px calc(98px + env(safe-area-inset-bottom)) !important;
}
/* ---------- Cabeçalho de aplicativo ---------- */
.revendedora-page .app-header {
position: sticky;
top: 0;
z-index: 45;
min-height: 72px !important;
margin: 0 -16px 14px !important;
padding: calc(10px + env(safe-area-inset-top)) 16px 10px !important;
padding-right: 16px !important;
display: flex;
align-items: center;
border: 0 !important;
border-bottom: 1px solid rgba(54,46,36,.07) !important;
border-radius: 0 !important;
background: rgba(253,251,247,.94) !important;
box-shadow: 0 4px 18px rgba(54,46,36,.035) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.revendedora-page .app-header::before { display: none; }
.revendedora-page .app-header-left {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
}
.revendedora-page .app-header-icon {
width: 44px;
height: 44px;
box-shadow: 0 4px 14px rgba(168,123,18,.12);
border: 1px solid rgba(199,154,50,.16);
}
.revendedora-page .app-header-icon img {
width: 28px;
height: 28px;
}
.revendedora-page .app-header-titles h1,
.revendedora-page .app-header-titles .subtitle-line,
.revendedora-page .app-header-greeting,
.revendedora-page .app-header > #logout-btn {
display: none !important;
}
.mobile-user-copy {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 5px;
line-height: 1.15;
}
.mobile-user-kicker {
color: var(--charcoal-60);
font-size: 12px;
}
#mobile-user-name {
color: var(--charcoal);
font-size: 16px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mobile-user-role {
grid-column: 1 / -1;
margin-top: 4px;
color: var(--gold-deep);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ---------- Resumo compacto do mostruário ---------- */
.revendedora-page .admin-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
margin: 0 0 16px !important;
padding: 16px !important;
background: #fff;
border: 1px solid rgba(199,154,50,.15);
border-radius: 18px;
box-shadow: 0 8px 26px rgba(79,58,25,.055);
}
.revendedora-page .admin-stats .stat-card {
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.revendedora-page .admin-stats .stat-card-1 {
grid-column: 1 / -1;
padding-bottom: 13px !important;
margin-bottom: 13px;
border-bottom: 1px solid rgba(54,46,36,.07) !important;
}
.revendedora-page .admin-stats .stat-card-3 {
padding-left: 16px !important;
border-left: 1px solid rgba(54,46,36,.07) !important;
}
.revendedora-page .admin-stats .num {
font-size: 22px !important;
line-height: 1.1;
font-weight: 600;
color: var(--gold-deep);
}
.revendedora-page .admin-stats .stat-card-1 .num {
font-size: 28px !important;
}
.revendedora-page .admin-stats .lbl {
margin-top: 5px;
font-size: 9.5px !important;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Nas telas em que o resumo não ajuda a tarefa atual, ele desaparece. */
.revendedora-page[data-active-tab="clientes"] .admin-stats,
.revendedora-page[data-active-tab="perfil"] .admin-stats {
display: none !important;
}
/* ---------- Navegação principal fixa embaixo ---------- */
.revendedora-page > .tabs.rev-mobile-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 70 !important;
width: 100% !important;
height: calc(67px + env(safe-area-inset-bottom)) !important;
margin: 0 !important;
padding: 6px max(10px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-right)) !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
align-items: start !important;
gap: 0 !important;
overflow: visible !important;
border: 0 !important;
border-top: 1px solid rgba(54,46,36,.09) !important;
background: rgba(255,255,255,.97) !important;
box-shadow: 0 -7px 28px rgba(54,46,36,.08) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.revendedora-page > .tabs.rev-mobile-nav .tab-btn {
min-width: 0 !important;
min-height: 55px !important;
margin: 0 !important;
padding: 5px 4px 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
border: 0 !important;
border-radius: 12px !important;
color: rgba(54,46,36,.52) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
background: transparent !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-btn.active {
color: var(--gold-deep) !important;
background: rgba(232,201,121,.14) !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-icon {
display: flex !important;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-label {
display: block;
max-width: 100%;
white-space: nowrap;
}
/* ---------- Estrutura das telas ---------- */
.revendedora-page .tab-panel {
padding-bottom: 8px;
}
.revendedora-page .eyebrow {
gap: 8px;
font-size: 11px;
letter-spacing: .16em;
}
.revendedora-page .eyebrow::before,
.revendedora-page .eyebrow::after {
flex-basis: 22px;
}
.mobile-section-title {
display: flex;
flex-direction: column;
margin: 2px 0 14px;
}
.mobile-section-title > span {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
line-height: 1;
color: var(--charcoal);
}
.mobile-section-title small {
margin-top: 5px;
color: var(--charcoal-60);
font-size: 12px;
}
/* ---------- Venda: formulário como fluxo operacional ---------- */
.revendedora-page .sales-entry-card {
margin: 0 0 20px !important;
padding: 17px 14px 15px !important;
border-radius: 18px !important;
box-shadow: 0 7px 24px rgba(79,58,25,.045) !important;
}
.revendedora-page .sales-entry-card::before { height: 3px; }
.revendedora-page .sales-entry-card > .hint {
margin-top: -5px !important;
margin-bottom: 14px !important;
font-size: 11.5px;
line-height: 1.45;
}
.revendedora-page .field label {
font-size: 11px;
font-weight: 600;
}
.revendedora-page input,
.revendedora-page select,
.revendedora-page textarea {
min-height: 48px;
border-radius: 12px;
font-size: 16px; /* evita zoom automático do iOS */
}
.revendedora-page #v-busca-produto {
min-height: 52px;
padding-left: 14px;
background: #fbf8f1;
border-color: rgba(168,123,18,.22);
}
.revendedora-page .busca-resultados {
border-radius: 14px;
box-shadow: 0 18px 40px rgba(54,46,36,.12);
overflow: hidden;
}
.revendedora-page .busca-resultado-item {
min-height: 58px;
padding: 10px 12px;
}
.revendedora-page .carrinho {
gap: 0 !important;
margin: 12px 0 !important;
border-radius: 14px;
overflow: hidden;
background: #fbfaf7;
}
.revendedora-page .carrinho-item {
min-height: 64px;
margin: 0 !important;
padding: 10px 8px !important;
border: 0 !important;
border-bottom: 1px solid rgba(54,46,36,.07) !important;
border-radius: 0 !important;
background: transparent !important;
}
.revendedora-page .carrinho-item:last-child {
border-bottom: 0 !important;
}
.revendedora-page .carrinho-total {
margin: 8px 0 0;
padding: 13px 0 3px;
background: transparent;
border-top: 1px solid rgba(54,46,36,.08);
}
.revendedora-page #v-finalizar-painel {
margin-top: 10px !important;
}
.revendedora-page .venda-submit-btn {
width: 100%;
min-height: 50px !important;
display: flex;
justify-content: center;
font-size: 14px !important;
border-radius: 14px !important;
}
/* ---------- Listas / histórico: densidade de app, sem cartões gigantes ---------- */
.revendedora-page .table-wrap {
border-radius: 16px !important;
border: 1px solid rgba(54,46,36,.065) !important;
box-shadow: 0 6px 20px rgba(79,58,25,.04) !important;
background: #fff !important;
}
.revendedora-page table.data-table tbody tr.mobile-accordion-row,
.revendedora-page #vendas-table.vendas-rev-table tbody tr.mobile-accordion-row,
.revendedora-page .showcase-return-table tbody tr.mobile-accordion-row {
border: 0 !important;
border-bottom: 1px solid rgba(54,46,36,.07) !important;
border-radius: 0 !important;
margin: 0 !important;
}
.revendedora-page table.data-table tbody tr.mobile-accordion-row:last-child,
.revendedora-page #vendas-table.vendas-rev-table tbody tr.mobile-accordion-row:last-child,
.revendedora-page .showcase-return-table tbody tr.mobile-accordion-row:last-child {
border-bottom: 0 !important;
}
.revendedora-page .mobile-summary-button {
min-height: 64px !important;
grid-template-columns: minmax(0,1fr) auto 18px !important;
gap: 8px !important;
padding: 10px 11px 10px 13px !important;
}
.revendedora-page .mobile-summary-title {
font-size: 13px !important;
font-weight: 600 !important;
}
.revendedora-page .mobile-summary-subtitle {
margin-top: 3px !important;
font-size: 10.5px !important;
}
.revendedora-page .mobile-summary-value {
font-size: 12.5px !important;
}
.revendedora-page .mobile-summary-status {
min-height: 20px !important;
padding: 3px 7px !important;
font-size: 9px !important;
}
.revendedora-page .mobile-summary-chevron {
width: 18px !important;
height: 18px !important;
font-size: 15px !important;
}
.revendedora-page tr.mobile-accordion-row.is-open > td:not(.mobile-row-summary) {
grid-template-columns: 82px minmax(0,1fr) !important;
padding: 6px 12px !important;
background: #fdfbf7 !important;
font-size: 11.5px !important;
}
/* ---------- Catálogo visual ---------- */
.revendedora-page .catalog-share-card {
margin: 0 0 18px !important;
padding: 14px !important;
border-radius: 16px !important;
box-shadow: none !important;
background: #fffaf0 !important;
}
.revendedora-page .catalog-share-card::before { display: none; }
.revendedora-page .catalog-share-card .eyebrow { margin-bottom: 6px !important; }
.revendedora-page .catalog-share-card .hint { font-size: 11px; }
.revendedora-page .catalogo-link-row { gap: 7px; }
.revendedora-page .catalogo-link-row input { min-width: 0; height: 42px; min-height: 42px; font-size: 12px; }
.revendedora-page .catalogo-link-row .btn-sm { min-height: 42px; padding: 8px 13px; }
.revendedora-page .mostruario-header {
margin-bottom: 10px;
}
.revendedora-page .stock-list {
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
border: 1px solid rgba(54,46,36,.07);
border-radius: 16px;
background: #fff;
}
.revendedora-page .stock-product-row {
min-height: 72px;
padding: 9px 10px !important;
display: grid !important;
grid-template-columns: 52px minmax(0,1fr) auto !important;
gap: 10px !important;
border: 0 !important;
border-bottom: 1px solid rgba(54,46,36,.07) !important;
border-radius: 0 !important;
background: #fff !important;
}
.revendedora-page .stock-product-row:last-child {
border-bottom: 0 !important;
}
.revendedora-page .stock-product-media {
width: 52px;
height: 52px;
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 12px;
background: var(--cream-deep);
}
.revendedora-page .stock-product-media .product-thumb,
.revendedora-page .stock-product-thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 0 !important;
}
.revendedora-page .stock-product-placeholder {
width: 100%;
height: 100%;
display: grid;
place-items: center;
color: var(--gold-deep);
font-family: var(--font-display);
font-size: 16px;
}
.revendedora-page .stock-product-info {
min-width: 0;
}
.revendedora-page .stock-product-name {
display: block;
overflow: hidden;
color: var(--charcoal);
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
text-overflow: ellipsis;
}
.revendedora-page .stock-product-meta {
display: flex !important;
gap: 7px;
margin-top: 5px;
color: var(--charcoal-60);
font-size: 10.5px;
}
.revendedora-page .stock-product-meta span + span::before {
content: "•";
margin-right: 7px;
color: var(--charcoal-35);
}
.revendedora-page .stock-product-stock {
min-width: 58px;
margin-left: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.revendedora-page .stock-product-stock strong {
color: var(--gold-deep);
font-size: 16px;
line-height: 1;
}
.revendedora-page .stock-product-stock span {
display: block !important;
margin-top: 4px;
color: var(--charcoal-35);
font-size: 8.5px;
text-transform: uppercase;
}
/* ---------- Clientes ---------- */
.revendedora-page #clientes-list-view > .admin-error {
margin-top: 0;
}
.revendedora-page #abrir-novo-cliente-btn {
width: 100%;
min-height: 46px;
margin: 0 0 10px !important;
border-radius: 13px;
}
.revendedora-page #clientes-busca {
min-height: 48px;
margin-bottom: 12px;
border-radius: 14px;
}
.revendedora-page #cliente-detail-view .admin-topbar h1 {
font-size: 23px;
}
/* ---------- Perfil ---------- */
.revendedora-page #tab-perfil .card {
padding: 18px 14px !important;
border-radius: 18px !important;
box-shadow: 0 7px 24px rgba(79,58,25,.045) !important;
}
.revendedora-page #tab-perfil .f-grid {
gap: 13px;
}
.mobile-profile-logout {
width: 100%;
min-height: 46px;
margin-top: 18px;
border: 1px solid rgba(178,74,60,.2);
border-radius: 13px;
background: #fff;
color: var(--error);
font: 500 13px var(--font-body);
}
/* Modal mobile: sheet curto e confortável */
.modal-overlay .modal {
max-height: min(86dvh, 680px);
overflow-y: auto;
border-radius: 22px 22px 0 0;
}
}
@media (max-width: 430px) {
.revendedora-page {
padding-left: 12px !important;
padding-right: 12px !important;
}
.revendedora-page .app-header {
margin-left: -12px !important;
margin-right: -12px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.revendedora-page .admin-stats {
padding: 14px !important;
}
.revendedora-page .sales-entry-card {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* Ajustes finais da navegação mobile */
.mobile-header-logout { display: none; }
@media (max-width: 760px) {
.revendedora-page .app-header-left {
position: relative;
padding-right: 68px;
}
.mobile-header-logout {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
min-width: 58px;
height: 38px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 999px;
background: #fff;
color: var(--charcoal-60);
font: 500 11px var(--font-body);
box-shadow: 0 2px 8px rgba(54,46,36,.035);
cursor: pointer;
}
.mobile-header-logout svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-header-logout:active {
transform: translateY(-50%) scale(.97);
}
/* Garante que todos os quatro ícones sejam renderizados igualmente. */
.revendedora-page > .tabs.rev-mobile-nav .tab-icon,
.revendedora-page > .tabs.rev-mobile-nav .tab-icon svg {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-icon {
width: 25px !important;
height: 25px !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-icon svg {
width: 25px !important;
height: 25px !important;
overflow: visible;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.75 !important;
stroke-linecap: round;
stroke-linejoin: round;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-btn {
gap: 3px !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-btn.active .tab-icon {
color: var(--gold-deep) !important;
}
}
@media (max-width: 360px) {
.mobile-header-logout {
min-width: 48px;
padding: 0 8px;
}
.mobile-header-logout span { display: none; }
.revendedora-page .app-header-left { padding-right: 52px; }
}
/* NAV MOBILE FIX 20260812L */
.mobile-header-logout { display: none; }
@media (max-width: 760px) {
.revendedora-page .app-header-left {
position: relative;
padding-right: 72px;
}
.mobile-header-logout {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 38px;
padding: 0 11px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid rgba(54,46,36,.13);
border-radius: 999px;
background: #fff;
color: rgba(54,46,36,.62);
font: 500 11px var(--font-body);
box-shadow: 0 2px 8px rgba(54,46,36,.035);
}
.mobile-header-logout svg {
width: 15px;
height: 15px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-icon {
width: 25px !important;
height: 25px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-icon svg {
width: 23px !important;
height: 23px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.75 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.revendedora-page > .tabs.rev-mobile-nav .tab-btn {
gap: 3px !important;
}
}
@media (max-width: 360px) {
.mobile-header-logout {
width: 40px;
padding: 0;
}
.mobile-header-logout span { display: none; }
.revendedora-page .app-header-left { padding-right: 48px; }
}
/* CATALOGO PUBLICO MOBILE + GLOBAL LOADER 20260812M */
.page-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
padding: 20px;
background: rgba(253,251,247,.72);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .14s ease, visibility .14s ease;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.page-loader.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.page-loader-box {
min-width: 118px;
padding: 16px 18px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 16px 45px rgba(54,46,36,.11);
}
.page-loader-spinner {
width: 28px;
height: 28px;
display: block;
border: 3px solid rgba(168,123,18,.16);
border-top-color: var(--gold-deep);
border-radius: 50%;
animation: page-loader-spin .7s linear infinite;
}
.page-loader-text {
color: var(--charcoal-60);
font: 500 11px var(--font-body);
}
@keyframes page-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.page-loader-spinner { animation-duration: 1.4s; }
}
.catalogo-publico-page { background: #fdfbf7; }
.catalogo-publico .catalogo-hero-copy {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 2px;
color: var(--charcoal-60);
font-size: 12px;
}
.catalogo-publico .catalogo-hero-copy strong {
color: var(--charcoal);
font-size: 14px;
font-weight: 600;
}
.catalogo-estoque.disponivel { color: #66805f; }
.catalogo-estoque.esgotado { color: var(--error); }
@media (max-width: 620px) {
.catalogo-publico-page { padding-bottom: 84px; }
.catalogo-publico {
width: 100%;
max-width: none;
padding: 0 12px 26px;
}
.catalogo-hero {
margin: 14px 0 14px;
padding: 7px 0 2px;
}
.catalogo-hero img {
width: min(172px, 52vw);
max-height: 64px;
}
.catalogo-publico .catalogo-hero-copy {
margin-top: 5px;
font-size: 10px;
}
.catalogo-publico .catalogo-hero-copy strong {
font-size: 12.5px;
}
.catalogo-busca-wrap {
position: sticky;
top: 8px;
z-index: 20;
max-width: none;
margin: 0 0 14px;
padding: 0;
}
.catalogo-busca-wrap::before {
content: "";
position: absolute;
inset: -8px -4px;
z-index: -1;
background: rgba(253,251,247,.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.catalogo-busca-wrap input[type="search"] {
height: 46px;
padding: 10px 14px 10px 40px;
border-color: rgba(54,46,36,.11);
box-shadow: 0 4px 14px rgba(54,46,36,.035);
font-size: 16px;
}
.catalogo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: stretch;
}
.catalogo-card {
min-width: 0;
border: 1px solid rgba(54,46,36,.07);
border-radius: 15px;
box-shadow: 0 5px 18px rgba(54,46,36,.04);
background: #fff;
}
.catalogo-card > img,
.catalogo-card-sem-foto {
aspect-ratio: 1 / 1.06;
}
.catalogo-card-body {
padding: 10px 10px 11px !important;
gap: 5px;
}
.catalogo-card h2 {
min-height: 34px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-family: var(--font-body);
font-size: 12px;
line-height: 1.38;
font-weight: 600;
color: var(--charcoal);
}
.catalogo-card .catalogo-card-descricao { display: none; }
.catalogo-card .badge {
align-self: flex-start;
max-width: 100%;
padding: 3px 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 8.5px;
}
.catalogo-preco {
margin-top: 2px;
font-size: 16px;
line-height: 1.15;
}
.catalogo-card small.catalogo-estoque {
min-height: 14px;
font-size: 9px;
line-height: 1.2;
}
.catalogo-card-controle { padding-top: 3px; }
.catalogo-add-btn {
min-height: 36px;
margin-top: 3px;
padding: 7px 6px;
gap: 3px;
font-size: 10.5px;
}
.catalogo-add-btn .icone-mais { font-size: 14px; }
.catalogo-qtd-stepper {
height: 36px;
margin-top: 3px;
}
.catalogo-qtd-stepper button {
width: 34px;
height: 34px;
font-size: 16px;
}
.catalogo-qtd-stepper span { font-size: 12px; }
.catalogo-paginacao {
margin: 22px 0 8px;
gap: 4px;
flex-wrap: nowrap;
}
.catalogo-pag-seta,
.catalogo-pag-numeros button {
min-width: 34px;
height: 34px;
padding: 0 8px;
font-size: 12px;
}
.catalogo-pag-numeros {
gap: 4px;
min-width: 0;
}
.catalogo-pag-info {
margin-bottom: 8px;
font-size: 10.5px;
}
.carrinho-barra-flutuante {
left: 10px;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
max-width: none;
min-height: 50px;
padding: 10px 14px;
border-radius: 15px;
box-shadow: 0 12px 30px rgba(168,123,18,.26);
}
#carrinho-barra-texto { font-size: 12px; }
.carrinho-barra-total { font-size: 13px; }
.catalogo-publico-page .modal-overlay {
align-items: flex-end;
padding: 0;
}
.catalogo-publico-page .modal {
width: 100% !important;
max-width: none !important;
max-height: 88dvh !important;
margin: 0 !important;
padding: 32px 16px calc(18px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
border-radius: 22px 22px 0 0 !important;
}
.catalogo-publico-page .modal-x {
top: 10px;
right: 12px;
}
.carrinho-item-linha {
display: grid;
grid-template-columns: 46px minmax(0,1fr) auto;
gap: 8px;
align-items: center;
padding: 10px 0;
}
.carrinho-item-linha img,
.carrinho-item-linha .sem-foto {
width: 46px;
height: 46px;
}
.carrinho-item-info { grid-column: 2; }
.carrinho-item-linha .catalogo-qtd-stepper {
grid-column: 2;
width: 106px;
margin-top: 5px;
}
.carrinho-item-remover {
grid-column: 3;
grid-row: 1 / span 2;
}
}
@media (max-width: 350px) {
.catalogo-publico { padding-left: 8px; padding-right: 8px; }
.catalogo-grid { gap: 7px !important; }
.catalogo-card-body { padding: 8px !important; }
.catalogo-card h2 { font-size: 11px; }
.catalogo-preco { font-size: 14.5px; }
.catalogo-add-btn { font-size: 9.5px; }
}
/* CATALOGO NAVBAR MOBILE 20260812N */
.catalogo-navbar {
max-width: 980px;
margin: 0 auto 18px;
padding: 14px 16px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(54,46,36,.07);
}
.catalogo-navbar-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.catalogo-navbar-logo {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(199,154,50,.16);
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 14px rgba(168,123,18,.08);
}
.catalogo-navbar-logo img {
width: 30px;
height: 30px;
object-fit: contain;
}
.catalogo-navbar-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.15;
}
.catalogo-navbar-copy span {
color: var(--gold-deep);
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.catalogo-navbar-copy strong {
max-width: 100%;
overflow: hidden;
color: var(--charcoal);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 620px) {
.catalogo-card > img,
.catalogo-card-sem-foto {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
object-position: center;
}
.catalogo-publico {
padding-top: 0 !important;
}
.catalogo-navbar {
position: sticky;
top: 0;
z-index: 30;
margin: 0 -12px 10px;
padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
border-bottom: 1px solid rgba(54,46,36,.07);
background: rgba(253,251,247,.97);
box-shadow: 0 4px 16px rgba(54,46,36,.035);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.catalogo-navbar-logo {
width: 36px;
height: 36px;
flex-basis: 36px;
}
.catalogo-navbar-logo img {
width: 25px;
height: 25px;
}
.catalogo-navbar-copy span {
font-size: 9px;
}
.catalogo-navbar-copy strong {
font-size: 12.5px;
}
/* A busca fica logo abaixo da navbar, sem competir visualmente com ela. */
.catalogo-busca-wrap {
top: calc(53px + env(safe-area-inset-top)) !important;
margin-top: 0 !important;
}
.catalogo-busca-wrap::before {
inset: -6px -4px !important;
}
}
/* ADMIN REVENDEDORA FINANCEIRO + CONFERENCIA 20260813 */
.finance-group {
margin-bottom: 16px;
overflow: hidden;
border: 1px solid rgba(199,154,50,.20);
border-radius: 18px;
background: #fff;
box-shadow: 0 7px 24px rgba(88,65,20,.055);
}
.finance-group-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 16px 18px;
background: var(--cream-deep);
border-bottom: 1px solid rgba(199,154,50,.14);
}
.finance-group-title {
display: block;
margin-bottom: 3px;
font-size: 15px;
}
.finance-group-summary {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
text-align: right;
}
.finance-group-summary > span:not(.badge) {
color: var(--charcoal-55);
font-size: 12px;
}
.finance-sales-list {
padding: 0 16px;
}
.finance-sale-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: 16px;
padding: 13px 2px;
border-bottom: 1px solid rgba(54,46,36,.08);
}
.finance-sale-row:last-child {
border-bottom: 0;
}
.finance-sale-main {
min-width: 0;
}
.finance-sale-main > strong {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.finance-sale-meta {
display: flex;
gap: 8px 12px;
flex-wrap: wrap;
margin-top: 4px;
color: var(--charcoal-55);
font-size: 11px;
}
.finance-sale-side {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.finance-sale-empty {
padding: 18px 2px;
color: var(--charcoal-55);
font-size: 13px;
}
.finance-group-footer {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 13px 18px;
border-top: 1px solid rgba(54,46,36,.08);
background: rgba(248,244,235,.5);
}
.finance-pay-history {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
margin-top: 3px;
color: var(--charcoal-55);
font-size: 11px;
}
.acerto-conferencia-toolbar {
position: sticky;
top: -36px;
z-index: 5;
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: end;
gap: 12px;
padding: 12px 0;
background: #fff;
}
.acerto-progress {
min-width: 175px;
padding: 13px 14px;
border: 1px solid rgba(199,154,50,.22);
border-radius: 12px;
background: var(--cream-deep);
color: var(--gold-deep);
font-size: 12px;
font-weight: 600;
text-align: center;
}
.acerto-check-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.acerto-check-row {
display: grid;
grid-template-columns: 46px minmax(0,1fr) auto 44px;
align-items: center;
gap: 12px;
min-height: 66px;
padding: 9px 12px;
border: 1px solid rgba(54,46,36,.09);
border-radius: 13px;
background: #fff;
transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.acerto-check-row.is-sold {
background: rgba(239,247,235,.55);
}
.acerto-check-row.is-returned {
border-color: rgba(112,145,85,.28);
background: rgba(239,247,235,.78);
}
.acerto-check-media {
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 9px;
background: var(--cream-deep);
}
.acerto-check-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.acerto-check-info {
min-width: 0;
}
.acerto-check-name {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
}
.acerto-check-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
color: var(--charcoal-55);
font-size: 10.5px;
}
.acerto-check-action {
display: grid;
place-items: center;
}
.acerto-check-btn,
.acerto-check-sold {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 18px;
font-weight: 700;
}
.acerto-check-btn {
border: 1px solid rgba(54,46,36,.18);
background: #fff;
color: rgba(54,46,36,.28);
cursor: pointer;
transition: .18s ease;
}
.acerto-check-btn:hover {
border-color: rgba(199,154,50,.55);
color: var(--gold-deep);
}
.acerto-check-btn.is-checked {
border-color: rgba(112,145,85,.32);
background: #eaf4e5;
color: #52783c;
}
.acerto-check-sold {
color: #65884e;
background: #edf6e8;
}
@media (max-width: 700px) {
.finance-group-header {
flex-direction: column;
gap: 8px;
}
.finance-group-summary {
justify-content: flex-start;
text-align: left;
}
.finance-sale-row {
grid-template-columns: minmax(0,1fr);
gap: 8px;
}
.finance-sale-side {
justify-content: space-between;
}
.acerto-conferencia-toolbar {
grid-template-columns: 1fr;
top: -36px;
}
.acerto-progress {
min-width: 0;
}
.acerto-check-row {
grid-template-columns: 42px minmax(0,1fr) 40px;
gap: 9px;
}
.acerto-check-row > .badge {
grid-column: 2;
width: max-content;
}
.acerto-check-action {
grid-column: 3;
grid-row: 1 / span 2;
}
}
\n\n/* ACERTO MODAL FOOTER FIX 20260813 */
#acerto-modal .acerto-modal-shell {
display: flex;
flex-direction: column;
width: min(920px, 94vw);
max-width: 920px;
height: min(92vh, 860px);
max-height: calc(100dvh - 28px);
padding: 0;
overflow: hidden;
}
#acerto-modal .acerto-modal-title {
flex: 0 0 auto;
margin: 0;
padding: 30px 56px 16px 32px;
background: #fff;
}
#acerto-modal .modal-x {
top: 20px;
right: 22px;
z-index: 20;
}
#acerto-modal .acerto-modal-form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
#acerto-modal .acerto-modal-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 32px 26px;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
#acerto-modal .acerto-conferencia-toolbar {
top: 0;
margin-top: 4px;
padding-top: 12px;
padding-bottom: 12px;
box-shadow: 0 8px 12px rgba(255,255,255,.94);
}
#acerto-modal .acerto-modal-footer {
position: relative;
z-index: 12;
flex: 0 0 auto;
padding: 10px 22px 14px;
border-top: 1px solid rgba(199,154,50,.18);
background: rgba(255,255,255,.98);
box-shadow: 0 -10px 24px rgba(54,46,36,.08);
}
#acerto-modal .acerto-modal-footer .admin-error {
margin: 0 0 8px;
}
#acerto-modal .acerto-modal-footer .admin-error:not(.show) {
display: none;
}
#acerto-modal .acerto-modal-actions {
position: static;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
@media (max-width: 700px) {
#acerto-modal {
padding: 8px;
}
#acerto-modal .acerto-modal-shell {
width: 100%;
height: calc(100dvh - 16px);
max-height: calc(100dvh - 16px);
border-radius: 18px;
}
#acerto-modal .acerto-modal-title {
padding: 24px 48px 13px 18px;
font-size: 23px;
}
#acerto-modal .acerto-modal-scroll {
padding: 0 16px 20px;
}
#acerto-modal .acerto-modal-footer {
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
#acerto-modal .acerto-modal-actions > button {
min-height: 44px;
}
}
/* AUDITORIA AUTOMÁTICA DE ESTOQUE */
.audit-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.audit-head-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.audit-stats {
margin-bottom: 18px;
}
.audit-global-alerts {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.audit-global-alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid rgba(193, 146, 38, .25);
border-radius: 12px;
background: rgba(255, 247, 220, .65);
font-size: 12.5px;
}
.audit-global-alert.critical {
border-color: rgba(184, 64, 64, .24);
background: rgba(255, 238, 238, .75);
}
.audit-global-alert strong {
flex: 0 0 auto;
}
.audit-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.audit-toolbar .search-input {
margin: 0;
}
.audit-check-filter {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
white-space: nowrap;
}
.audit-table th:nth-child(1) { width: 23%; }
.audit-table th:nth-child(2),
.audit-table th:nth-child(3),
.audit-table th:nth-child(4),
.audit-table th:nth-child(5) { width: 9%; }
.audit-table th:nth-child(6) { width: 11%; }
.audit-row-has-issue {
background: rgba(255, 249, 235, .45);
}
.audit-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 4px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
}
.audit-ok {
color: #4e763b;
background: #edf6e8;
}
.audit-low {
color: #9a6f06;
background: #fff4d9;
}
.audit-warn {
color: #a26510;
background: #fff0d8;
}
.audit-critical {
color: #ab3f3f;
background: #fbe6e6;
}
.audit-diff {
margin-top: 3px;
font-size: 10px;
font-weight: 600;
}
.audit-diff.plus,
.audit-diff.minus {
color: #b05d45;
}
.audit-diagnostics {
min-width: 260px;
}
.audit-diagnostic-line {
margin-bottom: 5px;
padding-left: 8px;
border-left: 2px solid rgba(193, 146, 38, .35);
font-size: 11px;
line-height: 1.45;
}
.audit-diagnostic-line.critical {
border-color: rgba(184, 64, 64, .55);
color: #923b3b;
}
.audit-more summary {
cursor: pointer;
color: var(--gold-deep);
font-size: 11px;
}
.audit-more[open] summary {
margin-bottom: 6px;
}
.audit-footnote {
margin-top: 12px;
}
@media (max-width: 760px) {
.audit-head {
flex-direction: column;
}
.audit-head-actions {
width: 100%;
justify-content: stretch;
}
.audit-head-actions button {
flex: 1;
}
.audit-toolbar {
grid-template-columns: 1fr;
}
.audit-check-filter {
white-space: normal;
}
.audit-diagnostics {
min-width: 0;
}
}
/* AUDITORIA V2 — legibilidade */
.audit-explainer {
display: grid;
grid-template-columns: 42px minmax(0,1fr);
gap: 12px;
align-items: start;
margin: 0 0 20px;
padding: 14px 16px;
border: 1px solid rgba(199,154,50,.2);
border-radius: 14px;
background: rgba(248,244,235,.7);
}
.audit-explainer-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #edf6e8;
color: #557b40;
font-weight: 800;
}
.audit-explainer p {
margin: 4px 0 0;
color: var(--charcoal-55);
font-size: 12.5px;
line-height: 1.55;
}
.audit-stat-card {
min-height: 118px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
}
.audit-stat-card strong {
font-size: 28px;
line-height: 1;
}
.audit-stat-label {
margin-top: 7px;
font-size: 11px !important;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.audit-stat-sub {
display: block;
margin-top: 4px;
color: var(--charcoal-45);
font-size: 10.5px;
line-height: 1.35;
}
.audit-stat-card.ok {
border-color: rgba(92,130,67,.2);
background: rgba(247,251,244,.92);
}
.audit-stat-card.warn {
border-color: rgba(179,74,60,.2);
background: rgba(255,247,245,.94);
}
.audit-table {
table-layout: fixed;
width: 100%;
}
.audit-table th,
.audit-table td {
vertical-align: middle;
}
.audit-table th:nth-child(1) { width: 22%; }
.audit-table th:nth-child(2) { width: 10%; }
.audit-table th:nth-child(3) { width: 15%; }
.audit-table th:nth-child(4) { width: 14%; }
.audit-table th:nth-child(5) { width: 8%; }
.audit-table th:nth-child(6) { width: 11%; }
.audit-table th:nth-child(7) { width: 20%; }
.audit-number-cell {
text-align: center;
font-variant-numeric: tabular-nums;
}
.audit-diff-zero {
color: #557b40;
}
.audit-diff-value {
display: inline-flex;
min-width: 34px;
justify-content: center;
padding: 5px 7px;
border-radius: 999px;
font-size: 11px;
}
.audit-diff-value.plus,
.audit-diff-value.minus {
color: #9b4539;
background: #fbe9e6;
}
@media (max-width: 900px) {
.audit-table {
table-layout: auto;
}
}
/* AUDITORIA V3 — ações, tabela legível e paginação */
/* Ações sempre lado a lado no desktop */
.audit-head-actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: nowrap;
}
.audit-head-actions .btn-sm {
width: auto;
flex: 0 0 auto;
white-space: nowrap;
}
/* Tabela sem truncar conteúdo */
.audit-table-wrap {
overflow-x: visible;
}
.audit-table {
table-layout: fixed;
width: 100%;
}
.audit-table th,
.audit-table td {
white-space: normal;
overflow: visible;
text-overflow: clip;
word-break: normal;
overflow-wrap: anywhere;
line-height: 1.4;
}
.audit-table td:first-child strong,
.audit-table td:first-child .hint {
display: block;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.audit-table .audit-diagnostics {
min-width: 0;
white-space: normal;
}
.audit-diagnostic-line {
white-space: normal;
overflow-wrap: anywhere;
}
.audit-table th:nth-child(1) { width: 22%; }
.audit-table th:nth-child(2) { width: 10%; }
.audit-table th:nth-child(3) { width: 15%; }
.audit-table th:nth-child(4) { width: 14%; }
.audit-table th:nth-child(5) { width: 8%; }
.audit-table th:nth-child(6) { width: 10%; }
.audit-table th:nth-child(7) { width: 21%; }
.audit-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 14px;
padding: 4px 0;
}
.audit-pagination .hint {
min-width: 180px;
text-align: center;
}
@media (max-width: 900px) {
.audit-head-actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.audit-head-actions .btn-sm {
flex: 0 0 auto;
}
.audit-table-wrap {
overflow-x: auto;
}
.audit-table {
min-width: 900px;
}
}
@media (max-width: 600px) {
.audit-pagination {
gap: 8px;
}
.audit-pagination .hint {
min-width: 0;
font-size: 10.5px;
}
.audit-pagination .btn-sm {
padding-left: 10px;
padding-right: 10px;
}
}
/* RASTREABILIDADE DO PRODUTO */
.produto-rastreio-dialog {
width: min(920px, calc(100vw - 30px));
max-height: 88vh;
overflow-y: auto;
}
.produto-rastreio-head {
padding-right: 42px;
margin-bottom: 16px;
}
.produto-rastreio-head h2 {
margin: 5px 0 3px;
color: var(--gold-deep);
font-family: var(--font-serif);
}
.produto-rastreio-stats {
margin-bottom: 16px;
}
.produto-rastreio-stat-card {
min-height: 94px;
}
.produto-rastreio-saldos {
margin-bottom: 16px;
padding: 13px 14px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 13px;
background: var(--cream-deep);
}
.produto-rastreio-saldos:empty {
display: none;
}
.produto-rastreio-saldos-title {
display: block;
margin-bottom: 8px;
font-size: 12px;
}
.produto-rastreio-saldo-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.produto-rastreio-chip {
padding: 6px 9px;
border: 1px solid rgba(199,154,50,.16);
border-radius: 999px;
background: #fff;
font-size: 11px;
}
.produto-rastreio-toolbar {
display: grid;
grid-template-columns: minmax(0,1fr) 190px;
gap: 10px;
margin-bottom: 15px;
}
.produto-rastreio-toolbar .search-input {
margin: 0;
}
.produto-rastreio-lista {
position: relative;
}
.produto-rastreio-lista::before {
content: "";
position: absolute;
top: 20px;
bottom: 20px;
left: 19px;
width: 1px;
background: rgba(199,154,50,.22);
}
.produto-rastreio-event {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 40px minmax(0,1fr);
gap: 12px;
padding: 8px 0;
}
.produto-rastreio-event-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 4px solid #fff;
border-radius: 50%;
background: #f5efe4;
color: var(--gold-deep);
font-size: 12px;
font-weight: 800;
}
.produto-rastreio-event.sale .produto-rastreio-event-icon {
color: #a24d42;
background: #f8e9e6;
}
.produto-rastreio-event.return .produto-rastreio-event-icon,
.produto-rastreio-event.entry .produto-rastreio-event-icon {
color: #557b40;
background: #edf6e8;
}
.produto-rastreio-event.adjust .produto-rastreio-event-icon {
color: #9b7008;
background: #fff4d9;
}
.produto-rastreio-event-body {
padding: 10px 12px;
border: 1px solid rgba(54,46,36,.08);
border-radius: 12px;
background: #fff;
}
.produto-rastreio-event-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.produto-rastreio-event-top strong {
font-size: 13px;
}
.produto-rastreio-event-top time {
flex: 0 0 auto;
color: var(--charcoal-45);
font-size: 10.5px;
}
.produto-rastreio-event-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 12px;
margin-top: 5px;
color: var(--charcoal-55);
font-size: 10.5px;
}
.produto-rastreio-qty {
font-weight: 700;
}
.produto-rastreio-qty.positive {
color: #557b40;
}
.produto-rastreio-qty.negative {
color: #a24d42;
}
.produto-rastreio-event-note {
margin: 6px 0 0;
color: var(--charcoal-60);
font-size: 11px;
line-height: 1.45;
}
@media (max-width: 650px) {
.produto-rastreio-dialog {
width: calc(100vw - 16px);
max-height: 92vh;
}
.produto-rastreio-toolbar {
grid-template-columns: 1fr;
}
.produto-rastreio-event-top {
flex-direction: column;
gap: 3px;
}
}
/* RASTREABILIDADE V2 — correção estrutural */
body.modal-open {
overflow: hidden;
}
#produto-rastreio-modal {
align-items: center;
justify-content: center;
padding: 20px;
z-index: 10000;
}
#produto-rastreio-modal .produto-rastreio-dialog {
position: relative;
width: min(920px, 100%);
max-width: 920px;
max-height: calc(100vh - 40px);
margin: 0;
padding: 32px 30px 28px;
overflow-x: hidden;
overflow-y: auto;
text-align: left;
}
#produto-rastreio-modal .modal-x {
position: absolute;
top: 14px;
right: 16px;
z-index: 3;
}
#produto-rastreio-modal .produto-rastreio-head h2,
#produto-rastreio-modal .produto-rastreio-head p {
text-align: left;
}
#produto-rastreio-modal .produto-rastreio-head p {
margin-bottom: 0;
}
#produto-rastreio-modal .produto-rastreio-toolbar,
#produto-rastreio-modal .produto-rastreio-lista {
width: 100%;
min-width: 0;
}
#produto-rastreio-modal .produto-rastreio-toolbar input,
#produto-rastreio-modal .produto-rastreio-toolbar select {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
#produto-rastreio-modal .produto-rastreio-event-body {
min-width: 0;
}
#produto-rastreio-modal .produto-rastreio-event-note {
overflow-wrap: anywhere;
}
@media (max-width: 650px) {
#produto-rastreio-modal {
padding: 8px;
align-items: flex-end;
}
#produto-rastreio-modal .produto-rastreio-dialog {
width: 100%;
max-width: none;
max-height: 92vh;
padding: 28px 16px 18px;
border-radius: 20px 20px 0 0;
}
}
/* RASTREABILIDADE V3 — acabamento visual */
#produto-rastreio-modal .produto-rastreio-dialog {
padding: 34px 34px 30px;
border: 1px solid rgba(199,154,50,.14);
box-shadow: 0 26px 80px rgba(42,35,24,.20);
}
#produto-rastreio-modal .produto-rastreio-head {
margin-bottom: 20px;
}
#produto-rastreio-modal .produto-rastreio-head .eyebrow {
margin-bottom: 8px;
}
#produto-rastreio-modal .produto-rastreio-head h2 {
margin: 0 0 6px;
max-width: 820px;
font-size: clamp(24px, 3vw, 31px);
line-height: 1.16;
}
#produto-rastreio-modal .produto-rastreio-head .hint {
color: var(--charcoal-50);
font-size: 12px;
}
/* Cards */
#produto-rastreio-modal .produto-rastreio-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
margin-bottom: 18px;
}
#produto-rastreio-modal .produto-rastreio-stat-card {
min-height: 104px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 7px;
padding: 18px 20px;
border: 1px solid rgba(199,154,50,.20);
border-radius: 15px;
background: linear-gradient(180deg, #fff 0%, #fffdfa 100%);
box-shadow: 0 8px 24px rgba(83,62,22,.045);
}
#produto-rastreio-modal .produto-rastreio-stat-card strong {
display: block;
margin: 0;
color: var(--gold-deep);
font-size: 27px;
line-height: 1;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#produto-rastreio-modal .produto-rastreio-stat-card span {
display: block;
color: var(--charcoal-60);
font-size: 11px;
line-height: 1.35;
font-weight: 600;
letter-spacing: .025em;
text-transform: uppercase;
}
/* Saldos atuais */
#produto-rastreio-modal .produto-rastreio-saldos {
padding: 15px 16px;
border-radius: 14px;
}
#produto-rastreio-modal .produto-rastreio-saldos-title {
color: var(--charcoal);
font-size: 11.5px;
letter-spacing: .02em;
}
#produto-rastreio-modal .produto-rastreio-chip {
padding: 7px 11px;
border-color: rgba(199,154,50,.22);
color: var(--charcoal-70);
box-shadow: 0 2px 8px rgba(83,62,22,.025);
}
/* Busca + filtro */
#produto-rastreio-modal .produto-rastreio-toolbar {
grid-template-columns: minmax(0,1fr) 220px;
align-items: center;
gap: 12px;
margin: 4px 0 18px;
}
#produto-rastreio-modal .produto-rastreio-toolbar .search-input,
#produto-rastreio-modal .produto-rastreio-toolbar select {
height: 48px;
margin: 0;
border: 1px solid rgba(55,47,37,.16);
border-radius: 999px;
background-color: #fff;
color: var(--charcoal);
font-family: var(--font-body);
font-size: 12.5px;
outline: none;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#produto-rastreio-modal .produto-rastreio-toolbar .search-input {
padding: 0 18px;
}
#produto-rastreio-modal .produto-rastreio-toolbar select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding: 0 42px 0 17px;
background-image:
linear-gradient(45deg, transparent 50%, #9b7418 50%),
linear-gradient(135deg, #9b7418 50%, transparent 50%);
background-position:
calc(100% - 20px) 20px,
calc(100% - 15px) 20px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
#produto-rastreio-modal .produto-rastreio-toolbar .search-input:focus,
#produto-rastreio-modal .produto-rastreio-toolbar select:focus {
border-color: rgba(184,132,18,.58);
box-shadow: 0 0 0 3px rgba(199,154,50,.10);
}
#produto-rastreio-modal .produto-rastreio-toolbar .search-input::placeholder {
color: var(--charcoal-40);
}
/* Timeline */
#produto-rastreio-modal .produto-rastreio-event {
padding: 7px 0;
}
#produto-rastreio-modal .produto-rastreio-event-body {
padding: 12px 14px;
border-radius: 13px;
box-shadow: 0 4px 14px rgba(59,47,27,.025);
}
#produto-rastreio-modal .produto-rastreio-event-top strong {
color: var(--charcoal);
font-size: 13px;
}
#produto-rastreio-modal .produto-rastreio-event-top time {
padding-top: 1px;
}
#produto-rastreio-modal .produto-rastreio-event-meta {
margin-top: 6px;
}
#produto-rastreio-modal .produto-rastreio-event-note {
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid rgba(54,46,36,.06);
}
/* Empty state */
#produto-rastreio-modal .produto-rastreio-empty {
display: flex;
min-height: 150px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 24px;
border: 1px dashed rgba(199,154,50,.26);
border-radius: 15px;
background: rgba(250,247,240,.55);
text-align: center;
}
#produto-rastreio-modal .produto-rastreio-empty-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
margin-bottom: 2px;
border-radius: 50%;
background: #f5efe1;
color: var(--gold-deep);
font-size: 19px;
}
#produto-rastreio-modal .produto-rastreio-empty strong {
color: var(--charcoal);
font-size: 13px;
}
#produto-rastreio-modal .produto-rastreio-empty p {
max-width: 480px;
margin: 0;
color: var(--charcoal-50);
font-size: 11.5px;
line-height: 1.5;
}
/* Botão fechar mais discreto */
#produto-rastreio-modal .modal-x {
width: 36px;
height: 36px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--charcoal-40);
font-size: 25px;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
#produto-rastreio-modal .modal-x:hover {
background: var(--cream-deep);
color: var(--charcoal);
}
@media (max-width: 760px) {
#produto-rastreio-modal .produto-rastreio-stats {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
#produto-rastreio-modal .produto-rastreio-stat-card {
min-height: 92px;
padding: 15px 16px;
}
#produto-rastreio-modal .produto-rastreio-stat-card strong {
font-size: 24px;
}
#produto-rastreio-modal .produto-rastreio-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
#produto-rastreio-modal .produto-rastreio-dialog {
padding: 28px 16px 18px;
}
#produto-rastreio-modal .produto-rastreio-head {
padding-right: 34px;
}
}
/* AJUSTE MANUAL DE ESTOQUE */
.stock-adjust-btn {
font-size: 17px;
font-weight: 700;
color: var(--gold-deep);
}
.estoque-readonly-field input[readonly] {
cursor: not-allowed;
background: #f6f3ec;
color: var(--charcoal-55);
}
.estoque-readonly-field .hint {
display: block;
margin-top: 6px;
font-size: 10.5px;
line-height: 1.4;
}
.ajuste-estoque-produto {
margin-bottom: 16px !important;
}
.ajuste-estoque-resumo {
display: grid;
grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr);
gap: 10px;
align-items: center;
position: relative;
margin-bottom: 18px;
padding: 15px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 14px;
background: var(--cream-deep);
}
.ajuste-estoque-resumo > div:not(.ajuste-estoque-arrow):not(.ajuste-estoque-delta) {
display: flex;
flex-direction: column;
gap: 5px;
}
.ajuste-estoque-resumo span {
color: var(--charcoal-50);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
}
.ajuste-estoque-resumo strong {
color: var(--charcoal);
font-size: 25px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ajuste-estoque-arrow {
color: var(--gold-deep);
text-align: center;
font-size: 20px;
}
.ajuste-estoque-delta {
grid-column: 1 / -1;
width: max-content;
margin-top: 2px;
padding: 5px 9px;
border-radius: 999px;
background: #f1eee8;
color: var(--charcoal-50);
font-size: 10.5px;
font-weight: 700;
}
.ajuste-estoque-delta.positive {
background: #eaf4e5;
color: #52783c;
}
.ajuste-estoque-delta.negative {
background: #f9e7e5;
color: #a14840;
}
#ajuste-estoque-modal select {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid rgba(55,47,37,.16);
border-radius: 11px;
background: #fff;
color: var(--charcoal);
font: inherit;
}
#ajuste-estoque-modal textarea {
min-height: 92px;
resize: vertical;
}
.ajuste-estoque-warning {
margin: 2px 0 14px;
padding: 10px 12px;
border-left: 3px solid rgba(199,154,50,.55);
border-radius: 8px;
background: rgba(248,244,235,.72);
color: var(--charcoal-60);
font-size: 10.8px;
line-height: 1.5;
}
@media (max-width: 520px) {
.ajuste-estoque-resumo {
grid-template-columns: 1fr 22px 1fr;
}
.ajuste-estoque-resumo strong {
font-size: 22px;
}
}
/* PRODUTOS — tabela compacta sem scroll horizontal */
.produtos-table-wrap {
overflow-x: hidden;
overflow-y: auto;
}
#produtos-table {
width: 100%;
min-width: 0;
table-layout: fixed;
}
#produtos-table th,
#produtos-table td {
box-sizing: border-box;
}
#produtos-table .prod-col-foto { width: 6.5%; }
#produtos-table .prod-col-sku { width: 9%; }
#produtos-table .prod-col-nome { width: 21%; }
#produtos-table .prod-col-categoria { width: 18%; }
#produtos-table .prod-col-preco { width: 10%; }
#produtos-table .prod-col-promo { width: 11%; }
#produtos-table .prod-col-estoque { width: 8%; }
#produtos-table .prod-col-acoes { width: 16.5%; text-align: center; }
#produtos-table tbody td {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
#produtos-table .prod-sku-cell,
#produtos-table .prod-name-cell,
#produtos-table .prod-category-cell {
min-width: 0;
}
#produtos-table .prod-name-cell,
#produtos-table .prod-category-cell {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.35;
overflow-wrap: anywhere;
}
#produtos-table .prod-name-cell {
font-weight: 500;
}
#produtos-table .prod-category-cell {
color: var(--charcoal-60);
font-size: 11.5px;
}
#produtos-table .prod-actions-cell {
padding-left: 6px;
padding-right: 6px;
overflow: visible;
text-align: center;
}
.prod-actions-group {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
.prod-action-btn {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-grid;
place-items: center;
padding: 0;
border: 1px solid rgba(54,46,36,.13);
border-radius: 10px;
background: #fff;
color: var(--charcoal-55);
cursor: pointer;
transition:
transform .14s ease,
border-color .14s ease,
background .14s ease,
color .14s ease,
box-shadow .14s ease;
}
.prod-action-btn:hover {
transform: translateY(-1px);
border-color: rgba(184,132,18,.34);
background: #fffaf0;
color: var(--gold-deep);
box-shadow: 0 4px 12px rgba(79,61,26,.07);
}
.prod-action-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(199,154,50,.14);
}
.prod-action-btn.stock {
color: #9b7418;
}
.prod-action-btn.history {
color: #6f675c;
}
.prod-action-btn.edit {
color: #a17413;
}
.prod-action-btn.delete {
color: #9d5b54;
}
.prod-action-btn.delete:hover {
border-color: rgba(178,74,60,.25);
background: #fff5f3;
color: #a8433a;
}
/* O botão de remover foto também segue o mesmo visual discreto. */
.product-thumb-remover {
width: 20px !important;
height: 20px !important;
display: grid !important;
place-items: center;
padding: 0 !important;
border: 1px solid rgba(178,74,60,.18) !important;
border-radius: 50% !important;
background: rgba(255,255,255,.96) !important;
color: #a85b51 !important;
font-size: 9px !important;
line-height: 1 !important;
box-shadow: 0 2px 6px rgba(50,40,26,.08);
}
/* Desktop intermediário: preserva a tabela inteira sem barra horizontal. */
@media (max-width: 1180px) and (min-width: 761px) {
#produtos-table .prod-col-foto { width: 6%; }
#produtos-table .prod-col-sku { width: 8%; }
#produtos-table .prod-col-nome { width: 21%; }
#produtos-table .prod-col-categoria { width: 16%; }
#produtos-table .prod-col-preco { width: 9%; }
#produtos-table .prod-col-promo { width: 10%; }
#produtos-table .prod-col-estoque { width: 8%; }
#produtos-table .prod-col-acoes { width: 22%; }
.prod-actions-group {
gap: 4px;
}
.prod-action-btn {
width: 30px;
height: 30px;
flex-basis: 30px;
}
#produtos-table th,
#produtos-table td {
padding-left: 7px;
padding-right: 7px;
}
}
/* Mobile: mantém o comportamento responsivo existente sem forçar largura de desktop. */
@media (max-width: 760px) {
.produtos-table-wrap {
overflow-x: hidden;
}
#produtos-table {
min-width: 0;
}
.prod-actions-group {
justify-content: flex-end;
flex-wrap: nowrap;
}
}
/* DASHBOARD FINANCEIRO */
.finance-dashboard-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.finance-periodo {
display: grid;
grid-template-columns: 190px 190px auto auto;
gap: 10px;
align-items: end;
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 14px;
background: rgba(248,244,235,.72);
}
.finance-periodo .field {
margin: 0;
}
.finance-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
margin-bottom: 18px;
}
/* No desktop, evita cards estreitos demais dentro do container central.
Os dois indicadores de fechamento recebem mais largura para preservar
hierarquia, leitura dos valores e descricoes sem quebrar o layout. */
.finance-kpis > .finance-kpi:nth-child(5),
.finance-kpis > .finance-kpi:nth-child(6) {
grid-column: span 2;
}
.finance-kpi {
min-height: 122px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 17px 18px;
border: 1px solid rgba(199,154,50,.17);
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 24px rgba(83,62,22,.045);
}
.finance-kpi strong {
color: var(--gold-deep);
font-size: 23px;
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.finance-kpi-label {
margin-top: 9px;
color: var(--charcoal);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .055em;
}
.finance-kpi small {
margin-top: 5px;
color: var(--charcoal-45);
font-size: 10px;
line-height: 1.35;
}
.finance-kpi.received {
border-color: rgba(85,123,64,.18);
background: #fbfdf9;
}
.finance-kpi.overdue {
border-color: rgba(171,63,63,.20);
background: #fffafa;
}
.finance-kpi.overdue strong {
color: #a54a42;
}
.finance-grid {
display: grid;
grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
gap: 16px;
}
.finance-panel-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(199,154,50,.17);
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 26px rgba(83,62,22,.04);
}
.finance-panel-head {
min-height: 67px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(54,46,36,.07);
background: rgba(248,244,235,.55);
}
.finance-panel-head strong {
display: block;
font-size: 13px;
}
.finance-panel-head span {
display: block;
margin-top: 3px;
color: var(--charcoal-45);
font-size: 10.5px;
}
.finance-mini-select {
min-width: 135px;
height: 38px;
padding: 0 30px 0 11px;
border: 1px solid rgba(54,46,36,.14);
border-radius: 999px;
background: #fff;
color: var(--charcoal-65);
font: inherit;
font-size: 10.5px;
}
.finance-pendencias {
max-height: 520px;
overflow-y: auto;
}
.finance-pendency {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-bottom: 1px solid rgba(54,46,36,.065);
}
.finance-pendency:last-child {
border-bottom: 0;
}
.finance-pendency-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.finance-pendency-top strong {
font-size: 12px;
}
.finance-status {
padding: 4px 8px;
border-radius: 999px;
background: #f2eee7;
color: var(--charcoal-55);
font-size: 9px;
font-weight: 700;
}
.finance-status.vencido {
background: #f9e7e5;
color: #9e463e;
}
.finance-status.vence_em_breve {
background: #fff3d9;
color: #96700e;
}
.finance-status.acerto_pendente {
background: #eee9f5;
color: #6f5d88;
}
.finance-pendency-meta {
display: flex;
gap: 5px 12px;
flex-wrap: wrap;
margin-top: 5px;
color: var(--charcoal-45);
font-size: 10px;
}
.finance-days-overdue {
color: #a54a42;
font-weight: 600;
}
.finance-pendency-value {
color: var(--charcoal);
font-size: 12px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.finance-ranking {
max-height: 520px;
overflow-y: auto;
}
.finance-rank-row {
display: grid;
grid-template-columns: minmax(155px,.7fr) minmax(0,1.3fr);
gap: 14px;
align-items: center;
padding: 13px 16px;
border-bottom: 1px solid rgba(54,46,36,.065);
}
.finance-rank-person {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.finance-rank-position {
width: 28px;
height: 28px;
flex: 0 0 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--cream-deep);
color: var(--gold-deep);
font-size: 10px;
font-weight: 700;
}
.finance-rank-person strong {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11.5px;
}
.finance-rank-person div > span {
color: var(--charcoal-45);
font-size: 9.5px;
}
.finance-rank-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 8px;
}
.finance-rank-metrics > div {
min-width: 0;
}
.finance-rank-metrics span {
display: block;
color: var(--charcoal-45);
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: .045em;
}
.finance-rank-metrics strong {
display: block;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
color: var(--charcoal);
font-size: 10.5px;
white-space: nowrap;
}
.finance-rank-overdue strong {
color: #a54a42 !important;
}
.finance-empty {
padding: 28px 18px;
color: var(--charcoal-45);
text-align: center;
font-size: 11px;
}
.finance-empty strong,
.finance-empty span {
display: block;
}
.finance-empty span {
margin-top: 4px;
}
.finance-dashboard-footnote {
margin-top: 12px;
}
@media (max-width: 1050px) {
.finance-kpis {
grid-template-columns: repeat(3, minmax(0,1fr));
}
.finance-kpis > .finance-kpi:nth-child(5),
.finance-kpis > .finance-kpi:nth-child(6) {
grid-column: auto;
}
.finance-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.finance-dashboard-head {
align-items: stretch;
}
.finance-periodo {
grid-template-columns: 1fr 1fr;
}
.finance-periodo button {
width: 100%;
}
.finance-kpis {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 520px) {
.finance-dashboard-head {
flex-direction: column;
}
.finance-periodo {
grid-template-columns: 1fr;
}
.finance-kpis {
grid-template-columns: 1fr 1fr;
}
.finance-kpi {
min-height: 105px;
padding: 14px;
}
.finance-kpi strong {
font-size: 19px;
}
.finance-panel-head {
align-items: flex-start;
flex-direction: column;
}
.finance-mini-select {
width: 100%;
}
.finance-rank-row {
grid-template-columns: 1fr;
}
}
/* MOSTRUÁRIO — previsão de devolução */
.mostruario-meta-grid .field .hint { display:block; margin-top:5px; font-size:10px; }
.mostruario-return-date-box { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:12px 0 10px; padding:11px 12px; border:1px solid rgba(199,154,50,.20); border-radius:12px; background:rgba(248,244,235,.65); }
.mostruario-return-date-copy span,.mostruario-return-date-copy strong { display:block; }
.mostruario-return-date-copy span { color:var(--charcoal-45); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.055em; }
.mostruario-return-date-copy strong { margin-top:3px; color:var(--charcoal); font-size:12px; }
.mostruario-return-date-actions { display:flex; align-items:center; gap:8px; }
.mostruario-return-date-actions input[type="date"] { min-width:155px; height:38px; padding:0 10px; border:1px solid rgba(54,46,36,.14); border-radius:9px; background:#fff; color:var(--charcoal); font:inherit; font-size:11px; }
/* REVENDEDORA — ações de venda */
.rev-sale-action-btn { width:32px; height:32px; flex:0 0 32px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0; border:1px solid rgba(54,46,36,.14); border-radius:10px; background:#fff; color:var(--charcoal-55); cursor:pointer; }
.rev-sale-action-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rev-sale-action-btn.edit { color:#9b7418; }
.rev-sale-action-btn.delete { color:#a04d45; }
.rev-sale-action-btn:disabled { cursor:wait; opacity:.58; }
.rev-sale-action-label,.rev-sale-inline-label { display:none; }
.rev-sale-status-line { margin-top:5px; }
@media (max-width:760px) {
.mostruario-return-date-box { align-items:stretch; flex-direction:column; }
.mostruario-return-date-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.mostruario-return-date-actions input[type="date"] { width:100%; min-width:0; }
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Data da venda"],
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Mostruário"] {
grid-template-columns:98px minmax(0,1fr) !important;
align-items:center !important;
min-height:46px;
padding-top:9px !important;
padding-bottom:9px !important;
}
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Data da venda"]::before,
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td[data-label="Mostruário"]::before {
color:var(--charcoal-45) !important; font-size:9.5px !important; font-weight:700 !important;
}
#vendas-table .venda-admin-venda .venda-admin-primary { color:var(--charcoal); font-size:12px !important; font-weight:600; }
#vendas-table .venda-admin-reference { color:var(--charcoal); font-size:12px; font-weight:700; }
#vendas-table .rev-sale-status-line { display:flex; align-items:center; gap:8px; margin-top:7px; }
#vendas-table .rev-sale-inline-label { display:inline-block; color:var(--charcoal-45); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td.rev-venda-actions {
display:block !important; padding:12px 14px 15px !important; border-top:1px solid rgba(54,46,36,.07) !important; background:#fff !important;
}
#vendas-table.vendas-rev-table tbody tr.mobile-accordion-row.is-open > td.rev-venda-actions::before {
content:"Ações da venda" !important; display:block !important; margin-bottom:9px !important; color:var(--charcoal-45) !important; font-size:9.5px !important; font-weight:700 !important; letter-spacing:.055em !important; text-transform:uppercase !important;
}
#vendas-table .rev-venda-actions { display:flex !important; justify-content:stretch !important; gap:8px !important; }
#vendas-table .rev-sale-action-btn { width:auto; height:42px; min-height:42px; flex:1 1 0; padding:0 12px; border-radius:11px; font-size:11px; font-weight:700; }
#vendas-table .rev-sale-action-btn.edit { border-color:rgba(184,132,18,.27); background:#fffaf0; }
#vendas-table .rev-sale-action-btn.delete { border-color:rgba(174,78,67,.20); background:#fff7f5; }
#vendas-table .rev-sale-action-label { display:inline; }
#vendas-table .rev-sale-action-btn svg { width:17px; height:17px; }
}
/* VENDAS MOBILE V3 — pagamento e status sem quebras ruins */
@media (max-width: 760px) {
/* O badge do resumo nunca quebra "Em conta" em duas linhas. */
#vendas-table .mobile-summary-status {
width: auto !important;
min-width: max-content !important;
max-width: none !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
flex-shrink: 0 !important;
}
#vendas-table .mobile-summary-side {
min-width: max-content !important;
}
/* Ao abrir, forma de pagamento ganha sua própria linha clara.
O valor já aparece no cabeçalho/resumo, então não é repetido. */
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"] {
display: grid !important;
grid-template-columns: 136px minmax(0,1fr) !important;
align-items: center !important;
min-height: 46px;
padding: 9px 14px !important;
border-top: 1px solid rgba(54,46,36,.055) !important;
}
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"]::before {
content: "Forma de pagamento" !important;
display: block !important;
color: var(--charcoal-45) !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
}
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"]
.venda-admin-value {
display: none !important;
}
#vendas-table .rev-sale-payment-method {
margin: 0 !important;
color: var(--charcoal) !important;
font-size: 12px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
/* O status segue servindo ao resumo fechado, mas não vira outra linha
redundante dentro dos detalhes abertos. */
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
.rev-sale-status-line {
display: none !important;
}
}
/* VENDAS MOBILE V4 — alinhamento tipo tabela no card expandido */
@media (max-width: 760px) {
/* Todos os campos detalhados passam a usar exatamente a mesma
coluna de rótulo e a mesma coluna de valor. */
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Data da venda"],
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"],
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Mostruário"] {
display: grid !important;
grid-template-columns: 150px minmax(0, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
min-height: 56px !important;
padding: 10px 18px !important;
box-sizing: border-box !important;
}
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Data da venda"]::before,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"]::before,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Mostruário"]::before {
width: 150px !important;
margin: 0 !important;
padding: 0 !important;
align-self: center !important;
color: var(--charcoal-45) !important;
font-size: 9.5px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Data da venda"]
.venda-admin-primary,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"]
.rev-sale-payment-method,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Mostruário"]
.venda-admin-reference {
margin: 0 !important;
justify-self: start !important;
align-self: center !important;
color: var(--charcoal) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
white-space: nowrap !important;
}
/* Em telas realmente estreitas reduzimos a coluna, mas preservamos
o mesmo eixo de alinhamento para todos os campos. */
@media (max-width: 430px) {
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Data da venda"],
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"],
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Mostruário"] {
grid-template-columns: 136px minmax(0, 1fr) !important;
column-gap: 10px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Data da venda"]::before,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Forma de pagamento"]::before,
#vendas-table.vendas-rev-table
tbody tr.mobile-accordion-row.is-open
> td[data-label="Mostruário"]::before {
width: 136px !important;
font-size: 9px !important;
}
}
}
/* VENDAS V5 — quantidade antes do nome do item */
.venda-admin-item-line {
display: flex;
align-items: baseline;
gap: 6px;
}
.venda-admin-item-line .venda-admin-qty {
flex: 0 0 auto;
white-space: nowrap;
}
/* CENTRAL DE ALERTAS */
.alertas-tab-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
}
.alertas-nav-badge {
min-width: 18px;
height: 18px;
display: inline-grid;
place-items: center;
padding: 0 5px;
border-radius: 999px;
background: #e8d8b3;
color: #7d5a0e;
font-size: 9px;
font-weight: 800;
line-height: 1;
}
.alertas-nav-badge.critical {
background: #f3d9d5;
color: #9d443c;
}
.alerts-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.alerts-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
margin-bottom: 18px;
}
.alerts-kpi {
min-height: 115px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 17px 18px;
border: 1px solid rgba(199,154,50,.16);
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 24px rgba(83,62,22,.04);
}
.alerts-kpi strong {
color: var(--gold-deep);
font-size: 27px;
line-height: 1;
}
.alerts-kpi span {
margin-top: 8px;
color: var(--charcoal);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .055em;
}
.alerts-kpi small {
margin-top: 5px;
color: var(--charcoal-45);
font-size: 10px;
line-height: 1.35;
}
.alerts-kpi.critical {
border-color: rgba(172,67,56,.18);
background: #fffafa;
}
.alerts-kpi.critical strong {
color: #a44b42;
}
.alerts-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.alerts-filters {
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.alerts-filter {
height: 36px;
padding: 0 13px;
border: 1px solid rgba(54,46,36,.13);
border-radius: 999px;
background: #fff;
color: var(--charcoal-55);
font: inherit;
font-size: 10.5px;
cursor: pointer;
}
.alerts-filter.active {
border-color: rgba(184,132,18,.35);
background: #fff8e8;
color: var(--gold-deep);
font-weight: 700;
}
.alerts-search {
width: min(360px, 100%);
margin: 0 !important;
}
.alerts-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.alert-card {
display: grid;
grid-template-columns: 42px minmax(0,1fr);
gap: 12px;
align-items: start;
padding: 13px 15px;
border: 1px solid rgba(54,46,36,.08);
border-radius: 14px;
background: #fff;
}
.alert-card.critico {
border-color: rgba(172,67,56,.18);
background: #fffafa;
}
.alert-card.atencao {
border-color: rgba(199,154,50,.22);
background: #fffdf8;
}
.alert-card.info {
border-color: rgba(81,122,63,.14);
}
.alert-card-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--cream-deep);
color: var(--gold-deep);
font-size: 14px;
font-weight: 800;
}
.alert-card.critico .alert-card-icon {
background: #f7e3e0;
color: #a14b42;
}
.alert-card.info .alert-card-icon {
background: #edf5e8;
color: #557942;
}
.alert-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.alert-card-top strong {
color: var(--charcoal);
font-size: 12.5px;
}
.alert-severity {
flex: 0 0 auto;
padding: 4px 8px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .045em;
}
.alert-severity.critico {
background: #f5dfdc;
color: #9c453d;
}
.alert-severity.atencao {
background: #fff0ca;
color: #8d6710;
}
.alert-severity.info {
background: #e9f3e4;
color: #557942;
}
.alert-card-description {
margin: 5px 0 0;
color: var(--charcoal-60);
font-size: 11px;
line-height: 1.45;
}
.alert-card-meta {
display: flex;
gap: 8px 14px;
flex-wrap: wrap;
margin-top: 7px;
color: var(--charcoal-45);
font-size: 9.8px;
}
.alert-card-value {
color: var(--charcoal);
font-weight: 700;
}
.alerts-empty {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px;
border: 1px dashed rgba(199,154,50,.24);
border-radius: 15px;
background: rgba(250,247,240,.5);
text-align: center;
}
.alerts-empty-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
margin-bottom: 3px;
border-radius: 50%;
background: #edf5e8;
color: #557942;
font-weight: 800;
}
.alerts-empty strong {
color: var(--charcoal);
font-size: 13px;
}
.alerts-empty p {
max-width: 430px;
margin: 0;
color: var(--charcoal-45);
font-size: 10.5px;
line-height: 1.45;
}
.alerts-footnote {
margin-top: 12px;
}
@media (max-width: 900px) {
.alerts-kpis {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.alerts-toolbar {
align-items: stretch;
flex-direction: column;
}
.alerts-search {
width: 100%;
}
}
@media (max-width: 560px) {
.alerts-head {
flex-direction: column;
}
.alerts-kpis {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 9px;
}
.alerts-kpi {
min-height: 100px;
padding: 14px;
}
.alerts-kpi strong {
font-size: 23px;
}
.alert-card {
grid-template-columns: 34px minmax(0,1fr);
gap: 9px;
padding: 12px;
}
.alert-card-icon {
width: 32px;
height: 32px;
}
.alert-card-top {
align-items: flex-start;
}
}
/* RASCUNHO — ações */
.draft-mostruario-actions {
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
margin-top:10px;
}
.draft-mostruario-actions .btn-sm { margin:0 !important; }
.draft-cancel-btn {
border:1px solid rgba(169,72,61,.24);
background:#fff8f6;
color:#a24d43;
}
.draft-cancel-btn:hover {
border-color:rgba(169,72,61,.38);
background:#fff1ee;
}
/* ALERTAS — botão Ver e destaque do destino */
.alert-card {
grid-template-columns:42px minmax(0,1fr) auto;
align-items:center;
}
.alert-card-actions {
display:flex;
align-items:center;
justify-content:flex-end;
padding-left:8px;
}
.alert-view-btn {
min-width:62px;
border-color:rgba(184,132,18,.30);
background:#fffaf0;
color:var(--gold-deep);
font-weight:700;
}
.alert-view-btn:hover { background:#fff4d8; }
.alert-target-highlight {
animation:alertTargetPulse 3s ease-out;
outline:2px solid rgba(194,143,29,.72) !important;
outline-offset:3px;
}
@keyframes alertTargetPulse {
0% { box-shadow:0 0 0 0 rgba(194,143,29,.34); }
35% { box-shadow:0 0 0 9px rgba(194,143,29,.12); }
100% { box-shadow:0 0 0 0 rgba(194,143,29,0); }
}
@media (max-width:700px) {
.alert-card { grid-template-columns:34px minmax(0,1fr); }
.alert-card-actions {
grid-column:2;
justify-content:flex-start;
padding:4px 0 0;
}
.draft-mostruario-actions {
display:grid;
grid-template-columns:1fr 1fr;
}
.draft-mostruario-actions .btn-sm { width:100%; }
}
/* ADMIN / VENDAS V3 — quantidade antes do produto */
#vendas-admin-table .venda-admin-item-line,
.rd-vendas-table .venda-admin-item-line {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
#vendas-admin-table .venda-admin-qty,
.rd-vendas-table .venda-admin-qty {
flex: 0 0 auto;
order: 0;
white-space: nowrap;
color: var(--gold-deep);
font-weight: 700;
}
#vendas-admin-table .venda-admin-item-name,
.rd-vendas-table .venda-admin-item-name {
min-width: 0;
order: 1;
}
/* Venda direta — fechada por padrão */
.admin-sales-entry-launch {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.admin-sales-entry-button {
min-height: 40px;
padding-left: 17px;
padding-right: 17px;
}
.admin-sales-entry-panel {
padding: 20px;
margin-bottom: 18px;
}
.admin-sales-entry-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
/* Filtro de vendas — barra única e discreta */
.sales-filter-bar {
display: grid;
grid-template-columns: auto minmax(280px, 1fr) auto;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding: 10px 12px;
border: 1px solid rgba(199,154,50,.14);
border-radius: 13px;
background: rgba(248,244,235,.52);
}
.sales-filter-dates {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.sales-filter-label {
margin-right: 2px;
color: var(--charcoal-55);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.sales-filter-separator {
color: var(--charcoal-40);
font-size: 10px;
}
.sales-filter-dates input[type="date"] {
width: 143px;
height: 38px;
padding: 0 9px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 9px;
background: rgba(255,255,255,.80);
color: var(--charcoal);
font: inherit;
font-size: 10.5px;
}
.sales-filter-search {
position: relative;
min-width: 0;
}
.sales-filter-search-icon {
position: absolute;
left: 13px;
top: 50%;
z-index: 1;
transform: translateY(-50%);
color: var(--charcoal-35);
font-size: 15px;
pointer-events: none;
}
.sales-filter-search input {
width: 100%;
height: 38px;
margin: 0;
padding: 0 13px 0 35px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 9px;
background: rgba(255,255,255,.80);
font-size: 10.5px;
}
.sales-filter-actions {
display: flex;
align-items: center;
gap: 7px;
}
.sales-filter-actions .btn-sm {
min-height: 36px;
padding: 0 12px;
margin: 0;
}
.sales-filter-clear {
border: 0;
background: transparent;
color: var(--charcoal-45);
}
.sales-filter-clear:hover {
color: var(--gold-deep);
background: rgba(255,255,255,.65);
}
@media (max-width: 1050px) {
.sales-filter-bar {
grid-template-columns: 1fr auto;
}
.sales-filter-dates {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.admin-sales-entry-launch {
align-items: stretch;
flex-direction: column;
}
.admin-sales-entry-launch .hint {
display: none;
}
.admin-sales-entry-button {
width: 100%;
}
.admin-sales-entry-head {
align-items: stretch;
flex-direction: column;
}
.admin-sales-entry-head #va-fechar-form {
align-self: flex-start;
}
.sales-filter-bar {
display: flex;
align-items: stretch;
flex-direction: column;
}
.sales-filter-dates {
display: grid;
grid-template-columns: auto 1fr auto 1fr;
}
.sales-filter-dates input[type="date"] {
width: 100%;
min-width: 0;
}
.sales-filter-actions {
justify-content: flex-end;
}
}
/* REVENDEDORA — catálogo por mostruário */
.showcase-history-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}
.rev-showcase-list { display:flex; flex-direction:column; gap:10px; }
.rev-showcase-card {
overflow:hidden;
border:1px solid rgba(199,154,50,.18);
border-radius:14px;
background:#fff;
box-shadow:0 5px 18px rgba(76,57,24,.035);
}
.rev-showcase-card.is-current { border-color:rgba(184,132,18,.32); }
.rev-showcase-summary {
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:15px 17px;
border:0;
background:#fff;
color:var(--charcoal);
text-align:left;
cursor:pointer;
}
.rev-showcase-summary:hover { background:rgba(249,246,238,.65); }
.rev-showcase-summary-main { min-width:0; }
.rev-showcase-title { display:block; font-size:13px; }
.rev-showcase-dates {
display:flex;
gap:6px 16px;
flex-wrap:wrap;
margin-top:5px;
color:var(--charcoal-45);
font-size:10px;
}
.rev-showcase-summary-side {
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto;
}
.rev-showcase-status {
padding:5px 9px;
border-radius:999px;
font-size:9px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
white-space:nowrap;
}
.rev-showcase-status.current { background:#eaf4e5; color:#557942; }
.rev-showcase-status.returned { background:#f3e7e5; color:#9b5149; }
.rev-showcase-count { color:var(--charcoal-45); font-size:10px; white-space:nowrap; }
.rev-showcase-chevron { width:22px; color:var(--gold-deep); text-align:center; font-size:14px; }
.rev-showcase-details {
border-top:1px solid rgba(54,46,36,.07);
background:#fffdf9;
}
.rev-showcase-overview {
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 17px;
border-bottom:1px solid rgba(54,46,36,.06);
color:var(--charcoal-55);
font-size:10px;
}
.rev-showcase-overview span:last-child { color:var(--gold-deep); font-weight:700; }
.rev-showcase-items { padding:4px 0; }
.rev-showcase-item-row {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:54px;
padding:9px 17px;
border-bottom:1px solid rgba(54,46,36,.055);
}
.rev-showcase-item-row:last-child { border-bottom:0; }
.rev-showcase-item-info { min-width:0; }
.rev-showcase-item-info strong,
.rev-showcase-item-info span { display:block; }
.rev-showcase-item-info strong {
color:var(--charcoal);
font-size:11.5px;
line-height:1.35;
}
.rev-showcase-item-info span {
margin-top:3px;
color:var(--charcoal-40);
font-size:9.5px;
}
.rev-showcase-item-state {
min-width:74px;
padding:5px 9px;
border-radius:999px;
text-align:center;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.rev-showcase-item-state.available { background:#eaf4e5; color:#52783c; }
.rev-showcase-item-state.sold { background:#f8e9e6; color:#9c4b43; }
.rev-showcase-item-state.returned { background:#efede9; color:#6e675e; }
.rev-showcase-empty,
.rev-showcase-item-empty {
padding:22px;
color:var(--charcoal-45);
text-align:center;
font-size:10.5px;
}
.rev-showcase-empty strong,
.rev-showcase-empty span { display:block; }
.rev-showcase-empty span { margin-top:4px; }
/* Registrar venda recolhível */
.rev-sales-launch {
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
.rev-sales-open-btn {
min-height:40px;
padding-left:17px;
padding-right:17px;
}
.rev-sales-entry-panel { padding:20px; margin-bottom:22px; }
.rev-sales-entry-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}
/* Paginação real das vendas */
.rev-sales-pagination {
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:14px;
padding:8px 0 2px;
}
.rev-sales-pagination[hidden] { display:none !important; }
.rev-sales-pagination .hint {
margin:0;
min-width:150px;
text-align:center;
}
@media (max-width:620px) {
.rev-showcase-summary { align-items:flex-start; padding:14px; }
.rev-showcase-summary-side {
display:grid;
justify-items:end;
gap:6px;
}
.rev-showcase-count { display:none; }
.rev-showcase-dates { display:grid; gap:4px; }
.rev-showcase-item-row { padding:10px 14px; }
.rev-sales-launch {
align-items:stretch;
flex-direction:column;
}
.rev-sales-launch .hint { display:none; }
.rev-sales-open-btn { width:100%; }
.rev-sales-entry-head {
align-items:stretch;
flex-direction:column;
}
.rev-sales-entry-head #rev-venda-fechar { align-self:flex-start; }
.rev-sales-pagination { gap:8px; }
.rev-sales-pagination .btn-sm { min-width:94px; }
.rev-sales-pagination .hint { min-width:0; font-size:9px; }
}
/* REVENDEDORA V2 — busca e filtro de Minhas vendas */
.rev-sales-list-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:10px;
}
.rev-sales-filter-bar {
display:grid;
grid-template-columns:minmax(220px, 1fr) 112px auto;
align-items:center;
gap:7px;
width:min(560px, 100%);
}
.rev-sales-search {
position:relative;
min-width:0;
}
.rev-sales-search-icon {
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:var(--charcoal-35);
font-size:14px;
pointer-events:none;
}
.rev-sales-search input,
#rev-vendas-filtro {
width:100%;
height:36px;
box-sizing:border-box;
margin:0;
border:1px solid rgba(54,46,36,.12);
border-radius:9px;
background:rgba(255,255,255,.86);
color:var(--charcoal);
font:inherit;
font-size:10.5px;
}
.rev-sales-search input {
padding:0 11px 0 33px;
}
#rev-vendas-filtro {
padding:0 8px;
}
.rev-sales-filter-clear {
height:34px;
padding:0 7px;
border:0;
background:transparent;
color:var(--charcoal-45);
font:inherit;
font-size:9.5px;
cursor:pointer;
}
.rev-sales-filter-clear:hover {
color:var(--gold-deep);
}
/* Clientes — busca ocupa corretamente a largura disponível */
.clientes-search-wrap {
position:relative;
width:min(430px, 100%);
margin-bottom:14px;
}
.clientes-search-icon {
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
z-index:1;
color:var(--charcoal-35);
font-size:16px;
pointer-events:none;
}
#clientes-busca.clientes-search-input {
display:block;
width:100%;
max-width:none;
box-sizing:border-box;
margin:0;
padding-left:40px;
}
/* Clientes — ações sempre alinhadas e sem quebrar texto */
.cliente-actions-wrap {
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}
.cliente-action-btn {
min-height:36px;
margin:0 !important;
padding:0 12px;
white-space:nowrap !important;
word-break:keep-all;
line-height:1 !important;
}
.cliente-receber-btn {
border-color:rgba(184,132,18,.30);
background:#fff8e8;
color:var(--gold-deep);
}
.cliente-receber-btn:disabled {
opacity:.42;
cursor:not-allowed;
}
/* O td da ação não deve tentar transformar cada botão em uma linha. */
#clientes-table .cliente-row-actions {
overflow:visible;
}
@media (max-width:760px) {
.rev-sales-list-head {
align-items:stretch;
flex-direction:column;
gap:9px;
}
.rev-sales-filter-bar {
grid-template-columns:minmax(0,1fr) 96px auto;
width:100%;
gap:6px;
}
.rev-sales-search input {
min-width:0;
font-size:10px;
}
#rev-vendas-filtro {
min-width:0;
font-size:10px;
}
.clientes-search-wrap {
width:100%;
}
#clientes-busca.clientes-search-input {
height:52px;
padding-left:42px;
padding-right:14px;
border-radius:16px;
}
/* No card expandido, os dois botões ficam na mesma linha. */
#clientes-table tr.mobile-accordion-row.is-open .cliente-row-actions {
display:block !important;
padding-top:10px !important;
padding-bottom:14px !important;
}
#clientes-table tr.mobile-accordion-row.is-open .cliente-row-actions::before {
display:none !important;
}
#clientes-table .cliente-actions-wrap {
display:grid;
grid-template-columns:max-content minmax(0,1fr);
gap:8px;
width:100%;
}
#clientes-table .cliente-action-btn {
width:100%;
min-width:0;
padding:0 10px;
font-size:10px;
border-radius:11px;
}
#clientes-table .cliente-actions-wrap .cliente-action-btn:first-child {
width:auto;
min-width:104px;
}
}
@media (max-width:390px) {
.rev-sales-filter-bar {
grid-template-columns:minmax(0,1fr) 90px;
}
.rev-sales-filter-clear {
grid-column:2;
justify-self:end;
height:24px;
margin-top:-3px;
}
#clientes-table .cliente-actions-wrap {
grid-template-columns:1fr 1fr;
}
#clientes-table .cliente-actions-wrap .cliente-action-btn:first-child {
width:100%;
min-width:0;
}
#clientes-table .cliente-action-btn {
font-size:9.5px;
padding:0 7px;
}
}
/* RELATÓRIOS GERENCIAIS */
.reports-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.reports-filter-bar {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:17px;
padding:10px 12px;
border:1px solid rgba(199,154,50,.14);
border-radius:13px;
background:rgba(248,244,235,.52);
}
.reports-filter-title {
color:var(--charcoal-55);
font-size:10px;
font-weight:700;
}
.reports-filter-separator {
color:var(--charcoal-40);
font-size:10px;
}
.reports-filter-bar input[type="date"] {
width:145px;
height:37px;
padding:0 9px;
border:1px solid rgba(54,46,36,.12);
border-radius:9px;
background:#fff;
color:var(--charcoal);
font:inherit;
font-size:10.5px;
}
.reports-quick-periods {
display:flex;
align-items:center;
gap:5px;
margin-left:auto;
}
.reports-quick-btn {
height:32px;
padding:0 10px;
border:1px solid rgba(54,46,36,.11);
border-radius:999px;
background:#fff;
color:var(--charcoal-50);
font:inherit;
font-size:9.5px;
cursor:pointer;
}
.reports-quick-btn.active,
.reports-quick-btn:hover {
border-color:rgba(184,132,18,.30);
background:#fff8e8;
color:var(--gold-deep);
}
.reports-kpis {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:16px;
}
.reports-kpi {
min-height:112px;
display:flex;
flex-direction:column;
justify-content:center;
padding:17px 18px;
border:1px solid rgba(199,154,50,.16);
border-radius:15px;
background:#fff;
box-shadow:0 8px 24px rgba(83,62,22,.04);
}
.reports-kpi strong {
color:var(--gold-deep);
font-size:24px;
line-height:1.1;
}
.reports-kpi span {
margin-top:8px;
color:var(--charcoal);
font-size:10px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.055em;
}
.reports-kpi small {
margin-top:5px;
color:var(--charcoal-45);
font-size:9.8px;
}
.reports-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:13px;
}
.reports-card {
min-width:0;
padding:17px;
border:1px solid rgba(199,154,50,.15);
border-radius:15px;
background:#fff;
box-shadow:0 7px 22px rgba(83,62,22,.035);
}
.reports-card-wide {
grid-column:1 / -1;
}
.reports-card-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}
.reports-card-head strong,
.reports-card-head span {
display:block;
}
.reports-card-head strong {
color:var(--charcoal);
font-size:13px;
}
.reports-card-head span {
margin-top:3px;
color:var(--charcoal-45);
font-size:9.8px;
}
.reports-trend {
display:flex;
flex-direction:column;
gap:8px;
max-height:330px;
overflow:auto;
padding-right:4px;
}
.reports-trend-row {
display:grid;
grid-template-columns:46px minmax(0,1fr) 88px;
align-items:center;
gap:9px;
}
.reports-trend-date {
color:var(--charcoal-45);
font-size:9.5px;
}
.reports-trend-track,
.reports-ranking-track,
.reports-channel-track {
overflow:hidden;
height:7px;
border-radius:999px;
background:#f1ede5;
}
.reports-trend-bar,
.reports-ranking-fill,
.reports-channel-fill {
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#d8ad48,#b78312);
}
.reports-trend-value {
color:var(--charcoal);
font-size:10px;
text-align:right;
}
.reports-channels {
display:flex;
flex-direction:column;
gap:16px;
}
.reports-channel-top {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:7px;
}
.reports-channel-top strong {
font-size:11px;
}
.reports-channel-top span {
color:var(--gold-deep);
font-size:11px;
font-weight:700;
}
.reports-channel small {
display:block;
margin-top:6px;
color:var(--charcoal-45);
font-size:9.5px;
}
.reports-ranking {
display:flex;
flex-direction:column;
gap:8px;
}
.reports-ranking-row {
display:grid;
grid-template-columns:25px minmax(0,1fr);
gap:9px;
align-items:start;
}
.reports-ranking-position {
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--cream-deep);
color:var(--gold-deep);
font-size:9px;
font-weight:800;
}
.reports-ranking-body {
min-width:0;
}
.reports-ranking-top {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:8px;
}
.reports-ranking-top strong {
min-width:0;
overflow:hidden;
color:var(--charcoal);
font-size:10.5px;
text-overflow:ellipsis;
white-space:nowrap;
}
.reports-ranking-top span {
flex:0 0 auto;
color:var(--gold-deep);
font-size:10px;
font-weight:700;
}
.reports-ranking-body small {
display:block;
margin:2px 0 6px;
color:var(--charcoal-40);
font-size:8.8px;
}
.reports-ranking-track {
height:5px;
}
.reports-payment-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.reports-payment-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border:1px solid rgba(54,46,36,.07);
border-radius:11px;
background:#fffdf9;
}
.reports-payment-info strong,
.reports-payment-info span,
.reports-payment-side strong,
.reports-payment-side span {
display:block;
}
.reports-payment-info strong {
color:var(--charcoal);
font-size:10.5px;
}
.reports-payment-info span {
margin-top:2px;
color:var(--charcoal-40);
font-size:8.8px;
}
.reports-payment-side {
text-align:right;
}
.reports-payment-side strong {
color:var(--gold-deep);
font-size:10.5px;
}
.reports-payment-side span {
margin-top:2px;
color:var(--charcoal-40);
font-size:8.8px;
}
.reports-empty {
padding:22px;
color:var(--charcoal-45);
text-align:center;
font-size:10.5px;
}
.reports-updated {
margin-top:12px;
}
@media (max-width:900px) {
.reports-kpis {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.reports-grid {
grid-template-columns:1fr;
}
.reports-card-wide {
grid-column:auto;
}
.reports-payment-list {
grid-template-columns:1fr;
}
.reports-quick-periods {
margin-left:0;
}
}
@media (max-width:620px) {
.reports-filter-bar {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
}
.reports-filter-bar input[type="date"] {
width:100%;
min-width:0;
}
.reports-quick-periods {
grid-column:1 / -1;
width:100%;
}
.reports-quick-btn {
flex:1;
}
#relatorios-aplicar {
grid-column:1 / -1;
width:100%;
}
.reports-kpis {
gap:9px;
}
.reports-kpi {
min-height:100px;
padding:14px;
}
.reports-kpi strong {
font-size:20px;
}
.reports-trend-row {
grid-template-columns:42px minmax(0,1fr) 78px;
}
}
/* METAS — Admin */
.rd-goal-card{margin:0 0 20px;padding:16px 18px;border:1px solid rgba(199,154,50,.18);border-radius:15px;background:#fff;box-shadow:0 7px 22px rgba(83,62,22,.035)}
.rd-goal-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rd-goal-eyebrow,.rd-goal-head strong{display:block}
.rd-goal-eyebrow{color:var(--charcoal-45);font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.rd-goal-head>div>strong{margin-top:3px;color:var(--charcoal);font-size:12px;text-transform:capitalize}
.rd-goal-editor{display:grid;grid-template-columns:auto 132px auto;align-items:center;gap:7px}
.currency-prefix{color:var(--charcoal-50);font-size:10.5px}
.rd-goal-editor input{width:100%;height:37px;box-sizing:border-box;padding:0 9px;border:1px solid rgba(54,46,36,.12);border-radius:9px;background:#fffdf9;color:var(--charcoal);font:inherit;font-size:11px}
.rd-goal-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:15px}
.rd-goal-summary>div{padding:9px 10px;border-radius:10px;background:#faf7f0}
.rd-goal-summary span,.rd-goal-summary strong{display:block}
.rd-goal-summary span{color:var(--charcoal-45);font-size:8.8px}
.rd-goal-summary strong{margin-top:3px;color:var(--charcoal);font-size:11px}
.rd-goal-track,.rev-goal-track{overflow:hidden;height:8px;margin-top:13px;border-radius:999px;background:#f0ece3}
.rd-goal-fill,.rev-goal-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d8ad48,#b78312);transition:width .35s ease}
.rd-goal-fill.complete,.rev-goal-fill.complete{background:#789b60}
.rd-goal-message{margin:8px 0 0}
/* METAS — Revendedora */
.rev-goal-strip{margin:-3px 0 18px;padding:14px 17px;border:1px solid rgba(199,154,50,.18);border-radius:14px;background:linear-gradient(135deg,#fffdf8,#faf4e7)}
.rev-goal-strip[hidden]{display:none!important}
.rev-goal-top,.rev-goal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-goal-top span,.rev-goal-top strong{display:block}
.rev-goal-top span{color:var(--charcoal-45);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rev-goal-top strong{margin-top:3px;color:var(--gold-deep);font-size:17px}
.rev-goal-percent{color:var(--gold-deep);font-size:18px;font-weight:800}
.rev-goal-footer{margin-top:8px;color:var(--charcoal-50);font-size:9.5px}
@media(max-width:720px){.rd-goal-head{align-items:stretch;flex-direction:column}.rd-goal-editor{grid-template-columns:auto minmax(0,1fr) auto}.rd-goal-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.rev-goal-strip{margin-top:-5px;padding:13px 14px}.rev-goal-top strong{font-size:15px}.rev-goal-percent{font-size:16px}}
/* SELL-THROUGH */
.mostruario-sellthrough{margin:11px 0 4px;padding:12px 13px;border:1px solid rgba(199,154,50,.15);border-radius:12px;background:#fffaf0}
.mostruario-sellthrough-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mostruario-sellthrough-label,.mostruario-sellthrough-top small{display:block}
.mostruario-sellthrough-label{color:var(--charcoal);font-size:10px;font-weight:800}
.mostruario-sellthrough-top small{margin-top:2px;color:var(--charcoal-45);font-size:8.8px}
.mostruario-sellthrough-percent{color:var(--gold-deep);font-size:18px}
.mostruario-sellthrough-track,.reports-sellthrough-progress{overflow:hidden;height:7px;margin-top:9px;border-radius:999px;background:#ece8df}
.mostruario-sellthrough-fill,.reports-sellthrough-progress-fill{height:100%;border-radius:inherit}
.mostruario-sellthrough-fill.low,.reports-sellthrough-progress-fill.low{background:#c78a6b}
.mostruario-sellthrough-fill.medium,.reports-sellthrough-progress-fill.medium{background:#c79a32}
.mostruario-sellthrough-fill.high,.reports-sellthrough-progress-fill.high{background:#789b60}
.mostruario-sellthrough-meta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:var(--charcoal-45);font-size:8.8px}
.reports-sellthrough-total{color:var(--gold-deep);font-size:22px}
.reports-sellthrough-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.reports-sellthrough-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(54,46,36,.07)}
.reports-sellthrough-info{min-width:0}
.reports-sellthrough-info strong,.reports-sellthrough-info span{display:block}
.reports-sellthrough-info strong{overflow:hidden;color:var(--charcoal);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.reports-sellthrough-info span{margin-top:2px;color:var(--charcoal-45);font-size:8.8px}
.reports-sellthrough-progress{height:5px;margin-top:6px}
.reports-sellthrough-side{text-align:right}
.reports-sellthrough-side strong,.reports-sellthrough-side span{display:block}
.reports-sellthrough-side strong{color:var(--gold-deep);font-size:12px}
.reports-sellthrough-side span{margin-top:2px;color:var(--charcoal-40);font-size:8.5px}
@media(max-width:720px){.reports-sellthrough-list{grid-template-columns:1fr}.mostruario-sellthrough-meta{flex-direction:column;gap:3px}}
/* LEITOR DE CÓDIGO PELA CÂMERA */
.scanner-input-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 8px;
align-items: stretch;
}
.scanner-input-row > input {
min-width: 0;
}
.scanner-open-btn {
min-width: 112px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 12px;
border: 1px solid rgba(184,132,18,.26);
border-radius: 10px;
background: #fff8e8;
color: var(--gold-deep);
font: inherit;
font-size: 10px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.scanner-open-btn svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.scanner-modal {
width: min(500px, calc(100vw - 28px));
max-width: 500px;
padding: 25px 20px 20px;
text-align: left;
}
.scanner-modal-head {
padding-right: 25px;
margin-bottom: 14px;
}
.scanner-modal-head h2 {
margin: 4px 0 5px;
color: var(--charcoal);
font-size: 19px;
}
.scanner-modal-head .hint {
margin: 0;
line-height: 1.45;
}
.scanner-camera-shell {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
border-radius: 15px;
background: #1d1d1b;
}
.scanner-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.scanner-target {
position: absolute;
left: 12%;
right: 12%;
top: 35%;
height: 30%;
border: 2px solid rgba(255,255,255,.9);
border-radius: 12px;
box-shadow: 0 0 0 999px rgba(0,0,0,.18);
pointer-events: none;
}
.scanner-target::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: 50%;
height: 2px;
transform: translateY(-50%);
background: rgba(226,185,77,.95);
box-shadow: 0 0 10px rgba(226,185,77,.6);
}
.scanner-camera-status {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
padding: 7px 10px;
border-radius: 9px;
background: rgba(20,20,18,.72);
color: #fff;
font-size: 10px;
text-align: center;
backdrop-filter: blur(5px);
}
.scanner-live-count {
margin: 9px 0 0;
color: var(--gold-deep);
font-size: 10px;
font-weight: 700;
text-align: center;
}
.scanner-manual-fallback {
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid rgba(54,46,36,.08);
}
.scanner-manual-fallback > span {
display: block;
margin-bottom: 7px;
color: var(--charcoal-45);
font-size: 9.5px;
}
.scanner-manual-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 8px;
}
.scanner-manual-row input {
width: 100%;
min-width: 0;
height: 40px;
box-sizing: border-box;
padding: 0 11px;
border: 1px solid rgba(54,46,36,.13);
border-radius: 9px;
background: #fff;
font: inherit;
font-size: 11px;
}
.revendedora-page .scanner-input-row #v-busca-produto {
min-height: 52px;
}
.revendedora-page .scanner-open-btn {
height: 52px;
min-width: 52px;
border-radius: 12px;
}
@media (max-width: 520px) {
.scanner-open-btn {
min-width: 50px;
padding: 0 11px;
}
.scanner-open-btn span {
display: none;
}
.scanner-open-btn svg {
width: 20px;
height: 20px;
}
.scanner-modal {
width: calc(100vw - 20px);
padding: 22px 13px 14px;
border-radius: 18px;
}
.scanner-camera-shell {
aspect-ratio: 3/4;
max-height: 62vh;
}
.scanner-target {
left: 8%;
right: 8%;
top: 39%;
height: 22%;
}
.scanner-manual-row {
grid-template-columns: minmax(0,1fr) auto;
}
}
/* AJUSTE LEITOR DE CÓDIGO — FECHAMENTO + MOBILE */
body.scanner-modal-open {
overflow: hidden;
}
#rev-scanner-modal.scanner-modal-overlay {
z-index: 99999;
padding: 18px;
box-sizing: border-box;
align-items: center;
justify-content: center;
overflow-y: auto;
}
#rev-scanner-modal[aria-hidden="true"] {
display: none !important;
pointer-events: none !important;
}
#rev-scanner-modal.show {
display: flex !important;
pointer-events: auto !important;
}
#rev-scanner-modal .scanner-modal {
position: relative;
margin: auto;
max-height: calc(100dvh - 36px);
overflow-y: auto;
overscroll-behavior: contain;
}
#rev-scanner-close {
z-index: 20;
pointer-events: auto !important;
touch-action: manipulation;
cursor: pointer;
}
@media (max-width: 600px) {
#rev-scanner-modal.scanner-modal-overlay {
padding: 0;
align-items: flex-end;
overflow: hidden;
}
#rev-scanner-modal .scanner-modal {
width: 100%;
max-width: none;
height: auto;
max-height: 92dvh;
margin: 0;
padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
border-radius: 22px 22px 0 0;
overflow-y: auto;
box-sizing: border-box;
}
#rev-scanner-modal .scanner-modal-head {
padding-right: 46px;
margin-bottom: 11px;
}
#rev-scanner-modal .scanner-modal-head .eyebrow {
margin-bottom: 7px;
font-size: 10px;
letter-spacing: .19em;
}
#rev-scanner-modal .scanner-modal-head h2 {
margin: 0 0 5px;
font-size: 18px;
line-height: 1.18;
}
#rev-scanner-modal .scanner-modal-head .hint {
font-size: 11px;
line-height: 1.4;
}
#rev-scanner-close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
min-width: 40px;
}
#rev-scanner-modal .scanner-camera-shell {
width: 100%;
height: min(45dvh, 360px);
min-height: 260px;
aspect-ratio: auto;
border-radius: 15px;
}
#rev-scanner-modal .scanner-target {
left: 8%;
right: 8%;
top: 36%;
height: 27%;
}
#rev-scanner-modal .scanner-camera-status {
left: 10px;
right: 10px;
bottom: 9px;
padding: 7px 8px;
font-size: 9px;
line-height: 1.35;
}
#rev-scanner-modal .scanner-manual-fallback {
margin-top: 10px;
padding-top: 10px;
}
#rev-scanner-modal .scanner-manual-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
#rev-scanner-modal .scanner-manual-row input {
min-height: 44px;
height: 44px;
font-size: 16px;
}
#rev-scanner-modal .scanner-manual-row .btn-sm {
min-height: 44px;
height: 44px;
padding: 0 13px;
white-space: nowrap;
}
}
@media (max-width: 380px), (max-height: 680px) {
#rev-scanner-modal .scanner-modal {
max-height: 96dvh;
padding-top: 14px;
}
#rev-scanner-modal .scanner-modal-head .hint {
display: none;
}
#rev-scanner-modal .scanner-camera-shell {
height: min(42dvh, 290px);
min-height: 220px;
}
}
/* ADMIN / REVENDEDORA — REORGANIZAÇÃO DO DETALHE */
.rd-fixed-header {
position: sticky;
top: 0;
z-index: 30;
margin-bottom: 8px;
padding: 14px 0;
background: linear-gradient(180deg, var(--cream) 72%, rgba(250,247,239,0));
}
.rd-fixed-kicker {
display: block;
margin-bottom: 3px;
color: var(--gold-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.rd-fixed-name h1 {
margin: 0;
}
.rd-fixed-actions {
display: flex;
gap: 8px;
}
.rd-detail-tabs {
margin-top: 0;
}
.rd-subtabs {
position: sticky;
top: 69px;
z-index: 25;
margin-bottom: 18px;
background: var(--cream);
}
.rd-subtabs .subtab-btn {
min-width: 104px;
}
.rd-catalog-actions,
.rd-section-intro,
.rd-panel-heading,
.rd-showcases-heading,
.rd-info-summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.rd-catalog-actions {
align-items: center;
margin-bottom: 14px;
}
.rd-new-showcase-btn {
min-height: 40px;
padding: 0 18px;
}
.rd-new-showcase-panel,
.rd-catalog-link-card,
.rd-access-card,
#rd-editar-form-wrap {
padding: 20px;
margin-bottom: 18px;
}
.rd-showcase-form-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.rd-showcases-heading {
margin: 20px 0 10px;
}
.rd-showcase-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-showcase-empty {
padding: 28px 20px;
border: 1px solid rgba(199,154,50,.16);
border-radius: 14px;
background: #fff;
text-align: center;
}
.rd-showcase-empty strong,
.rd-showcase-empty span {
display: block;
}
.rd-showcase-empty span {
margin-top: 5px;
color: var(--charcoal-45);
font-size: 10px;
}
.rd-showcase-card {
overflow: hidden;
border: 1px solid rgba(199,154,50,.18);
border-radius: 14px;
background: #fff;
box-shadow: 0 5px 18px rgba(76,57,24,.035);
}
.rd-showcase-card.status-ativo {
border-color: rgba(120,155,96,.28);
}
.rd-showcase-card.status-em_montagem {
border-color: rgba(199,154,50,.28);
}
.rd-showcase-summary {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 15px 17px;
border: 0;
background: #fff;
color: var(--charcoal);
text-align: left;
cursor: pointer;
}
.rd-showcase-summary:hover {
background: rgba(249,246,238,.65);
}
.rd-showcase-summary-main {
min-width: 0;
}
.rd-showcase-title {
display: block;
font-size: 13px;
}
.rd-showcase-summary-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
margin-top: 5px;
color: var(--charcoal-45);
font-size: 9.5px;
}
.rd-showcase-summary-side {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
}
.rd-showcase-status {
padding: 5px 9px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.rd-showcase-status.active {
background: #eaf4e5;
color: #557942;
}
.rd-showcase-status.draft {
background: #fff2d5;
color: #936a0e;
}
.rd-showcase-status.closed {
background: #f3e7e5;
color: #9b5149;
}
.rd-showcase-summary-sellthrough {
color: var(--gold-deep);
font-size: 12px;
}
.rd-showcase-chevron {
width: 20px;
color: var(--gold-deep);
text-align: center;
font-size: 14px;
}
.rd-showcase-details {
border-top: 1px solid rgba(54,46,36,.07);
background: #fffdf9;
}
.rd-showcase-overview {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
padding: 12px 15px;
border-bottom: 1px solid rgba(54,46,36,.06);
}
.rd-showcase-overview > div {
padding: 9px 10px;
border-radius: 10px;
background: #faf7f0;
}
.rd-showcase-overview span,
.rd-showcase-overview strong {
display: block;
}
.rd-showcase-overview span {
color: var(--charcoal-45);
font-size: 8.5px;
}
.rd-showcase-overview strong {
margin-top: 3px;
color: var(--charcoal);
font-size: 10.5px;
}
.rd-showcase-sellthrough {
margin: 12px 15px;
}
.rd-showcase-return {
margin: 0 15px 12px;
}
.rd-showcase-items {
margin: 0 15px 14px;
overflow: hidden;
border: 1px solid rgba(54,46,36,.07);
border-radius: 12px;
background: #fff;
}
.rd-showcase-items-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: #f8f4eb;
}
.rd-showcase-items-head strong {
font-size: 10px;
}
.rd-showcase-items-head span {
color: var(--charcoal-45);
font-size: 9px;
}
.rd-showcase-item-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-top: 1px solid rgba(54,46,36,.055);
}
.rd-showcase-item-info {
min-width: 0;
}
.rd-showcase-item-info strong,
.rd-showcase-item-info span {
display: block;
}
.rd-showcase-item-info strong {
font-size: 10.5px;
line-height: 1.35;
}
.rd-showcase-item-info span {
margin-top: 2px;
color: var(--charcoal-40);
font-size: 8.5px;
}
.rd-showcase-item-quantities {
display: flex;
align-items: center;
gap: 6px;
}
.rd-showcase-item-quantities span {
padding: 5px 8px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 700;
white-space: nowrap;
}
.rd-showcase-item-quantities .available {
background: #eaf4e5;
color: #52783c;
}
.rd-showcase-item-quantities .sold {
background: #f8e9e6;
color: #9c4b43;
}
.rd-showcase-items-empty {
padding: 18px;
color: var(--charcoal-45);
text-align: center;
font-size: 9.5px;
}
.rd-showcase-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 0 15px 15px;
flex-wrap: wrap;
}
.rd-section-intro {
align-items: center;
margin-bottom: 14px;
}
.rd-info-summary {
margin-bottom: 14px;
}
.rd-performance-filter {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
padding: 10px 12px;
border: 1px solid rgba(199,154,50,.14);
border-radius: 13px;
background: rgba(248,244,235,.52);
}
.rd-performance-filter-title {
color: var(--charcoal-55);
font-size: 9.5px;
font-weight: 700;
}
.rd-performance-filter input[type="date"] {
width: 150px;
height: 36px;
padding: 0 9px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 9px;
background: #fff;
font: inherit;
font-size: 10px;
}
.rd-filter-clear {
border: 0;
background: transparent;
color: var(--charcoal-45);
}
.rd-edit-actions {
display: flex;
gap: 8px;
align-items: end;
}
@media (max-width: 760px) {
.rd-fixed-header {
top: 0;
}
.rd-subtabs {
top: 66px;
overflow-x: auto;
scrollbar-width: none;
}
.rd-subtabs::-webkit-scrollbar {
display: none;
}
.rd-subtabs .subtab-btn {
flex: 0 0 auto;
min-width: 92px;
}
.rd-catalog-actions,
.rd-section-intro,
.rd-panel-heading {
align-items: stretch;
flex-direction: column;
}
.rd-catalog-actions .hint {
display: none;
}
.rd-new-showcase-btn {
width: 100%;
}
.rd-showcase-summary {
align-items: flex-start;
padding: 14px;
}
.rd-showcase-summary-meta {
display: grid;
gap: 3px;
}
.rd-showcase-summary-side {
display: grid;
justify-items: end;
gap: 5px;
}
.rd-showcase-summary-sellthrough {
display: none;
}
.rd-showcase-overview {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.rd-showcase-item-row {
align-items: flex-start;
grid-template-columns: minmax(0,1fr);
}
.rd-showcase-item-quantities {
justify-content: flex-start;
}
.rd-showcase-return {
display: grid;
gap: 10px;
}
.rd-performance-filter {
display: grid;
grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr);
}
.rd-performance-filter input[type="date"] {
width: 100%;
min-width: 0;
}
.rd-performance-filter .btn-sm {
grid-column: span 2;
}
}
/* ADMIN — INFORMAÇÕES COMPLETAS DA REVENDEDORA */
.rd-profile-details {
display: grid;
gap: 14px;
margin-bottom: 18px;
}
.rd-profile-section {
overflow: hidden;
border: 1px solid rgba(199,154,50,.16);
border-radius: 15px;
background: #fff;
box-shadow: 0 6px 20px rgba(83,62,22,.03);
}
.rd-profile-section-head {
padding: 12px 15px;
border-bottom: 1px solid rgba(54,46,36,.07);
background: #faf7f0;
}
.rd-profile-section-head strong {
color: var(--gold-deep);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
}
.rd-profile-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
}
.rd-profile-field {
min-width: 0;
min-height: 78px;
padding: 13px 15px;
border-right: 1px solid rgba(54,46,36,.055);
border-bottom: 1px solid rgba(54,46,36,.055);
box-sizing: border-box;
}
.rd-profile-field:nth-child(4n) {
border-right: 0;
}
.rd-profile-field.full {
grid-column: 1 / -1;
border-right: 0;
}
.rd-profile-field-label,
.rd-profile-field-value {
display: block;
}
.rd-profile-field-label {
margin-bottom: 6px;
color: var(--charcoal-40);
font-size: 8.5px;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.rd-profile-field-value {
overflow-wrap: anywhere;
color: var(--charcoal);
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
}
.rd-profile-field.multiline {
min-height: auto;
}
.rd-profile-field.multiline .rd-profile-field-value {
max-width: 900px;
font-weight: 500;
white-space: pre-line;
}
@media (max-width: 980px) {
.rd-profile-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.rd-profile-field:nth-child(4n) {
border-right: 1px solid rgba(54,46,36,.055);
}
.rd-profile-field:nth-child(2n) {
border-right: 0;
}
.rd-profile-field.full {
border-right: 0;
}
}
@media (max-width: 580px) {
.rd-profile-grid {
grid-template-columns: 1fr;
}
.rd-profile-field,
.rd-profile-field:nth-child(2n),
.rd-profile-field:nth-child(4n) {
min-height: 68px;
border-right: 0;
}
.rd-profile-field.full {
grid-column: auto;
}
}
/* ALERTAS V2 — notificações operacionais */
.alerts-head-actions {
display: flex;
align-items: center;
gap: 8px;
}
.alerts-notification-btn {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.alerts-notification-dot {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: #c8c2b8;
box-shadow: 0 0 0 3px rgba(130,120,106,.08);
}
.alerts-notification-btn.active {
border-color: rgba(93,132,71,.28);
background: #f5faF2;
color: #557942;
}
.alerts-notification-btn.active .alerts-notification-dot {
background: #6f9957;
box-shadow: 0 0 0 3px rgba(111,153,87,.12);
}
.alerts-notification-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin: -6px 0 15px;
padding: 9px 11px;
border: 1px solid rgba(199,154,50,.13);
border-radius: 10px;
background: #fffaf0;
color: var(--charcoal-50);
font-size: 9.8px;
line-height: 1.4;
}
.alerts-notification-note[hidden] {
display: none !important;
}
.alerts-notification-note-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
background: #efe2c1;
color: var(--gold-deep);
font-size: 9px;
font-weight: 800;
}
.alert-card-next-action {
margin: 7px 0 0;
padding: 7px 9px;
border-left: 2px solid rgba(184,132,18,.42);
border-radius: 0 7px 7px 0;
background: rgba(250,247,238,.72);
color: var(--charcoal);
font-size: 9.7px;
font-weight: 600;
line-height: 1.4;
}
.alert-card.critico .alert-card-next-action {
border-left-color: rgba(164,75,66,.55);
background: rgba(253,243,241,.76);
}
.alert-card.info .alert-card-next-action {
border-left-color: rgba(85,121,66,.36);
}
.alert-card-actions .alert-view-btn {
min-width: 76px;
}
@media (max-width: 700px) {
.alerts-head-actions {
width: 100%;
}
.alerts-head-actions .btn-sm {
flex: 1;
min-width: 0;
}
.alerts-notification-btn {
justify-content: center;
}
.alert-card-actions .alert-view-btn {
min-width: 92px;
}
}
/* ESTOQUE MÍNIMO / REPOSIÇÃO */
.estoque-reposicao-open{display:inline-flex;align-items:center;gap:7px}.estoque-reposicao-badge{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:#f3d9d5;color:#9d443c;font-size:8.5px;font-weight:800}.estoque-reposicao-badge[hidden],.estoque-reposicao-panel[hidden]{display:none!important}
.estoque-reposicao-panel{margin:0 0 20px;padding:18px;border:1px solid rgba(199,154,50,.18);border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(83,62,22,.04)}
.estoque-reposicao-head,.estoque-reposicao-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.estoque-reposicao-head{margin-bottom:15px}.estoque-reposicao-head-actions{display:flex;gap:7px}.estoque-reposicao-toolbar{align-items:center;margin-bottom:11px}.estoque-reposicao-toolbar .search-input{width:min(430px,100%);margin:0}.estoque-reposicao-check{display:flex;align-items:center;gap:7px;color:var(--charcoal-50);font-size:9.5px;white-space:nowrap}
.estoque-reposicao-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}.estoque-reposicao-kpi{min-height:94px;display:flex;flex-direction:column;justify-content:center;padding:13px 14px;border:1px solid rgba(54,46,36,.07);border-radius:12px;background:#fdfbf7}.estoque-reposicao-kpi strong,.estoque-reposicao-kpi span,.estoque-reposicao-kpi small{display:block}.estoque-reposicao-kpi strong{color:var(--gold-deep);font-size:20px}.estoque-reposicao-kpi span{margin-top:7px;color:var(--charcoal);font-size:9px;font-weight:800;text-transform:uppercase}.estoque-reposicao-kpi small{margin-top:4px;color:var(--charcoal-45);font-size:8.7px}.estoque-reposicao-kpi.critical{background:#fff8f7}.estoque-reposicao-kpi.critical strong{color:#a44b42}
.estoque-reposicao-list{overflow:hidden;border:1px solid rgba(54,46,36,.07);border-radius:13px}.estoque-reposicao-row{display:grid;grid-template-columns:minmax(230px,1.4fr) minmax(300px,1fr) auto;align-items:center;gap:16px;padding:12px 14px;border-bottom:1px solid rgba(54,46,36,.06);background:#fff}.estoque-reposicao-row:last-child{border-bottom:0}.estoque-reposicao-row.critical{background:#fffafa}
.estoque-reposicao-product{min-width:0}.estoque-reposicao-product strong,.estoque-reposicao-product span{display:block}.estoque-reposicao-product strong{overflow:hidden;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.estoque-reposicao-product span{margin-top:3px;color:var(--charcoal-40);font-size:8.7px}
.estoque-reposicao-metrics{display:grid;grid-template-columns:repeat(4,minmax(56px,1fr));gap:5px}.estoque-reposicao-metrics>div{padding:7px 8px;border-radius:8px;background:#faf7f0;text-align:center}.estoque-reposicao-metrics span,.estoque-reposicao-metrics strong{display:block}.estoque-reposicao-metrics span{color:var(--charcoal-40);font-size:7.8px;text-transform:uppercase}.estoque-reposicao-metrics strong{margin-top:2px;font-size:10.5px}
.estoque-reposicao-side{display:flex;align-items:center;justify-content:flex-end;gap:10px}.estoque-reposicao-status{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:800;white-space:nowrap}.estoque-reposicao-status.critical{background:#f5dfdc;color:#9c453d}.estoque-reposicao-status.warning{background:#fff0ca;color:#8d6710}.estoque-reposicao-actions{display:flex;gap:6px}.estoque-reposicao-actions .btn-sm{min-height:33px;padding:0 10px;white-space:nowrap}.estoque-reposicao-empty{padding:28px;text-align:center}.estoque-reposicao-empty strong,.estoque-reposicao-empty span{display:block}.estoque-reposicao-empty span{margin-top:5px;color:var(--charcoal-45);font-size:9.5px}.estoque-reposicao-footnote{margin:9px 0 0}
@media(max-width:1000px){.estoque-reposicao-row{grid-template-columns:minmax(0,1fr) auto}.estoque-reposicao-metrics{grid-column:1/-1;grid-row:2}}
@media(max-width:700px){.estoque-reposicao-head,.estoque-reposicao-toolbar{align-items:stretch;flex-direction:column}.estoque-reposicao-head-actions{width:100%}.estoque-reposicao-head-actions .btn-sm{flex:1}.estoque-reposicao-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.estoque-reposicao-toolbar .search-input{width:100%}.estoque-reposicao-row{grid-template-columns:1fr;gap:10px}.estoque-reposicao-metrics{grid-column:auto;grid-row:auto}.estoque-reposicao-side{justify-content:space-between}}
@media(max-width:480px){.estoque-reposicao-panel{padding:13px}.estoque-reposicao-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.estoque-reposicao-side{align-items:stretch;flex-direction:column}.estoque-reposicao-actions{display:grid;grid-template-columns:1fr 1fr}.estoque-reposicao-actions .btn-sm{width:100%}}
/* EXPORTAÇÃO DE RELATÓRIOS */
.reports-export-actions{display:flex;align-items:center;gap:8px}.reports-export-actions .btn-sm{white-space:nowrap}
@media(max-width:700px){.reports-head{align-items:stretch;flex-direction:column}.reports-export-actions{width:100%}.reports-export-actions .btn-sm{flex:1}}
/* PERMISSÕES AVANÇADAS */
.tab-btn.permission-hidden,
.tab-btn[hidden] {
display: none !important;
}
.admin-users-card {
max-width: 980px;
margin-top: 20px;
padding: 22px;
border: 1px solid rgba(199,154,50,.16);
border-radius: 16px;
background: #fff;
box-shadow: 0 7px 22px rgba(83,62,22,.035);
}
.admin-users-card[hidden] { display:none!important; }
.admin-users-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:15px;
}
.admin-permission-legend {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-bottom:15px;
}
.admin-permission-legend > div {
min-height:70px;
padding:10px 12px;
border-radius:11px;
background:#faf7f0;
}
.admin-permission-legend strong,
.admin-permission-legend span {
display:block;
}
.admin-permission-legend strong {
color:var(--gold-deep);
font-size:9.5px;
}
.admin-permission-legend span {
margin-top:4px;
color:var(--charcoal-45);
font-size:8.7px;
line-height:1.4;
}
.admin-users-list {
overflow:hidden;
border:1px solid rgba(54,46,36,.07);
border-radius:12px;
}
.admin-user-row {
display:grid;
grid-template-columns:minmax(190px,1fr) 190px auto auto;
align-items:center;
gap:12px;
padding:11px 12px;
border-bottom:1px solid rgba(54,46,36,.06);
}
.admin-user-row:last-child { border-bottom:0; }
.admin-user-row.inactive { opacity:.62; background:#faf9f7; }
.admin-user-info {
min-width:0;
}
.admin-user-info strong,
.admin-user-info span {
display:block;
}
.admin-user-info strong {
overflow:hidden;
font-size:10.5px;
text-overflow:ellipsis;
white-space:nowrap;
}
.admin-user-info span {
margin-top:3px;
color:var(--charcoal-40);
font-size:8.7px;
}
.admin-user-profile select {
width:100%;
height:36px;
padding:0 9px;
border:1px solid rgba(54,46,36,.12);
border-radius:9px;
background:#fff;
font:inherit;
font-size:9.5px;
}
.admin-user-status {
padding:5px 8px;
border-radius:999px;
font-size:8px;
font-weight:800;
white-space:nowrap;
}
.admin-user-status.active { background:#eaf4e5;color:#557942; }
.admin-user-status.inactive { background:#f3e7e5;color:#985149; }
.admin-user-actions {
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
}
.admin-user-actions .btn-sm {
min-height:33px;
padding:0 9px;
white-space:nowrap;
}
.admin-user-current {
color:var(--gold-deep);
font-size:8.5px;
font-weight:800;
}
.admin-user-credentials {
padding:14px;
border:1px solid rgba(85,121,66,.18);
border-radius:12px;
background:#f7fbf4;
}
.admin-user-credentials[hidden] { display:none!important; }
.admin-user-credentials > strong {
color:#557942;
}
.admin-user-credentials > p {
margin:5px 0 12px;
color:var(--charcoal-50);
font-size:9.5px;
}
.admin-user-credential-line {
display:grid;
grid-template-columns:120px minmax(0,1fr);
align-items:center;
gap:8px;
margin-bottom:7px;
}
.admin-user-credential-line span {
color:var(--charcoal-45);
font-size:9px;
}
.admin-user-credential-line code {
overflow-wrap:anywhere;
padding:7px 9px;
border-radius:7px;
background:#fff;
color:var(--charcoal);
font-size:10px;
}
.admin-user-credentials .btn-sm {
margin-top:6px;
}
@media(max-width:850px) {
.admin-user-row {
grid-template-columns:minmax(0,1fr) 180px auto;
}
.admin-user-actions {
grid-column:1/-1;
justify-content:flex-start;
}
}
@media(max-width:650px) {
.admin-users-head {
align-items:stretch;
flex-direction:column;
}
.admin-users-head .btn-sm { width:100%; }
.admin-permission-legend { grid-template-columns:1fr; }
.admin-user-row { grid-template-columns:1fr; gap:8px; }
.admin-user-actions { grid-column:auto; }
.admin-user-status { width:max-content; }
}
/* CATÁLOGO MOBILE-FIRST V2 */
.catalogo-descoberta {
margin: 0 auto 22px;
}
.catalogo-descoberta .catalogo-busca-wrap {
max-width: none;
margin: 0 0 10px;
}
.catalogo-lista-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
color: var(--charcoal-60);
font-size: 12px;
}
.catalogo-ordenacao {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.catalogo-ordenacao span {
font-size: 11px;
}
.catalogo-ordenacao select {
min-height: 38px;
padding: 0 30px 0 11px;
border: 1px solid rgba(199,154,50,.24);
border-radius: 999px;
background: #fff;
color: var(--charcoal);
font-family: var(--font-body);
font-size: 12px;
}
.catalogo-card > img,
.catalogo-card-sem-foto {
aspect-ratio: 1 / 1.08;
}
.catalogo-card-body {
gap: 6px;
}
.catalogo-card h2 {
line-height: 1.18;
}
.catalogo-card-descricao {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.catalogo-produto-whatsapp {
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
margin-top: 9px;
padding: 9px 12px;
border: 1px solid rgba(71,151,87,.24);
border-radius: 999px;
background: #f3faf4;
color: #377747;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none;
}
.catalogo-produto-whatsapp svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 620px) {
.catalogo-publico {
padding-left: 12px;
padding-right: 12px;
}
.catalogo-navbar {
margin-bottom: 12px;
}
.catalogo-descoberta {
position: sticky;
top: 0;
z-index: 35;
margin-left: -12px;
margin-right: -12px;
margin-bottom: 14px;
padding: 10px 12px 9px;
background: rgba(250,247,240,.96);
border-bottom: 1px solid rgba(199,154,50,.14);
backdrop-filter: blur(10px);
}
.catalogo-descoberta .catalogo-busca-wrap {
margin-bottom: 8px;
}
.catalogo-busca-wrap input[type="search"] {
min-height: 44px;
font-size: 16px; /* evita zoom automático do iOS */
}
.catalogo-lista-meta {
gap: 8px;
}
.catalogo-ordenacao span {
display: none;
}
.catalogo-ordenacao select {
min-height: 36px;
max-width: 132px;
}
.catalogo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.catalogo-card {
border-radius: 14px;
box-shadow: 0 5px 16px rgba(54,46,36,.055);
}
.catalogo-card-body {
padding: 10px;
gap: 5px;
}
.catalogo-card h2 {
font-size: 16px;
min-height: 38px;
}
.catalogo-card p {
font-size: 11px;
}
.catalogo-preco {
font-size: 17px;
}
.catalogo-add-btn {
min-height: 40px;
margin-top: 5px;
padding: 8px;
font-size: 12px;
}
.catalogo-qtd-stepper button {
min-width: 40px;
min-height: 40px;
}
.catalogo-paginacao {
margin-top: 24px;
}
.catalogo-pag-seta,
.catalogo-pag-numeros button {
min-width: 42px;
height: 42px;
}
.catalogo-pag-info {
margin-bottom: 86px;
}
}
@media (max-width: 350px) {
.catalogo-grid {
grid-template-columns: 1fr;
}
.catalogo-card h2 {
min-height: 0;
}
}
/* CATÁLOGO MOBILE V4 — NAVBAR E BUSCA FIXOS EM CAMADAS */
@media (max-width: 620px) {
.catalogo-navbar {
position: sticky;
top: 0;
z-index: 60;
margin-left: -12px;
margin-right: -12px;
margin-bottom: 0;
padding: 14px 12px;
background: rgba(250,247,240,.985);
border-bottom: 1px solid rgba(199,154,50,.12);
box-shadow: 0 3px 10px rgba(54,46,36,.025);
backdrop-filter: blur(10px);
}
.catalogo-descoberta {
top: 71px;
z-index: 55;
margin-top: 0;
}
}
@media (max-width: 350px) {
.catalogo-navbar {
padding-top: 11px;
padding-bottom: 11px;
}
.catalogo-navbar-logo {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.catalogo-descoberta {
top: 61px;
}
}
/* CATÁLOGO MOBILE V5 — REMOVE ESPAÇO ENTRE NAVBAR E BUSCA */
@media (max-width: 620px) {
.catalogo-navbar {
min-height: 72px;
box-sizing: border-box;
}
.catalogo-descoberta {
top: 72px;
margin-top: 0 !important;
padding-top: 10px;
border-top: 0;
}
/* impede que conteúdo dos cards apareça no vão entre as duas áreas sticky */
.catalogo-navbar,
.catalogo-descoberta {
background: #faf7f0;
}
}
@media (max-width: 350px) {
.catalogo-navbar {
min-height: 64px;
}
.catalogo-descoberta {
top: 64px;
}
}
/* ABA USUÁRIOS — ADMIN COMPLETO */
.users-page-head {
margin-bottom: 18px;
}
.users-reset-wrap {
max-width: 760px;
margin-bottom: 18px;
}
.users-reset-wrap > .card {
max-width: none !important;
margin-top: 0 !important;
width: 100%;
box-sizing: border-box;
}
#tab-usuarios .admin-users-card {
max-width: none;
margin-top: 0;
}
#tab-usuarios .admin-users-list {
margin-top: 4px;
}
@media (max-width: 700px) {
.users-reset-wrap {
max-width: none;
}
.users-reset-wrap > .card,
#tab-usuarios .admin-users-card {
padding: 16px !important;
}
}
/* FIX — RODAPÉ DOS MODAIS DE FORMULÁRIO */
.modal-form-scroll {
display: flex;
flex-direction: column;
max-height: min(88vh, 860px);
overflow: hidden !important;
padding-bottom: 0 !important;
}
.modal-form-scroll > form {
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
padding-bottom: 0;
scrollbar-gutter: stable;
}
.modal-form-scroll .modal-sticky-actions {
position: sticky;
bottom: 0;
z-index: 20;
flex: 0 0 auto;
margin: 18px -2px 0;
padding: 14px 2px 16px;
background: #fff;
border-top: 1px solid rgba(199,154,50,.16);
box-shadow: 0 -10px 22px rgba(255,255,255,.96);
}
.modal-form-scroll .modal-sticky-actions::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
@media (max-width: 700px) {
.modal-form-scroll {
max-height: 94vh;
border-radius: 22px;
}
.modal-form-scroll .modal-sticky-actions {
gap: 10px !important;
padding-top: 12px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.modal-form-scroll .modal-sticky-actions > button {
min-height: 46px;
}
}
/* NOVO PRODUTO V2 — ESTRUTURA DE MODAL SEM SOBREPOSIÇÃO */
.produto-novo-modal-shell {
display: flex;
flex-direction: column;
width: min(480px, calc(100vw - 28px));
max-height: min(90vh, 860px);
padding: 0 !important;
overflow: hidden !important;
border-radius: 24px;
}
.produto-novo-modal-header {
flex: 0 0 auto;
padding: 34px 42px 12px;
background: #fff;
}
.produto-novo-modal-header .modal-confirm-title {
margin: 0;
}
.produto-novo-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.produto-novo-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 42px 20px;
scrollbar-gutter: stable;
}
.produto-novo-foto-field {
margin-bottom: 4px;
}
.produto-novo-modal-footer {
position: relative;
z-index: 30;
flex: 0 0 auto;
padding: 14px 42px 18px;
border-top: 1px solid rgba(199,154,50,.16);
background: #fff;
box-shadow: 0 -8px 20px rgba(72,56,30,.045);
}
.produto-novo-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
position: static !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.produto-novo-actions::before {
display: none !important;
}
.produto-novo-actions > button {
min-height: 44px;
}
@media (max-width: 620px) {
.produto-novo-modal-shell {
width: calc(100vw - 20px);
max-height: 94vh;
border-radius: 22px;
}
.produto-novo-modal-header {
padding: 30px 22px 10px;
}
.produto-novo-scroll {
padding: 8px 22px 18px;
}
.produto-novo-modal-footer {
padding: 12px 22px max(14px, env(safe-area-inset-bottom));
}
.produto-novo-actions {
display: grid;
grid-template-columns: 1fr 1.35fr;
}
.produto-novo-actions > button {
width: 100%;
min-height: 46px;
}
}
/* CENTRAL DE AJUDA PÚBLICA */
.help-page-body {
min-height: 100vh;
margin: 0;
background: #fbf8f1;
color: var(--charcoal);
}
.help-public-header {
width: min(1180px, calc(100% - 32px));
min-height: 76px;
margin: 18px auto 0;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-sizing: border-box;
border: 1px solid rgba(199,154,50,.15);
border-top: 3px solid #d3a63d;
border-radius: 18px;
background: #fffaf7;
}
.help-brand {
display: flex;
align-items: center;
gap: 11px;
color: inherit;
text-decoration: none;
}
.help-brand-mark {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(199,154,50,.2);
border-radius: 50%;
background: #fff;
color: var(--gold-deep);
font-family: Georgia, serif;
font-size: 12px;
}
.help-brand strong,
.help-brand small {
display: block;
}
.help-brand strong {
font-family: Georgia, serif;
font-size: 19px;
font-weight: 500;
color: var(--gold-deep);
}
.help-brand small {
margin-top: 2px;
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.help-shell {
width: min(1180px, calc(100% - 32px));
margin: 18px auto 60px;
}
.help-hero {
padding: 30px;
border: 1px solid rgba(199,154,50,.13);
border-radius: 18px;
background: #fff;
}
.help-hero h1 {
max-width: 720px;
margin: 0;
font-family: Georgia, serif;
color: #3c3126;
font-size: clamp(28px, 4vw, 46px);
font-weight: 500;
line-height: 1.06;
}
.help-hero > p {
max-width: 760px;
margin: 13px 0 22px;
color: #746b61;
font-size: 14px;
line-height: 1.65;
}
.help-role-switch {
display: inline-flex;
gap: 5px;
padding: 4px;
border: 1px solid rgba(199,154,50,.14);
border-radius: 999px;
background: #faf7f0;
}
.help-role-btn {
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: transparent;
color: #756c61;
font-family: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.help-role-btn.active {
background: #bd870b;
color: #fff;
}
.help-search-wrap {
position: relative;
max-width: 680px;
margin-top: 18px;
}
.help-search-wrap svg {
position: absolute;
left: 16px;
top: 50%;
width: 19px;
height: 19px;
transform: translateY(-50%);
color: #a29a90;
}
.help-search-wrap input {
width: 100%;
min-height: 54px;
box-sizing: border-box;
padding: 0 18px 0 47px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 999px;
background: #fff;
font-family: inherit;
font-size: 15px;
outline: none;
}
.help-search-wrap input:focus {
border-color: rgba(189,135,11,.5);
box-shadow: 0 0 0 3px rgba(189,135,11,.08);
}
.help-layout {
display: grid;
grid-template-columns: 220px minmax(0,1fr);
align-items: start;
gap: 22px;
margin-top: 22px;
}
.help-sidebar {
position: sticky;
top: 16px;
padding: 15px;
border: 1px solid rgba(199,154,50,.13);
border-radius: 14px;
background: #fff;
}
.help-sidebar-title {
margin-bottom: 9px;
color: #9d741c;
font-size: 9px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
#help-nav {
display: grid;
gap: 4px;
}
#help-nav a {
padding: 9px 10px;
border-radius: 8px;
color: #61594f;
font-size: 11px;
text-decoration: none;
}
#help-nav a:hover {
background: #faf6eb;
color: #a2720b;
}
.help-role-panel {
display: none;
}
.help-role-panel.active {
display: block;
}
.help-group {
scroll-margin-top: 18px;
margin-bottom: 26px;
}
.help-group[hidden],
.help-card[hidden] {
display: none !important;
}
.help-group-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 11px;
}
.help-group-number {
width: 30px;
height: 30px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
background: #f3e6c4;
color: #9f7111;
font-size: 11px;
font-weight: 800;
}
.help-group-head h2 {
margin: 1px 0 3px;
font-family: Georgia, serif;
color: #3b3127;
font-size: 23px;
font-weight: 500;
}
.help-group-head p {
margin: 0;
color: #91887e;
font-size: 11px;
}
.help-card {
margin-bottom: 9px;
padding: 19px 21px;
border: 1px solid rgba(54,46,36,.075);
border-radius: 14px;
background: #fff;
}
.help-card h3 {
margin: 0 0 12px;
color: #302820;
font-size: 14px;
}
.help-card ol {
margin: 0;
padding-left: 22px;
}
.help-card li {
margin: 0 0 9px;
padding-left: 4px;
color: #5c544c;
font-size: 12px;
line-height: 1.58;
}
.help-card li::marker {
color: #b8820b;
font-weight: 800;
}
.help-tip {
margin-top: 13px;
padding: 10px 12px;
border-left: 3px solid #d6ad4f;
border-radius: 0 9px 9px 0;
background: #fcf8ed;
color: #655b4d;
font-size: 11px;
line-height: 1.5;
}
.help-empty {
padding: 32px;
border: 1px dashed rgba(54,46,36,.15);
border-radius: 14px;
background: #fff;
text-align: center;
}
.help-empty strong,
.help-empty span {
display: block;
}
.help-empty span {
margin-top: 6px;
color: #8f877f;
font-size: 12px;
}
@media (max-width: 760px) {
.help-public-header {
width: calc(100% - 20px);
min-height: 66px;
margin-top: 10px;
padding: 10px 12px;
}
.help-brand-mark {
width: 38px;
height: 38px;
}
.help-brand strong {
font-size: 16px;
}
.help-back-login {
padding-left: 12px;
padding-right: 12px;
font-size: 10px;
}
.help-shell {
width: calc(100% - 20px);
margin-top: 10px;
}
.help-hero {
padding: 21px 17px;
}
.help-hero > p {
font-size: 13px;
}
.help-role-switch {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.help-role-btn {
padding: 0 8px;
}
.help-search-wrap input {
min-height: 50px;
font-size: 16px;
}
.help-layout {
display: block;
margin-top: 14px;
}
.help-sidebar {
position: static;
margin-bottom: 15px;
padding: 10px;
overflow-x: auto;
}
.help-sidebar-title {
display: none;
}
#help-nav {
display: flex;
gap: 6px;
width: max-content;
}
#help-nav a {
border: 1px solid rgba(199,154,50,.14);
border-radius: 999px;
background: #fffaf0;
white-space: nowrap;
}
.help-group {
scroll-margin-top: 12px;
}
.help-group-head h2 {
font-size: 21px;
}
.help-card {
padding: 17px 16px;
}
.help-card h3 {
font-size: 15px;
}
.help-card li {
font-size: 13px;
}
}
.help-header-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* LOGO OFICIAL MARIA FLOR — 2026-08 */
.login-brand-full {
width: min(230px, 72%);
margin-bottom: 18px;
}
.login-brand-full img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Central de Ajuda: o símbolo nunca ultrapassa o círculo do cabeçalho. */
.help-brand-mark {
width: 44px;
height: 44px;
flex: 0 0 44px;
overflow: hidden;
}
.help-brand-mark img {
display: block;
width: 100%;
height: 100%;
max-width: 44px;
max-height: 44px;
object-fit: contain;
}
.catalogo-navbar-logo img,
.login-brand-icon img,
.login-card-logo,
.hero-mark,
.modal-mark {
object-fit: contain;
}
@media (max-width: 760px) {
.login-brand-full {
width: min(190px, 64%);
}
.help-brand-mark {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.help-brand-mark img {
max-width: 38px;
max-height: 38px;
}
}
/* Cabeçalho: mantém Ajuda junto das ações à direita, sem ficar solto no centro. */
@media (min-width: 641px) {
.app-header > .help-header-link {
margin-left: auto;
}
}
/* CENTRAL DE AJUDA V2 — SUBCATEGORIAS MOBILE SIMPLES */
@media (max-width: 760px) {
.help-sidebar {
position: static;
margin: 0 0 18px;
padding: 14px;
overflow: visible !important;
border-radius: 16px;
background: #fff;
}
.help-sidebar-title {
display: block !important;
margin: 0 0 10px;
color: #5c5145;
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
#help-nav {
counter-reset: help-mobile-category;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100% !important;
}
#help-nav a {
counter-increment: help-mobile-category;
min-width: 0;
min-height: 62px;
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 8px;
box-sizing: border-box;
padding: 10px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 12px;
background: #fffaf0;
color: #554c43;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
white-space: normal !important;
overflow-wrap: anywhere;
}
#help-nav a::before {
content: counter(help-mobile-category);
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: #efdca9;
color: #9e710f;
font-size: 10px;
font-weight: 800;
}
#help-nav a:active {
background: #f8efda;
transform: scale(.99);
}
}
@media (max-width: 380px) {
#help-nav {
grid-template-columns: 1fr;
}
#help-nav a {
min-height: 56px;
font-size: 13px;
}
}
/* Login desktop refinado + assinatura RDF Core Systems */
.login-brand-panel {
overflow: hidden;
justify-content: space-between;
padding: clamp(52px, 5vw, 86px) clamp(48px, 5.5vw, 92px);
background:
linear-gradient(145deg, rgba(133,91,7,.90) 0%, rgba(184,130,17,.84) 48%, rgba(215,169,67,.77) 100%),
url("https://images.unsplash.com/photo-1760784213113-e53f4b4c96c6?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat;
}
.login-brand-panel::before {
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(circle at 18% 22%,rgba(255,255,255,.10),transparent 28%),
linear-gradient(180deg,rgba(25,20,12,.03),rgba(25,20,12,.13));
}
.login-brand-content,.login-brand-caption { position:relative; z-index:1; }
.login-brand-content { width:min(100%,560px); margin:auto 0; }
.login-brand-kicker {
display:flex; align-items:center; gap:11px; margin-bottom:22px;
color:rgba(255,255,255,.78); font-size:11px; font-weight:600;
letter-spacing:.17em; text-transform:uppercase;
}
.login-brand-kicker span { width:34px; height:1px; background:rgba(255,255,255,.62); }
.login-brand-panel h1 {
max-width:540px; font-size:clamp(34px,3vw,50px); line-height:1.05;
letter-spacing:-.025em; text-shadow:0 2px 18px rgba(61,40,0,.10);
}
.login-brand-tagline {
max-width:510px; margin-top:20px; font-size:15px; line-height:1.72;
color:rgba(255,255,255,.88);
}
.login-brand-divider {
width:min(100%,510px); height:1px; margin:29px 0 25px;
background:linear-gradient(90deg,rgba(255,255,255,.48),rgba(255,255,255,.06));
}
.login-brand-list { max-width:510px; gap:17px; margin:0; }
.login-brand-list li {
display:grid; grid-template-columns:22px 1fr; padding:0; font-size:13px;
}
.login-brand-list li::before {
position:static; grid-row:1 / span 2; width:17px; height:17px; display:grid;
place-items:center; margin-top:2px; border:1px solid rgba(255,255,255,.52);
border-radius:50%; content:"✓"; font-size:9px; line-height:1;
}
.login-brand-list strong { color:#fff; font-size:13.5px; font-weight:500; line-height:1.35; }
.login-brand-list span {
grid-column:2; margin-top:2px; color:rgba(255,255,255,.70);
font-size:12px; line-height:1.45;
}
.login-brand-caption {
margin-top:40px; color:rgba(255,255,255,.52); font-size:10px;
letter-spacing:.11em; text-transform:uppercase;
}
.login-brand-caption span { margin:0 6px; }
.login-form-stack { width:100%; max-width:380px; }
.login-developer-credit {
width:fit-content; max-width:100%; margin:18px auto 0; display:flex;
align-items:center; justify-content:center; gap:9px; color:rgba(45,41,35,.48);
font-size:10px; letter-spacing:.06em; text-decoration:none;
transition:opacity .18s ease,transform .18s ease;
}
.login-developer-credit:hover { opacity:.82; transform:translateY(-1px); }
.login-developer-logo {
display:flex; align-items:center; justify-content:center; width:104px; height:31px;
padding:5px 9px; border-radius:7px; background:#2c2a27;
box-shadow:0 3px 10px rgba(32,28,22,.10);
}
.login-developer-logo img { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width:899px) {
.login-form-stack { max-width:380px; }
.login-developer-credit { margin-top:14px; }
.login-developer-logo { width:94px; height:29px; }
}
/* Assinatura RDF — versão minimalista */
.login-developer-credit {
margin: 22px auto 0;
padding: 8px 12px;
display: flex;
width: fit-content;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 999px;
color: rgba(63, 55, 45, .46);
text-decoration: none;
opacity: .82;
transition: opacity .18s ease, background .18s ease;
}
.login-developer-credit:hover {
opacity: 1;
transform: none;
background: rgba(168, 123, 18, .045);
}
.login-developer-label {
font-size: 9.5px;
font-weight: 400;
line-height: 1;
letter-spacing: .075em;
white-space: nowrap;
}
.login-developer-logo {
display: block;
width: 84px;
height: 28px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
object-fit: contain;
filter: invert(18%) sepia(8%) saturate(540%) hue-rotate(355deg) brightness(84%) contrast(86%);
opacity: .72;
}
.login-developer-credit:hover .login-developer-logo {
opacity: .92;
}
@media (max-width: 899px) {
.login-developer-credit {
margin-top: 17px;
padding: 7px 10px;
gap: 8px;
}
.login-developer-logo {
width: 78px;
height: 26px;
}
}
/* RDF Core Systems — logo oficial com fundo transparente */
.login-developer-logo {
width: 96px !important;
height: 30px !important;
object-fit: contain !important;
background: transparent !important;
filter: none !important;
opacity: .88 !important;
}
.login-developer-credit:hover .login-developer-logo {
opacity: 1 !important;
}
@media (max-width: 899px) {
.login-developer-logo {
width: 90px !important;
height: 28px !important;
}
}
/* FOTO DE PERFIL — cabeçalho da revendedora e catálogo público */
.revendedora-page .app-header-icon.has-profile-photo,
.catalogo-navbar-logo.has-profile-photo {
overflow: hidden;
padding: 0;
border-radius: 50%;
}
.revendedora-page .app-header-icon.has-profile-photo img,
.catalogo-navbar-logo.has-profile-photo img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 50% !important;
display: block !important;
}
/* Sem foto pessoal: usa a marca oficial da Maria Flor como avatar padrão. */
.catalogo-navbar-logo.is-default-logo {
overflow: hidden;
border-radius: 50%;
background: #fff;
}
.catalogo-navbar-logo.is-default-logo img {
width: 72% !important;
height: 72% !important;
max-width: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 0 !important;
display: block !important;
}
@media (max-width: 620px) {
.catalogo-navbar-logo.has-profile-photo img {
width: 100% !important;
height: 100% !important;
}
.catalogo-navbar-logo.is-default-logo img {
width: 70% !important;
height: 70% !important;
}
}
/* ============================================================================
ADMIN — EXPERIÊNCIA MOBILE
Desktop permanece intocado. No celular, a navegação principal usa o padrão
2 itens + FAB central + 2 itens, com ações secundárias em uma folha modal.
============================================================================ */
@media (max-width: 760px) {
body.admin-mobile-actions-open { overflow: hidden; }
.admin-page {
width: 100%;
max-width: none;
padding: 12px 12px calc(104px + env(safe-area-inset-bottom));
}
.admin-page .app-header {
margin: 0 0 14px;
padding: 15px 14px;
padding-right: 14px;
border-radius: 18px;
gap: 10px;
min-height: 74px;
}
.admin-page .app-header-left { gap: 11px; min-width: 0; }
.admin-page .app-header-icon,
.admin-page .app-header-icon img {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
}
.admin-page .app-header-icon {
overflow: hidden;
display: grid;
place-items: center;
flex: 0 0 44px;
background: #fff;
border: 1px solid rgba(199,154,50,.20);
}
/* Foto real: preenche o círculo. Logo padrão: continua inteira e proporcional. */
.admin-page .app-header-icon.has-profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.admin-page .app-header-icon:not(.has-profile-photo) img {
width: 70%;
height: 70%;
object-fit: contain;
object-position: center;
display: block;
}
.admin-page .app-header-titles { min-width: 0; }
.admin-page .app-header-titles h1 {
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-page .app-header-titles .subtitle-line {
font-size: 9px;
letter-spacing: .12em;
}
.admin-page .app-header-greeting {
font-size: 12px;
margin-top: 5px;
white-space: nowrap;
}
.admin-page .role-badge {
padding: 3px 8px;
font-size: 9px;
margin-left: 5px;
}
.admin-page .help-header-link { display: none; }
/* Os tabs originais continuam sendo a fonte da navegação/estado,
mas ficam invisíveis no mobile. O desktop continua igual. */
.admin-page .admin-tabs { display: none !important; }
.admin-mobile-bottom-nav {
position: fixed;
z-index: 1200;
left: 10px;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
height: 76px;
padding: 7px 8px 6px;
display: grid;
grid-template-columns: 1fr 1fr 72px 1fr 1fr;
align-items: center;
gap: 2px;
box-sizing: border-box;
border: 1px solid rgba(199,154,50,.18);
border-radius: 24px;
background: rgba(255,255,255,.98);
box-shadow: 0 12px 32px rgba(54,46,36,.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.admin-mobile-bottom-item {
min-width: 0;
width: 100%;
height: 60px;
padding: 5px 2px 4px;
border: 0;
border-radius: 16px;
background: transparent;
color: #8f8b86;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
font: 500 10px/1.05 var(--font-body);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.admin-mobile-bottom-icon {
width: 23px;
height: 23px;
display: grid;
place-items: center;
flex: 0 0 23px;
}
.admin-mobile-bottom-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.admin-mobile-bottom-item.is-active {
color: var(--gold-deep);
background: #fbf7ed;
font-weight: 600;
}
.admin-mobile-fab {
position: static;
width: 52px;
height: 52px;
margin: 0 auto;
padding: 0;
transform: none;
border: 0;
border-radius: 50%;
background: linear-gradient(145deg, #d7b15a, #b98410);
color: #fff;
box-shadow: 0 8px 20px rgba(145,108,27,.26);
display: grid;
place-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.admin-mobile-fab svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
.admin-mobile-fab:active { transform: scale(.96); }
.admin-mobile-actions {
position: fixed;
inset: 0;
z-index: 1300;
pointer-events: none;
}
.admin-mobile-actions.is-open { pointer-events: auto; }
.admin-mobile-actions-backdrop {
position: absolute;
inset: 0;
background: rgba(31,27,22,.34);
opacity: 0;
transition: opacity .18s ease;
}
.admin-mobile-actions.is-open .admin-mobile-actions-backdrop { opacity: 1; }
.admin-mobile-actions-sheet {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 18px;
border: 1px solid rgba(199,154,50,.20);
border-radius: 24px;
background: #fffdf9;
box-shadow: 0 18px 50px rgba(54,46,36,.20);
transform: translateY(22px);
opacity: 0;
transition: transform .18s ease, opacity .18s ease;
}
.admin-mobile-actions.is-open .admin-mobile-actions-sheet {
transform: translateY(0);
opacity: 1;
}
.admin-mobile-more-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.admin-mobile-more-head h2 {
margin: 0;
font-family: var(--font-display);
font-size: 25px;
font-weight: 600;
color: var(--charcoal);
}
.admin-mobile-more-close {
width: 36px;
height: 36px;
border: 1px solid rgba(54,46,36,.12);
border-radius: 50%;
background: #fff;
color: var(--charcoal-60);
font-size: 22px;
cursor: pointer;
}
.admin-mobile-actions-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
}
.admin-mobile-actions-grid button,
.admin-mobile-more-grid button,
.admin-mobile-more-grid a {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 13px;
border: 1px solid rgba(199,154,50,.18);
border-radius: 13px;
background: #fff;
color: var(--charcoal);
font: 500 12.5px/1.2 var(--font-body);
text-decoration: none;
cursor: pointer;
text-align: left;
}
.admin-mobile-actions-grid button.is-active,
.admin-mobile-more-grid button.is-active {
background: #fbf7ed;
color: var(--gold-deep);
border-color: rgba(199,154,50,.38);
}
.admin-mobile-actions-divider {
height: 1px;
margin: 16px 0 12px;
background: rgba(54,46,36,.08);
}
.admin-mobile-more-label {
justify-content: flex-start;
margin-bottom: 8px;
}
.admin-mobile-more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
}
.admin-mobile-more-grid #admin-mobile-logout {
color: #a84e4e;
border-color: rgba(168,78,78,.18);
}
.admin-page .tab-panel { width: 100%; min-width: 0; }
.admin-page .card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
border-radius: 18px;
}
.admin-page .card,
.admin-page .subtab-group,
.admin-page .estoque-reposicao-panel { margin-bottom: 14px; }
.admin-page .eyebrow { font-size: 10px; letter-spacing: .18em; }
.admin-page .hint { font-size: 12px; line-height: 1.55; }
.admin-page .search-input,
.admin-page input,
.admin-page select,
.admin-page textarea { min-height: 44px; box-sizing: border-box; }
.admin-page textarea { min-height: 110px; }
.admin-page .btn-sm,
.admin-page .btn-secondary,
.admin-page button { min-height: 42px; }
.admin-page .subtab-group > .tabs {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
overflow: visible;
padding: 4px;
margin: 0 0 12px;
border: 1px solid rgba(199,154,50,.14);
border-radius: 14px;
background: #fbf7ed;
}
.admin-page .subtab-group > .tabs .subtab-btn {
border: 0;
margin: 0;
min-height: 40px;
border-radius: 10px;
}
.admin-page .subtab-group > .tabs .subtab-btn.active {
background: #fff;
box-shadow: 0 2px 8px rgba(54,46,36,.06);
}
.admin-page .table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 14px;
}
.admin-page .data-table { min-width: 720px; }
.admin-page .modal-overlay .modal {
width: calc(100vw - 24px);
max-width: none;
max-height: calc(100dvh - 24px);
margin: 12px;
border-radius: 20px;
}
.admin-page .modal-actions {
position: sticky;
bottom: 0;
padding-top: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0), #fff 20%);
}
}
@media (max-width: 390px) {
.admin-page { padding-left: 8px; padding-right: 8px; }
.admin-page .app-header-titles h1 { font-size: 18px; }
.admin-mobile-bottom-nav { left: 6px; right: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-mobile-fab { width: 50px; height: 50px; }
.admin-mobile-bottom-item { font-size: 9px; }
.admin-mobile-bottom-icon, .admin-mobile-bottom-icon svg { width: 22px; height: 22px; }
.admin-mobile-actions-sheet { left: 6px; right: 6px; padding: 14px; }
}
@media (min-width: 761px) {
.admin-mobile-actions,
.admin-mobile-bottom-nav { display: none !important; }
}
@media (max-width: 760px) {
.admin-page .carrinho-item-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-page .carrinho-item-origem { font-size: 10px; line-height: 1.35; color: var(--charcoal-60); }
}
.venda-admin-commission{margin-top:3px;color:#8a6a18;font-size:12px;font-weight:600;}
.carrinho-item-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.carrinho-item-origem{display:block;margin-top:2px;color:#8a6a18;font-size:11px;line-height:1.35;}
/* Ajustes 2026-08-18: ações de produto no menu, comissão mobile e paginação do admin. */
.produtos-menu-item {
width: 100%;
border: 0;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.rev-sales-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.rev-sales-pagination[hidden] { display: none !important; }
@media (max-width: 760px) {
.revendedora-page .admin-stats .stat-card-4 {
grid-column: 1 / -1;
padding-top: 13px !important;
margin-top: 13px;
border-top: 1px solid rgba(54,46,36,.07) !important;
}
}
/* V9 — separação legível de quantidade e produto no mobile. */
@media (max-width: 760px) {
#vendas-admin-table .venda-admin-item-line,
.rd-vendas-table .venda-admin-item-line { gap: 8px; }
}
/* V15 — Conta (Pendente): parcelamento por datas */
.conta-parcelamento {
padding: 14px;
border: 1px solid rgba(199,154,50,.24);
border-radius: 16px;
background: rgba(255,252,244,.7);
}
.conta-parcelamento-grid {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 6px;
}
.conta-parcelamento-grid select {
width: 110px;
min-height: 42px;
}
.conta-datas-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
margin-top: 12px;
}
.conta-data-item label {
display: block;
font-size: 11px;
margin-bottom: 5px;
}
.conta-data-item input {
width: 100%;
}
@media (max-width: 680px) {
.conta-datas-grid { grid-template-columns: 1fr; }
}
/* V17 — Venda direta admin: desconto opcional */
.admin-venda-desconto-resumo {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(199, 154, 50, 0.22);
border-radius: 14px;
background: rgba(199, 154, 50, 0.055);
font-size: 13px;
}
.admin-venda-desconto-resumo span { display: inline-flex; gap: 6px; align-items: baseline; }
.admin-venda-desconto-resumo strong { color: #9d6b00; font-size: 14px; }
/* V20 — Extrato de clientes: origem, itens legíveis e paginação leve */
#cliente-detail-view > .table-wrap {
max-height: none;
overflow-x: auto;
overflow-y: visible;
}
#cliente-detail-view .data-table th:nth-child(1) { width: 15%; }
#cliente-detail-view .data-table th:nth-child(2) { width: 11%; }
#cliente-detail-view .data-table th:nth-child(3) { width: 34%; }
#cliente-detail-view .data-table th:nth-child(4) { width: 20%; }
#cliente-detail-view .data-table th:nth-child(5) { width: 13%; }
#cliente-detail-view .data-table th:nth-child(6) { width: 7%; }
.cliente-extrato-row td {
vertical-align: top;
}
.cliente-extrato-itens {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cliente-extrato-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 3px 8px;
align-items: start;
padding: 0 0 7px;
border-bottom: 1px solid rgba(54,46,36,.07);
}
.cliente-extrato-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.cliente-extrato-item-qtd {
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
min-height: 24px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(199,154,50,.11);
color: var(--gold-deep);
font-weight: 700;
font-size: 11px;
}
.cliente-extrato-item-nome {
line-height: 1.35;
overflow-wrap: anywhere;
}
.cliente-extrato-item-sku {
color: var(--charcoal-35);
font-size: 10.5px;
}
.cliente-extrato-expandir {
align-self: flex-start;
padding: 3px 0;
border: 0;
background: transparent;
color: var(--gold-deep);
font: 600 11.5px var(--font-body);
cursor: pointer;
}
.cliente-extrato-expandir:hover { text-decoration: underline; }
.cliente-extrato-origem {
line-height: 1.4;
color: var(--charcoal-65);
overflow-wrap: anywhere;
}
.cliente-extrato-pagamento-desc { line-height: 1.45; }
.cliente-extrato-paginacao {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 14px;
flex-wrap: wrap;
}
@media (max-width: 760px) {
#cliente-detail-view .data-table th:nth-child(n) { width: auto; }
.cliente-extrato-item {
grid-template-columns: 32px minmax(0, 1fr);
}
.cliente-extrato-origem { font-size: 12px; }
.cliente-extrato-paginacao {
justify-content: space-between;
gap: 8px;
}
.cliente-extrato-paginacao .hint {
order: -1;
width: 100%;
text-align: center;
}
}