/* ===========================================================
NITHI TABACARIA — Design System (dark + dourado)
=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Playfair+Display:wght@600;700;800&family=Cormorant+Garamond:wght@600;700&family=Oswald:wght@500;600;700&family=Bebas+Neue&display=swap');
:root {
--bg: #080808;
--bg-2: #0d0d0c;
--surface: #121211;
--surface-2: #1a1a18;
--border: #242421;
--border-2: #33322d;
--gold: #e9b949;
--gold-2: #f3d488;
--gold-deep: #c79328;
--gold-grad: linear-gradient(135deg, #fbe39c 0%, #e9b949 48%, #b9821f 100%);
--accent-rgb: 233,185,73; /* trocado pelo tema em runtime */
--text: #f6f4ee;
--muted: #9b968c;
--muted-2: #6b675e;
--green: #25d366;
--green-2: #1eb455;
--danger: #e2573b;
--radius: 16px;
--radius-sm: 11px;
--shadow: 0 18px 40px -18px rgba(0,0,0,.75);
--shadow-gold: 0 10px 30px -10px rgba(var(--accent-rgb),.45);
--header-h: 84px;
--maxw: 1240px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* glow de fundo */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(720px 440px at 18% -10%, rgba(var(--accent-rgb),.09), transparent 62%),
radial-gradient(580px 400px at 92% 2%, rgba(var(--accent-rgb),.06), transparent 62%);
pointer-events: none;
transition: background .4s ease;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(240,184,64,.3); }
/* scrollbar com a cara do sistema */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); background-clip: padding-box; border: 2px solid transparent; }
h1,h2,h3,.brandtype { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
/* ====================== HEADER ====================== */
.header {
position: sticky; top: 0; z-index: 40;
height: var(--header-h);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 0 clamp(14px, 4vw, 28px);
background: linear-gradient(180deg, rgba(22,22,20,.5), rgba(10,10,9,.38));
backdrop-filter: blur(26px) saturate(1.5);
-webkit-backdrop-filter: blur(26px) saturate(1.5);
border-bottom: 1px solid rgba(var(--accent-rgb),.16);
box-shadow: 0 8px 30px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.header__side { display: flex; align-items: center; gap: 10px; z-index: 2; }
.logo { display: flex; align-items: center; gap: 11px; }
/* centralização do logo só vale no header da loja (não no login) */
.header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.logo__img { height: 70px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb),.25)); }
.logo__fallback { display: flex; align-items: center; gap: 11px; }
.logo__crown {
width: 38px; height: 38px; flex: 0 0 auto;
display: grid; place-items: center;
border-radius: 11px;
background: var(--gold-grad);
box-shadow: var(--shadow-gold);
color: #1a1306;
}
.logo__crown svg { width: 22px; height: 22px; }
.logo__text { line-height: 1; }
.logo__name {
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: 19px; letter-spacing: .14em;
background: var(--gold-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo__sub { font-size: 9px; letter-spacing: .42em; color: var(--muted); margin-top: 2px; }
.header__spacer { flex: 1; }
.header__status {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 500; color: var(--muted);
padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.dot--off { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
.bag-btn {
position: relative;
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: var(--surface-2); border: 1px solid var(--border-2);
transition: .2s;
}
.bag-btn:hover { border-color: var(--gold-deep); }
.bag-btn > span { display: grid; place-items: center; line-height: 0; }
.bag-btn svg { width: 21px; height: 21px; color: var(--gold-2); display: block; }
/* botão da sacola em destaque (verde) pra chamar atenção */
#openBag { background: var(--green); border-color: transparent; box-shadow: 0 5px 18px -6px rgba(37,211,102,.6); }
#openBag svg { color: #04210f; }
#openBag:hover { filter: brightness(1.08); border-color: transparent; }
#openBag.bump { animation: bagBump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes bagBump { 0%{transform:scale(1)} 35%{transform:scale(1.22)} 70%{transform:scale(.94)} 100%{transform:scale(1)} }
.bag-count {
position: absolute; top: -6px; right: -6px;
min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 999px; background: var(--gold-grad); color: #1a1306;
font-size: 11.5px; font-weight: 700; display: grid; place-items: center;
transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bag-count.show { transform: scale(1); }
/* ====================== HERO ====================== */
.hero {
max-width: var(--maxw); margin: 0 auto;
padding: clamp(22px,5vw,42px) clamp(14px,4vw,28px) 0;
}
.hero__card {
position: relative; overflow: hidden;
border-radius: 22px;
border: 1px solid var(--border-2);
background:
linear-gradient(120deg, rgba(240,184,64,.10), transparent 55%),
var(--surface);
padding: clamp(22px,5vw,40px);
}
.hero__card::after {
content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
background: radial-gradient(circle, rgba(240,184,64,.20), transparent 70%);
pointer-events:none;
}
.hero__card--off { background: linear-gradient(120deg, rgba(226,120,59,.10), transparent 55%), var(--surface); border-color: rgba(226,120,59,.3); }
.hero__card--off::after { background: radial-gradient(circle, rgba(226,120,59,.18), transparent 70%); }
/* ----- banner em TELA CHEIA (cobre toda a largura, sem caixa) ----- */
.hero--full { max-width: 100%; margin: 0; padding: 0; }
.hero--full .hero__card {
border-radius: 0; border: 0;
min-height: clamp(300px, 46vw, 520px);
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(24px,5vw,56px) clamp(16px,6vw,72px);
}
.hero--full .hero__card::after { display: none; }
.hero h1 { font-size: clamp(26px,6vw,42px); font-weight: 700; line-height: 1.06; }
.hero h1 b { background: var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color: var(--muted); margin-top: 12px; max-width: 460px; font-size: 15px; }
.hero__badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.hbadge {
font-size:12.5px; font-weight:500; color:var(--gold-2);
padding:7px 13px; border-radius:999px;
border:1px solid var(--border-2); background:rgba(240,184,64,.06);
display:inline-flex; align-items:center; gap:6px;
}
.hbadge svg{ width:14px; height:14px; }
/* ====================== CATEGORIAS ====================== */
.cats {
position: sticky; top: var(--header-h); z-index: 30;
background: rgba(13,12,10,.9); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
margin-top: 0;
}
.cats__inner {
max-width: var(--maxw); margin: 0 auto;
display: flex; flex-wrap: wrap; gap: 9px;
padding: 12px clamp(14px,4vw,28px);
}
.cats__inner::-webkit-scrollbar { display: none; }
.chip {
flex: 0 0 auto; scroll-snap-align: start;
padding: 9px 16px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; color: var(--muted);
border: 1px solid var(--border-2); background: var(--surface);
white-space: nowrap; transition: .18s;
}
.chip:hover { color: var(--text); border-color: var(--gold-deep); }
.chip.active { color: #1a1306; background: var(--gold-grad); border-color: transparent; }
/* ====================== GRID PRODUTOS ====================== */
.shop { max-width: var(--maxw); margin: 0 auto; padding: 22px clamp(14px,4vw,28px) 90px; }
/* busca (texto + voz) */
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 4px 6px 4px 14px; margin-bottom: 20px; transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12), 0 0 28px -14px rgba(var(--accent-rgb),.5); }
.search__ico { color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.search__ico svg { width: 19px; height: 19px; }
.search input { flex: 1; min-width: 0; height: 46px; border: none; background: none; color: var(--text); font-size: 15px; outline: none; }
.search input::placeholder { color: var(--muted-2); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__mic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--gold-2); transition: transform .12s, background .15s, box-shadow .12s, border-color .15s; }
.search__mic:hover { border-color: var(--gold-deep); }
.search__mic svg { width: 19px; height: 19px; }
/* ATIVO (ouvindo, aguardando fala) */
.search__mic.active { background: var(--gold-grad); color: #1a1306; border-color: transparent; animation: micPulse 1.3s infinite; }
/* FALANDO (volume detectado) */
.search__mic.speaking { animation: none; transform: scale(1.08); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.3), 0 0 20px rgba(var(--accent-rgb),.65); }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55); } 50% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb),0); } }
.shop__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:12px; }
.shop__head h2 { font-size: 20px; font-weight: 600; }
.shop__head span { font-size: 13px; color: var(--muted); }
.grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
}
.card {
position: relative; overflow: hidden;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%), var(--surface);
border: 1px solid var(--border);
display: flex; flex-direction: column;
transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .3s ease;
animation: cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* brilho que percorre a borda no hover */
.card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(var(--accent-rgb),.6), transparent 40%, transparent 60%, rgba(var(--accent-rgb),.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 1;
}
.card:hover {
transform: translateY(-6px);
border-color: rgba(var(--accent-rgb),.35);
box-shadow: 0 20px 44px -20px rgba(0,0,0,.85), 0 0 34px -14px rgba(var(--accent-rgb),.4);
}
.card:hover::before { opacity: 1; }
/* produto que já está na sacola */
.card.in-bag { border-color: rgba(var(--accent-rgb),.5); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 28px -12px rgba(var(--accent-rgb),.45); }
.card.in-bag .card__imgwrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb),.10), transparent 70%); pointer-events: none; }
.card__inbag {
position: absolute; top: 10px; left: 10px; z-index: 3; display: none;
align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
padding: 5px 9px; border-radius: 7px; background: var(--green); color: #04210f;
box-shadow: 0 3px 12px -3px rgba(37,211,102,.55);
}
.card__inbag svg { width: 12px; height: 12px; stroke-width: 3; }
.card.in-bag .card__inbag { display: inline-flex; }
/* quando está na sacola, esconde o DESTAQUE e o "últimas un." pra não sobrepor */
.card.in-bag .card__low,
.card.in-bag .card__tag { display: none; }
.card__imgwrap {
position: relative; aspect-ratio: 1/1;
background: radial-gradient(circle at 50% 32%, #1c1c1a, #0a0a09);
display: grid; place-items: center; overflow: hidden; padding: 0;
border-radius: var(--radius) var(--radius) 0 0; /* arredonda o topo: corta o zoom da foto no canto */
}
.card__imgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.card:hover .card__imgwrap img { transform: scale(1.06); }
.card__tag {
position: absolute; top: 10px; left: 10px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
font-size: 9px; font-weight: 800; letter-spacing: .09em;
padding: 5px 9px; border-radius: 7px; line-height: 1;
background: var(--gold-grad); color: #1a1306;
box-shadow: 0 3px 10px -3px rgba(233,185,73,.5);
}
.card__tag::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #1a1306; }
.card__tag--alt { background: rgba(13,12,10,.78); color: var(--gold-2); border: 1px solid var(--border-2); }
.card__low {
position: absolute; bottom: 10px; left: 10px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #ff9a6a;
padding: 5px 9px; border-radius: 7px; line-height: 1;
background: rgba(8,8,8,.72); backdrop-filter: blur(4px);
border: 1px solid rgba(226,120,59,.5);
}
.card__low::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #e2783b; box-shadow: 0 0 6px #e2783b; }
.card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1; }
.card__cat { font-size: 10.5px; letter-spacing:.05em; text-transform: uppercase; color: var(--muted-2); font-weight:600; }
.card__name {
font-size: 14px; font-weight: 600; margin: 3px 0 9px;
line-height: 1.25; min-height: 35px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__price { font-family:'Space Grotesk',sans-serif; font-size: 20px; font-weight: 700; line-height:1; font-variant-numeric: tabular-nums; }
.card__price-full { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.card__meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.card__meta b { color: var(--gold-2); font-weight: 600; }
.card__meta-promo { color: #ff6b9d !important; font-weight: 700 !important; }
/* selo de promoção no card (canto superior direito) */
.card__promo { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 5px 9px; border-radius: 7px; line-height: 1; background: linear-gradient(120deg, #FF6900, #FB3AA2); color: #fff; box-shadow: 0 3px 12px -3px rgba(251,58,162,.6); }
.card.in-bag .card__promo { display: none; }
.card__buy {
margin-top: 12px; height: 46px; border-radius: 12px; padding: 0 16px;
background: var(--gold-grad); color: #1a1306;
font-weight: 700; font-size: 14px; letter-spacing: .01em;
display: flex; align-items: center; justify-content: center; gap: 10px;
transition: filter .15s, transform .1s;
}
.card__buy:hover { filter: brightness(1.07); }
.card__buy:active { transform: scale(.97); }
.card__buy svg { width: 18px; height: 18px; flex: 0 0 auto; }
.card__buy.added { background: var(--green); color: #04210f; }
/* ====================== MODAL DE PRODUTO (detalhes) ====================== */
.prod-modal {
position: fixed; left: 50%; top: 50%; z-index: 70;
width: min(900px, 95vw); max-height: 90dvh; overflow: hidden;
background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 20px;
box-shadow: var(--shadow); display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: stretch;
transform: translate(-50%, -50%) scale(.92); opacity: 0; visibility: hidden;
transition: transform .32s cubic-bezier(.34,1.4,.64,1), opacity .25s;
}
.prod-modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.prod-modal__img { position: relative; background: radial-gradient(circle at 50% 35%, #1c1c1a, #0a0a09); overflow: hidden; min-height: 0; display: grid; place-items: center; padding: 26px; }
.prod-modal__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .4s ease; display: block; filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }
.prod-modal.open .prod-modal__img img { animation: pmZoom .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes pmZoom { from { transform: scale(.9); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.prod-modal__body { padding: 30px 30px 26px; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.prod-modal__body h2 { font-size: 23px; margin: 6px 0 12px; line-height: 1.22; }
.pm-price { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; color: var(--gold-2); line-height: 1; font-variant-numeric: tabular-nums; }
.pm-meta { font-size: 13px; color: var(--muted); margin-top: 7px; }
.pm-meta b { color: var(--gold-2); }
.pm-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 16px 0 18px; }
#pmAdd { margin-top: 4px; }
.prod-modal__body .btn-primary.added { background: var(--green); color: #04210f; }
/* ----- upsell (leve junto) dentro do modal ----- */
.pm-rel { margin-top: 20px; border-top: 1px solid var(--border-2); padding-top: 15px; }
.pm-rel__t { font-size: 13.5px; font-weight: 800; color: var(--gold-2); margin-bottom: 11px; letter-spacing: .02em; }
.pm-rel__wrap { position: relative; }
.pm-rel__list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.pm-rel__list::-webkit-scrollbar { display: none; }
/* fades nas bordas pra indicar que tem mais conteúdo */
.pm-rel__wrap::before, .pm-rel__wrap::after { content: ""; position: absolute; top: 0; bottom: 8px; width: 38px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s; border-radius: 12px; }
.pm-rel__wrap::before { left: 0; background: linear-gradient(90deg, var(--surface, #0f0f0d) 20%, transparent); }
.pm-rel__wrap::after { right: 0; background: linear-gradient(270deg, var(--surface, #0f0f0d) 20%, transparent); }
.pm-rel__wrap.can-prev::before, .pm-rel__wrap.can-next::after { opacity: 1; }
/* setas de navegação */
.pm-rel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,19,16,.85); border: 1px solid rgba(var(--accent-rgb),.5); color: var(--gold-2); cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: opacity .2s, transform .15s, background .15s, color .15s; }
.pm-rel__nav:hover { background: var(--gold-grad); color: #1a1306; transform: translateY(-50%) scale(1.07); }
.pm-rel__nav svg { width: 18px; height: 18px; stroke-width: 2.6; }
.pm-rel__nav--prev { left: -8px; }
.pm-rel__nav--next { right: -8px; }
.pm-rel__nav[hidden] { opacity: 0; pointer-events: none; }
@media (hover: none) { .pm-rel__nav { display: none; } }
.pm-rel__card { flex: 0 0 118px; scroll-snap-align: start; background: #131311; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.pm-rel__card { transition: border-color .2s, transform .2s, box-shadow .2s; }
.pm-rel__card:hover, .pm-rel__card:focus-within { border-color: rgba(var(--accent-rgb),.55); transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px -10px rgba(var(--accent-rgb),.45); z-index: 2; }
.pm-rel__card:active { transform: scale(.98); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.5); } /* feedback ao tocar no celular */
.pm-rel__img { aspect-ratio: 1/1; background: radial-gradient(circle at 50% 35%, #1c1c1a, #0a0a09); overflow: hidden; cursor: pointer; }
.pm-rel__img img { width: 100%; height: 100%; object-fit: cover; }
.pm-rel__bd { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.pm-rel__name { font-size: 11px; line-height: 1.25; min-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.pm-rel__price { font-size: 13px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--gold-2); }
.pm-rel__add { height: 32px; border-radius: 8px; background: var(--gold-grad); color: #1a1306; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; transition: filter .15s; }
.pm-rel__add svg { width: 13px; height: 13px; stroke-width: 3; flex: 0 0 auto; }
.pm-rel__add { transition: filter .15s, transform .12s, box-shadow .15s; }
.pm-rel__add:hover { filter: brightness(1.08); box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb),.6); }
.pm-rel__add:active { transform: scale(.93); }
.pm-rel__add.added { background: var(--green); color: #04210f; animation: addPop .32s ease; }
@keyframes addPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* ----- rodapé de ações do modal (empilhado: finalizar em cima, continuar embaixo) ----- */
.pm-foot { margin-top: 22px; display: flex; flex-direction: column-reverse; gap: 9px; }
.pm-foot .btn-ghost { margin: 0; width: 100%; }
.pm-foot .pm-finalize { margin: 0; width: 100%; }
.pm-finalize[disabled] { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.prod-modal__close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid var(--border-2); color: var(--text); display: grid; place-items: center; }
.prod-modal__close svg { width: 18px; height: 18px; }
/* ----- responsivo: coluna única no mobile/tablet ----- */
@media (max-width: 760px) {
.prod-modal { display: block; grid-template-columns: 1fr; width: min(460px, 94vw); max-height: 92dvh; overflow-y: auto; }
.prod-modal__img { height: 42vh; max-height: 340px; }
.prod-modal__body { overflow: visible; padding: 22px 20px 24px; }
.prod-modal__body h2 { font-size: 21px; }
.pm-price { font-size: 27px; }
}
/* divisor "ou" nas opções de localização do admin */
.cfg-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 11.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }
.cfg-or::before, .cfg-or::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
/* status "loja cadastrada" */
.loc-status { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; }
.loc-status span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.loc-status span svg { width: 18px; height: 18px; }
.loc-status b { font-size: 13.5px; display: block; }
.loc-status small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.35; }
.loc-status.ok { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.35); }
.loc-status.ok span { background: var(--green); color: #04210f; }
.loc-status.ok b { color: var(--green); }
.loc-status.warn { background: rgba(226,120,59,.1); border: 1px solid rgba(226,120,59,.4); }
.loc-status.warn span { background: rgba(226,120,59,.85); color: #1a0f06; }
.loc-status.warn b { color: #ff9a6a; }
/* layout do frete: faixas + localização + mapa ao lado */
.frete-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: start; max-width: 1240px; }
.map-card { grid-column: 1 / -1; display: flex; flex-direction: column; }
.map-card .map-box, .map-card iframe { min-height: 280px; }
.map-box { position: relative; flex: 1; min-height: 420px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2); background: radial-gradient(circle at 50% 40%, #15140f, #0a0a09); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px; }
.map-empty span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--gold-2); margin-bottom: 4px; }
.map-empty span svg { width: 26px; height: 26px; }
.map-empty b { font-size: 14px; color: var(--text); }
.map-empty small { font-size: 12px; color: var(--muted); max-width: 240px; line-height: 1.4; }
.map-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: .15s; }
.map-open:hover { border-color: var(--gold-2); color: var(--gold-2); }
.map-open svg { width: 15px; height: 15px; }
@media (max-width: 1080px) {
.frete-grid { grid-template-columns: 1fr 1fr; }
.map-card { grid-column: 1 / -1; position: static; }
.map-box { min-height: 360px; }
}
@media (max-width: 680px) {
.frete-grid { grid-template-columns: 1fr; }
.map-box { min-height: 300px; }
}
/* ====================== SACOLINHA (DRAWER) ====================== */
.scrim {
position: fixed; inset: 0; z-index: 50;
background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; transition: .25s;
}
.scrim.open { opacity: 1; visibility: visible; }
.bag {
position: fixed; left: 50%; top: 50%; z-index: 60;
width: min(520px, 94vw); max-height: 88dvh;
background: var(--bg-2); border: 1px solid var(--border-2);
border-radius: 20px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow);
transform: translate(-50%, -50%) scale(.94); opacity: 0; visibility: hidden;
transition: transform .26s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.bag.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.bag__items { min-height: 0; }
.bag__head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 18px 14px; border-bottom: 1px solid var(--border);
}
.bag__head h3 { font-size: 17px; font-weight: 600; display:flex; align-items:center; gap:9px; }
.bag__close { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border:1px solid var(--border); }
.bag__close svg { width: 18px; height: 18px; }
.bag__items { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.bag__empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.bag__empty svg { width: 54px; height: 54px; color: var(--border-2); margin: 0 auto 14px; }
.bitem { display: flex; gap: 11px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.bitem__img { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 9px; background: #14100a; overflow: hidden; display:grid; place-items:center; }
.bitem__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bitem__info { flex: 1; min-width: 0; }
.bitem__name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.bitem__price { font-size: 13px; color: var(--gold-2); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.bitem__ctrls { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.qty { display:flex; align-items:center; gap:0; border:1px solid var(--border-2); border-radius:8px; overflow:hidden; }
.qty button { width:26px; height:26px; display:grid; place-items:center; color:var(--gold-2); font-size:15px; font-weight:700; }
.qty button:hover{ background:var(--surface-2); }
.qty span { min-width:26px; text-align:center; font-size:13px; font-weight:600; }
.bitem__rm { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.bitem__rm:hover { color: var(--danger); }
/* ===== STEPPER DE NÚMERO (troca as setinhas brancas nativas) ===== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.num { position: relative; display: block; }
.num > input[type="number"] {
width: 100%; height: 46px; padding: 0 38px 0 14px;
border-radius: 11px; background: var(--surface, #161512);
border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee);
font-size: 15px; transition: border-color .15s;
}
.num > input[type="number"]:focus { outline: none; border-color: var(--gold, #e9b949); box-shadow: 0 0 0 3px rgba(233,185,73,.18); }
.num > input[type="number"]::placeholder { color: var(--muted-2, #6b675e); }
.num__btns { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; gap: 3px; }
.num__btns button { width: 22px; height: 14px; display: grid; place-items: center;
background: var(--surface-2, #1b1712); color: var(--gold-2, #e9b949);
border: 1px solid var(--border, #2a2a2a); border-radius: 5px; cursor: pointer;
font-size: 7px; line-height: 1; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.num__btns button:hover { background: var(--gold, #e9b949); color: #1a1206; border-color: var(--gold, #e9b949); }
.num__btns button:active { transform: scale(.92); }
.frete-band .num { width: 110px; }
.num:has(input:disabled) .num__btns { display: none; }
/* formas de pagamento — card com desconto configurável */
.pag-row { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a);
border-radius: 12px; padding: 2px 12px 12px; margin-top: 10px;
transition: border-color .18s, box-shadow .18s, background-color .18s; }
/* método ligado → marca sutil (só pra saber que está ativo) */
.pag-row--on { border-color: rgba(233,185,73,.28); background: rgba(233,185,73,.03); }
/* card que você está editando AGORA → destaque forte e distinto */
.pag-row:focus-within { border-color: var(--gold, #e9b949);
background: rgba(233,185,73,.08);
box-shadow: 0 0 0 3px rgba(233,185,73,.30), 0 10px 26px rgba(0,0,0,.4);
transform: translateY(-1px); }
/* enquanto edita um, os outros recuam pro fundo */
#pagList:has(.pag-row:focus-within) .pag-row:not(:focus-within) { opacity: .45; filter: saturate(.55); }
.pag-row .toggle-row { background: transparent; border: 0; padding: 10px 0; margin: 0; }
/* cabeçalho recolhível */
.pag-head { display: flex; align-items: center; gap: 10px; padding: 11px 0; cursor: pointer; user-select: none; }
.pag-chev { width: 8px; height: 8px; flex: 0 0 auto; margin-left: 2px;
border-right: 2px solid var(--muted, #9b968c); border-bottom: 2px solid var(--muted, #9b968c);
transform: rotate(-45deg); transition: transform .2s; }
.pag-row:not(.pag-row--collapsed) .pag-chev { transform: rotate(45deg); }
.pag-badge { font-size: 11px; font-weight: 700; color: var(--gold-2, #e9b949);
background: rgba(233,185,73,.12); padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.pag-badge:empty { display: none; }
.pag-row--collapsed .pag-desc { display: none; }
.pag-desc { display: flex; align-items: center; gap: 10px; padding-top: 10px;
border-top: 1px solid var(--border, #2a2a2a); flex-wrap: wrap; }
.pag-desc__lbl { font-size: 12.5px; font-weight: 600; color: var(--muted, #9b968c); }
.pag-desc__sel { flex: 1; min-width: 150px; max-width: 240px; }
.pag-desc__sel:focus { box-shadow: 0 0 0 3px rgba(233,185,73,.18); }
.pag-desc .num { width: 130px; flex: 0 0 auto; }
.pag-desc__val:disabled { opacity: .4; }
/* ações da foto do produto (trocar / ajustar recorte) */
.dz-acts { display: flex; gap: 8px; margin-top: 8px; }
.dz-act { flex: 1 1 auto; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px;
min-height: 40px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2, #1b1712);
border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); text-align: center; line-height: 1.25;
white-space: normal; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.dz-acts .dz-act { width: auto; }
.dz-act:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); background: rgba(233,185,73,.05); }
.dz-act svg { width: 15px; height: 15px; }
/* botão restaurar aparência */
.btn-restore { display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; height: 46px; border-radius: 12px; margin-top: 16px;
background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a);
color: var(--text, #f6f4ee); font-weight: 600; font-size: 14px; cursor: pointer;
transition: border-color .15s, color .15s, background-color .15s; }
.btn-restore:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); background: rgba(233,185,73,.05); }
.btn-restore svg { width: 16px; height: 16px; }
.bag__foot { border-top: 1px solid var(--border); padding: 16px; background: var(--bg-2); }
.bag__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 7px; }
.bag__row b { color: var(--text); }
.bag__total { display:flex; justify-content:space-between; align-items:baseline; margin: 10px 0 14px; }
.bag__total span { font-size:14px; color:var(--muted); }
.bag__total b { font-family:'Space Grotesk',sans-serif; font-size: 26px; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
/* TOTAL destacado (evita confusão de preço) — barra dourada com valor grande */
.bag__total--big { align-items: center; margin: 10px 0 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, rgba(233,185,73,.18), rgba(233,185,73,.05)); border: 1px solid rgba(233,185,73,.5); box-shadow: 0 8px 26px -12px rgba(233,185,73,.4); }
.bag__total--big span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 700; color: var(--text); }
.bag__total--big span small { font-size: 11px; font-weight: 400; color: var(--muted); }
.bag__total--big b { font-size: 34px; line-height: 1; color: var(--gold-2); text-shadow: 0 2px 14px rgba(233,185,73,.3); }
@media (max-width: 420px) { .bag__total--big b { font-size: 29px; } }
.btn-primary {
width: 100%; height: 52px; border-radius: 13px;
background: var(--gold-grad); color: #1a1306;
font-weight: 700; font-size: 15.5px;
display: flex; align-items: center; justify-content: center; gap: 9px;
transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.99); }
.btn-primary:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.btn-primary svg { width: 19px; height: 19px; }
.btn-whats { background: var(--green); color: #04210f; }
.btn-ghost {
width: 100%; height: 46px; border-radius: 12px; margin-top: 8px;
background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
font-weight: 600; font-size: 14px;
}
.btn-ghost:hover { border-color: var(--gold-deep); }
/* ====================== CHECKOUT RÁPIDO ====================== */
.checkout { display: none; }
.checkout.show { display: block; }
.bag__items.hide { display: none; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field label b { color: var(--gold-2); }
.field input {
width: 100%; height: 46px; padding: 0 14px;
border-radius: 11px; background: var(--surface); border: 1px solid var(--border-2);
color: var(--text); font-size: 15px; transition: border-color .15s;
}
.field input:focus { outline: none; border-color: var(--gold); }
/* hora (abre/fecha) — deixa o relógio nativo visível no tema escuro */
.field input[type="time"] { color-scheme: dark; font-variant-numeric: tabular-nums; }
.field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; opacity: .8; }
.field input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input::placeholder { color: var(--muted-2); }
.field--row { display: flex; gap: 10px; }
.field--row .field { flex: 1; min-width: 0; } /* min-width:0 evita o select/input estourar a largura */
/* ----- micro-interação: feedback de preenchimento ----- */
.field input, .field textarea { transition: border-color .18s, box-shadow .18s, background-color .18s; }
.field label { transition: color .18s; }
/* FALTA preencher (âmbar) */
.field--todo input, .field--todo textarea {
border-color: rgba(233,185,73,.5);
box-shadow: inset 3px 0 0 var(--gold);
background-color: rgba(233,185,73,.05);
}
.field--todo label { color: var(--gold-2); }
/* PREENCHIDO (verde) + check no canto */
.field--ok input, .field--ok textarea {
border-color: rgba(37,211,102,.55);
box-shadow: inset 3px 0 0 #25d366;
background-color: rgba(37,211,102,.06);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
padding-right: 38px;
}
.field--ok label { color: #25d366; }
/* realça a escolha de entrega quando é só o que falta */
.delivery--todo .delivery__title { color: var(--gold-2); }
.delivery--todo .delivery__title::after { content: " — escolha uma opção"; font-weight: 400; color: var(--muted-2); }
.delivery--todo #deliveryOpts { box-shadow: 0 0 0 2px rgba(233,185,73,.35); border-radius: 14px; padding: 6px; animation: pulseTodo 1.6s ease-in-out infinite; }
@keyframes pulseTodo { 0%,100% { box-shadow: 0 0 0 2px rgba(233,185,73,.2); } 50% { box-shadow: 0 0 0 3px rgba(233,185,73,.5); } }
/* TUDO PRONTO: o checkout inteiro ganha um tom de sucesso */
.bag.checkout-done .checkout {
border-radius: 14px;
background: linear-gradient(180deg, rgba(37,211,102,.06), transparent 120px);
box-shadow: inset 0 0 0 1px rgba(37,211,102,.18);
padding: 12px; margin: -4px -4px 0;
}
.bag.checkout-done #dadosNote { color: #25d366; font-weight: 600; }
.bag.checkout-done #goReview {
background: linear-gradient(135deg, #2ee06f, #1fa84f);
color: #04210f; border: 0;
}
.delivery { margin: 4px 0 14px; }
.delivery__title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.opt {
display: flex; align-items: center; gap: 11px;
padding: 13px; border-radius: 12px; margin-bottom: 8px;
background: var(--surface); border: 1px solid var(--border-2);
cursor: pointer; transition: .15s;
}
.opt:hover { border-color: var(--gold-deep); }
.opt.sel { border-color: var(--gold); background: rgba(240,184,64,.07); }
.opt__radio { width: 19px; height: 19px; flex:0 0 auto; border-radius: 50%; border: 2px solid var(--border-2); display:grid; place-items:center; }
.opt.sel .opt__radio { border-color: var(--gold); }
.opt.sel .opt__radio::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--gold-grad); }
.opt__ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(233,185,73,.12); color: var(--gold-2, #e9b949); }
.opt__ico svg { width: 18px; height: 18px; }
.ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.cfg-card--frete .field label { min-height: 32px; display: flex; align-items: flex-end; line-height: 1.25; }
.ff-hint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.frreg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-bottom: 12px; }
.frreg-grid .field label { font-size: 11px; min-height: 0; white-space: nowrap; }
.frreg-grid input { text-align: center; padding: 0 4px; }
@media (max-width: 640px) { .ff-grid { grid-template-columns: 1fr; } }
.opt__txt { flex: 1; }
.opt__txt b { font-size: 14px; display:block; }
.opt__txt small { font-size: 12px; color: var(--muted); }
.opt__price { font-size: 14px; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.opt.disabled { opacity: .42; pointer-events: none; }
/* cards de pagamento em grade — 2 colunas quando cabe, 1 no celular */
#deliveryOpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
#deliveryOpts .opt { margin-bottom: 0; }
.hint { font-size: 12px; color: var(--muted); display:flex; gap:7px; align-items:flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface); border:1px solid var(--border); margin-bottom:12px; }
.hint svg { width:15px; height:15px; flex:0 0 auto; color: var(--gold-2); margin-top:1px; }
.hint.warn { border-color: rgba(226,87,59,.4); background: rgba(226,87,59,.08); }
.hint.warn svg { color: var(--danger); }
/* ====================== REVISÃO DO PEDIDO ====================== */
.review { display: none; }
.review.show { display: block; }
/* mobile: forma de pagamento em 1 coluna (texto não fica espremido) */
@media (max-width: 480px) { #deliveryOpts { grid-template-columns: 1fr; } }
/* micro-interações na revisão (feedback ao passar o mouse / tocar) */
.rev-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 13px 14px; margin-bottom: 11px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.rev-sec:hover, .rev-sec:focus-within, .rev-sec.rev-focus { border-color: rgba(233,185,73,.55); box-shadow: 0 0 0 1px rgba(233,185,73,.25), 0 10px 26px -12px rgba(233,185,73,.3); transform: translateY(-2px) scale(1.01); }
.btn-whats { transition: filter .15s, box-shadow .18s, transform .12s; }
.btn-whats:hover, .btn-whats:active { box-shadow: 0 0 0 3px rgba(37,211,102,.3), 0 12px 30px -8px rgba(37,211,102,.5); transform: translateY(-1px); }
.rev-prod { transition: background .15s, transform .12s; }
.rev-prod:hover { background: rgba(233,185,73,.05); transform: scale(1.01); }
/* PIX copia-e-cola + troco na revisão */
.rv-pix { margin-top: 11px; padding: 11px 12px; border: 1px solid rgba(37,211,102,.35); border-radius: 11px; background: rgba(37,211,102,.06); }
.rv-pix--off { border-color: var(--border-2); background: var(--surface-2); }
.rv-pix__h { font-weight: 800; font-size: 13px; color: #25d366; margin-bottom: 8px; }
.rv-pix__code { width: 100%; box-sizing: border-box; min-height: 64px; resize: none; font-family: 'Space Grotesk', monospace; font-size: 11px; line-height: 1.35; padding: 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); word-break: break-all; }
.rv-pix__copy { margin-top: 8px; width: 100%; height: 40px; border-radius: 9px; background: var(--green); color: #04210f; font-weight: 800; font-size: 13px; cursor: pointer; border: 0; transition: filter .15s, transform .12s; }
.rv-pix__copy:hover { filter: brightness(1.07); } .rv-pix__copy:active { transform: scale(.97); }
.rv-pix small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.rv-troco { margin-top: 11px; }
.rv-troco label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.rv-troco label small { color: var(--muted-2); }
.rv-troco input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; }
.rv-troco input:focus { outline: none; border-color: var(--gold); }
.rev-sec h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.rev-sec h4 svg { width: 14px; height: 14px; color: var(--gold-2); }
.rev-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.rev-item span { color: var(--muted); }
.rev-item b { font-variant-numeric: tabular-nums; }
.rev-addr { font-size: 13.5px; line-height: 1.45; }
.rev-edit { font-size: 12px; color: var(--gold-2); margin-left: auto; font-weight: 600; }
.rev-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--border-2); }
.rev-total span { font-size: 13px; color: var(--muted); }
.rev-total b { font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.btn-geo { width: 100%; height: 44px; border-radius: 11px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--gold-deep); color: var(--gold-2); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-geo svg { width: 17px; height: 17px; }
.btn-geo:hover { background: rgba(233,185,73,.08); }
/* ====================== ADMIN: FRETE ====================== */
.frete-band { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; }
.frete-band .fb-km { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.frete-band input { width: 90px; height: 38px; padding: 0 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; }
.frete-band input:focus { outline: none; border-color: var(--gold); }
.frete-band .fb-rm { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); }
.frete-band .fb-rm:hover { color: var(--danger); border-color: var(--danger); }
.frete-band .fb-rm svg { width: 15px; height: 15px; }
.fb-add { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--gold-deep); color: var(--gold-2); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.fb-add svg { width: 15px; height: 15px; }
/* ====================== TOAST ====================== */
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 80px);
z-index: 80; background: var(--surface-2); border: 1px solid var(--gold-deep);
color: var(--text); padding: 13px 20px; border-radius: 13px;
font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
display: flex; align-items: center; gap: 10px; opacity: 0; transition: .3s;
max-width: 90vw;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--green); flex:0 0 auto; }
/* ====================== FLOATING WHATS (off-hours) ====================== */
.fab {
position: fixed; right: 18px; bottom: 18px; z-index: 45;
height: 54px; padding: 0 18px 0 16px; border-radius: 999px;
background: var(--green); color: #04210f; font-weight: 700; font-size: 14px;
display: flex; align-items: center; gap: 9px;
box-shadow: 0 12px 28px -8px rgba(37,211,102,.5);
}
.fab svg { width: 22px; height: 22px; }
/* engrenagem do painel (acesso do dono): discreta pra não competir com logo/sacola */
#adminLink { opacity: .4; transform: scale(.82); transition: opacity .15s; }
#adminLink:hover { opacity: 1; }
@media (max-width: 640px) { #adminLink { display: none; } }
/* no celular o botão vira só um balão redondo com o logo (não compete com a interface) */
@media (max-width: 640px) {
.fab { width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; font-size: 0; right: 14px; bottom: 14px; }
.fab svg { width: 26px; height: 26px; }
}
/* ====================== ADMIN ====================== */
.admin-bg { background: var(--bg); min-height: 100dvh; }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px; padding: 32px 28px; }
.login-card .logo { justify-content: center; margin-bottom: 6px; }
.login-card h2 { text-align: center; font-size: 19px; margin: 14px 0 4px; }
.login-card p { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.login-err { color: var(--danger); font-size: 12.5px; margin-top: -4px; margin-bottom: 12px; display: none; }
.login-err.show { display: block; }
.login-hint { text-align:center; font-size:11.5px; color:var(--muted-2); margin-top:16px; }
.login-forgot { display:block; text-align:center; font-size:13px; color:var(--muted); margin-top:18px; transition:.15s; }
.login-forgot:hover { color:var(--gold-2); }
.adm-header { position: sticky; top:0; z-index:30; height: var(--header-h); display:flex; align-items:center; gap:14px; padding: 0 clamp(14px,4vw,28px); background: rgba(13,12,10,.85); backdrop-filter: blur(12px); border-bottom:1px solid var(--border); }
.adm-header .logo__name { font-size:17px; }
.adm-tag { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--gold-2); border:1px solid var(--border-2); padding:4px 9px; border-radius:999px; }
.adm-logout { font-size:13px; color:var(--muted); padding:8px 14px; border-radius:10px; border:1px solid var(--border-2); }
.adm-logout:hover{ color:var(--danger); border-color:var(--danger); }
.adm-main { max-width: 1100px; margin: 0 auto; padding: 24px clamp(14px,4vw,28px) 80px; }
.adm-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.stat { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.stat b { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; display:block; }
.stat b.gold { color: var(--gold-2); }
.stat b.green { color: var(--green); }
.stat b.red { color: var(--danger); }
.stat span { font-size:12.5px; color:var(--muted); }
.adm-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.adm-bar h2 { font-size:19px; }
.btn-add { height:44px; padding:0 18px; border-radius:11px; background:var(--gold-grad); color:#1a1306; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.btn-add svg{ width:18px; height:18px; }
.adm-table { width:100%; border-collapse: collapse; background: var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.adm-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:13px 14px; border-bottom:1px solid var(--border); font-weight:600; }
.adm-table td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr.off td { opacity:.5; }
.t-prod { display:flex; align-items:center; gap:11px; }
.t-prod img { width:42px; height:42px; border-radius:9px; background:#14100a; object-fit:contain; padding:4px; }
.t-prod b { font-size:13.5px; }
.t-prod small { font-size:11.5px; color:var(--muted); display:block; }
.t-price { font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--gold-2); font-variant-numeric:tabular-nums; }
.t-actions { display:flex; gap:8px; justify-content:flex-end; }
.icon-btn { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border-2); }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ border-color:var(--gold-deep); }
.icon-btn.del:hover{ border-color:var(--danger); color:var(--danger); }
/* switch estoque */
.switch { position:relative; display:inline-block; width:46px; height:26px; flex:0 0 46px; box-sizing:border-box; cursor:pointer; }
.switch input { display:none; }
.switch .track { position:absolute; inset:0; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-2); transition:.2s; }
.switch .thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:.2s; }
.switch input:checked + .track { background:rgba(37,211,102,.25); border-color:var(--green); }
.switch input:checked + .track + .thumb { left:23px; background:var(--green); }
.stk-label { font-size:12px; color:var(--muted); margin-left:8px; }
.stk-label.on { color:var(--green); }
/* modal admin */
.modal-scrim { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:.2s; }
.modal-scrim.open { opacity:1; visibility:visible; }
.modal { width:100%; max-width:440px; background:var(--bg-2); border:1px solid var(--border-2); border-radius:18px; padding:24px; max-height:90dvh; overflow-y:auto; transform:scale(.96); transition:.2s; }
.modal-scrim.open .modal { transform:scale(1); }
.modal h3 { font-size:18px; margin-bottom:18px; }
/* ====================== CENTRAL DE PEDIDOS (consulta) ====================== */
@property --cv-ang { syntax: ""; initial-value: 0deg; inherits: false; }
.reserved {
--cv: #e9b949; --cv-rgb: 233,185,73; --cv-ink: #1a1306;
position: relative; isolation: isolate;
margin-top: 30px; display: flex; flex-direction: column; gap: 14px;
padding: 22px; border-radius: var(--radius);
background:
radial-gradient(120% 140% at 85% -10%, rgba(var(--cv-rgb),.16), transparent 55%),
linear-gradient(155deg, rgba(var(--cv-rgb),.10), rgba(var(--cv-rgb),.02) 60%, transparent), var(--surface);
border: 1px solid transparent;
box-shadow: 0 0 0 1px rgba(var(--cv-rgb),.30), 0 20px 55px -24px rgba(var(--cv-rgb),.55);
overflow: hidden;
}
.reserved > * { position: relative; z-index: 1; }
/* borda animada girando (destaque elegante) */
.reserved::before {
content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px;
background: conic-gradient(from var(--cv-ang),
rgba(var(--cv-rgb),0) 0deg, rgba(var(--cv-rgb),.95) 70deg, rgba(var(--cv-rgb),0) 150deg,
rgba(var(--cv-rgb),0) 180deg, rgba(var(--cv-rgb),.95) 250deg, rgba(var(--cv-rgb),0) 330deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: cvSpin 7s linear infinite;
}
/* brilho suave que pulsa por trás */
.reserved::after {
content: ""; position: absolute; inset: -40% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none;
background: radial-gradient(60% 100% at 50% 0%, rgba(var(--cv-rgb),.18), transparent 70%);
animation: cvGlow 5s ease-in-out infinite;
}
@keyframes cvSpin { to { --cv-ang: 360deg; } }
@keyframes cvGlow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.reserved__top { display: flex; align-items: center; gap: 14px; }
.reserved__ico { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
background: linear-gradient(135deg, rgba(var(--cv-rgb),.28), rgba(var(--cv-rgb),.08)); border: 1px solid rgba(var(--cv-rgb),.45); color: var(--cv); }
.reserved__ico svg { width: 22px; height: 22px; }
.reserved__txt { flex: 1; min-width: 0; }
.reserved__txt b { font-size: 16px; display: block; }
.reserved__txt small { font-size: 12.5px; color: var(--muted); }
.reserved textarea { width: 100%; min-height: 52px; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.reserved__row { display: flex; gap: 12px; align-items: center; }
.reserved__row input { flex: 1; min-width: 0; height: 54px; padding: 0 16px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 15px; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.reserved textarea:focus, .reserved__row input:focus { outline: none; border-color: var(--cv); box-shadow: 0 0 0 3px rgba(var(--cv-rgb),.20); }
.reserved .cv-filled { border-color: rgba(var(--cv-rgb),.65); background-color: rgba(var(--cv-rgb),.06); }
/* foto do consultor — grande, ao lado do botão */
.reserved__cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.reserved__av { position: relative; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center; overflow: visible;
background: var(--surface-2); border: 2px solid var(--cv); box-shadow: 0 0 0 4px rgba(var(--cv-rgb),.16); }
.reserved__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.reserved__av--ini { color: var(--cv-ink); background: var(--cv); font-weight: 800; font-size: 22px; }
.reserved__av--on::after { content: ""; position: absolute; right: 1px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
background: #2ee06f; border: 2.5px solid var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.3); animation: cvPulse 2s ease-in-out infinite; }
@keyframes cvPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 0 0 rgba(46,224,111,.5); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 0 6px rgba(46,224,111,0); } }
.reserved__btn { flex: 0 0 auto; height: 54px; padding: 0 20px; border-radius: 13px;
background: linear-gradient(135deg, var(--cv), color-mix(in srgb, var(--cv) 62%, #000));
border: none; color: var(--cv-ink); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 8px 22px -8px rgba(var(--cv-rgb),.7); transition: filter .15s, transform .1s, box-shadow .15s; }
.reserved__btn svg { width: 18px; height: 18px; }
.reserved__btn:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -8px rgba(var(--cv-rgb),.85); }
.reserved__btn:active { transform: scale(.98); }
@media (max-width: 560px) {
.reserved__row { flex-direction: column; align-items: stretch; }
.reserved__cta { width: 100%; }
.reserved__btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.reserved::before, .reserved::after, .reserved__av--on::after { animation: none; }
}
/* mini preview da cor do atendimento consultivo (painel) */
.cv-mini { --cv: #7c5cff; --cv-rgb: 124,92,255; --cv-ink: #fff;
display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 14px;
box-sizing: border-box; max-width: 100%; overflow: hidden;
background: linear-gradient(155deg, rgba(var(--cv-rgb),.12), transparent 60%), var(--surface-2);
box-shadow: inset 0 0 0 1px rgba(var(--cv-rgb),.30); }
.cv-mini__av { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
background: var(--cv); color: var(--cv-ink); font-weight: 800; font-size: 18px; border: 2px solid var(--cv); box-shadow: 0 0 0 3px rgba(var(--cv-rgb),.18); }
.cv-mini__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cv-mini__btn { flex: 1; min-width: 0; box-sizing: border-box; height: 46px; padding: 0 12px; border: none; border-radius: 11px; font-weight: 700; font-size: 14px; line-height: 1.15; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
background: linear-gradient(135deg, var(--cv), color-mix(in srgb, var(--cv) 62%, #000)); color: var(--cv-ink); cursor: default; }
.cv-mini__btn svg { width: 17px; height: 17px; }
/* ícone da tela de sucesso */
.suc-ico { width: 72px; height: 72px; margin: 10px auto 0; border-radius: 50%; display: grid; place-items: center; background: rgba(37,211,102,.14); border: 1px solid rgba(37,211,102,.4); color: var(--green); animation: sucPop .4s cubic-bezier(.34,1.56,.64,1) both; }
.suc-ico svg { width: 36px; height: 36px; stroke-width: 2.6; }
@keyframes sucPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* ====================== ADMIN: ABAS ====================== */
.adm-tabs { display: flex; gap: 6px; padding: 0 clamp(14px,4vw,28px); max-width: 1100px; margin: 0 auto; border-bottom: 1px solid var(--border); }
.adm-tab { padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; }
.adm-tab svg { width: 17px; height: 17px; }
.adm-tab:hover { color: var(--text); }
.adm-tab.active { color: var(--gold-2); border-bottom-color: var(--gold); }
.adm-panel { display: none; }
.adm-panel.active { display: block; }
/* dropzone */
.dropzone { border: 2px dashed var(--border-2); border-radius: 13px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; background: var(--surface); }
.dropzone:hover, .dropzone.drag { border-color: var(--gold); background: rgba(233,185,73,.05); color: var(--gold-2); }
/* dropzone com imagem definida: mostra a foto atual de fundo + overlay pra ler o texto */
.dropzone.has-img { position: relative; border-style: solid; border-color: var(--gold); background-size: cover; background-position: center; color: #fff; overflow: hidden; min-height: 120px; }
.dropzone.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.25), rgba(8,8,8,.72)); }
.dropzone.has-img > * { position: relative; z-index: 1; }
.dropzone.has-img b { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dropzone svg { width: 30px; height: 30px; margin: 0 auto 8px; color: var(--gold-2); }
.dropzone b { color: var(--text); }
.dropzone small { display: block; font-size: 11.5px; margin-top: 4px; }
.dz-preview { width: 84px; height: 84px; border-radius: 12px; object-fit: contain; background: #0a0a09; border: 1px solid var(--border-2); margin: 0 auto 10px; padding: 6px; }
/* com foto definida: a imagem fica grande e clara, e o placeholder some */
.dropzone.has-foto { border-style: solid; border-color: var(--gold); }
.dropzone.has-foto #dzIcon, .dropzone.has-foto > b, .dropzone.has-foto > small { display: none; }
.dropzone.has-foto .dz-preview { width: 100%; max-width: 280px; height: 200px; object-fit: contain; margin: 0 auto; padding: 8px; }
/* importar planilha */
.import-card { background: var(--surface); border: 1px dashed var(--border-2); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.import-card .reserved__ico { color: var(--green); }
.import-card b { font-size: 14px; }
.import-card small { font-size: 12px; color: var(--muted); display: block; }
/* ====================== ADMIN: PEDIDOS ====================== */
/* ----- KPIs do topo da aba pedidos ----- */
.ped-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ped-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ped-kpi__n { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--gold-2); line-height: 1; font-variant-numeric: tabular-nums; }
.ped-kpi__l { font-size: 11.5px; color: var(--muted); }
.ped-kpi--env .ped-kpi__n { color: var(--green); }
.ped-kpi--fin .ped-kpi__n { color: #9b968c; }
.ped-kpi--urg { border-color: rgba(229,57,53,.5); background: rgba(229,57,53,.08); }
.ped-kpi--urg .ped-kpi__n { color: #ff6b66; }
.ped-corcfg { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ped-corcfg .demo-cor { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-2); cursor: pointer; padding: 0; display: inline-block; }
.ped-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
/* card: corpo tingido pela ETAPA (--st-rgb) · faixa lateral pela cidade/fora (--ped-rgb) */
.ped-card { cursor: pointer; background: linear-gradient(160deg, rgba(var(--st-rgb, 233,185,73), .16), rgba(var(--st-rgb, 233,185,73), .03) 60%), var(--surface); border: 1px solid rgba(var(--st-rgb, 233,185,73), .40); border-top: 3px solid rgb(var(--st-rgb, 233,185,73)); border-left: 5px solid rgb(var(--ped-rgb, 233,185,73)); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.ped-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ped-card--finalizado { opacity: .6; filter: grayscale(.3); }
.ped-card--urg { border-color: rgba(229,57,53,.6) !important; border-top-color: #e53935 !important; box-shadow: 0 0 0 1px rgba(229,57,53,.3) inset, 0 0 18px rgba(229,57,53,.15); }
.ped-card .ped-total { color: rgb(var(--st-rgb, 233,185,73)); }
.ped-urg-bar { background: rgba(229,57,53,.14); border: 1px solid rgba(229,57,53,.4); color: #ff8a85; font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 9px; }
.ped-urg-tag { display: inline-block; background: #e53935; color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .3px; vertical-align: middle; }
.ped-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; }
.ped-origem { color: var(--muted); }
.ped-modo { font-weight: 700; padding: 2px 9px; border-radius: 999px; color: rgb(var(--ped-rgb,233,185,73)); background: rgba(var(--ped-rgb,233,185,73),.13); border: 1px solid rgba(var(--ped-rgb,233,185,73),.3); }
.ped-id { font-family: 'Space Grotesk', sans-serif; color: var(--gold-2); font-weight: 700; }
.ped-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ped-fin { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--gold); color: #1a1404; font-weight: 700; font-size: 13px; border: none; cursor: pointer; }
.ped-undo { height: 38px; padding: 0 12px; border-radius: 10px; background: transparent; color: #ff8a85; font-weight: 600; font-size: 12px; border: 1px solid rgba(229,57,53,.45); cursor: pointer; }
.ped-undo:hover { background: rgba(229,57,53,.12); }
.ped-reabrir { height: 36px; padding: 0 14px; border-radius: 10px; background: transparent; color: var(--gold-2); font-weight: 600; font-size: 12px; border: 1px solid var(--border-2); cursor: pointer; }
/* ----- tabela (com recolher/expandir) ----- */
.ped-grid-host { display: block; width: 100%; }
.ped-tabela-card { width: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ped-tabela-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--surface-2, #1b1712); border: 0; color: var(--text); font-size: 14px; cursor: pointer; }
.ped-tabela-head b { color: var(--gold-2); }
.ped-tabela-chev { transition: transform .2s; color: var(--muted); font-size: 14px; }
.ped-tabela-card.open .ped-tabela-chev { transform: rotate(180deg); }
.ped-tabela-body { display: none; }
.ped-tabela-card.open .ped-tabela-body { display: block; }
.ped-tabela-wrap { overflow-x: auto; width: 100%; }
.ped-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.ped-tabela th { text-align: left; padding: 12px; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border-2); background: var(--surface); white-space: nowrap; }
.ped-tabela td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* status do pedido = bolinha colorida + borda esquerda discreta (sem faixas berrantes) */
.ped-tabela td:first-child { border-left: 3px solid rgba(var(--st-rgb,233,185,73), .9); white-space: nowrap; }
.ped-tabela .ped-id { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
.ped-tabela .ped-id::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--st-rgb,233,185,73)); box-shadow: 0 0 8px rgba(var(--st-rgb,233,185,73), .7); }
.ped-tabela tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.ped-tabela td:nth-child(2), .ped-tabela td:nth-child(5) { white-space: nowrap; }
.ped-tr { cursor: pointer; }
.ped-tr td { transition: background .12s; }
.ped-tr:hover td { background: rgba(var(--st-rgb,233,185,73), .1); }
.ped-tr-urg td { background: rgba(229,57,53,.08); }
.ped-tr-urg:hover td { background: rgba(229,57,53,.16); }
/* ----- modal de pedido (detalhe/edição) ----- */
.modal--ped { max-width: 640px; width: 92vw; }
.pedm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); border-top: 3px solid rgb(var(--st-rgb,233,185,73)); margin: -4px -4px 0; padding: 4px 4px 14px; }
.pedm-wa { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-radius: 11px; background: rgba(37,211,102,.13); border: 1px solid rgba(37,211,102,.4); color: #25d366; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; font-family: inherit; width: 100%; justify-content: center; }
.pedm-wa:hover { background: rgba(37,211,102,.22); }
.ped-itrow--lock { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-radius: 10px; margin-bottom: 7px; font-size: 13px; }
.ped-itrow--lock .pil-nome { flex: 1; color: var(--text); }
.ped-itrow--lock .pil-qtd { color: var(--muted); }
.ped-itrow--lock .pil-preco { color: var(--gold-2); font-weight: 700; }
.modal--undo { max-width: 460px; width: 92vw; }
/* confirmação no estilo do sistema */
.nc-modal { max-width: 440px; width: 92vw; text-align: center; }
.nc-ico { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.nc-modal h3 { font-size: 18px; margin: 0 0 8px; }
.nc-modal p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.nc-modal p b { color: var(--text); }
.nc-acts { display: flex; gap: 10px; justify-content: center; }
.nc-acts .btn-ghost, .nc-acts .btn-primary { width: auto; height: 44px; margin-top: 0; padding: 0 18px; white-space: nowrap; }
.btn-danger { background: #e53935 !important; border-color: #e53935 !important; color: #fff !important; }
/* botão "Falar" na tabela de leads — abre a conversa interna (não WhatsApp) */
.lead-falar { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.4); color: #25d366; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; transition: background .12s; }
.lead-falar:hover { background: rgba(37,211,102,.22); }
.lead-falar svg { width: 16px; height: 16px; }
.lead-acts { display: inline-flex; gap: 8px; justify-content: flex-end; }
.lead-hist { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; transition: color .12s, border-color .12s; }
.lead-hist:hover { color: var(--gold-2); border-color: var(--gold); }
/* checklist de expedição (pedido criado por agente IA) */
.ped-exped { background: rgba(77,107,254,.10); border: 1px solid rgba(77,107,254,.32); border-radius: 11px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ped-exped__h { font-size: 12px; color: #9fb0ff; margin-bottom: 2px; }
.ped-exped__h b { color: #c3cdff; }
.ped-step { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-radius: 9px; padding: 8px 10px; color: var(--muted); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: all .12s; }
.ped-step:hover { border-color: rgba(77,107,254,.5); color: var(--text); }
.ped-step__n { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted); }
.ped-step.on { color: #c3cdff; border-color: rgba(77,107,254,.55); background: rgba(77,107,254,.14); }
.ped-step.on .ped-step__n { background: #4d6bfe; border-color: #4d6bfe; color: #fff; }
/* modal histórico do lead */
.modal--hist { max-width: 560px; width: 92vw; }
.hist-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; max-height: 56vh; overflow-y: auto; }
.hist-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-left: 4px solid rgb(var(--st-rgb,233,185,73)); border-radius: 11px; padding: 11px 13px; cursor: pointer; font-family: inherit; transition: border-color .12s; }
.hist-row:hover { border-color: rgb(var(--st-rgb,233,185,73)); }
.hist-row__top { display: flex; align-items: center; gap: 9px; }
.hist-row__top b { color: var(--gold-2); font-family: 'Space Grotesk', sans-serif; }
.hist-row__dt { font-size: 12px; color: var(--muted); grid-column: 1; }
.hist-row__it { grid-column: 1; font-size: 13px; color: var(--text); }
.hist-row__tot { grid-column: 2; grid-row: 1 / 4; align-self: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--gold-2); }
/* entregadores: ranking gamificado */
.ent-ranking { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ent-rk { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: border-color .12s; }
.ent-rk:hover { border-color: var(--gold); }
.ent-rk:nth-child(1) { border-color: rgba(233,185,73,.5); background: linear-gradient(90deg, rgba(233,185,73,.12), transparent 60%); }
.ent-rk__pos { font-size: 20px; width: 34px; text-align: center; flex: 0 0 auto; }
.ent-rk__nome { flex: 1; font-weight: 700; font-size: 14px; }
.ent-rk__n { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 20px; color: var(--gold-2); display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ent-rk__n small { font-size: 10px; color: var(--muted); font-weight: 500; }
.ent-ban { background: #e53935; color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.ent-row-ban { opacity: .6; }
/* perfil do lead (CRM) */
.leadm-h { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.lead-tr { cursor: pointer; transition: background .12s; }
.lead-tr:hover td { background: rgba(233,185,73,.07); }
.lead-tr:hover td:first-child b { color: var(--gold-2); }
/* ===== calendário próprio (NithiDate) — estilo do sistema ===== */
.nd-input { cursor: pointer; }
.nd-input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; filter: invert(.85) sepia(.4) saturate(3) hue-rotate(2deg); }
.ndp { position: absolute; z-index: 4000; width: 250px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 14px; padding: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.55); color: var(--text, #f6f4ee); }
.ndp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ndp-head b { font-size: 14px; text-transform: capitalize; color: var(--gold-2, #e9b949); }
.ndp-nav { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; }
.ndp-nav:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
.ndp-dow, .ndp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ndp-dow { margin-bottom: 4px; }
.ndp-dow span { text-align: center; font-size: 11px; color: var(--muted, #9b968c); font-weight: 600; padding: 4px 0; }
.ndp-d { height: 32px; border: 0; background: none; border-radius: 8px; color: var(--text, #f6f4ee); font-size: 13px; cursor: pointer; font-family: inherit; transition: background .1s; }
.ndp-d:hover { background: var(--surface-2, #1b1712); }
.ndp-d--off { background: none; cursor: default; }
.ndp-d.hoje { box-shadow: inset 0 0 0 1px var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
.ndp-d.sel { background: var(--gold, #e9b949); color: #1a1306; font-weight: 700; }
.ndp-foot { display: flex; justify-content: space-between; margin-top: 10px; border-top: 1px solid var(--border, #2a2a2a); padding-top: 9px; }
.ndp-act { background: none; border: 0; color: var(--muted, #9b968c); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: 7px; }
.ndp-act:hover { color: var(--text); }
.ndp-act--gold { color: var(--gold-2, #e9b949); }
/* ===== HERO 2: mockup de celular com vídeo ===== */
.hero-mock { position: relative; overflow: hidden; width: 100%; min-height: 460px; display: flex; flex-direction: column; align-items: center; padding: 22px 20px 32px; color: #fff; background: #14101a; }
.hero-mock .hero__bg-video, .hero-mock .hero__bg-yt { position: absolute; inset: 0; z-index: 0; }
.hero-mock__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,8,.55), rgba(8,8,8,.35) 40%, rgba(8,8,8,.65)); pointer-events: none; }
.hero-mock__logo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.hero-mock__logo .logo__crown { width: 30px; height: 30px; }
.hero-mock__logo .logo__name { font-size: 17px; letter-spacing: .14em; }
.hero-mock__logo .logo__sub { font-size: 8.5px; letter-spacing: .34em; }
.hero-mock__row { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.hero-mock__txt { flex: 1; min-width: 0; }
.hero-mock__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.hero-mock__txt h1 { font-size: clamp(26px, 4vw, 48px); line-height: 1.08; margin: 14px 0 10px; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.hero-mock__txt p { font-size: clamp(14px, 1.4vw, 17px); color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 460px; }
.hero-mock__cta { margin: 0; }
/* o celular (estilo realista) */
.hero-mock__phone { position: relative; flex: 0 0 auto; background: linear-gradient(145deg, #3c3c44, #141418); border: 1px solid #050507; border-radius: 46px; padding: 9px; box-shadow: 0 40px 70px -25px rgba(0,0,0,.85), 0 0 0 2px rgba(255,255,255,.06) inset, 0 2px 6px rgba(255,255,255,.12) inset; }
.hero-mock__phone.phone--v { width: clamp(210px, 24vw, 310px); aspect-ratio: 9 / 19.5; }
.hero-mock__phone.phone--h { width: clamp(360px, 46vw, 600px); aspect-ratio: 19.5 / 9; border-radius: 36px; }
/* botões laterais */
.hero-mock__phone::before { content: ""; position: absolute; right: -2px; top: 28%; width: 3px; height: 64px; border-radius: 2px; background: #2a2a30; }
.hero-mock__phone::after { content: ""; position: absolute; left: -2px; top: 22%; width: 3px; height: 40px; border-radius: 2px; background: #2a2a30; box-shadow: 0 56px 0 #2a2a30, 0 -22px 0 #2a2a30; }
.phone--h .hero-mock__phone::before, .phone--h .hero-mock__phone::after { display: none; }
/* ilha dinâmica (pílula) */
.phone-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 32%; max-width: 110px; height: 26px; background: #000; border-radius: 999px; z-index: 4; }
.phone--h .phone-notch { top: 50%; left: 16px; transform: translateY(-50%); width: 26px; height: 30%; max-width: none; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #7a34c9, #4a1c7a 70%, #2a0f4a); }
.phone--h .phone-screen { border-radius: 28px; }
.phone-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* play decorativo quando não há vídeo (estado pôster) */
.phone-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: rgba(255,255,255,.85); pointer-events: none; }
.phone-play svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.phone-sound, .hero-bgsound { position: absolute; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.phone-sound { bottom: 12px; right: 12px; }
.hero-bgsound { bottom: 16px; right: 16px; z-index: 3; }
.phone-sound.on, .hero-bgsound.on { background: var(--gold, #e9b949); color: #1a1306; border-color: var(--gold); }
@media (max-width: 860px) {
.hero-mock__row { flex-direction: column; text-align: center; gap: 22px; }
.hero-mock__txt p { margin-left: auto; margin-right: auto; }
.hero-mock__cta { margin: 0 auto; }
.hero-mock__phone.phone--h { width: min(92vw, 520px); }
}
/* hero por código personalizado (sandbox em iframe) */
.hero-custom { width: 100%; }
.hero-iframe { width: 100%; border: 0; display: block; background: transparent; }
/* ===== calendário & promoções ===== */
.cal-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal-card, .cal-side .cfg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head b { font-size: 16px; text-transform: capitalize; color: var(--gold-2); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; }
.cal-views { margin-bottom: 12px; }
.cal-views button { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.cal-views button.on { background: var(--gold-grad); color: #1a1306; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
/* visão SEMANA: células maiores mostrando os nomes */
.cal-grid--week .cal-d { min-height: 130px; justify-content: flex-start; gap: 6px; }
.cal-d__names { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.cal-d__names span { font-size: 10.5px; line-height: 1.2; background: rgba(255,255,255,.06); border-radius: 5px; padding: 2px 5px; white-space: normal; }
/* visão DIA: bloco único */
.cal-grid--day { display: block; }
.cal-day { display: flex; gap: 16px; align-items: flex-start; background: var(--surface-2); border-radius: 14px; padding: 18px; }
.cal-day__num { font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 700; line-height: 1; color: var(--gold-2); flex: 0 0 auto; }
.cal-day__num.hoje { color: #fff; }
.cal-day__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-day__item { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.cal-day__item b { color: var(--gold-2); margin-right: 6px; }
.cal-day__item em { color: var(--muted); font-style: normal; font-size: 11px; margin-left: 6px; }
.cal-day__item.cal-fer--nacional b { color: #ff8a85; }
.cal-d { position: relative; min-height: 52px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid transparent; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; overflow: hidden; }
.cal-d > span, .cal-d > .cal-dots { position: relative; z-index: 1; }
.cal-band { position: absolute; inset: 0; z-index: 0; }
.cal-d.promo-ini .cal-band { left: 4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cal-d.promo-fim .cal-band { right: 4px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.cal-d.promo-ini { box-shadow: inset 3px 0 0 0 rgba(233,185,73,.9); }
.cal-d.promo-fim { box-shadow: inset -3px 0 0 0 rgba(233,185,73,.9); }
.cal-d.promo-ini.promo-fim { box-shadow: inset 3px 0 0 0 rgba(233,185,73,.9), inset -3px 0 0 0 rgba(233,185,73,.9); }
.cal-d.promo-ini::after { content: "início"; position: absolute; top: 3px; right: 4px; font-size: 8px; color: var(--gold-2); z-index: 1; }
.cal-d.promo-fim::after { content: "fim"; position: absolute; top: 3px; right: 4px; font-size: 8px; color: var(--gold-2); z-index: 1; }
.cal-d.promo-ini.promo-fim::after { content: "1 dia"; }
.cal-d--off { background: none; }
.cal-d.hoje { border-color: var(--gold); color: var(--gold-2); }
.cal-d.tem-promo { cursor: pointer; }
.cal-d.tem-promo:hover { border-color: rgba(233,185,73,.5); }
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.cal-legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.cal-feriados { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.cal-fer { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 8px; border-radius: 9px; background: var(--surface-2, #1b1712); border-left: 3px solid #e35d4f; }
.cal-fer--municipal, .cal-fer--estadual { border-left-color: #4d6bfe; }
.cal-fer b { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.cal-fer span { flex: 1; }
.cal-fer em { font-size: 10px; color: var(--muted); text-transform: uppercase; font-style: normal; }
.cal-fer__del { width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.cal-fer__del:hover { color: #ff8a85; background: rgba(229,57,53,.12); }
.cal-addfer { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.cal-addfer > b { font-size: 12px; color: var(--muted); display: block; margin-bottom: 8px; }
.cal-addfer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cal-addfer input, .cal-addfer select { width: 100%; height: 38px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text); padding: 0 10px; font-size: 13px; }
.cal-addfer input[type="text"] { margin-bottom: 0; }
.promo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.promo-card { background: linear-gradient(160deg, rgba(var(--pr),.12), transparent 60%), var(--surface); border: 1px solid rgba(var(--pr),.35); border-left: 5px solid rgb(var(--pr)); border-radius: 14px; padding: 14px; cursor: pointer; transition: transform .12s; }
.promo-card:hover { transform: translateY(-2px); }
.promo-card.inativa { opacity: .55; }
.promo-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.promo-card__top b { font-size: 15px; }
.promo-badge { background: rgb(var(--pr)); color: #14110a; font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.promo-card__meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.promo-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; }
.promo-status.on { color: var(--green); } .promo-status.off { color: var(--muted); }
.promo-edit { color: var(--gold-2); }
/* banners de promoção (lista na aba Banners) — layout horizontal legível */
.promob-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.promob-item { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-left: 5px solid rgb(var(--pr, 233,185,73)); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .1s; color: var(--text); }
.promob-item:hover { border-color: rgb(var(--pr, 233,185,73)); transform: translateY(-1px); }
.promob-item.inativa { opacity: .55; }
.promob-thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px; background: var(--surface, #161512) center/cover no-repeat; border: 1px solid var(--border-2, #2a2a2a); display: grid; place-items: center; font-size: 18px; }
.promob-info { flex: 1; min-width: 0; }
.promob-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.promob-top b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promob-badge { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.promob-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.promob-edit { flex: 0 0 auto; color: var(--gold-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.promob-info { cursor: pointer; }
.promob-thumb { cursor: pointer; }
.promob-sw { flex: 0 0 auto; }
/* estado da promoção (no ar / programada / encerrada / inativa) */
.promob-est { font-weight: 700; }
.promo-status.on, .promob-est.on { color: #2ee06f; }
.promo-status.prog, .promob-est.prog { color: #4d6bfe; }
.promo-status.fim, .promob-est.fim { color: var(--muted); }
.promo-status.off, .promob-est.off { color: var(--muted-2, #888); }
.promob-item.est-ativa { border-left-color: #2ee06f; }
.promob-item.est-programada { border-left-color: #4d6bfe; }
.promob-item.est-encerrada, .promob-item.est-inativa { opacity: .62; }
.prh-presets { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.prh-presets button { font-size: 11px; padding: 4px 9px; border-radius: 8px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted); cursor: pointer; }
.prh-presets button:hover { border-color: var(--gold); color: var(--gold-2); }
.modal--promo { max-width: 540px; width: 92vw; max-height: 90vh; overflow-y: auto; }
.promo-prodlist { max-height: 220px; overflow-y: auto; border: 1px solid var(--border-2, #2a2a2a); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.promo-prod { display: grid; grid-template-columns: 34px 1fr auto 20px; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
.promo-prod:hover { background: var(--surface-2, #1b1712); }
.promo-prod.sel { background: rgba(233,185,73,.1); border-color: rgba(233,185,73,.4); }
.promo-prod__img { width: 34px; height: 34px; border-radius: 7px; background: var(--surface, #161512) center/cover no-repeat; border: 1px solid var(--border-2, #2a2a2a); }
.promo-prod__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-prod i { color: var(--gold-2); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.promo-prod input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
/* validade (preview do que o cliente vê) + rodapé de botões */
.promo-valid { background: rgba(233,185,73,.1); border: 1px solid rgba(233,185,73,.3); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
.promo-valid b { color: var(--gold-2); }
.promo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.promo-foot__r { display: flex; gap: 10px; }
.modal--promo .promo-foot .btn-primary, .modal--promo .promo-foot .btn-ghost { width: auto; }
/* banners de promoção na LOJA (personalizáveis: imagem/vídeo, altura, full/box) */
.promo-strip { margin: 0; }
.promo-strip:empty { display: none; margin: 0; }
.promo-banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 64px; color: #fff; background: linear-gradient(120deg, rgba(var(--pr),.30), rgba(var(--pr),.08) 70%), var(--surface, #161512); }
.promo-banner--box { max-width: 1200px; margin: 0 auto 10px; border: 1px solid rgba(var(--pr),.5); border-left: 4px solid rgb(var(--pr)); border-radius: 14px; }
/* tela cheia DE VERDADE: quebra qualquer container e cola nas bordas (igual à hero) */
.promo-banner--full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; border: 0; border-radius: 0; }
.promo-banner__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.promo-banner.has-media .promo-banner__scrim { background: linear-gradient(90deg, rgba(8,8,8,.82), rgba(8,8,8,.4) 65%, rgba(8,8,8,.15)); }
.promo-banner__in { position: relative; z-index: 2; padding: 14px 20px; max-width: 1200px; margin: 0 auto; width: 100%; }
.promo-banner--box .promo-banner__in { padding: 12px 16px; }
.promo-banner__in b { display: block; font-size: clamp(15px, 2.4vw, 22px); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.promo-banner__in span { font-size: 12.5px; color: rgba(255,255,255,.82); }
/* o vídeo/yt de fundo (injetado por aplicarVideoFundo) cobre o banner */
.promo-banner .hero__bg-video, .promo-banner .hero__bg-yt { position: absolute; inset: 0; z-index: 0; }
/* checkout: endereço de entrega + cliente recorrente */
.ck-entrega-lbl { margin: 16px 0 4px; font-size: 13px; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ck-entrega-lbl b { color: var(--gold-2); }
.ck-entrega-lbl small { color: var(--muted); font-size: 11.5px; }
.ck-saved { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(46,224,111,.1); border: 1px solid rgba(46,224,111,.35); border-radius: 11px; padding: 9px 12px; margin: 6px 0 10px; font-size: 12.5px; }
.ck-saved b { color: #2ee06f; }
.ck-saved button { background: transparent; border: 1px solid var(--border-2, #2a2a2a); color: var(--gold-2); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ck-save { margin: 6px 0 10px; }
.ck-save .toggle-row__txt { font-size: 12.5px; color: var(--muted); }
/* revisão do pedido: item com imagem + troca por busca */
.rev-prod { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border-2, #2a2a2a); }
.rev-prod__img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #0a0a09; flex: 0 0 auto; border: 1px solid var(--border-2, #2a2a2a); }
.rev-prod__info { flex: 1; min-width: 0; }
.rev-prod__info b { display: block; font-size: 14px; line-height: 1.25; }
.rev-prod__info small { color: var(--muted); font-size: 12px; }
.rev-prod__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rev-prod__tot { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--gold-2); font-size: 14px; }
.rev-troca { background: rgba(233,185,73,.12); border: 1px solid rgba(233,185,73,.35); color: var(--gold-2); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rev-troca:hover { background: rgba(233,185,73,.22); }
.rev-swap { background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-radius: 12px; padding: 10px; margin: 4px 0 8px; }
.rev-swap[hidden] { display: none; }
.swap-search input { width: 100%; height: 40px; border-radius: 10px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--text); padding: 0 12px; font-size: 13px; margin-bottom: 8px; }
.swap-search input:focus { outline: none; border-color: var(--gold); }
.swap-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.swap-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 10px; padding: 8px; cursor: pointer; transition: border-color .12s; }
.swap-opt:hover { border-color: var(--gold); }
.swap-opt img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #0a0a09; flex: 0 0 auto; }
.swap-opt__info { flex: 1; min-width: 0; }
.swap-opt__info b { display: block; font-size: 13px; line-height: 1.2; }
.swap-opt__info small { color: var(--muted); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-opt__price { font-weight: 700; color: var(--gold-2); font-size: 13px; white-space: nowrap; }
.swap-vazio { color: var(--muted); font-size: 13px; padding: 12px; text-align: center; }
.envio-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.envio-opt { flex: 1; min-width: 130px; text-align: left; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 10px; padding: 8px 11px; cursor: pointer; color: var(--text); }
.envio-opt b { display: block; font-size: 13px; }
.envio-opt span { font-size: 11.5px; color: var(--muted); }
.envio-opt.on { border-color: var(--gold); background: rgba(233,185,73,.1); }
.envio-opt.on b { color: var(--gold-2); }
.rev-addmore { width: 100%; margin-top: 10px; height: 42px; border-radius: 11px; background: rgba(233,185,73,.1); border: 1px dashed rgba(233,185,73,.5); color: var(--gold-2); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.rev-addmore:hover { background: rgba(233,185,73,.18); }
.rev-pronto { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(46,224,111,.1); border: 1px solid rgba(46,224,111,.3); color: #2ee06f; font-size: 12.5px; font-weight: 600; text-align: center; }
/* ===== PADRÃO DE ALTURA DOS BOTÕES ===== */
/* botões de ação compactos (toolbars, cards) — todos 40px e sem quebrar linha */
.rel-btn, .fb-add, .ped-enviar, .ped-fin, .ped-undo, .ped-reabrir { height: 40px; min-height: 40px; white-space: nowrap; }
/* botão de enviar vídeo é largo e tem rótulo longo: pode quebrar a linha em vez de estourar a caixa */
.dz-act { min-height: 40px; height: auto; white-space: normal; text-align: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.dz-acts .dz-act { white-space: nowrap; }
/* modais nunca rolam na horizontal (campos longos ficam contidos) */
.modal { overflow-x: hidden; }
.modal input, .modal select, .modal textarea, .modal .banner-input { max-width: 100%; box-sizing: border-box; }
.field--row > .field { min-width: 0; }
/* ===== integrações / chaves de API ===== */
.intg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 6px; }
.intg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 14px; min-width: 0; }
.intg-card--road { border-color: rgba(233,185,73,.4); box-shadow: inset 0 0 0 1px rgba(233,185,73,.12); }
.intg-card__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.intg-chev { flex: 0 0 auto; color: var(--muted); transition: transform .2s; display: grid; place-items: center; }
.intg-card--collapsed .intg-chev { transform: rotate(-90deg); }
.intg-card--collapsed .intg-body { display: none; }
/* nome do campo editável (parece label; vira campo ao focar) */
.intg-lblrow { display: flex; align-items: center; gap: 6px; }
.intg-lbl-ed { background: transparent; border: 1px dashed transparent; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 600; padding: 2px 5px; width: 100%; min-width: 0; }
.intg-lbl-ed:hover { border-color: var(--border-2); }
.intg-lbl-ed:focus { outline: none; border-color: var(--gold); color: var(--text); background: var(--surface-2); }
.intg-delbtn { margin-top: 10px; width: 100%; height: 40px; border-radius: 10px; background: rgba(229,57,53,.12); border: 1px solid rgba(229,57,53,.5); color: #ff8a85; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.intg-delbtn:hover { background: rgba(229,57,53,.22); }
.intg-card__ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 18px; }
.intg-card__title { flex: 1; min-width: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intg-card__title b { font-size: 14.5px; }
.intg-nome-ed { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 5px 8px; font-size: 14px; font-weight: 600; width: 100%; max-width: 220px; }
.intg-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1a1306; background: var(--gold-grad); padding: 2px 7px; border-radius: 20px; }
.intg-del { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; }
.intg-del:hover { color: var(--danger); border-color: var(--danger); }
.intg-nota { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.intg-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.intg-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.intg-field label small { color: var(--muted-2); }
.intg-inwrap { display: flex; align-items: center; gap: 6px; }
.intg-inwrap input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 13.5px; font-family: 'Space Grotesk', monospace; }
.intg-inwrap input:focus { outline: none; border-color: var(--gold); }
.intg-eye, .intg-copy { flex: 0 0 auto; width: 38px; height: 40px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); cursor: pointer; font-size: 15px; }
.intg-eye:hover, .intg-copy:hover { border-color: var(--gold); }
.intg-addcampo { margin-top: 12px; background: transparent; border: 1px dashed var(--border-2); color: var(--muted); border-radius: 10px; padding: 8px; width: 100%; cursor: pointer; font-size: 12.5px; }
.intg-addcampo:hover { border-color: var(--gold); color: var(--gold-2); }
.hp-nome { background: transparent; border: 1px solid transparent; color: var(--text); font-weight: 700; font-size: 13.5px; border-radius: 6px; padding: 2px 6px; width: 100%; max-width: 230px; }
.hp-nome:hover { border-color: var(--border-2); }
.hp-nome:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
/* tabela de produtos: ranking de vendas, pin e drag-drop */
.t-metric { margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.t-rank { font-size: 12px; font-weight: 800; color: var(--gold-2); }
.t-vendas { font-size: 11px; color: var(--muted); }
.t-drag { cursor: grab; color: var(--muted-2); font-size: 16px; margin-right: 4px; flex: 0 0 auto; user-select: none; }
.t-drag:active { cursor: grabbing; }
.icon-btn.pin-on { color: #1a1306; background: var(--gold-grad); }
tr.t-fixado { box-shadow: inset 3px 0 0 var(--gold); }
tr.t-dragging { opacity: .45; }
tr.t-over { box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); }
/* campo de motivo no modal de confirmação */
.nc-inwrap { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.nc-input { flex: 1; min-width: 0; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; }
.nc-input:focus { outline: none; border-color: var(--gold); }
.nc-copy { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.nc-copy:hover { border-color: var(--gold); }
/* tags de pedido cancelado / repetido */
.ped-canc-tag { font-size: 10px; font-weight: 800; color: #b8b2a8; background: rgba(150,145,135,.2); padding: 2px 7px; border-radius: 20px; }
.ped-rep-tag { font-size: 10px; font-weight: 800; color: var(--gold-2); background: rgba(233,185,73,.15); padding: 2px 7px; border-radius: 20px; }
.ped-tr-canc, .ped-card--canc { opacity: .62; }
.ped-card--canc { filter: grayscale(.4); }
.pedm-cancelar:hover { color: var(--danger); border-color: var(--danger); }
.pedm-excluir:hover { color: var(--danger); border-color: var(--danger); }
.ped-kpi--canc .ped-kpi__n { color: #b8b2a8; }
/* listas negras */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bl-col h4 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bl-count { font-size: 11px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); padding: 1px 8px; border-radius: 20px; }
.bl-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.bl-item { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 10px; }
.bl-item > div { flex: 1; min-width: 0; }
.bl-item b { font-size: 13px; display: block; }
.bl-item small { font-size: 11px; color: var(--muted); display: block; }
.bl-rm { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; }
.bl-rm:hover { color: var(--danger); border-color: var(--danger); }
.bl-empty { font-size: 12.5px; color: var(--muted-2); padding: 8px 2px; }
.bl-add { display: flex; flex-direction: column; gap: 7px; }
.bl-toggle { width: 100%; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); border-radius: 9px; padding: 8px; cursor: pointer; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bl-toggle:hover { border-color: var(--gold); color: var(--text); }
.bl-toggle .bl-chev { transition: transform .2s; }
.bl-toggle.on .bl-chev { transform: rotate(180deg); }
.bl-list { margin-top: 8px; }
.bl-add input { height: 38px; padding: 0 11px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 13px; box-sizing: border-box; }
.bl-add input:focus { outline: none; border-color: var(--gold); }
.bl-addbtn { height: 38px; border-radius: 9px; background: rgba(229,57,53,.15); border: 1px solid rgba(229,57,53,.5); color: #ff8a85; font-weight: 700; cursor: pointer; }
.bl-addbtn:hover { background: rgba(229,57,53,.25); }
/* ===== NithiSort — arrastar cards ===== */
.sortable-card { position: relative; }
.sortable-host > .sortable-card, .canvas-on > .sortable-card { padding-left: 32px; }
.card-drag { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; display: flex; align-items: center; justify-content: center; cursor: grab; color: var(--muted-2); font-size: 15px; border-radius: 14px 0 0 14px; z-index: 4; user-select: none; transition: background .15s, color .15s; }
.card-drag:hover { color: var(--gold-2); background: rgba(233,185,73,.08); }
.card-drag:active { cursor: grabbing; }
.card-dragging { opacity: .5; }
.card-over { box-shadow: 0 0 0 2px var(--gold), 0 8px 26px -10px rgba(233,185,73,.5); }
/* ===== NithiCanvas — grade com encaixe (snap) + fantasma; espaçamento padrão em todo lugar ===== */
/* layout em COLUNAS (masonry): expandir um card empurra só os de baixo da mesma coluna,
sem deixar buraco do lado (diferente da grade, que estica a linha toda) */
.canvas-on { display: block !important; column-width: 330px; column-gap: 16px; height: auto !important; }
.canvas-on > [data-card] { margin: 0 0 16px !important; width: 100%; break-inside: avoid; -webkit-column-break-inside: avoid; }
.card-drag { cursor: grab; touch-action: none; }
.card-drag:active { cursor: grabbing; }
.card-ph { border: 2px dashed var(--gold); border-radius: 16px; background: rgba(233,185,73,.07); box-sizing: border-box; }
.card-clone { position: fixed; z-index: 9999; pointer-events: none; opacity: .94; box-shadow: 0 22px 55px -14px rgba(0,0,0,.75), 0 0 0 2px var(--gold); border-radius: 16px; transform: rotate(1.2deg); overflow: hidden; }
body.canvas-dragging { cursor: grabbing; user-select: none; }
.sb-item[draggable="true"] { cursor: grab; }
.sb-item { transition: background .12s, box-shadow .12s; }
/* slot de destino: enquanto arrasta, o item vira um espaço tracejado dourado
na posição exata onde vai cair (reordena ao vivo) */
.sb-item.sb-dragging { opacity: 1; color: transparent !important; background: rgba(233,185,73,.12); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--gold); }
.sb-item.sb-dragging * { visibility: hidden; }
@media (max-width: 620px) { .canvas-on { column-width: auto; column-count: 1; } }
.canvas-on > .card-ph { margin: 0 0 16px; width: 100%; break-inside: avoid; }
@media (max-width: 760px) { .card-drag { width: 22px; font-size: 14px; } .sortable-host > .sortable-card { padding-left: 26px; } }
/* ===== Grupo recolhível (card principal que esconde/revela tudo) ===== */
.grp { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 16px; }
.grp-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; background: transparent; border: 0; cursor: pointer; color: var(--text); text-align: left; }
.grp-head:hover { background: rgba(255,255,255,.02); border-radius: 16px; }
.grp-title { font-size: 15.5px; font-weight: 700; display: flex; gap: 9px; align-items: center; }
.grp-title small { font-weight: 400; color: var(--muted); font-size: 12px; }
.grp-chev { transition: transform .2s; color: var(--muted); flex: 0 0 auto; }
.grp--collapsed .grp-chev { transform: rotate(-90deg); }
.grp-body { padding: 2px 16px 16px; }
.grp--collapsed .grp-body { display: none; }
/* quando o corpo é uma grade de cards, herda o espaçamento */
.grp-body > .cfg-grid { margin: 0; }
/* cards empilhados (não-canvas) dentro de um grupo: espaçamento padrão */
.grp-body > .cfg-card { margin-bottom: 14px; }
.grp-body > .cfg-card:last-child { margin-bottom: 0; }
/* ===== Gestão da Loja ===== */
.gst-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; gap: 16px; }
@media (max-width: 720px) { .gst-grid { grid-template-columns: 1fr; } }
/* formulário de adicionar (custos/fornecedores): empilha limpo, nunca espreme */
.gst-add { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.gst-add input, .gst-add select { height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 13.5px; box-sizing: border-box; width: 100%; max-width: none !important; }
.gst-add input:focus, .gst-add select:focus { outline: none; border-color: var(--gold); }
.gst-add .btn-add { width: 100%; margin-top: 2px; }
/* R$ + dia lado a lado numa linha (Custos) */
.gst-add .gst-add__row { display: flex; gap: 8px; }
.gst-add .gst-add__row > * { flex: 1; }
.gst-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.gst-row:last-child { border-bottom: 0; }
.gst-row__main { flex: 1; min-width: 0; }
.gst-row__main b { font-size: 13.5px; display: block; }
.gst-row__main small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.gst-cat { color: var(--gold-2); }
.gst-val { font-weight: 700; font-family: 'Space Grotesk', sans-serif; font-size: 14px; white-space: nowrap; }
.gst-val--pago { color: var(--green); }
.gst-pago { opacity: .62; }
.gst-pago .gst-row__main b { text-decoration: line-through; }
.gst-zero b { color: var(--danger); }
.gst-pgtog { flex: 0 0 46px; }
.gst-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.gst-total b { font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--gold-2); }
.gst-compra { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.gst-compra__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gst-compra__top b { font-size: 14px; }
.gst-compra__itens { font-size: 12.5px; color: var(--text); margin: 7px 0 4px; }
.gst-compra__meta { font-size: 11px; color: var(--muted); }
.gst-compra__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.compra-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.compra-item input { height: 40px; padding: 0 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 13.5px; box-sizing: border-box; }
.compra-item input[data-ci-nome] { flex: 1; min-width: 0; }
.compra-item input:focus { outline: none; border-color: var(--gold); }
/* cabeçalho de modais (título + ✕ no canto superior direito) */
.pedm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pedm-head h3 { flex: 1; min-width: 0; }
.modal-x { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted); font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
.modal-x:hover { color: var(--text); border-color: var(--gold); }
.compra-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.sug-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 7px 11px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.sug-chip small { color: var(--muted); }
.sug-chip:hover { border-color: var(--gold); background: rgba(233,185,73,.08); }
.sug-chip:active { transform: scale(.96); }
.sug-chip.on { opacity: .5; cursor: default; border-style: dashed; }
/* 'Ver a vitrine' para no topo da vitrine com busca+filtros visíveis (desconta header + cats fixos) */
#shopTop { scroll-margin-top: calc(var(--header-h) + 66px); }
/* ===== faixa fina "loja fechada" com contador (no topo, acima da hero) ===== */
/* ===== galeria do produto (painel) ===== */
.pgal { display: flex; flex-wrap: wrap; gap: 8px; }
.pgal-item { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-2); background: var(--surface-2); }
.pgal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-vid { display: grid; place-items: center; width: 100%; height: 100%; font-size: 22px; }
.pgal-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; cursor: pointer; display: grid; place-items: center; }
.pgal-x:hover { background: #e53935; }
/* ===== carrossel de mídias no modal do produto (loja) ===== */
.card__midias { position: absolute; bottom: 10px; right: 10px; z-index: 2; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 7px; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px); }
.pm-carr { position: relative; width: 100%; height: 100%; min-height: 240px; }
.pm-carr__view, .pm-carr__view img, .pm-carr__view video, .pm-carr__view iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
.pm-carr__view { position: absolute; inset: 0; display: grid; place-items: center; background: #0c0b09; }
.pm-carr__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(233,185,73,.5); background: rgba(20,19,16,.85); color: var(--gold-2); font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.pm-carr__nav--prev { left: 10px; } .pm-carr__nav--next { right: 10px; }
.pm-carr__nav:hover { background: var(--gold-grad); color: #1a1306; }
.pm-carr__dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.pm-carr__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; font-size: 6px; line-height: 1; color: #1a1306; display: grid; place-items: center; transition: transform .15s, background .15s; }
.pm-carr__dot.on { background: var(--gold); transform: scale(1.35); }
/* cada forma de pagamento com cor/ícone próprios + glow sutil quando selecionada */
.opt[data-pag="pix"] { --pagc: 46,224,111; }
.opt[data-pag="credito"] { --pagc: 233,185,73; }
.opt[data-pag="debito"] { --pagc: 88,160,255; }
.opt[data-pag="duascartoes"] { --pagc: 185,140,255; }
.opt[data-pag="dinheiro"] { --pagc: 126,240,168; }
.opt[data-pag="entrega"] { --pagc: 255,169,77; }
.opt[data-pag] .opt__ico { color: rgb(var(--pagc)); background: rgba(var(--pagc), .12); border-radius: 10px; }
.opt.sel[data-pag] { border-color: rgba(var(--pagc), .75); box-shadow: 0 0 0 1px rgba(var(--pagc), .35), 0 10px 26px -12px rgba(var(--pagc), .5); }
.opt.sel[data-pag] .opt__radio { border-color: rgb(var(--pagc)); background: rgb(var(--pagc)); }
/* fundo TRAVADO com modal aberto (celular não "vaza" a vitrine por trás) */
body.no-scroll { overflow: hidden; touch-action: none; }
.bag, .prod-modal { overscroll-behavior: contain; }
.bag .bag__items, .prod-modal, .modal { -webkit-overflow-scrolling: touch; }
/* preço nunca quebra linha (R$ sempre grudado no valor) */
.card__price, .pm-price, .bag__total b, .rev-total b { white-space: nowrap; }
/* ===== MOBILE: modal nenhum — tudo vira TELA CHEIA (menos o confirm pequeno) ===== */
@media (max-width: 640px) {
.modal-scrim .modal:not(.nc-modal) { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; transform: none; }
.modal-scrim.open .modal:not(.nc-modal) { transform: none; }
.prod-modal { left: 0 !important; top: 0 !important; width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh !important; border-radius: 0; border: 0; transform: none !important; }
.prod-modal.open { transform: none !important; }
.crop-box, .mid-box { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; border-radius: 0; }
.pm-carr { min-height: 300px; }
}
/* troco em 1 clique (dinheiro na entrega) */
.rv-troco__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rv-troco__chip { padding: 9px 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.rv-troco__chip:active { transform: scale(.95); }
.rv-troco__chip.on { background: var(--gold-grad); color: #1a1306; border-color: transparent; }
/* ===== NithiPay — passo de PAGAMENTO no checkout ===== */
.pay-simbadge { background: rgba(124,92,255,.14); border: 1px dashed rgba(124,92,255,.55); color: #b9a7ff; font-size: 12px; font-weight: 700; text-align: center; border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.pay-box { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: 16px; }
.pay-head { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }
.pay-head__ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(233,185,73,.12); display: grid; place-items: center; color: var(--gold-2); flex: 0 0 auto; }
.pay-head__ico svg { width: 20px; height: 20px; }
.pay-head b { font-size: 15px; display: block; }
.pay-head small { color: var(--muted); font-size: 12px; }
.pay-qrwrap { display: flex; justify-content: center; }
.pay-qr { width: min(240px, 70vw); background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.pay-qr svg { display: block; width: 100%; height: auto; }
.pay-qrerr { color: #1a1306; font-size: 12.5px; font-weight: 700; text-align: center; padding: 20px 8px; }
.pay-valor { text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.pay-valor b { font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--gold-2); }
.pay-copiacola { display: flex; gap: 8px; }
.pay-copiacola input { flex: 1; min-width: 0; height: 42px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); padding: 0 11px; font-size: 11.5px; font-family: monospace; }
.pay-copiacola button { flex: 0 0 auto; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--gold-grad); border: 0; color: #1a1306; font-weight: 800; font-size: 13px; cursor: pointer; }
.pay-status { display: none; margin-top: 12px; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.pay-status.wait { display: block; background: rgba(233,185,73,.1); border: 1px solid rgba(233,185,73,.35); color: var(--gold-2); }
.pay-status.ok { display: block; background: rgba(46,224,111,.1); border: 1px solid rgba(46,224,111,.4); color: #7ef0a8; }
.pay-status.err { display: block; background: rgba(229,57,53,.1); border: 1px solid rgba(229,57,53,.45); color: #ff8a85; }
.pay-cardrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.pay-band { color: var(--gold-2); font-size: 11px; font-weight: 700; margin-left: 6px; }
.pay-splitrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-splithint { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 9px; padding: 8px 11px; margin-bottom: 12px; }
.pay-splitcard { border: 1px solid var(--border); border-radius: 13px; padding: 12px; margin-bottom: 12px; }
.pay-splitcard__tit { font-size: 13px; font-weight: 800; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.pay-splitcard__v { color: var(--gold-2); font-family: 'Space Grotesk', sans-serif; }
/* faixa "loja fechada" com CONTADOR regressivo (acima da hero) */
.off-strip { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px clamp(14px,4vw,26px); background: linear-gradient(90deg, rgba(192,57,43,.20), rgba(8,8,8,.4) 70%); border-bottom: 1px solid rgba(192,57,43,.4); color: var(--text); }
.off-strip__txt { display: flex; flex-direction: column; line-height: 1.25; }
.off-strip__txt b { font-size: 15px; font-weight: 800; }
.off-strip__txt small { color: var(--muted); font-size: 12px; }
.off-count { display: flex; gap: 7px; }
.ofc { min-width: 48px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); border-top: 2px solid #c0392b; border-radius: 9px; padding: 6px 8px 5px; text-align: center; }
.ofc b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; color: #fff; }
.ofc span { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.ofc--accent b { color: #ff6b5e; }
.off-strip__cta { background: var(--gold-grad); color: #1a1306; font-weight: 800; font-size: 12.5px; padding: 9px 15px; border-radius: 20px; text-decoration: none; white-space: nowrap; transition: filter .15s, transform .12s; }
.off-strip__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.off-strip__x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.off-strip__x:hover { color: var(--text); background: rgba(255,255,255,.06); }
@media (max-width: 560px) {
.off-strip { gap: 10px; padding: 12px 14px 14px; }
.off-strip__txt { flex: 1 1 100%; text-align: center; align-items: center; }
.ofc { min-width: 0; flex: 1; }
.off-count { width: 100%; }
.off-strip__cta { flex: 1 1 100%; text-align: center; }
}
/* rodapés de modal: TODOS os botões com a mesma altura, largura automática, sem quebra */
.pedm-foot button, .promo-foot button, .pedm-status-acts button, .pedm-acoes button, .modal-foot button {
height: 42px; min-height: 42px; margin-top: 0; width: auto; white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; font-size: 14px; padding: 0 18px;
}
.pedm-foot .btn-ghost, .promo-foot .btn-ghost, .modal-foot .btn-ghost { padding: 0 16px; }
/* transcrição + resumo do áudio (atendente lê sem ouvir) */
.aud-noplay { font-size: 13px; color: var(--muted); padding: 4px 0; }
.aud-ia { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.aud-resumo { background: rgba(233,185,73,.12); border: 1px solid rgba(233,185,73,.3); border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.45; color: var(--text); }
.aud-resumo b { color: var(--gold-2); }
.aud-transc { font-size: 12.5px; }
.aud-transc summary { cursor: pointer; color: var(--muted); list-style: none; padding: 3px 0; user-select: none; }
.aud-transc summary::-webkit-details-marker { display: none; }
.aud-transc summary:hover { color: var(--gold-2); }
.aud-transc > div { margin-top: 6px; padding: 8px 11px; background: var(--surface-2, #1b1712); border-left: 3px solid var(--gold, #e9b949); border-radius: 8px; color: var(--text); line-height: 1.5; }
.aud-semtx { font-size: 12px; color: var(--muted); font-style: italic; }
.ped-itrow { display: grid; grid-template-columns: 1fr 64px 92px 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ped-itrow input { height: 40px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text); padding: 0 10px; font-size: 13px; }
.ped-itrow input:focus { outline: none; border-color: var(--gold); }
.pi-del { height: 34px; width: 34px; border-radius: 9px; background: transparent; border: 1px solid rgba(229,57,53,.4); color: #ff8a85; cursor: pointer; }
.pi-del:hover { background: rgba(229,57,53,.12); }
.pedm-moto { border: 1px solid rgba(37,211,102,.3); background: rgba(37,211,102,.05); border-radius: 12px; padding: 12px; margin-top: 6px; }
.pedm-pgto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); }
.pedm-pg { padding: 7px 11px; border-radius: 9px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pedm-pg.on.cobrar { background: rgba(229,57,53,.16); border-color: rgba(229,57,53,.55); color: #ff8a85; }
.pedm-pg.on.pago { background: rgba(46,224,111,.16); border-color: rgba(46,224,111,.5); color: #2ee06f; }
.pedm-moto-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pedm-maps { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.pedm-maps:hover { border-color: var(--gold); color: var(--gold-2); }
.pedm-moto-btn { flex: 1; min-width: 200px; height: 40px; border-radius: 10px; background: var(--green, #25d366); color: #04210f; font-weight: 700; font-size: 13.5px; border: none; cursor: pointer; }
.pedm-moto-btn:hover { filter: brightness(1.08); }
.pedm-totais { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; padding: 12px 0; border-top: 1px solid var(--border); margin-top: 12px; font-size: 13px; color: var(--muted); }
.pedm-totais b { color: var(--text); font-weight: 700; margin-left: 5px; }
.pedm-total b { color: var(--gold-2); font-size: 17px; }
.pedm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pedm-status-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ped-tabela tr:last-child td { border-bottom: none; }
.ped-tabela small { color: var(--muted); }
.ped-tac { white-space: nowrap; }
.ped-tac button { height: 32px; font-size: 12px; padding: 0 10px; }
.ped-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ped-head b { font-size: 15px; }
.ped-head small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.ped-status { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap; }
.ped-status.aberto, .ped-status.novo { background: rgba(var(--accent-rgb),.15); color: var(--gold-2); border: 1px solid var(--border-2); }
.ped-status.enviado { background: rgba(37,211,102,.15); color: var(--green); border: 1px solid rgba(37,211,102,.3); }
.ped-status.finalizado { background: rgba(155,150,140,.15); color: #b9b3a8; border: 1px solid rgba(155,150,140,.3); }
.ped-itens { font-size: 13px; color: var(--muted); line-height: 1.55; }
.ped-itens b { color: var(--text); font-weight: 600; }
.ped-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 11px; }
.ped-total { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.ped-enviar { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--green); color: #04210f; font-weight: 700; font-size: 13px; border: none; cursor: pointer; transition: filter .15s; }
.ped-enviar:hover { filter: brightness(1.08); }
.ped-enviado-info { font-size: 12px; color: var(--green); font-weight: 600; }
/* ====================== ADMIN: LEADS / CRM ====================== */
.lead-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip-f { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.chip-f:hover { color: var(--text); border-color: var(--gold-deep); }
.chip-f.active { background: var(--gold-grad); color: #1a1306; border-color: transparent; }
.crm-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.crm-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-chart h3 { font-size: 14px; margin: 0; }
.crm-chart__resumo { font-size: 12px; color: var(--muted); }
.lbars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.lbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-end; height: 100%; border-radius: 8px; padding: 4px 0; transition: background .15s; }
.lbar-col:hover { background: rgba(255,255,255,.03); }
.lbar-val { font-size: 11px; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.lbar-val.zero { color: var(--muted-2); opacity: .5; font-weight: 600; }
.lbar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); }
.lbar { width: 100%; max-width: 26px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--gold, #e9b949), var(--gold-deep, #b8860b)); min-height: 0; transition: height .55s cubic-bezier(.34,1.4,.64,1); }
.lbar-col.top .lbar { background: linear-gradient(180deg, #ffd86b, var(--gold, #e9b949)); box-shadow: 0 0 12px rgba(233,185,73,.4); }
.lbar-col.hoje .lbar-lbl { color: var(--gold-2); font-weight: 700; }
.lbar-col.hoje { background: rgba(233,185,73,.06); }
.lbar-lbl { font-size: 9.5px; color: var(--muted-2); white-space: nowrap; }
.lead-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; display: inline-block; }
.lead-badge.sim { background: rgba(37,211,102,.15); color: var(--green); border: 1px solid rgba(37,211,102,.3); }
.lead-badge.nao { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-2); }
/* ====================== ADMIN: CONVERSAS (espelho WhatsApp) ====================== */
.conv-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: 64vh; min-height: 480px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.conv-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg-2); }
.conv-item { display: flex; gap: 11px; padding: 13px 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; }
.conv-item:hover { background: var(--surface); }
.conv-item.active { background: var(--surface-2); border-left: 3px solid var(--gold); }
.conv-av { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--gold-2); font-weight: 700; font-size: 16px; overflow: hidden; }
.conv-av img { width: 100%; height: 100%; object-fit: cover; }
.conv-head .conv-av img, #cvAv img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.conv-meta { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: center; }
.conv-top b { font-size: 14px; }
.conv-top span { font-size: 11px; color: var(--muted-2); }
.conv-prev { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conv-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(233,185,73,.12); color: var(--gold-2); border: 1px solid var(--border-2); display: inline-block; margin-top: 4px; }
.conv-tag.pod { background: rgba(226,120,59,.14); color: #ffb27a; border-color: rgba(226,120,59,.3); }
.conv-unread { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #04210f; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.conv-view { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.conv-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--bg-2); }
.conv-head b { font-size: 15px; }
.conv-head small { font-size: 12px; color: var(--muted); }
.conv-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 9px; background: radial-gradient(circle at 50% 0%, rgba(233,185,73,.03), transparent 60%); }
.cmsg { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; position: relative; }
.cmsg small { display: block; font-size: 10px; color: rgba(255,255,255,.4); margin-top: 3px; text-align: right; }
.cmsg.cliente { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.cmsg.agente { align-self: flex-end; background: linear-gradient(135deg,#1f3d2a,#16301f); border: 1px solid #2a5238; border-bottom-right-radius: 4px; }
.cmsg.agente small { color: rgba(180,255,200,.5); }
.conv-actions { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg-2); }
.conv-actions button { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); transition: .15s; }
.conv-actions button:hover { color: var(--gold-2); border-color: var(--gold-deep); }
.conv-actions button svg { width: 18px; height: 18px; }
.conv-input { display: flex; gap: 9px; padding: 12px 14px 14px; border-top: 1px solid var(--border); background: var(--bg-2); }
.conv-input input { flex: 1; height: 44px; padding: 0 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-size: 14.5px; }
.conv-input input:focus { outline: none; border-color: var(--gold); }
.conv-send { width: 44px; height: 44px; border-radius: 12px; background: var(--green); color: #04210f; display: grid; place-items: center; flex: 0 0 auto; }
.conv-send svg { width: 20px; height: 20px; }
.conv-mic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--gold-2); transition: transform .12s, background .15s, box-shadow .12s; }
.conv-mic svg { width: 19px; height: 19px; }
.conv-mic.active { background: var(--gold-grad); color: #1a1306; border-color: transparent; animation: micPulse 1.3s infinite; }
.conv-mic.speaking { animation: none; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.3), 0 0 16px rgba(var(--accent-rgb),.6); }
.cmsg audio { max-width: 210px; display: block; height: 38px; }
.conv-empty { display: grid; place-items: center; height: 100%; color: var(--muted); text-align: center; padding: 20px; }
.conv-ai-banner { font-size: 11.5px; color: var(--gold-2); background: rgba(233,185,73,.07); border-bottom: 1px solid var(--border); padding: 8px 18px; display: flex; align-items: center; gap: 8px; }
.conv-ai-banner svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
.conv-wrap { grid-template-columns: 1fr; height: auto; }
.conv-list { max-height: 240px; }
.conv-view { min-height: 420px; }
}
/* config */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; max-width: 820px; align-items: start; }
/* config: coluna única full-width com espaçamento uniforme */
.cfg-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.cfg-cols { display: contents; } /* os 3 cards entram direto na pilha do .cfg-wrap */
.cfg-wrap .cfg-card { margin: 0; width: 100%; }
.cfg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; min-width: 0; }
.fmt-body { min-width: 0; }
.fmt-body > *, #heroMockBox > * { max-width: 100%; box-sizing: border-box; }
.fmt-body input, .fmt-body textarea, .fmt-body select, #heroMockBox input, #heroMockBox select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.toggle-row__txt { min-width: 0; }
.toggle-row { flex-wrap: wrap; }
.cfg-card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.cfg-card h3 svg { width: 17px; height: 17px; color: var(--gold-2); }
.cfg-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; display: block; }
.tema-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.tema-chip:hover { color: var(--text); border-color: var(--gold-deep); }
.tema-chip.sel { border-color: var(--gold); color: var(--text); box-shadow: 0 0 0 1px var(--gold); }
.tema-chip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dias-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-chip { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.dia-chip.on { background: var(--gold-grad); color: #1a1306; border-color: transparent; }
.field textarea, textarea.auto-grow { width: 100%; padding: 11px 14px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; font-family: inherit; line-height: 1.45; resize: none; min-height: 64px; max-height: none; overflow: hidden; field-sizing: content; }
.field textarea:focus, textarea.auto-grow:focus { outline: none; border-color: var(--gold); }
/* ====================== DASHBOARD (sidebar) ====================== */
.dash { display: flex; min-height: 100dvh; }
.sidebar {
position: sticky; top: 0; align-self: flex-start;
width: 232px; height: 100dvh; flex: 0 0 auto;
background: var(--bg-2); border-right: 1px solid var(--border);
display: flex; flex-direction: column; padding: 16px 12px;
transition: width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed { width: 70px; }
.sb-top { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sb-top .logo__crown { width: 34px; height: 34px; }
.sb-top .logo__name { font-size: 16px; }
.sidebar.collapsed .sb-label, .sidebar.collapsed .sb-top .logo__text { display: none; }
.sb-collapse { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border-2); }
.sb-collapse:hover { color: var(--gold-2); border-color: var(--gold-deep); }
.sb-collapse svg { width: 16px; height: 16px; }
.sidebar.collapsed .sb-collapse { margin: 0 auto; }
.sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sb-item {
display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 11px;
font-size: 14.5px; font-weight: 600; color: var(--muted); transition: .14s; position: relative;
}
.sb-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sb-item:hover { background: var(--surface); color: var(--text); }
.sb-item.active { background: linear-gradient(120deg, rgba(233,185,73,.14), rgba(233,185,73,.04)); color: var(--gold-2); }
.sb-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 999px; background: var(--gold-grad); }
.sb-item .sb-badge { margin-left: auto; background: var(--green); color: #04210f; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 1px 6px; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .sb-item .sb-badge { position: absolute; top: 6px; right: 10px; margin: 0; }
.sb-bottom { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sb-item.danger:hover { color: var(--danger); }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-topbar { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(13,13,12,.7); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.dash-topbar h1 { font-size: 18px; }
.dash-content { padding: 22px 24px 40px; flex: 1; min-width: 0; }
.sb-mobile-btn { display: none; }
@media (max-width: 760px) {
.sidebar { position: fixed; z-index: 60; transform: translateX(-100%); width: 232px; box-shadow: var(--shadow); top: 0; bottom: 0; }
.sidebar.mobile-open { transform: translateX(0); }
.sidebar.collapsed { width: 232px; }
.sb-mobile-btn { display: grid !important; }
.dash-topbar { gap: 8px; }
.dash-topbar .demo-switch__lbl { display: none; }
.user-badge__txt { display: none; }
/* overlay pra fechar o menu tocando fora */
.sidebar.mobile-open::after { content: ""; position: fixed; inset: 0 0 0 232px; background: rgba(0,0,0,.5); z-index: -1; }
}
/* ====================== ANALYTICS (gráficos) ====================== */
.an-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.an-card .an-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--gold-2); margin-bottom: 10px; }
.an-card .an-ico svg { width: 18px; height: 18px; }
.an-card b { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; display: block; line-height: 1; }
.an-card span { font-size: 12px; color: var(--muted); display: block; margin-top: 5px; }
.an-card .an-trend { font-size: 11.5px; font-weight: 600; margin-top: 6px; }
.an-trend.up { color: var(--green); } .an-trend.down { color: var(--danger); }
/* cards de analytics (estilo barras com trilho listrado, animadas) */
.acard-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.acard { width: 100%; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); padding: 20px 22px; }
.acard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acard__title { font-size: 14.5px; font-weight: 500; color: var(--muted); }
.acard__ico { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--gold-2); }
.acard__ico svg { width: 17px; height: 17px; }
.acard__total { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -.02em; margin: 10px 0 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.acard__total small { font-size: 14px; color: var(--muted); font-weight: 500; }
.acard__bars { display: grid; gap: 14px; }
.acard__col { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.acard__track {
position: relative; width: 100%; height: 132px; border-radius: 12px;
display: flex; align-items: flex-end; overflow: hidden;
background-color: var(--surface-2);
background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.035) 4px, rgba(255,255,255,.035) 8px);
}
.acard__bar {
position: relative; width: 100%; height: 0; border-radius: 10px 10px 4px 4px;
background: rgba(233,185,73,.32);
transition: height .85s cubic-bezier(.22,1,.36,1);
}
.acard__bar.max { background: var(--gold-grad); box-shadow: 0 -2px 16px -4px rgba(233,185,73,.5); }
.acard__handle { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 32%; height: 4px; border-radius: 999px; background: rgba(0,0,0,.28); }
.acard__bar:not(.max) .acard__handle { background: rgba(255,255,255,.18); }
.acard__lbl { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.25; }
.acard__lbl b { display: block; color: var(--gold-2); font-size: 13px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.acard__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--green); margin-left: 8px; vertical-align: middle; font-weight: 600; }
.acard__live .dot { width: 7px; height: 7px; }
/* ====================== CHAT: textarea dinâmica + mídia ====================== */
.conv-input textarea {
flex: 1; min-height: 44px; max-height: 130px; padding: 11px 15px;
border-radius: 12px; background: var(--surface); border: 1px solid var(--border-2);
color: var(--text); font-size: 14.5px; font-family: inherit; resize: none; line-height: 1.4; overflow-y: auto;
}
.conv-input textarea:focus { outline: none; border-color: var(--gold); }
.conv-input { align-items: flex-end; }
.cmsg img, .cmsg video { max-width: 190px; max-height: 220px; object-fit: cover; border-radius: 10px; margin: 2px 0; display: block; }
.cmsg .media-cap { font-size: 12px; opacity: .85; }
/* ====================== BANNER CONFIG (preview + cor) ====================== */
.banner-preview { border-radius: 14px; padding: 22px; border: 1px solid var(--border-2); margin-bottom: 14px; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.banner-preview h4 { font-size: 18px; position: relative; z-index: 2; }
.banner-preview p { font-size: 13px; color: var(--muted); margin-top: 6px; position: relative; z-index: 2; }
.banner-preview .bp-scrim { position: absolute; inset: 0; z-index: 1; }
.banner-preview { background-size: cover; background-position: center; min-height: 92px; }
.bp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: none; }
.banner-input { width: 100%; min-width: 0; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; font-family: inherit; }
.banner-input:focus { outline: none; border-color: var(--gold); }
.banner-select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; height: 46px; padding: 0 38px 0 12px; border-radius: 11px;
background-color: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer;
-webkit-appearance: none; appearance: none; text-overflow: ellipsis;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 13px center; }
.banner-select:focus { outline: none; border-color: var(--gold); }
.banner-select option { background: #161512; color: var(--text); }
/* vídeo de fundo do hero/banner na loja */
.hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: inherit; }
.hero__bg-yt { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hero__bg-yt iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.hero__card > *:not(.hero__bg-video):not(.hero__bg-yt) { position: relative; z-index: 1; }
.soimg-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.soimg-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.color-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.color-row input[type=color] { width: 48px; height: 40px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); padding: 3px; cursor: pointer; }
.color-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.swatch.sel { border-color: var(--text); }
/* seletor de cor customizado (tema escuro) */
.cpick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cpick__sw { width: 44px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--border-2); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.cpick__hex { width: 96px; height: 40px; padding: 0 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-family: 'Space Grotesk', monospace; font-size: 14px; text-transform: lowercase; }
.cpick__hex:focus { outline: none; border-color: var(--gold); }
.hue-slider { -webkit-appearance: none; appearance: none; flex: 1 1 120px; min-width: 0; height: 14px; border-radius: 999px; cursor: pointer;
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
.hue-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--bg-2); box-shadow: 0 0 0 1px var(--border-2), 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
.hue-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--bg-2); box-shadow: 0 0 0 1px var(--border-2); cursor: pointer; }
/* ====================== FOOTER ====================== */
.footer { border-top: 1px solid var(--border); padding: 28px clamp(14px,4vw,28px); text-align: center; color: var(--muted-2); font-size: 12.5px; }
.footer a { color: var(--gold-2); }
.footer .agewarn { margin-top: 8px; font-size: 11px; color: var(--muted-2); max-width: 540px; margin-inline: auto; }
@media (max-width: 600px) {
.adm-table thead { display:none; }
.adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display:block; width:100%; }
.adm-table tr { border-bottom:1px solid var(--border); padding:8px 0; }
.adm-table td { border:none; padding:6px 14px; }
.t-actions { justify-content:flex-start; }
}
@media (max-width: 640px) {
/* header não quebra mais no mobile */
.header { gap: 9px; padding: 0 12px; }
.header__status { display: none; } /* o banner grande já avisa que está fechada */
.logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.logo__img { height: 56px; }
.logo__sub { display: none; }
.logo__name { font-size: 17px; }
.bag-btn { width: 42px; height: 42px; }
.cats { margin-top: 0; }
.cats__inner { padding: 10px 14px; gap: 7px; }
.chip { padding: 8px 14px; font-size: 13px; }
/* no celular o modal vira TELA CHEIA (sem bordas/cantos sobrando) */
.bag { left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; transform: translateY(14px); }
.bag.open { transform: translateY(0); }
}
@media (max-width: 480px) {
.grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card__name { font-size: 13px; }
.card__price { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ===========================================================
FASE 8 — Equipe / consultores + usuário logado
=========================================================== */
/* badge do usuário logado na topbar */
.dash-topbar { display: flex; align-items: center; gap: 14px; }
.user-badge { margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 30px; background: var(--surface-2); border: 1px solid var(--border-2); }
.user-badge__av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; font-size: 17px; line-height: 1; text-align: center; }
.user-badge__av--ini { background: var(--gold-grad); color: #1a1306; font-weight: 800; font-size: 14px; }
.user-badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.user-badge__txt b { font-size: 13px; color: var(--text); }
.user-badge__txt small { font-size: 11px; color: var(--gold-2); }
/* cabeçalho do painel equipe */
.eq-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.eq-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 640px; }
.eq-sub b { color: var(--gold-2); }
/* faixa "atendendo agora" */
.eq-plantao { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px;
background: linear-gradient(120deg, rgba(var(--accent-rgb),.14), transparent); border: 1px solid rgba(var(--accent-rgb),.3); flex-wrap: wrap; }
.eq-plantao > span:first-child { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-2); color: var(--gold-2); }
.eq-plantao > span:first-child svg { width: 20px; height: 20px; }
.eq-plantao small { display: block; font-size: 11.5px; color: var(--muted); }
.eq-plantao b { font-size: 16px; color: var(--text); }
.eq-plantao__hint { margin-left: auto; font-size: 12px; color: var(--muted-2); max-width: 360px; }
/* grid de consultores */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.eq-card { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 15px; transition: border-color .2s, box-shadow .2s; }
.eq-card--on { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.25), 0 8px 22px rgba(0,0,0,.3); }
.eq-card--off { opacity: .6; }
.eq-card__top { display: flex; align-items: center; gap: 12px; }
.eq-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.eq-av--ini { background: var(--gold-grad); color: #1a1306; font-weight: 800; font-size: 18px; }
.eq-card__id { flex: 1; min-width: 0; }
.eq-card__id b { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--text); }
.eq-card__id small { font-size: 12px; color: var(--muted); }
.eq-tag-you { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: rgba(var(--accent-rgb),.18); color: var(--gold-2); }
.eq-on-badge { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 20px; background: var(--green); color: #04210f; flex: 0 0 auto; }
.eq-card__acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.eq-btn { flex: 1; min-width: 96px; height: 36px; padding: 0 16px; white-space: nowrap; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border-2); transition: filter .15s, opacity .15s; }
.eq-btn--gold { background: var(--gold-grad); color: #1a1306; border: 0; }
.eq-btn--ghost { background: transparent; color: var(--text); }
.eq-btn--danger { background: transparent; color: #e06a6a; border-color: rgba(224,106,106,.4); flex: 0 0 auto; min-width: 0; padding: 0 14px; }
.eq-btn--plantao { flex: 1 1 100%; } /* depois do .eq-btn pra ganhar no cascade: ocupa a linha inteira */
.eq-btn--on { background: rgba(46,224,111,.14); color: #2ee06f; border: 1px solid rgba(46,224,111,.5); }
.eq-btn--on:disabled { opacity: 1; } /* mostra o verde ativo mesmo desabilitado */
.eq-btn:hover:not(:disabled) { filter: brightness(1.12); }
.eq-btn:disabled { opacity: .5; cursor: default; }
.eq-perm { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-2); font-size: 13px; color: var(--muted); }
.eq-perm b { color: var(--gold-2); }
.eq-perm svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold-2); }
/* dropzone redonda (foto do consultor) */
.dropzone--round .dz-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
/* formato da mensagem de pedido */
.cfg-card--fold { padding-bottom: 18px; }
.fmt-head { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; background: none; border: 0;
padding: 4px 0; cursor: pointer; color: var(--text); text-align: left; }
.fmt-head h3 { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 700; }
.fmt-head h3 > span:first-child { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.fmt-head h3 svg { width: 18px; height: 18px; }
.fmt-resumo { flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold-2);
background: rgba(var(--accent-rgb),.14); border: 1px solid rgba(var(--accent-rgb),.3);
padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.fmt-chevron { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); transition: transform .22s; }
.fmt-chevron svg { width: 20px; height: 20px; }
.cfg-card--fold.open .fmt-chevron { transform: rotate(180deg); color: var(--gold-2); }
.fmt-body { max-height: 0; opacity: 0; overflow: hidden;
transition: max-height .3s ease, opacity .25s ease; }
.cfg-card--fold.open .fmt-body { max-height: 2200px; opacity: 1; }
/* aberto: deixa overflow visível pra não cortar os seletores de cor (popover) */
.cfg-card--fold.open .fmt-body { overflow: visible; }
/* resuminho colorido no cabeçalho (tema / consultivo) */
.fold-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block;
border: 1px solid rgba(255,255,255,.25); vertical-align: middle; }
.cfg-card--fold.open .fmt-resumo { display: none; }
.fmt-opts { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.fmt-opt { flex: 1; min-width: 200px; text-align: left; padding: 14px; border-radius: 13px; cursor: pointer;
background: var(--surface-2); border: 1.5px solid var(--border-2); transition: border-color .15s, background-color .15s; }
.fmt-opt b { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 4px; }
.fmt-opt small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.fmt-opt:hover { border-color: var(--gold-deep); }
.fmt-opt.sel { border-color: var(--gold); background: rgba(var(--accent-rgb),.08); }
.fmt-opt.sel b { color: var(--gold-2); }
.fmt-preview { margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: #0d1117; border: 1px solid var(--border-2);
color: #d6dae0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; font-family: inherit; }
/* ===== NITHI PICKER (seletor de cor estilo Figma) ===== */
.np-trigger { cursor: pointer; border: 1px solid var(--border-2); border-radius: 10px;
min-width: 46px; height: 34px; display: inline-block; vertical-align: middle;
background-image: linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);
background-size: 12px 12px; background-position: 0 0,0 6px,6px -6px,-6px 0; }
.np-pop { display: none; position: fixed; z-index: 10000; width: 268px; padding: 12px;
background: #14151a; border: 1px solid #2c2f39; border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,.6); user-select: none; }
.np-tabs { display: flex; gap: 6px; margin-bottom: 10px; background: #0e0f13; padding: 4px; border-radius: 10px; }
.np-tab { flex: 1; padding: 7px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.np-tab.sel { background: #262932; color: #fff; }
.np-grad { display: none; margin-bottom: 10px; }
.np-grad-bar { position: relative; height: 26px; }
.np-grad-prev { position: absolute; inset: 0; border-radius: 8px; border: 1px solid #2c2f39; }
.np-stops { position: absolute; inset: 0; }
.np-stop { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); cursor: grab; }
.np-stop.sel { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.np-grad-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.np-seg { display: flex; background: #0e0f13; border-radius: 8px; padding: 3px; }
.np-seg button { padding: 5px 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.np-seg button.sel { background: #262932; color: #fff; }
.np-angle { display: flex; align-items: center; gap: 6px; flex: 1; }
.np-angle input { flex: 1; }
.np-angle span { font-size: 11px; color: var(--muted); min-width: 30px; }
.np-sv { position: relative; height: 150px; border-radius: 10px; margin-bottom: 12px; cursor: crosshair; }
.np-sv-h { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%,-50%); box-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none; }
.np-hue, .np-alpha { position: relative; height: 14px; margin-bottom: 11px; border-radius: 999px; }
.np-hue { background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.np-alpha { background-image: linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%); background-size: 10px 10px; background-position: 0 0,0 5px,5px -5px,-5px 0; }
.np-alpha-grad { position: absolute; inset: 0; border-radius: 999px; }
.np-hue input, .np-alpha input { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: none; margin: 0; cursor: pointer; position: relative; z-index: 2; }
.np-hue input::-webkit-slider-thumb, .np-alpha input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }
.np-hue input::-moz-range-thumb, .np-alpha input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.3); }
.np-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.np-hx { display: flex; align-items: center; gap: 8px; }
.np-hx label, .np-rgb label { font-size: 10px; color: var(--muted-2); font-weight: 700; }
.np-hx input { flex: 1; }
.np-pop input[type="text"], .np-pop input[type="number"] { background: #0e0f13; border: 1px solid #2c2f39; border-radius: 7px; color: #fff; padding: 7px 8px; font-size: 12px; width: 100%; }
.np-rgb { display: flex; gap: 6px; }
.np-rgb > div { flex: 1; text-align: center; }
.np-rgb label { display: block; margin-bottom: 3px; }
.np-rgb input { text-align: center; padding: 6px 2px; }
.np-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.np-swatches span { width: 20px; height: 20px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,.12); }
/* ===== LINHA COM TOGGLE (texto + switch) ===== */
.toggle-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 9px 12px;
background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--border, #2a2a2a); border-radius: 11px; }
.toggle-row__txt { flex: 1; font-size: 13px; line-height: 1.3; color: var(--text, #fff); }
.toggle-row__txt small { display: block; color: var(--muted-2, #888); font-size: 11px; margin-top: 2px; font-weight: 400; }
/* ===== RECORTADOR DE FOTO ===== */
.crop-scrim { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
padding: 20px; background: rgba(4,4,4,.84); backdrop-filter: blur(6px); }
.crop-scrim.open { display: flex; }
.crop-box { width: 360px; max-width: 100%; background: var(--surface, #121212); border: 1px solid var(--border, #2a2a2a);
border-radius: 18px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.crop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.crop-head h3 { font-size: 16px; font-weight: 700; }
.crop-x { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--text, #fff); font-size: 15px; }
.crop-x:hover { background: rgba(255,255,255,.12); }
.crop-stage { position: relative; margin: 0 auto; border-radius: 12px; overflow: hidden;
background: #14100a; touch-action: none; cursor: crosshair; }
.crop-img { position: absolute; user-select: none; pointer-events: none; }
.crop-sel { position: absolute; box-sizing: border-box; border: 2px solid var(--gold, #e9b949);
box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; border-radius: 2px; }
.crop-h { position: absolute; width: 16px; height: 16px; background: var(--gold, #e9b949);
border: 2px solid #14100a; border-radius: 4px; pointer-events: auto; touch-action: none; }
.crop-h--nw { left: -9px; top: -9px; cursor: nwse-resize; }
.crop-h--ne { right: -9px; top: -9px; cursor: nesw-resize; }
.crop-h--sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.crop-h--se { right: -9px; bottom: -9px; cursor: nwse-resize; }
/* alças de borda (um eixo só) */
.crop-e { position: absolute; background: var(--gold, #e9b949); border: 2px solid #14100a;
border-radius: 4px; pointer-events: auto; touch-action: none; }
.crop-e--n, .crop-e--s { width: 28px; height: 10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crop-e--e, .crop-e--w { width: 10px; height: 28px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-e--n { top: -6px; }
.crop-e--s { bottom: -6px; }
.crop-e--e { right: -6px; }
.crop-e--w { left: -6px; }
/* slider de arredondamento */
.crop-round-row { display: flex; align-items: center; gap: 10px; margin: 14px 2px 4px; font-size: 13px; color: var(--muted, #9b968c); }
.crop-round-row span { white-space: nowrap; font-weight: 600; color: var(--text, #f6f4ee); }
.crop-bg-row { display: flex; align-items: center; gap: 12px; margin: 10px 2px 2px; font-size: 13px; color: var(--text, #f6f4ee); flex-wrap: wrap; }
.crop-bg-row > span { font-weight: 600; }
.crop-bg-row input[type="color"] { width: 40px; height: 30px; border: 1px solid var(--border-2, #2a2a2a); border-radius: 8px; background: none; cursor: pointer; padding: 2px; }
.crop-bg-row input[type="color"]:disabled { opacity: .4; cursor: not-allowed; }
.crop-nobg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #9b968c); cursor: pointer; }
.crop-nobg input { accent-color: var(--gold, #e9b949); }
.crop-hint--dim { color: var(--muted-2, #777); margin: 8px 0 0; }
.crop-round { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); cursor: pointer; }
.crop-round::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
border-radius: 50%; background: var(--gold-grad, #e9b949); border: 3px solid var(--bg-2, #0a0a09);
box-shadow: 0 0 0 1px var(--border-2, #2a2a2a), 0 2px 7px rgba(0,0,0,.55); cursor: pointer; }
.crop-round::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold, #e9b949);
border: 3px solid var(--bg-2, #0a0a09); box-shadow: 0 0 0 1px var(--border-2, #2a2a2a); cursor: pointer; }
/* ===== PRODUTOS: recolher + busca + ordenar ===== */
.prod-fold { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text, #f6f4ee); }
.prod-fold h2 { font-size: 19px; }
.prod-count { color: var(--muted, #9b968c); font-weight: 500; font-size: 14px; }
.prod-chev { width: 9px; height: 9px; flex: 0 0 auto;
border-right: 2px solid var(--muted, #9b968c); border-bottom: 2px solid var(--muted, #9b968c);
transform: rotate(45deg); transition: transform .2s; }
.prod-collapsed .prod-chev { transform: rotate(-45deg); }
.prod-collapsed #prodTableWrap { display: none; }
.prod-toolbar { display: flex; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.prod-search { position: relative; flex: 1; min-width: 200px; }
.prod-search__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2, #6b675e); display: grid; place-items: center; pointer-events: none; }
.prod-search__ico svg { width: 17px; height: 17px; }
.prod-search input { width: 100%; height: 44px; padding: 0 14px 0 38px; border-radius: 11px;
background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); font-size: 14px; }
.prod-search input:focus { outline: none; border-color: var(--gold, #e9b949); box-shadow: 0 0 0 3px rgba(233,185,73,.15); }
.prod-search input::placeholder { color: var(--muted-2, #6b675e); }
.prod-ordem { width: auto; min-width: 180px; flex: 0 0 auto; }
.t-empty { text-align: center; color: var(--muted, #9b968c); padding: 34px 12px; font-size: 14px; }
/* finalizar atendimento + filtro da lista de conversas */
.cv-finalizar { margin-left: auto; padding: 7px 13px; border-radius: 9px; background: rgba(46,224,111,.14); border: 1px solid rgba(46,224,111,.4); color: #2ee06f; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cv-finalizar:hover { background: rgba(46,224,111,.22); }
.cv-finalizar.done { background: rgba(233,185,73,.14); border-color: rgba(233,185,73,.4); color: var(--gold-2, #e9b949); }
.conv-filtro { display: flex; gap: 6px; padding: 8px; position: sticky; top: 0; background: var(--bg-2, #0d0d0c); z-index: 2; }
.conv-filtro button { flex: 1; padding: 7px 6px; border-radius: 9px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); font-size: 12px; font-weight: 600; cursor: pointer; }
.conv-filtro button.on { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
.conv-filtro button b { color: var(--text, #f6f4ee); }
.conv-item.fin { opacity: .6; }
.conv-item.fin .conv-tag { background: rgba(46,224,111,.14); color: #2ee06f; }
.conv-vazio { padding: 30px 16px; text-align: center; color: var(--muted, #9b968c); font-size: 13.5px; }
/* ===== CONVERSAS — painel operacional (fila) ===== */
#anCards { display: block; margin-bottom: 14px; }
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ops-card { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 14px; padding: 14px 16px; }
.ops-card span { font-size: 12px; color: var(--muted, #9b968c); }
.ops-card b { display: block; font-size: 24px; font-weight: 800; margin-top: 4px; color: var(--text, #f6f4ee); }
.ops-card b small { font-size: 13px; font-weight: 600; color: var(--muted, #9b968c); }
.ops-fila { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 14px; padding: 14px 16px; }
.ops-fila__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ops-fila__h b { font-size: 15px; } .ops-fila__h small { font-size: 12px; color: var(--muted-2, #6b675e); }
.ops-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ops-list li { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px; background: var(--surface, #161512); border: 1px solid var(--border, #2a2a2a); cursor: pointer; transition: border-color .15s; }
.ops-list li:hover { border-color: var(--gold-deep, #c9962f); }
.ops-pos { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad, #e9b949); color: #1a1306; font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.conv-av.sm { width: 32px; height: 32px; font-size: 13px; }
.ops-nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; }
.ops-nome small { font-weight: 400; color: var(--muted-2, #6b675e); font-size: 11.5px; }
.ops-wait { font-size: 12px; color: var(--muted, #9b968c); white-space: nowrap; }
.ops-wait b { color: var(--gold-2, #e9b949); }
.ops-wait.late { color: #ff6a52; font-weight: 700; }
/* item urgente: espera > 10 min */
.ops-list li.urg { border-color: rgba(227,93,79,.55); background: rgba(227,93,79,.07); }
.ops-list li.urg .ops-pos { background: linear-gradient(135deg, #c0392b, #e35d4f); color: #fff; }
.ops-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.ops-badge.ped { background: rgba(46,224,111,.16); color: #2ee06f; border: 1px solid rgba(46,224,111,.35); }
.ops-empty { color: var(--muted, #9b968c); padding: 22px; text-align: center; font-size: 14px; }
/* ===== GRAVADOR DE ÁUDIO (card consultivo) ===== */
.rec-mic { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
background: rgba(var(--cv-rgb), .14); border: 1px solid rgba(var(--cv-rgb), .4); color: var(--cv, #e9b949);
transition: transform .12s, background .15s; }
.rec-mic svg { width: 20px; height: 20px; }
.cvrec { margin: 0 0 8px; }
.rec-mic:hover { background: rgba(var(--cv-rgb), .22); transform: scale(1.05); }
.rec-mic--on { background: #e35d4f; color: #fff; border-color: #e35d4f; animation: recPulse 1.2s infinite; }
.rec { margin-top: 10px; }
.rec[data-state="idle"] { display: none; }
.rec__live, .rec__prev { display: none; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; border-radius: 12px; background: rgba(var(--cv-rgb), .08); border: 1px solid rgba(var(--cv-rgb), .3); }
.rec[data-state="rec"] .rec__live { display: flex; }
.rec[data-state="prev"] .rec__prev, .rec[data-state="sending"] .rec__prev, .rec[data-state="sent"] .rec__prev { display: flex; }
.rec__pulse { width: 12px; height: 12px; border-radius: 50%; background: #e35d4f; flex: 0 0 auto; animation: recPulse 1.2s infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(227,93,79,.6); } 50% { box-shadow: 0 0 0 8px rgba(227,93,79,0); } }
.rec__lbl { font-size: 13px; font-weight: 700; color: #ff8a78; }
.rec__wave { flex: 1; min-width: 90px; display: flex; align-items: center; gap: 3px; height: 30px; }
.rec__wave i { flex: 1; height: 14%; background: var(--cv, #e9b949); border-radius: 3px; transition: height .08s linear; }
.rec__time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text, #fff); font-weight: 700; }
.rec__stop { background: #e35d4f; color: #fff; padding: 8px 14px; font-size: 13px; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; }
.rec__play { width: 38px; height: 38px; border: 0; border-radius: 10px; cursor: pointer; flex: 0 0 auto; background: var(--cv, #e9b949); color: var(--cv-ink, #1a1306); font-size: 14px; }
.rec__bar { flex: 1; min-width: 80px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.rec__bar i { display: block; height: 100%; width: 0; background: var(--cv, #e9b949); transition: width .1s linear; }
.rec__del { background: rgba(255,255,255,.08); color: var(--muted, #9b968c); padding: 8px 12px; font-size: 12.5px; border: 0; border-radius: 10px; cursor: pointer; }
.rec__send { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 13px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 700;
background: linear-gradient(135deg, var(--cv, #e9b949), color-mix(in srgb, var(--cv, #e9b949) 64%, #000)); color: var(--cv-ink, #1a1306); }
.rec__send:disabled { opacity: .7; cursor: default; }
.rec__txt { flex-basis: 100%; width: 100%; font-size: 12.5px; color: var(--muted, #9b968c); line-height: 1.5; }
/* ===== BIBLIOTECA DE MÍDIA (modal) ===== */
.mid-scrim { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center;
padding: 20px; background: rgba(4,4,4,.84); backdrop-filter: blur(6px); }
.mid-scrim.open { display: flex; }
.mid-box { width: 880px; max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column;
background: var(--surface, #121212); border: 1px solid var(--border-2, #2a2a2a); border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.mid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mid-head h3 { font-size: 17px; font-weight: 700; }
.mid-x { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--text, #fff); font-size: 15px; }
.mid-x:hover { background: rgba(255,255,255,.12); }
.mid-storage { margin-bottom: 12px; }
.mid-storage__bar { height: 8px; border-radius: 999px; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); overflow: hidden; }
.mid-storage__bar i { display: block; height: 100%; background: var(--gold-grad, #e9b949); border-radius: 999px; transition: width .3s; }
.mid-storage small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted, #9b968c); }
.mid-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mid-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.mid-filtros button { padding: 6px 12px; border-radius: 999px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mid-filtros button.on { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); background: rgba(233,185,73,.08); }
.mid-busca { flex: 1; min-width: 140px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); font-size: 13px; }
.mid-busca:focus { outline: none; border-color: var(--gold, #e9b949); }
.mid-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px; border-radius: 12px; }
.mid-grid.drag { outline: 2px dashed var(--gold, #e9b949); outline-offset: -4px; }
.mid-empty { grid-column: 1/-1; text-align: center; color: var(--muted, #9b968c); padding: 50px 16px; }
.mid-card { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.mid-thumb { position: relative; aspect-ratio: 16/10; background: var(--bg, #0a0a09); display: grid; place-items: center; overflow: hidden; }
.mid-thumb img, .mid-thumb video { width: 100%; height: 100%; object-fit: cover; }
.mid-ico { font-size: 38px; }
.mid-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); pointer-events: none; }
.mid-meta { padding: 9px 10px 4px; }
.mid-meta b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mid-meta small { display: block; font-size: 11px; color: var(--muted-2, #6b675e); margin-top: 2px; }
.mid-acts { display: flex; gap: 6px; padding: 8px 10px 10px; }
.mid-pick { flex: 1; height: 32px; border-radius: 8px; background: var(--gold-grad, #e9b949); color: #1a1306; font-weight: 700; font-size: 12.5px; cursor: pointer; border: 0; }
.mid-del { width: 34px; height: 32px; border-radius: 8px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); cursor: pointer; }
.mid-del:hover { color: var(--danger, #e35d4f); border-color: var(--danger, #e35d4f); }
.mid-foot { font-size: 11.5px; color: var(--muted-2, #6b675e); margin-top: 12px; line-height: 1.5; }
/* ===== VISÃO GERAL (centro de controle) ===== */
.vg-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 11px; padding: 3px; gap: 3px; }
.seg button { padding: 7px 16px; border-radius: 8px; background: none; border: 0; color: var(--muted, #9b968c); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--gold-grad, #e9b949); color: #1a1306; }
.vg-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #2ee06f; }
.vg-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2ee06f; animation: cvGlow 1.6s ease-in-out infinite; }
.vg-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.vg-chips button { padding: 6px 13px; border-radius: 999px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vg-chips button.on { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); background: rgba(233,185,73,.08); }
/* comparar períodos */
.vg-comp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.vg-comp__lbl { font-size: 12.5px; color: var(--muted, #9b968c); font-weight: 600; }
.vg-comp select { width: auto; min-width: 200px; }
.vg-comp__custom { display: inline-flex; align-items: center; gap: 8px; }
.vg-comp__custom span { font-size: 12px; color: var(--muted-2, #6b675e); }
.vg-comp__custom input[type="date"] { height: 40px; padding: 0 10px; border-radius: 10px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); color-scheme: dark; font-size: 13px; }
.vg-comp__custom input[type="date"]:focus { outline: none; border-color: var(--gold, #e9b949); }
.vg-leg { font-style: normal; }
.vg-leg--a { color: rgb(var(--ag-rgb, 233,185,73)); }
.vg-leg--b { color: rgba(255,255,255,.6); font-weight: 700; }
.vg-card__h .vg-delta.up { color: #2ee06f; } .vg-card__h .vg-delta.dn { color: #e35d4f; }
/* seletor do gráfico principal (tipo + período) */
.vg-charttools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.vg-ctseg button { padding: 6px 12px; font-size: 12px; }
.vg-ctrange { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #9b968c); }
.vg-ctrange input[type="date"] { height: 34px; padding: 0 8px; border-radius: 9px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); color-scheme: dark; accent-color: var(--gold, #e9b949); font-size: 12px; font-family: inherit; }
.vg-ctrange input[type="date"]:focus { outline: none; border-color: var(--gold, #e9b949); box-shadow: 0 0 0 3px rgba(233,185,73,.15); }
.vg-ctrange input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85) sepia(.5) saturate(4) hue-rotate(2deg); opacity: .7; cursor: pointer; }
.vg-ctrange input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.vg-ctrange button { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); cursor: pointer; }
.vg-catleg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.vg-catleg span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text, #f6f4ee); }
.vg-catleg i { width: 10px; height: 10px; border-radius: 50%; }
.vg-kpis--main { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.vg-kpi { position: relative; background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 14px; padding: 14px 16px; }
.vg-kpi__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vg-kpi b { font-size: clamp(18px, 4.4vw, 24px); font-weight: 800; line-height: 1.1; color: var(--text, #f6f4ee); white-space: nowrap; min-width: 0; }
.vg-kpi .vg-delta { position: static; top: auto; right: auto; flex: 0 0 auto; }
.vg-kpi span { display: block; font-size: 12px; color: var(--muted, #9b968c); margin-top: 4px; }
.vg-delta { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vg-delta.up { color: #2ee06f; } .vg-delta.dn { color: #e35d4f; }
.vg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.vg-card { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 16px; padding: 16px; }
.vg-card--wide { grid-column: 1 / -1; }
.vg-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vg-card__h b { font-size: 15px; } .vg-card__h small { font-size: 12px; color: var(--muted-2, #6b675e); }
.vg-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.vg-mini .vg-kpi { padding: 10px 12px; } .vg-mini .vg-kpi b { font-size: 18px; }
/* barras horizontais */
.vg-hbars { display: flex; flex-direction: column; gap: 9px; }
.vg-hbar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.vg-hbar__n { width: 84px; color: var(--muted, #9b968c); flex: 0 0 auto; }
.vg-hbar__t { flex: 1; height: 9px; background: var(--bg, #0a0a09); border-radius: 999px; overflow: hidden; }
.vg-hbar__t i { display: block; height: 100%; background: var(--gold-grad, #e9b949); border-radius: 999px; }
.vg-hbar__v { width: 34px; text-align: right; font-weight: 700; color: var(--text, #f6f4ee); flex: 0 0 auto; }
/* 💸 GESTÃO — gastos & frete */
.gs-win { margin-bottom: 12px; }
.gs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .gs-grid { grid-template-columns: 1fr; gap: 18px; } }
.gs-col .vg-hbar__v { width: 64px; }
.gs-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #9b968c); margin-bottom: 8px; }
.gs-sub { font-size: 12.5px; color: var(--muted, #9b968c); margin-bottom: 12px; }
.gs-sub b { color: var(--text, #f6f4ee); }
.gs-est { color: var(--gold-2, #e9b949); font-weight: 600; }
.gs-hint { font-size: 12px; color: var(--muted, #9b968c); background: var(--bg, #0a0a09); border: 1px dashed var(--border-2, #2a2a2a); border-radius: 10px; padding: 12px; line-height: 1.5; }
/* barras verticais das despesas por mês */
.gs-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 18px; }
.gs-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.gs-bar b { width: 100%; max-width: 34px; background: rgba(var(--ag-rgb, 230,120,60), .85); border-radius: 6px 6px 0 0; transition: height .4s cubic-bezier(.22,1,.36,1); }
.gs-bar.atual b { background: rgba(var(--ag-rgb, 230,120,60), 1); box-shadow: 0 0 12px rgba(var(--ag-rgb, 230,120,60), .5); }
.gs-bar.est b { background: rgba(var(--ag-rgb, 230,120,60), .38); background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 6px); }
.gs-bar em { position: absolute; top: -16px; font-size: 9.5px; font-style: normal; color: var(--muted, #9b968c); white-space: nowrap; opacity: 0; transition: .15s; }
.gs-bar:hover em { opacity: 1; }
.gs-bar span { margin-top: 6px; font-size: 10px; color: var(--muted, #9b968c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gs-bar.atual span { color: var(--gold-2, #e9b949); font-weight: 700; }
.gs-fdates { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted, #9b968c); margin-top: 4px; }
/* 🛟 BACKUP & SEGURANÇA */
.bk-gate { display: grid; place-items: center; min-height: 60vh; }
.bk-gate__card { background: var(--surface, #141210); border: 1px solid var(--border-2, #2a2a2a); border-radius: 18px; padding: 34px 30px; width: min(400px, 92vw); text-align: center; }
.bk-gate__ico { font-size: 40px; margin-bottom: 6px; }
.bk-gate__card h3 { margin: 4px 0 6px; }
.bk-gate__card p { color: var(--muted, #9b968c); font-size: 13.5px; margin-bottom: 18px; }
.bk-gate__card input { width: 100%; height: 46px; padding: 0 15px; border-radius: 12px; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); font-size: 15px; margin-bottom: 12px; }
.bk-gate__card input:focus { outline: none; border-color: var(--gold, #e9b949); }
.bk-gate__card .btn-primary { width: 100%; }
.bk-gate__err { color: #e35d4f; font-size: 13px; margin-bottom: 10px; }
.bk-gate__hint { display: block; margin-top: 14px; color: var(--muted-2, #6f6a60); font-size: 12px; }
.bk-off, .bk-load, .bk-erro, .bk-vazio { padding: 22px; border-radius: 12px; background: var(--surface, #141210); border: 1px solid var(--border-2, #2a2a2a); color: var(--muted, #9b968c); font-size: 14px; }
.bk-erro { border-color: #e35d4f55; color: var(--text, #f6f4ee); line-height: 1.6; }
.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-sub { color: var(--muted, #9b968c); font-size: 13px; margin: 4px 0 0; }
.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-status { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #232323); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--muted, #9b968c); margin-bottom: 16px; }
.bk-status b { color: var(--gold-2, #e9b949); }
.bk-status--warn { border-color: #e9b94955; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-card { background: var(--surface, #141210); border: 1px solid var(--border-2, #2a2a2a); border-radius: 16px; padding: 16px; }
.bk-card__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.bk-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.bk-filtro input { background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); border-radius: 8px; color: var(--text, #f6f4ee); padding: 4px 8px; font-size: 12px; }
.bk-filtro button { background: none; border: none; color: var(--muted, #9b968c); cursor: pointer; }
.bk-dropzone { border: 2px dashed var(--border-2, #2a2a2a); border-radius: 12px; padding: 20px; text-align: center; color: var(--muted, #9b968c); font-size: 13px; cursor: pointer; margin-bottom: 14px; transition: .18s; line-height: 1.5; }
.bk-dropzone:hover, .bk-dropzone.over { border-color: var(--gold, #e9b949); background: rgba(233, 185, 73, .06); color: var(--text, #f6f4ee); }
.bk-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.bk-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg, #0a0a09); border: 1px solid var(--border, #232323); border-radius: 10px; }
.bk-item__i b { font-size: 13.5px; display: block; }
.bk-item__i small { font-size: 11px; color: var(--muted-2, #6f6a60); }
.bk-restore { flex: 0 0 auto; font-size: 12.5px; padding: 7px 12px; }
.bk-log { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; font-size: 12px; }
.bk-logrow { padding: 7px 10px; background: var(--bg, #0a0a09); border-radius: 8px; line-height: 1.5; color: var(--text, #f6f4ee); }
.bk-logrow span { color: var(--muted-2, #6f6a60); font-size: 11px; }
.bk-logrow em { color: var(--muted, #9b968c); font-style: normal; }
.bk-logrow--err { border-left: 3px solid #e35d4f; }
.bk-sol { color: var(--gold-2, #e9b949); margin-top: 4px; font-size: 11.5px; }
.bk-ok { color: var(--green, #2ee06f); }
/* mapa do Brasil */
.vg-mapwrap { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.vg-leaflet { flex: 1; min-width: 260px; height: 340px; border-radius: 12px; overflow: hidden; position: relative;
background: #0a0a09; border: 1px solid var(--border-2, #2a2a2a); }
.vg-map-off { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted, #9b968c); font-size: 13px; text-align: center; padding: 20px; }
.vg-leaflet .leaflet-control-zoom a { background: var(--surface-2, #1b1712); color: var(--gold-2, #e9b949); border-color: var(--border-2, #2a2a2a); }
.vg-map { width: 180px; height: 230px; flex: 0 0 auto; }
.vg-br { fill: rgba(233,185,73,.06); stroke: rgba(233,185,73,.35); stroke-width: .8; }
.vg-dot { fill: rgba(233,185,73,.85); stroke: #14100a; stroke-width: .5; }
.vg-cidades { flex: 1; min-width: 150px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.vg-cidades li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text, #f6f4ee); }
.vg-cidades b { margin-left: auto; color: var(--gold-2, #e9b949); }
.vg-cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #e9b949); flex: 0 0 auto; }
.vg-fonte { display: block; margin-top: 12px; font-size: 11px; color: var(--muted-2, #6b675e); line-height: 1.5; }
/* lista de agentes no dashboard */
.vg-aglist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vg-aglist li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--surface, #161512); border: 1px solid var(--border, #2a2a2a); }
.vg-agdot { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--ag-rgb),1); box-shadow: 0 0 0 3px rgba(var(--ag-rgb),.2); flex: 0 0 auto; }
.vg-agnome { flex: 1; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; }
.vg-agnome small { font-weight: 400; color: var(--muted-2, #6b675e); font-size: 11.5px; }
/* ===== AGENTE IA (SDR) ===== */
#panel-agente .cfg-wrap { margin-top: 0; }
.ag-lock { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
padding: 40px 20px; color: var(--muted, #9b968c); }
.ag-lock b { color: var(--text, #f6f4ee); font-size: 16px; }
.ag-lock span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--surface-2); color: var(--gold-2); margin-bottom: 4px; }
.ag-know { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ag-know__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px;
background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); font-size: 13px; }
.ag-know__row b { color: var(--muted, #9b968c); font-weight: 600; flex: 0 0 auto; }
.ag-know__row span { color: var(--text, #f6f4ee); text-align: right; }
.ag-consumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 6px; }
.ag-stat { background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); border-radius: 12px; padding: 14px; }
.ag-stat b { display: block; font-size: 20px; font-weight: 800; color: var(--gold-2, #e9b949); }
.ag-stat span { display: block; font-size: 12px; color: var(--text, #f6f4ee); margin-top: 3px; }
.ag-stat small { font-size: 11px; color: var(--muted-2, #6b675e); }
.ag-chat { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto;
padding: 14px; border-radius: 12px; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); margin-bottom: 12px; }
.ag-bubble { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.ag-bubble--bot { align-self: flex-start; background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); color: var(--text, #f6f4ee); border-bottom-left-radius: 4px; }
.ag-bubble--user { align-self: flex-end; background: linear-gradient(135deg, #1f9d52, #2ee06f); color: #07260f; font-weight: 600; border-bottom-right-radius: 4px; }
.ag-form { display: flex; gap: 10px; }
.ag-form input { flex: 1; height: 46px; padding: 0 14px; border-radius: 11px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); font-size: 14px; }
.ag-form input:focus { outline: none; border-color: var(--gold, #e9b949); }
.ag-form .btn-add { flex: 0 0 auto; }
/* ===== TIME DE AGENTES — cards / tabela / hub / financeiro ===== */
/* toolbar view toggle */
.ag-viewtoggle { display: flex; gap: 4px; flex: 0 0 auto; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); border-radius: 11px; padding: 3px; }
.ag-vt { width: 40px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: none; border: 0; color: var(--muted, #9b968c); cursor: pointer; }
.ag-vt svg { width: 18px; height: 18px; }
.ag-vt.on { background: var(--surface-2, #1b1712); color: var(--gold-2, #e9b949); }
/* controle financeiro — dashboard */
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fin-kpi { background: var(--surface, #161512); border: 1px solid var(--border, #2a2a2a); border-radius: 12px; padding: 12px 14px; }
.fin-kpi span { font-size: 11.5px; color: var(--muted, #9b968c); }
.fin-kpi b { display: block; font-size: 22px; font-weight: 800; color: var(--text, #f6f4ee); line-height: 1.15; margin-top: 3px; }
.fin-kpi b small { font-size: 12px; font-weight: 600; color: var(--muted, #9b968c); }
.fin-kpi .fin-delta { font-size: 11px; font-weight: 700; }
.fin-kpi .fin-delta.up { color: #2ee06f; } .fin-kpi .fin-delta.dn { color: #e35d4f; }
.fin-kpi .fin-sub { font-size: 12px; color: var(--gold-2, #e9b949); font-weight: 700; }
.fin-main { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fin-donut { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.fin-donut svg { width: 140px; height: 140px; }
.fin-donut__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin-donut__c b { font-size: 16px; font-weight: 800; color: var(--text, #f6f4ee); }
.fin-donut__c span { font-size: 11px; color: var(--muted, #9b968c); }
.fin-rows { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 9px; }
.fin-row { display: flex; align-items: center; gap: 10px; }
.fin-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fin-nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; }
.fin-nome small { font-weight: 400; color: var(--muted-2, #6b675e); font-size: 11px; }
.fin-share { width: 90px; height: 7px; border-radius: 999px; background: var(--bg, #0a0a09); overflow: hidden; flex: 0 0 auto; }
.fin-share i { display: block; height: 100%; border-radius: 999px; }
.fin-val { width: 84px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--gold-2, #e9b949); flex: 0 0 auto; }
.fin-val.gratis { color: #2ee06f; }
.fin-dica { margin-top: 14px; font-size: 12.5px; color: var(--muted, #9b968c); line-height: 1.5; background: var(--surface, #161512); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; padding: 10px 12px; }
.fin-dica b { color: var(--text, #f6f4ee); }
/* controle financeiro (legado) */
.ag-fin-top { margin-bottom: 12px; }
.ag-fin-tot { display: flex; flex-direction: column; gap: 2px; }
.ag-fin-tot small { font-size: 12px; color: var(--muted, #9b968c); }
.ag-fin-tot b { font-size: 26px; font-weight: 800; color: var(--gold-2, #e9b949); line-height: 1.1; }
.ag-fin-tot span { font-size: 12px; color: var(--muted-2, #6b675e); }
.ag-fin-rows { display: flex; flex-direction: column; gap: 6px; }
.ag-fin-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2, #1b1712); border: 1px solid var(--border, #2a2a2a); }
.ag-fin-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface, #161512); font-size: 16px; }
.ag-fin-av img { width: 100%; height: 100%; object-fit: cover; }
.ag-fin-nome { flex: 1; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; }
.ag-fin-nome small { font-weight: 400; color: var(--muted-2, #6b675e); font-size: 11.5px; }
.ag-fin-tok { font-size: 12.5px; color: var(--muted, #9b968c); font-variant-numeric: tabular-nums; }
.ag-fin-val { font-size: 13.5px; font-weight: 700; color: var(--gold-2, #e9b949); min-width: 72px; text-align: right; }
.ag-fin-val.gratis { color: #2ee06f; }
/* MODO DEMO — paleta tingida (continua dark, mas noutro tom) via --demo-rgb */
body.demo {
--bg: color-mix(in srgb, rgb(var(--demo-rgb)) 8%, #0a0a09);
--bg-2: color-mix(in srgb, rgb(var(--demo-rgb)) 10%, #0d0d0c);
--surface: color-mix(in srgb, rgb(var(--demo-rgb)) 12%, #141012);
--surface-2: color-mix(in srgb, rgb(var(--demo-rgb)) 16%, #1a141c);
--border: color-mix(in srgb, rgb(var(--demo-rgb)) 26%, #262024);
--border-2: color-mix(in srgb, rgb(var(--demo-rgb)) 22%, #2a2228);
background: var(--bg) !important;
}
/* botão de relatório no topo */
.topbar-pdf { height: 34px; padding: 0 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); }
.topbar-pdf:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
.rel-btn { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); color: var(--text, #f6f4ee); flex: 0 0 auto; }
.rel-btn:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
.print-head { display: none; }
/* switch de demo no topo */
.demo-switch { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 30px; background: var(--surface-2, #1b1712); border: 1px solid var(--border-2, #2a2a2a); }
.demo-switch__lbl { font-size: 12.5px; font-weight: 700; color: var(--muted, #9b968c); white-space: nowrap; }
body.demo .demo-switch { border-color: rgb(var(--demo-rgb)); }
body.demo .demo-switch__lbl { color: rgb(var(--demo-rgb)); }
.demo-cor { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; flex: 0 0 auto; }
/* ribbon de teste na LOJA */
.demo-ribbon { width: 100%; text-align: center; padding: 7px 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; background: rgb(var(--demo-rgb)); color: #fff; position: relative; z-index: 999; }
/* banner global do MODO DEMONSTRAÇÃO (sandbox) */
.demo-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
padding: 10px 24px; background: linear-gradient(90deg, rgba(233,185,73,.16), rgba(251,58,162,.12));
border-bottom: 1px solid rgba(233,185,73,.4); color: var(--text, #f6f4ee); font-size: 13px; }
.demo-banner b { color: var(--gold-2, #e9b949); }
.demo-banner__acts { display: flex; gap: 8px; }
.demo-banner__acts button { padding: 6px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border-2, #2a2a2a); background: var(--surface-2, #1b1712); color: var(--text, #f6f4ee); }
.demo-banner__acts button:hover { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
body.demo .dash-topbar { box-shadow: inset 0 -2px 0 rgba(233,185,73,.5); }
/* topo da aba agentes + modo demonstração */
.ag-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-demo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted, #9b968c); cursor: pointer; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border-2, #2a2a2a); background: var(--surface-2, #1b1712); }
.ag-demo input { accent-color: var(--gold, #e9b949); }
body.demo .ag-demo { border-color: var(--gold, #e9b949); color: var(--gold-2, #e9b949); }
/* gráfico consolidado de todos os agentes */
.agc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.agc-head b { font-size: 15px; }
.agc-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.agc-subt { font-size: 12.5px; color: var(--muted, #9b968c); font-weight: 600; }
.agc-seg button { padding: 6px 12px; font-size: 12.5px; }
.agc-svg { display: block; width: 100%; height: 240px; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); border-radius: 12px; }
.agc-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.agc-axlbl { fill: var(--muted-2, #6b675e); font-size: 10px; font-family: inherit; }
.agc-end { font-size: 11px; font-weight: 800; font-family: inherit; }
.agc-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.agc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--surface-2, #1b1712); border: 1px solid rgba(var(--ag-rgb),.45); color: var(--text, #f6f4ee); }
.agc-chip .agc-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ag-rgb)); }
.agc-chip.off { opacity: .4; border-color: var(--border-2, #2a2a2a); }
.agc-chip.off .agc-dot { background: var(--muted-2, #6b675e); }
/* campo de API key com olho */
.key-wrap { position: relative; }
.key-wrap input { width: 100%; padding-right: 42px; }
.key-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .55; }
.key-eye:hover { opacity: 1; }
.key-eye.on { opacity: 1; filter: drop-shadow(0 0 3px rgba(233,185,73,.6)); }
body.demo .key-eye { display: none; }
/* barra de varredura de modelos */
.ag-scanbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-scaninfo { font-size: 12.5px; color: var(--muted, #9b968c); }
/* card de agente — borda animada + glow na cor da EMPRESA do modelo */
@property --ag-ang { syntax: ""; initial-value: 0deg; inherits: false; }
.agente-card { --ag-rgb: 233,185,73; position: relative; isolation: isolate;
background:
radial-gradient(120% 140% at 88% -10%, rgba(var(--ag-rgb),.12), transparent 55%),
linear-gradient(155deg, rgba(var(--ag-rgb),.06), transparent 60%), var(--surface-2, #1b1712);
border: 1px solid rgba(var(--ag-rgb),.28); border-radius: 16px; margin-bottom: 12px; overflow: hidden;
box-shadow: 0 0 0 1px rgba(var(--ag-rgb),.14), 0 16px 44px -26px rgba(var(--ag-rgb),.55);
transition: box-shadow .2s; }
.agente-card > * { position: relative; z-index: 1; }
.agente-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px;
background: conic-gradient(from var(--ag-ang),
rgba(var(--ag-rgb),0) 0deg, rgba(var(--ag-rgb),.9) 70deg, rgba(var(--ag-rgb),0) 150deg,
rgba(var(--ag-rgb),0) 180deg, rgba(var(--ag-rgb),.9) 250deg, rgba(var(--ag-rgb),0) 330deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: agSpin 8s linear infinite; }
.agente-card::after { content: ""; position: absolute; inset: -45% -10% auto -10%; height: 62%; z-index: 0; pointer-events: none;
background: radial-gradient(60% 100% at 50% 0%, rgba(var(--ag-rgb),.16), transparent 70%); animation: cvGlow 5s ease-in-out infinite; }
@keyframes agSpin { to { --ag-ang: 360deg; } }
.agente-card.dragging { opacity: .5; }
.agente-card.dragover { box-shadow: 0 0 0 2px rgba(var(--ag-rgb),.6); }
@media (prefers-reduced-motion: reduce) { .agente-card::before, .agente-card::after { animation: none; } }
.agente-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.agente-av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); }
.agente-av img { width: 100%; height: 100%; object-fit: cover; }
.ag-emoji { font-size: 22px; }
.agente-av--lg { width: 64px; height: 64px; }
.agente-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agente-id b { font-size: 15px; }
.agente-id small { font-size: 12.5px; color: var(--muted, #9b968c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agente-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--gold-2, #e9b949); background: rgba(233,185,73,.12); border: 1px solid rgba(233,185,73,.3); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.agente-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.agente-dot.on { background: #2ee06f; box-shadow: 0 0 0 3px rgba(46,224,111,.18); }
.agente-dot.off { background: var(--muted-2, #6b675e); }
.agente-card.open .agente-head .fmt-chevron { transform: rotate(180deg); color: var(--gold-2, #e9b949); }
.agente-body { display: none; padding: 0 16px 18px; border-top: 1px solid var(--border, #2a2a2a); }
.agente-card.open .agente-body { display: block; }
.agente-fototop { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
/* hub de modelo */
.ag-hub { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--surface, #161512); border: 1px solid var(--border-2, #2a2a2a); }
.ag-hub__title { font-size: 13.5px; font-weight: 700; color: var(--text, #f6f4ee); }
.ag-hub__title small { font-weight: 400; color: var(--muted-2, #6b675e); }
.ag-reco { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ag-reco__chip { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; background: var(--surface-2, #1b1712); border: 1px dashed rgba(233,185,73,.4); color: var(--gold-2, #e9b949); }
.ag-reco__chip:hover { border-style: solid; background: rgba(233,185,73,.08); }
.ag-hub__info { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted, #9b968c); }
.ag-hub__info b { color: var(--text, #f6f4ee); }
.ag-okreco { color: #2ee06f !important; }
.ag-hub__info .ag-okreco { color: #2ee06f; }
/* performance — mini dashboard */
.ag-perf { margin-top: 8px; }
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ag-kpi { background: var(--surface, #161512); border: 1px solid var(--border, #2a2a2a); border-radius: 11px; padding: 11px 12px; }
.ag-kpi b { display: block; font-size: 20px; font-weight: 800; color: rgba(var(--ag-rgb), 1); line-height: 1.1; }
.ag-kpi span { display: block; font-size: 11.5px; color: var(--muted, #9b968c); margin-top: 3px; }
.ag-chart { position: relative; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); border-radius: 12px; padding: 10px 4px 4px; margin-bottom: 10px; }
.ag-area { display: block; width: 100%; height: 130px; }
.ag-chart__lbl { display: block; font-size: 11px; color: var(--muted-2, #6b675e); text-align: center; padding: 2px 0 4px; }
.ag-bars { display: flex; align-items: flex-end; gap: 8px; height: 80px; padding: 8px 4px; background: var(--bg, #0a0a09); border: 1px solid var(--border-2, #2a2a2a); border-radius: 10px; }
.ag-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.ag-bar i { width: 100%; max-width: 22px; background: var(--gold-grad, #e9b949); border-radius: 4px 4px 0 0; }
.ag-bar span { font-size: 10px; color: var(--muted-2, #6b675e); }
.ag-perf__stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--muted, #9b968c); }
.ag-perf__stats b { color: var(--text, #f6f4ee); }
/* tabela de agentes */
.ag-table .ag-tav { width: 44px; }
.ag-table .ag-tav img, .ag-table .ag-tav .ag-emoji { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ag-table .ag-tav .ag-emoji { display: inline-grid; place-items: center; font-size: 16px; background: var(--surface-2); }
.ag-table .ag-tdesc { color: var(--muted, #9b968c); font-size: 12.5px; }
.ag-table tr[data-ag] { cursor: pointer; }
.ag-table tr.dragover td { box-shadow: inset 0 2px 0 var(--gold, #e9b949); }
.ag-table tr.dragging { opacity: .5; }
/* ===== STATUS DA LOJA (abre/fecha manual ou automático) ===== */
.store-status { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-2, #2a2a2a); }
.ss-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted, #9b968c); margin-bottom: 10px; }
.ss-toggle { position: relative; width: 100%; height: 56px; border-radius: 15px; padding: 0;
border: 1px solid var(--border-2, #2a2a2a); background: var(--surface-2, #1b1712);
cursor: pointer; display: flex; align-items: center; overflow: hidden; }
.ss-side { flex: 1; text-align: center; font-weight: 800; font-size: 14.5px; letter-spacing: .3px;
z-index: 1; color: var(--muted-2, #6b675e); transition: color .25s; }
.ss-knob { position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 12px;
transition: left .28s cubic-bezier(.34,1.56,.64,1), background .25s; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.ss-toggle[data-state="fechada"] .ss-knob { left: 4px; background: linear-gradient(135deg, #c0392b, #e35d4f); }
.ss-toggle[data-state="aberta"] .ss-knob { left: 50%; background: linear-gradient(135deg, #1f9d52, #2ee06f); }
.ss-toggle[data-state="fechada"] .ss-side--closed { color: #fff; }
.ss-toggle[data-state="aberta"] .ss-side--open { color: #07260f; }
.ss-mode { font-size: 12px; line-height: 1.5; color: var(--muted-2, #6b675e); margin-top: 9px; }
.ss-mode b { color: var(--muted, #9b968c); }
.ss-auto { background: none; border: 0; padding: 0; color: var(--gold-2, #e9b949); cursor: pointer; font-size: 12px; font-weight: 600; text-decoration: underline; }
.ss-warn { display: block; color: #ff8a78; font-weight: 600; margin-bottom: 6px; line-height: 1.45; }
.store-status--warn .ss-toggle { border-color: #e35d4f; box-shadow: 0 0 0 3px rgba(227,93,79,.20); }
/* aviso global no topo (visível em qualquer aba) */
.loja-aviso { align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
background: rgba(233,185,73,.14); border: 1px solid rgba(233,185,73,.4); color: var(--gold-2, #e9b949); }
.loja-aviso--warn { background: rgba(227,93,79,.16); border-color: rgba(227,93,79,.55); color: #ff8a78;
animation: avisoPulse 1.8s ease-in-out infinite; }
@keyframes avisoPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(227,93,79,.4); } 50% { box-shadow: 0 0 0 6px rgba(227,93,79,0); } }
.crop-hint { font-size: 11.5px; color: var(--muted, #888); text-align: center; margin: 6px 0 12px; }
.crop-acts { display: flex; gap: 10px; }
.crop-acts .btn-ghost, .crop-acts .btn-primary { flex: 1; }
/* ===== VERIFICAÇÃO DE IDADE 18+ ===== */
.age-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(4,4,4,.86); backdrop-filter: blur(7px); }
.age-gate__card { width: 100%; max-width: 420px; text-align: center; background: var(--surface);
border: 1px solid var(--border-2); border-radius: 20px; padding: 34px 28px;
box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.age-gate__sel { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px;
font-size: 22px; font-weight: 900; color: #1a1306; border-radius: 50%; background: var(--gold-grad);
box-shadow: 0 8px 24px rgba(var(--accent-rgb),.4); }
.age-gate__card h2 { font-size: 20px; margin-bottom: 12px; }
.age-gate__card p { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.age-gate__card p b { color: var(--text); }
.age-gate__lei { font-size: 11.5px; color: var(--muted-2); }
.age-gate__acts { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.age-gate__acts .btn-primary { width: 100%; }
.age-gate__no { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; padding: 6px; }
.age-gate__no:hover { color: var(--text); text-decoration: underline; }
/* ===== CONEXÃO (UAZAPI) ===== */
.conx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 18px; }
.conx-card { --cc: #7c5cff; --cc-rgb: 124,92,255; --cc-ink: #fff;
position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border-2);
border-radius: 16px; padding: 18px; transition: border-color .2s, box-shadow .2s, transform .15s, filter .2s; }
/* barra de cor na lateral — identidade de cada número */
.conx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc); opacity: .55; transition: opacity .2s, box-shadow .2s; }
/* CONECTADO = cor viva e destacada */
.conx-card--on { border-color: rgba(var(--cc-rgb),.55);
background: linear-gradient(155deg, rgba(var(--cc-rgb),.12), transparent 60%), var(--surface);
box-shadow: 0 0 0 1px rgba(var(--cc-rgb),.22), 0 10px 32px rgba(var(--cc-rgb),.16); }
.conx-card--on::before { opacity: 1; box-shadow: 0 0 16px var(--cc); }
.conx-card--on .conx-ico { background: var(--cc); color: var(--cc-ink); }
.conx-card--on:hover { transform: translateY(-2px); }
/* AGUARDANDO QR = âmbar pulsando, cor leve */
.conx-card--wait { border-color: rgba(240,184,64,.45); }
/* DESCONECTADO = apagado, cor dessaturada */
.conx-card--off { filter: saturate(.45); opacity: .9; }
.conx-card--off::before { opacity: .25; box-shadow: none; }
.conx-card--off .conx-ico { background: var(--surface-2); color: var(--muted-2); }
.conx-card__head { display: flex; align-items: center; gap: 12px; }
.conx-ico { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
background: rgba(var(--cc-rgb),.16); color: var(--cc); transition: background-color .2s, color .2s; }
.conx-ico svg { width: 22px; height: 22px; }
.conx-ico--photo { padding: 0; overflow: hidden; }
.conx-ico--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Plano B (failover) */
.planob { margin-top: 26px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: 20px; }
.planob__head { display: flex; align-items: center; gap: 16px; }
.planob__title { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
.planob__title > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px;
background: rgba(46,224,111,.14); color: #2ee06f; }
.planob__title > span svg { width: 21px; height: 21px; }
.planob__title b { display: block; font-size: 15px; }
.planob__title small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.planob__body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-2); transition: opacity .2s; }
.planob--off .planob__body { opacity: .4; pointer-events: none; filter: grayscale(.6); }
.planob__head { cursor: pointer; }
.planob__title { flex: 1; min-width: 0; }
.planob-chev { flex: 0 0 auto; color: var(--muted, #9b968c); transition: transform .2s; }
.planob:not(.collapsed) .planob-chev { transform: rotate(180deg); color: var(--gold-2, #e9b949); }
.planob.collapsed .planob__body { display: none; }
.planob__identidade { margin-bottom: 14px; }
.cfg-lbl span { color: var(--muted-2); font-weight: 400; }
.planob__fila { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--border-2); }
.pb-row--off { opacity: .55; }
.pb-pos { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px;
background: rgba(var(--accent-rgb),.14); color: var(--gold-2); font-weight: 800; font-size: 13px; }
.pb-row__id { flex: 1; min-width: 0; }
.pb-row__id b { display: block; font-size: 13.5px; }
.pb-row__id small { color: var(--muted); font-size: 12px; }
.pb-papel { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pb-sep { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 2px; }
.pb-empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }
.planob__sim { width: 100%; }
.conx-id { flex: 1; min-width: 0; }
.conx-id b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.conx-id small { color: var(--muted); font-size: 12.5px; }
.conx-tag { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
background: var(--gold-grad); color: #1a1306; }
.conx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.conx-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.conx-status--on { color: #2ee06f; } .conx-status--on .dot { background: #2ee06f; box-shadow: 0 0 0 3px rgba(46,224,111,.18); }
.conx-status--wait { color: var(--gold-2); } .conx-status--wait .dot { background: var(--gold-2); animation: cvPulse 1.2s infinite; }
.conx-status--off { color: var(--muted-2); } .conx-status--off .dot { background: var(--muted-2); }
.conx-card__acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* modal QR */
.qr-modal { max-width: 420px; text-align: center; }
.qr-steps { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 16px; }
.qr-steps b { color: var(--text); }
.qr-box { width: 232px; height: 232px; margin: 0 auto; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-timer { font-size: 12.5px; color: var(--muted); margin: 14px 0 4px; }
.qr-timer b { color: var(--gold-2); }
.qr-note { display: block; color: var(--muted-2); font-size: 11.5px; line-height: 1.45; margin-top: 12px; }
.qr-demo { background: rgba(240,184,64,.12); border: 1px solid rgba(240,184,64,.35); color: var(--gold-2);
font-size: 12px; font-weight: 600; line-height: 1.45; border-radius: 10px; padding: 9px 12px; margin: 4px 0 12px; }
/* consultor de plantão na LOJA (perto do "Pedir pro consultor") */
.consultor-now { display: flex; align-items: center; gap: 11px; margin: 12px 0; padding: 9px 12px; border-radius: 12px;
background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.22); }
.consultor-now__av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(var(--accent-rgb),.5); }
.consultor-now__av--ini { background: var(--gold-grad); color: #1a1306; font-weight: 800; font-size: 16px; }
.consultor-now__txt { display: flex; flex-direction: column; line-height: 1.2; }
.consultor-now__txt small { font-size: 11px; color: var(--muted); }
.consultor-now__txt b { font-size: 14.5px; color: var(--text); }
.consultor-now__online { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.consultor-now__online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(46,211,102,.6); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(46,211,102,.5); } 70% { box-shadow: 0 0 0 6px rgba(46,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(46,211,102,0); } }
@media (max-width: 600px) {
.eq-plantao__hint { margin-left: 0; max-width: 100%; }
.user-badge__txt { display: none; }
}
/* grade de % de juros por parcela (Config) */
.juros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.juros-grid .field label { font-size: 11px; }
.juros-in { display: flex; align-items: center; gap: 4px; }
.juros-in input { width: 100%; min-width: 0; height: 38px; text-align: center; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); }
.juros-in input:focus { outline: none; border-color: var(--gold); }
.juros-in span { color: var(--muted); font-size: 12px; }
.pay-parcfield { grid-column: 1 / -1; }
.midia-dica { display: block; margin-top: 7px; font-size: 12px; line-height: 1.4; color: var(--muted); background: rgba(233,185,73,.08); border: 1px solid rgba(233,185,73,.2); border-radius: 8px; padding: 7px 10px; }
.midia-dica b { color: var(--gold-2); }
/* ============================================================
MOTION SYSTEM — camada única de animação (UX motion pass)
Regras: 150–250ms na maioria; saída ~75% da entrada; easing
exponencial (sem bounce); motion comunica ESTADO, não decora.
============================================================ */
:root {
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quint — padrão */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entradas decididas */
--dur-tap: 120ms; --dur-state: 220ms; --dur-enter: 300ms;
}
/* --- VITRINE: cards entram em cascata curta (máx ~480ms no total) --- */
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.grid .card { animation: cardIn var(--dur-enter) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 11) * 40ms); }
.card, .card__imgwrap img { transition-timing-function: var(--ease-out); }
/* --- BOTÕES: pressão física uniforme em todo o sistema --- */
.btn-primary, .btn-add, .btn-ghost, .rel-btn, .ped-fin, .dz-act, .chip, .chip-f,
.card__buy, .bl-addbtn, .btn-whats, .envio-opt, .opt, .rv-troco__chip, .pay-copiacola button {
transition: transform var(--dur-tap) var(--ease-out), filter var(--dur-state) var(--ease-out),
box-shadow var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out),
border-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.btn-primary:active, .btn-add:active, .btn-ghost:active, .rel-btn:active, .ped-fin:active,
.dz-act:active, .chip:active, .chip-f:active, .card__buy:active, .bl-addbtn:active, .btn-whats:active { transform: scale(0.965); }
/* --- MODAIS: entrada 260ms expo (sobe + assenta), saída rápida 160ms --- */
.modal-scrim { transition: opacity 160ms var(--ease-out), visibility 160ms; }
.modal-scrim.open { transition-duration: 220ms; }
.modal-scrim .modal { transform: scale(0.97) translateY(10px); transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.modal-scrim.open .modal { transform: none; transition: transform 280ms var(--ease-out-expo), opacity 220ms var(--ease-out); }
.prod-modal { transition: transform 180ms var(--ease-out), opacity 150ms var(--ease-out), visibility 180ms; }
.prod-modal.open { transition: transform 300ms var(--ease-out-expo), opacity 220ms var(--ease-out), visibility 0s; }
.bag { transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out), visibility 200ms; }
.bag.open { transition: transform 320ms var(--ease-out-expo), opacity 220ms var(--ease-out), visibility 0s; }
/* --- PASSOS DA SACOLA: cada etapa entra com fade+rise curto --- */
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.checkout.show, .review.show { animation: stepIn 240ms var(--ease-out) both; }
/* --- CARROSSEL DO PRODUTO: troca de slide com crossfade + leve zoom --- */
@keyframes slideIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.pm-carr__view > * { animation: slideIn 240ms var(--ease-out) both; }
.pm-carr__nav { transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), transform var(--dur-tap) var(--ease-out); }
.pm-carr__nav:active { transform: translateY(-50%) scale(0.92); }
/* --- PAINEL: troca de aba assenta o conteúdo; KPIs em cascata --- */
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.adm-panel.active { animation: panelIn 220ms var(--ease-out) both; }
@keyframes kpiIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ped-kpis .ped-kpi, .adm-stats .stat { animation: kpiIn 260ms var(--ease-out) both; }
.ped-kpis .ped-kpi:nth-child(2), .adm-stats .stat:nth-child(2) { animation-delay: 50ms; }
.ped-kpis .ped-kpi:nth-child(3), .adm-stats .stat:nth-child(3) { animation-delay: 100ms; }
.ped-kpis .ped-kpi:nth-child(4), .adm-stats .stat:nth-child(4) { animation-delay: 150ms; }
.sb-item { transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), padding-left var(--dur-state) var(--ease-out); }
.sb-nav .sb-item:hover { padding-left: 16px; }
/* --- FOLDS & GRUPOS: abrir/fechar com o mesmo easing do sistema --- */
.fmt-body { transition-timing-function: var(--ease-out) !important; }
.fmt-chevron, .grp-chev, .intg-chev, .bl-chev { transition: transform var(--dur-state) var(--ease-out); }
/* --- DRAG & DROP: pegar dá "peso", soltar assenta; alvo respira --- */
.card-clone { transition: none; }
@keyframes phBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.card-ph { animation: phBreath 1.4s ease-in-out infinite; }
.sortable-card { transition: box-shadow var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out); }
/* --- FEEDBACK DE SALVO / STATUS: aparece com pop discreto --- */
@keyframes savedPop { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
#bannersSaved, #cfgSaved, #freteSaved { display: inline-block; animation: savedPop 260ms var(--ease-out) both; }
.pay-status.ok, .pay-status.err { animation: savedPop 240ms var(--ease-out) both; }
/* --- TOAST: sobe com expo e some mais rápido --- */
.toast { transition: transform 300ms var(--ease-out-expo), opacity 200ms var(--ease-out); }
/* --- INPUTS: foco com anel suave (sem salto) --- */
.field input, .field select, .field textarea, .gst-add input, .gst-add select, .compra-item input {
transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.field input:focus, .field textarea:focus, .gst-add input:focus, .compra-item input:focus { box-shadow: 0 0 0 3px rgba(233,185,73,.14); }
/* --- REDUCED MOTION: tudo vira instantâneo/crossfade (obrigatório) --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}