/* ==========================================================================
   Importa Fácil — Design System (estilo inspirado em plataformas de import)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta */
  --navy:        #0B1E42;
  --navy-800:    #142B57;
  --navy-700:    #2A3D66;
  --blue:        #1F6FEB;
  --blue-600:    #1559C9;
  --blue-050:    #EEF4FF;
  --green:       #16A34A;
  --green-050:   #ECFDF5;
  --amber:       #D97706;
  --red:         #DC2626;
  --white:       #FFFFFF;
  --gray-050:    #F8FAFC;
  --gray-100:    #F1F5F9;
  --gray-200:    #E2E8F0;
  --gray-300:    #CBD5E1;
  --gray-400:    #94A3B8;
  --gray-500:    #64748B;
  --gray-700:    #334155;

  /* Tipografia */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sombra / raio */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 4px 20px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, .16);
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--gray-050);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* Títulos e elementos de marca em Poppins (visual arredondado/geométrico) */
h1, h2, h3, h4, h5,
.brand, .eyebrow, .hero h1, .section-head h2,
.kpi-val, .rtotal .brl, .hc-total .val, .page-head h1,
.auth-card h3, .modal-head h3 { font-family: var(--font-head); letter-spacing: -.01em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header / Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gray-200);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  display: grid; place-items: center; color: #fff; font-size: 18px;
  box-shadow: var(--shadow-sm);
}
.brand span { color: var(--blue); }
.nav-left { display: flex; align-items: center; gap: 36px; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { position: relative; color: var(--gray-700); font-weight: 500; font-size: 14.5px; transition: color .2s; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--navy); font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; font-size: 24px; color: var(--navy); }

/* Seletor de idioma */
.lang {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--gray-200); background: #fff; font-weight: 600; font-size: 14px;
  color: var(--gray-700); cursor: pointer; position: relative;
}
.lang:hover { border-color: var(--gray-300); }
.lang .flag { font-size: 15px; }
.lang .caret { font-size: 10px; color: var(--gray-400); }
.lang-menu {
  position: absolute; top: 110%; right: 0; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 130px; display: none; z-index: 60;
}
.lang.open .lang-menu { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px;
  font-size: 14px; font-weight: 500; color: var(--gray-700); text-align: left;
}
.lang-menu button:hover { background: var(--gray-100); }
.lang-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E2E8F0; }
.lang-dark:hover { border-color: rgba(255,255,255,.28); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px; font-weight: 600; font-size: 14px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* botões pequenos/utilitários mantêm caixa normal p/ legibilidade */
.btn-sm { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .28); }
.btn-primary:hover { background: var(--blue-600); box-shadow: 0 10px 26px rgba(37, 99, 235, .38); }
.btn-ghost { background: var(--white); color: var(--navy); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--gray-300); background: var(--gray-050); }
.btn-ghost.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-800); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(22, 163, 74, .28); }
.btn-green:hover { filter: brightness(1.05); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11,30,66,.72), rgba(7,15,36,.86)),
    url('../img/hero.svg') center/cover no-repeat, var(--navy);
  color: #fff; padding: 84px 0 96px;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 12% 15%, rgba(31,111,235,.28), transparent 60%),
    radial-gradient(500px 300px at 92% 85%, rgba(34,197,94,.14), transparent 60%);
  pointer-events: none;
}
.hero-grid { position: relative; display: block; max-width: 720px; margin: 0 auto; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: #DBEAFE; margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(32px, 4.8vw, 58px); line-height: 1.08; letter-spacing: -.025em;
  font-weight: 800; margin-bottom: 20px; text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #60A5FA, #34D399);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.sub { font-size: clamp(15.5px, 1.7vw, 19px); line-height: 1.6; color: #CBD5E1; max-width: 560px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-stats {
  display: flex; gap: 20px; margin: 40px auto 0; max-width: 620px; flex-wrap: wrap;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 20px 26px; backdrop-filter: blur(8px);
}
.hero-stats .s { flex: 1; min-width: 120px; }
.hero-stats .s b { display: block; font-size: 26px; font-weight: 800; font-family: var(--font-head); }
.hero-stats .s span { font-size: 12.5px; color: #B9C6DF; }

/* Modalidades de envio (hero) */
.hero-ship {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 22px; backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}
.hero-ship .hs-title { font-weight: 700; font-size: 14px; color: #DBEAFE; margin-bottom: 16px; letter-spacing: .01em; }
.hs-card {
  position: relative; overflow: hidden; display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 15px 16px 15px 17px; margin-bottom: 12px;
  transition: border-color .18s, transform .18s, box-shadow .18s, background .18s;
}
/* faixa de cor à esquerda por modalidade */
.hs-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hs-accent, #60A5FA); opacity: .9; }
.hs-express { --hs-accent: #60A5FA; }
.hs-standard { --hs-accent: #4ADE80; }
.hs-card:hover {
  transform: translateY(-2px); background: rgba(255,255,255,.08);
  border-color: color-mix(in srgb, var(--hs-accent) 55%, transparent);
  box-shadow: 0 12px 28px rgba(3,12,32,.35);
}
.hs-ico {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 22px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(155deg, color-mix(in srgb, var(--hs-accent) 32%, transparent), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.hs-body { flex: 1; min-width: 0; }
.hs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.hs-name { font-weight: 700; font-size: 15px; color: #fff; }
.hs-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hs-badge.fast { background: rgba(37,99,235,.25); color: #93C5FD; border: 1px solid rgba(96,165,250,.4); }
.hs-badge.cheap { background: rgba(34,197,94,.2); color: #86EFAC; border: 1px solid rgba(134,239,172,.4); }
.hs-meta { font-size: 12.5px; color: #B9C6DF; margin-bottom: 8px; line-height: 1.4; }
.hs-price { font-size: 13px; color: #CBD5E1; display: flex; align-items: baseline; gap: 6px; }
.hs-price b { color: #fff; font-size: 17px; font-weight: 800; font-family: var(--font-head); }
.hs-cta {
  display: block; text-align: center; margin-top: 4px; padding: 12px; border-radius: 12px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background .15s;
}
.hs-cta:hover { background: #1D4ED8; }

/* ---------- Mini-tela do produto (captura) ---------- */
.prod-preview {
  display: flex; gap: 16px; align-items: center; background: #fff;
  max-width: 600px; margin: 0 auto;
  border: 1px solid var(--gray-200); border-radius: 15px; padding: 16px; box-shadow: var(--shadow-sm);
}
.prod-preview .pp-img {
  position: relative; flex: 0 0 94px; width: 94px; height: 94px; border-radius: 11px; background: var(--gray-050);
  display: grid; place-items: center; overflow: hidden;
}
.prod-preview .pp-img .pp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--gray-050); }
.prod-preview .pp-img .pp-noimg { font-size: 32px; opacity: .35; }
.prod-preview .pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-store { font-size: 12px; font-weight: 700; color: var(--blue); }
.pp-title { font-size: 15px; font-weight: 700; line-height: 1.3; max-height: 2.6em; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
.pp-store, .pp-link { overflow-wrap: anywhere; word-break: break-word; }
.pp-price { font-size: 21px; font-weight: 800; font-family: var(--font-head); color: var(--navy); margin-top: 2px; }
.pp-price.na { color: var(--amber); font-size: 14px; font-weight: 700; }
.pp-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.pp-link { font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 4px; }
.pp-link:hover { text-decoration: underline; }
@media (max-width: 480px) { .prod-preview { gap: 13px; padding: 13px; } .prod-preview .pp-img { flex-basis: 74px; width: 74px; height: 74px; } .pp-price { font-size: 19px; } }

/* ---------- Compra assistida: layout e itens ---------- */
.ca-newquote { display: flex; flex-direction: column; gap: 20px; }
.ca-newquote .panel { min-width: 0; }
.ca-newquote #nqResult .result { min-height: 0; }
.ca-linkrow { display: flex; gap: 8px; }
.ca-linkrow input { flex: 1; min-width: 0; }
.ca-linkrow .btn { white-space: nowrap; }
.ca-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ca-fields .field { margin-bottom: 0; }
.ca-fields .ca-w { grid-column: 1 / -1; }
.ca-boxhint { font-size: 12.5px; color: var(--gray-600); margin-top: 10px; }
.ca-boxhint:empty { display: none; }
.ca-boxhint b { color: var(--navy); }
.ca-extra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.ca-extra .ca-obs { flex: 1; min-width: 200px; }
@media (max-width: 520px) { .ca-fields { grid-template-columns: 1fr; } }

/* ---------- Meu perfil: formulário compacto (campos e cards mais enxutos) ---------- */
.pf-compact .card { padding: 18px 20px; margin-bottom: 14px; }
.pf-compact .field { margin-bottom: 11px; }
.pf-compact .field label { font-size: 12.5px; margin-bottom: 5px; }
.pf-compact .input { padding: 10px 13px; font-size: 14px; }
.pf-compact .field-row { gap: 12px; }
.pf-compact h3 { font-size: 15px; margin-bottom: 3px; }
.pf-compact .card > p.muted { margin-bottom: 12px !important; font-size: 12.5px; }

.ca-item, .addr-card { border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--gray-050); }
.addr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.addr-card .field { margin-bottom: 0; }
.addr-card .field-row { margin-bottom: 12px; }
.ca-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ca-item-head b { font-size: 14px; }
.ca-del { background: none; border: none; color: var(--red, #DC2626); font-size: 12px; font-weight: 600; cursor: pointer; }
.ca-del:hover { text-decoration: underline; }
.ca-prev:not(:empty) { margin-top: 10px; }
.ca-chk { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--gray-700, #334155); cursor: pointer; }
.ca-chk input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.ca-add { width: 100%; border: 1.5px dashed var(--gray-300, #CBD5E1); background: #fff; color: var(--blue); border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer; margin-bottom: 18px; transition: border-color .15s, background .15s; }
.ca-add:hover { border-color: var(--blue); background: var(--blue-050); }
.ca-opt-radios { display: flex; flex-direction: column; gap: 8px; }
.ca-opt-radios label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; color: var(--gray-700, #334155); }
.ca-opt-radios input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
/* seções numeradas do formulário de compra assistida */
.nq-sec { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.nq-sec small { flex: 1; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--gray-500); }
.ca-newquote .panel > .nq-sec:first-of-type { border-top: none; padding-top: 4px; margin-top: 4px; }
.nq-sec-n { flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: 0; }
.nq-adv { margin-top: 14px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-050); overflow: hidden; }
.nq-adv > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 13.5px; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 8px; }
.nq-adv > summary::-webkit-details-marker { display: none; }
.nq-adv > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; color: var(--gray-500); }
.nq-adv[open] > summary::after { transform: rotate(180deg); }
.nq-adv-body { padding: 2px 14px 14px; }
.nq-adv-body .field { margin-bottom: 0; }
.nq-adv-body .hint { margin: 6px 2px 0; }

/* ---------- Carteira de créditos ---------- */
.side-link .credit-badge { margin-left: auto; background: rgba(16,185,129,.18); color: #34D399; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; letter-spacing: .01em; }
.side-link.active .credit-badge { background: rgba(255,255,255,.22); color: #fff; }
.credit-balance { background: linear-gradient(135deg, #1E3A8A, var(--navy)); color: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); }
.credit-balance .cb-label { font-size: 13px; color: #93C5FD; font-weight: 700; }
.credit-balance .cb-value { font-size: 42px; font-weight: 800; font-family: var(--font-head); letter-spacing: -.02em; margin: 6px 0 8px; }
.credit-balance .cb-hint { font-size: 13px; color: #CBD5E1; line-height: 1.5; }

/* ---------- Sub-abas (hub de pedidos) ---------- */
.oh-tabs { display: inline-flex; gap: 4px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; padding: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.oh-seg { border: none; background: transparent; color: var(--gray-500); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.oh-seg.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.oh-seg:hover:not(.on) { color: var(--navy); }

/* ---------- Gestão de pedidos (admin) — uma linha por pedido ---------- */
.adm-orders { display: flex; flex-direction: column; gap: 12px; }
/* Card em GRID com áreas nomeadas: cada bloco tem lugar fixo em qualquer largura
   (o flex-wrap antigo jogava chips/valor/ações em posições imprevisíveis). */
.adm-order {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) max-content max-content;
  grid-template-areas: "next next next next" "id chips val act";
  gap: 14px 20px; border: 1.5px solid var(--gray-300); border-radius: 14px;
  padding: 16px 20px; background: #fff; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.adm-order:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(31,111,235,.08); }
.adm-order .ao-id { grid-area: id; min-width: 0; }
.adm-order .ao-next { grid-area: next; }
@media (max-width: 1080px) {
  .adm-order { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "next next" "id val" "chips chips" "act act"; }
  .adm-order .ao-act { justify-content: flex-end; }
}
@media (max-width: 560px) {
  .adm-order { grid-template-columns: 1fr; grid-template-areas: "next" "id" "chips" "val" "act"; }
  .adm-order .ao-val { text-align: left; }
  .adm-order .ao-act { justify-content: flex-start; }
}
/* rótulo curto que nomeia cada dado do card (nada solto/sem contexto) */
.ao-lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 3px; }
/* faixa "Próximo passo" — sempre no topo do card, ocupando a largura toda */
.ao-next { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 10px; font-size: 13px; border: 1px solid transparent; }
.ao-next .aon-ic { font-size: 15px; line-height: 1; flex: none; }
.ao-next .aon-txt { font-weight: 700; min-width: 0; }
.ao-next-act { background: #FEECEC; color: var(--red, #DC2626); border-color: #FCA5A5; animation: aoPulse 1.25s ease-in-out infinite; }
.ao-next-wait { background: #FEF6E0; color: #92400E; border-color: #FDE68A; }
.ao-next-done { background: var(--green-050, #ECFDF5); color: var(--green, #16A34A); border-color: #A7F3D0; }
@keyframes aoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); border-color: #FCA5A5; }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.16); border-color: #EF4444; }
}
@media (prefers-reduced-motion: reduce) { .ao-next-act { animation: none; } }
.adm-order .ao-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.adm-order .ao-val { grid-area: val; text-align: right; font-variant-numeric: tabular-nums; }
.adm-order .ao-act { grid-area: act; display: flex; gap: 6px; align-items: center; }
.adm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; max-width: 100%; }
.adm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .adm-order .ao-val { text-align: left; } }

/* ---------- Guia de preenchimento da declaração aduaneira ---------- */
.cust-guide { margin-bottom: 16px; border: 1px solid #BFDBFE; border-radius: 12px; background: var(--blue-050); overflow: hidden; }
.cust-guide > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 13.5px; color: var(--navy); display: flex; align-items: center; gap: 8px; list-style: none; }
.cust-guide > summary::-webkit-details-marker { display: none; }
.cust-guide > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; color: var(--blue); }
.cust-guide[open] > summary::after { transform: rotate(180deg); }
.cust-guide .cg-body { padding: 0 14px 14px; font-size: 12.5px; color: var(--navy); line-height: 1.5; }
.cust-guide .cg-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cust-guide .cg-ex ul { margin: 6px 0 0; padding-left: 16px; }
.cust-guide .cg-ex li { margin: 2px 0; }
.cu-dhint { font-size: 11px; margin-top: 5px; line-height: 1.35; }

/* ---------- Seletor de pedidos (master-detail) ---------- */
.ord-picker { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
/* mesma malha do card do admin — cada bloco com lugar fixo, nada wrapando solto */
.ord-pick {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) max-content max-content;
  grid-template-areas: "next next next next" "id chips val caret";
  gap: 14px 20px; width: 100%; text-align: left; border: 1.5px solid var(--gray-300);
  background: #fff; border-radius: 14px; padding: 16px 20px; cursor: pointer;
  transition: border .15s, box-shadow .15s;
}
.ord-pick:hover { border-color: var(--gray-400); }
.ord-pick.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-050); }
.ord-pick .op-id { grid-area: id; min-width: 0; }
.ord-pick .ao-next { grid-area: next; }
.ord-pick .op-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.ord-pick .op-val { grid-area: val; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.ord-pick .ord-caret { grid-area: caret; }
@media (max-width: 1080px) {
  .ord-pick { grid-template-columns: minmax(0, 1fr) max-content max-content; grid-template-areas: "next next next" "id val caret" "chips chips chips"; }
}
@media (max-width: 560px) {
  .ord-pick { grid-template-columns: 1fr max-content; grid-template-areas: "next next" "id caret" "chips chips" "val val"; }
  .ord-pick .op-val { text-align: left; }
}

/* ---------- Chip de câmbio (cabeçalho) ---------- */
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--green-050); color: var(--green); border: 1px solid #A7F3D0;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: default;
}
.fx-chip b { font-weight: 800; }

/* ---------- Seletor de modalidade de envio ---------- */
.ship-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ship-opt { position: relative; display: block; cursor: pointer; }
.ship-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ship-opt .so-body {
  position: relative; display: flex; gap: 11px; align-items: center;
  border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 12px 13px;
  background: #fff; height: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.ship-opt .so-ico {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 20px; border-radius: 11px; background: var(--gray-050);
  border: 1px solid var(--gray-200); transition: background .15s, border-color .15s;
}
.ship-opt .so-main { flex: 1; min-width: 0; }
.ship-opt:hover .so-body { border-color: var(--blue); transform: translateY(-1px); }
.ship-opt input:checked + .so-body { border-color: var(--blue); background: var(--blue-050); box-shadow: 0 0 0 3px var(--blue-050); }
.ship-opt input:checked + .so-body .so-ico { background: #fff; border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
/* variante verde para o Standard selecionado */
.so-standard input:checked + .so-body { border-color: var(--green); background: var(--green-050); box-shadow: 0 0 0 3px var(--green-050); }
.so-standard input:checked + .so-body .so-ico { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
/* selo de selecionado */
.ship-opt input:checked + .so-body::after {
  content: "✓"; position: absolute; top: 9px; right: 10px; width: 19px; height: 19px;
  display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--blue); box-shadow: 0 2px 6px rgba(31,111,235,.4);
}
.so-standard input:checked + .so-body::after { background: var(--green); box-shadow: 0 2px 6px rgba(22,163,74,.4); }
.so-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; padding-right: 22px; }
.so-top b { font-size: 14px; }
.so-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.so-tag.fast { background: var(--blue-050); color: var(--blue); }
.so-tag.cheap { background: var(--green-050); color: var(--green); }
.so-meta { font-size: 12px; color: var(--gray-500); line-height: 1.4; }
.so-price { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.so-price b { font-size: 14px; font-weight: 800; }
.so-express .so-price b { color: var(--blue); }
.so-standard .so-price b { color: var(--green); }
.so-price.pending { color: var(--amber); font-weight: 700; }
@media (max-width: 520px) { .ship-opts { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.eyebrow { color: var(--blue); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; margin: 10px 0 12px; }
.section-head p { color: var(--gray-500); font-size: 17px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; margin-bottom: 16px; background: var(--blue-050); color: var(--blue);
}
.feature-icon.green { background: var(--green-050); color: var(--green); }
.card h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -.01em; }
.card p { color: var(--gray-500); font-size: 15px; }

/* ---------- Como funciona (steps) ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 60px; }
.step .num {
  position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--gray-500); font-size: 15px; }

/* ---------- Simulador ---------- */
.sim-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: start; }
.sim-wrap > * { min-width: 0; }
.panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { font-size: 20px; margin-bottom: 6px; }
.panel .hint { color: var(--gray-500); font-size: 14px; margin-bottom: 22px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 7px; }
.field .with-prefix { position: relative; }
.field .with-prefix .pfx { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 14px; font-weight: 600; }
.field .with-prefix input { padding-left: 40px; }
.input, select.input, textarea.input {
  width: 100%; min-width: 0; padding: 13px 15px; border: 1.5px solid transparent; border-radius: 11px;
  font-size: 15px; color: var(--navy); background: #EEF2FB; transition: border .15s, box-shadow .15s, background .15s;
}
.input[type="url"], .input[type="text"] { text-overflow: ellipsis; }
.input::placeholder { color: var(--gray-400); }
.input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(31,111,235,.14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Resultado */
.result { background: linear-gradient(160deg, var(--navy) 0%, #14213D 100%); color: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lg); min-width: 0; }
.result .rline .v { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.result .rtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.result .rtop b { font-size: 18px; }
.res-fx { font-size: 13px; color: #93C5FD; }
.res-fx b { color: #fff; }
.rline { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 15px; }
.rline .k { color: #94A3B8; }
.rline .v { font-weight: 600; }
.rline.tax .v { color: #FCA5A5; }
.rtotal { margin-top: 20px; padding: 20px; background: rgba(37,99,235,.16); border: 1px solid rgba(96,165,250,.3); border-radius: 16px; }
.rtotal .brl { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.rtotal .usd { color: #CBD5E1; font-size: 15px; margin-top: 2px; }
.savings {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 16px;
  background: rgba(22,163,74,.16); border: 1px solid rgba(52,211,153,.3); border-radius: 12px; font-size: 14px;
}
.savings b { color: #6EE7B7; }
.progress-track { height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #34D399); transition: width .5s ease; }

/* ---------- Simulador: card integrado ---------- */
.sim-section { background: radial-gradient(120% 80% at 50% 0, #fff, var(--gray-100)); }
.sim-card { display: grid; grid-template-columns: 1.06fr .94fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.sim-form { background: #fff; padding: 32px; min-width: 0; }
.sim-summary { background: linear-gradient(165deg, var(--navy) 0%, #14213D 100%); color: #fff; padding: 32px; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .sim-card { grid-template-columns: 1fr; } .sim-form, .sim-summary { padding: 24px; } }

.sim-lbl { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 12px; }
.sim-form .field { margin-bottom: 0; }

.sim-url { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 6px 6px 6px 14px; transition: border-color .15s, box-shadow .15s; }
.sim-url:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-050); }
.sim-url .sim-url-ic { font-size: 16px; opacity: .55; }
/* botão "Colar" (área de transferência) no lugar do ícone */
.sim-url button.sim-paste {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 -2px 0 -4px;
  border: none; background: transparent; cursor: pointer; border-radius: 8px; opacity: .6;
  transition: opacity .15s, background .15s, transform .1s;
}
.sim-url button.sim-paste:hover { opacity: 1; background: var(--gray-100); }
.sim-url button.sim-paste:active { transform: scale(.92); }
.sim-url button.sim-paste.ok { opacity: 1; }
.sim-url input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 2px; font-size: 15px; color: var(--navy); }
.sim-url input:focus { outline: none; }
.sim-url .btn { white-space: nowrap; border-radius: 10px; }

.sim-adv { border-top: 1px dashed var(--gray-200); padding-top: 16px; }
.sim-adv summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-600); list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.sim-adv summary::-webkit-details-marker { display: none; }
.sim-adv summary::before { content: '⚙️'; }
/* variante do ajuste de imposto dentro do orçamento (fundo escuro navy) */
.sim-summary .sim-adv { border-top-color: rgba(255, 255, 255, .16); padding-top: 14px; }
.sim-summary .sim-adv summary { color: rgba(255, 255, 255, .8); }
.sim-summary .sim-adv summary:hover { color: #fff; }
.sim-summary .sim-adv .hint { color: #A9C0E4; }
.sim-summary .sim-adv .hint b { color: #fff; }

/* resumo escuro */
.sim-res-eyebrow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #93C5FD; font-weight: 700; }
.sim-sum-head b { display: block; font-size: 19px; margin-top: 4px; overflow-wrap: anywhere; }
.sim-sum-meta { margin-top: 8px; }
.res-fx { font-size: 12.5px; color: #93C5FD; }
.res-fx b { color: #fff; }
.sim-ship-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #DBEAFE; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px; margin: 14px 0 6px; }
.sim-lines { margin-top: 4px; }
.rtotal .lbl { font-size: 13px; color: #93C5FD; margin-bottom: 4px; font-weight: 600; }
.sim-tax { display: flex; gap: 10px; align-items: flex-start; background: rgba(217,119,6,.14); border: 1px solid rgba(251,191,36,.3); border-radius: 14px; padding: 11px 13px; margin-top: 14px; font-size: 12px; color: #FCD34D; line-height: 1.5; }

/* pills de lojas */
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store-pill {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-200);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--gray-700);
  box-shadow: var(--shadow-sm);
}
.store-pill.soon::after { content: "Em breve"; font-size: 10px; background: var(--gray-100); color: var(--gray-500); padding: 2px 6px; border-radius: 6px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop.open { display: flex; animation: fade .2s ease; }
.modal {
  background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh;
  overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop .25s ease;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-head h3 { font-size: 19px; }
.modal-close { font-size: 22px; color: var(--gray-400); width: 34px; height: 34px; border-radius: 8px; }
.modal-close:hover { background: var(--gray-100); color: var(--navy); }
.modal-body { padding: 26px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Vídeo de demonstração ---------- */
.video-thumb {
  position: relative; display: block; width: 100%; max-width: 860px; margin: 0 auto;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); line-height: 0;
}
.video-thumb img { width: 100%; display: block; transition: transform .3s ease; }
.video-thumb:hover img { transform: scale(1.02); }
.video-thumb .play-ic {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px rgba(0,0,0,.35); transition: transform .2s ease;
}
.video-thumb:hover .play-ic { transform: translate(-50%, -50%) scale(1.08); }
.video-thumb .play-ic svg { margin-left: 3px; }
.video-modal .modal { max-width: 900px; background: #000; position: relative; border-radius: 16px; overflow: hidden; }
.video-modal video { width: 100%; max-height: 80vh; display: block; background: #000; }
.video-modal .modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.15); color: #fff;
}
.video-modal .modal-close:hover { background: rgba(255,255,255,.28); color: #fff; }

/* ---------- Grade de logos de lojas ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 26px 18px; }
.brand-tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.brand-tile .bt-box {
  width: 100%; aspect-ratio: 1.35; border-radius: 12px; background: #EDEFF3;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand-tile:hover .bt-box { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.10); }
.brand-tile .bt-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile .bt-nm { margin-top: 10px; font-size: 14px; color: var(--gray-700); text-align: center; }
@media (max-width: 640px) { .brand-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 18px 12px; } }

/* ===== Passos do checkout — stepper numerado ===== */
.steps { display: flex; margin: 2px 0 26px; }
.steps .stp { flex: 1; position: relative; text-align: center; }
.steps .stp::before {
  content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px;
  background: var(--gray-200); z-index: 0; transition: background .3s ease;
}
.steps .stp:first-child::before { display: none; }
.steps .stp .num {
  position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 9px;
  border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head);
  font-weight: 700; font-size: 14px; background: #fff; color: var(--gray-400);
  border: 2px solid var(--gray-200); transition: all .3s ease;
}
.steps .stp .num svg { width: 17px; height: 17px; }
.steps .stp .lbl { font-size: 12px; font-weight: 600; color: var(--gray-400); transition: color .3s ease; }
.steps .stp.done .num { background: var(--green); border-color: var(--green); color: #fff; }
.steps .stp.done .lbl { color: var(--green); }
.steps .stp.done::before { background: var(--green); }
.steps .stp.active .num { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--blue-050); }
.steps .stp.active .lbl { color: var(--navy); }
.steps .stp.active::before { background: var(--blue); }

/* ===== Formas de pagamento ===== */
.pay-methods { display: grid; gap: 12px; }
.pay-opt { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--gray-200); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border .15s, background .15s, box-shadow .15s; position: relative; }
.pay-opt:hover { border-color: var(--gray-300); background: var(--gray-050); }
.pay-opt.sel { border-color: var(--blue); background: var(--blue-050); box-shadow: 0 0 0 3px rgba(31,111,235,.1); }
.pay-opt .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gray-100); display: grid; place-items: center; font-size: 21px; transition: background .15s; }
.pay-opt.sel .ico { background: #fff; }
.pay-opt .pt { min-width: 0; }
.pay-opt b { display: block; font-size: 14.5px; color: var(--navy); }
.pay-opt small { color: var(--gray-500); font-size: 12.5px; }
.pay-opt .chk { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gray-300); display: grid; place-items: center; transition: border .15s, background .15s; }
.pay-opt.sel .chk { border-color: var(--blue); background: var(--blue); }
.pay-opt .chk svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
.pay-opt.sel .chk svg { opacity: 1; }

/* ---------- Footer ---------- */
footer { background: var(--navy); color: #94A3B8; padding: 56px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: .02em; }
footer a { display: block; color: #94A3B8; font-size: 14px; padding: 5px 0; transition: color .15s; }
footer a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 10px; }
.brand.light { color: #fff; }

/* ---------- Utilidades ---------- */
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.muted { color: var(--gray-500); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.hidden { display: none !important; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.blue { background: var(--blue-050); color: var(--blue); }
.badge.green { background: var(--green-050); color: var(--green); }
.badge.amber { background: #FEF3C7; color: var(--amber); }
.badge.gray { background: var(--gray-100); color: var(--gray-500); }
.badge.red { background: #FEE2E2; color: var(--red); }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 12px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; transition: transform .3s, opacity .3s; display: flex; gap: 10px; align-items: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- App pages (cliente/admin) ---------- */
.app-shell { display: grid; grid-template-columns: 250px 1fr; height: 100vh; overflow: hidden; }
.sidebar { background: var(--navy); color: #CBD5E1; padding: 24px 18px; height: 100vh; overflow-y: auto; }
/* sem barra de rolagem visível (mantém a rolagem por scroll/touch) */
.sidebar, .main, .table-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar, .main::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar .brand { color: #fff; margin-bottom: 32px; font-size: 18px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; color: #94A3B8; font-weight: 500; font-size: 15px; margin-bottom: 4px; cursor: pointer; transition: background .15s, color .15s; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-link.active { background: var(--blue); color: #fff; }
.side-link .ic { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: 0 0 20px; }
.side-link .ic svg { width: 19px; height: 19px; opacity: .9; }
.side-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.main { padding: 32px 40px; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; }
.page-head h1 { font-size: 26px; letter-spacing: -.02em; }
.page-head p { color: var(--gray-500); font-size: 15px; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.kpi { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpi .kpi-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.kpi .kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.kpi .kpi-lbl { color: var(--gray-500); font-size: 13px; margin-top: 2px; }
.kpi .kpi-delta { font-size: 12px; font-weight: 600; }

/* Tabela */
.table-wrap { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.table-scroll { overflow-x: auto; }
.table-scroll table { width: 100%; min-width: 0; table-layout: fixed; }
.table-scroll td, .table-scroll th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; padding-right: 12px; }
.table-scroll td .badge { max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-050); white-space: nowrap; }
td { padding: 15px 18px; border-bottom: 1px solid var(--gray-100); font-size: 14px; vertical-align: middle; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--gray-050); }
.t-strong { font-weight: 600; }

/* Chart (barras CSS) */
.chart { display: flex; align-items: flex-end; gap: 12px; height: 180px; padding-top: 10px; }
.chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart .bar { width: 100%; max-width: 42px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--blue), #60A5FA); transition: height .6s ease; }
.chart .bar-lbl { font-size: 12px; color: var(--gray-500); }

/* Timeline rastreamento */
.timeline { position: relative; padding-left: 8px; }
.tl-item { position: relative; padding: 0 0 26px 34px; }
.tl-item::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: -4px; width: 2px; background: var(--gray-200); }
.tl-item:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--gray-200); background: #fff; }
.tl-item.done .tl-dot { border-color: var(--green); background: var(--green); }
.tl-item.done::before { background: var(--green); }
.tl-item.current .tl-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.tl-item .tl-title { font-weight: 600; font-size: 15px; }
.tl-item.pending .tl-title { color: var(--gray-400); }
.tl-item .tl-date { font-size: 13px; color: var(--gray-500); }

/* Login card */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 120% at 80% -10%, #1E3A8A 0%, var(--navy) 55%, #0B1220 100%); }
.auth-card { background: #fff; border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.auth-card .brand { justify-content: center; margin-bottom: 8px; }
.seg { display: flex; background: var(--gray-100); border-radius: 12px; padding: 4px; margin: 20px 0; }
.seg button { flex: 1; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--gray-500); }
.seg button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .sim-wrap { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .seo-blog-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-actions .btn-hide { display: none; }
  .nav-toggle { display: block; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 250px; transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: none; }
  .main { padding: 20px; }
  section { padding: 60px 0; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .seo-blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* campo de link + botão empilham em vez de espremer no mobile */
  .sim-url { flex-wrap: wrap; }
  .sim-url input { padding: 12px 4px; }
  .sim-url .btn { flex: 1 1 100%; margin-top: 8px; justify-content: center; }
}

/* Menu mobile aberto */
.nav-links.open {
  display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
  background: #fff; padding: 18px 24px; gap: 6px; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow);
}
.nav-links.open a { padding: 10px 0; }

/* animação de entrada on-scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============ Sino de notificações + Chat (cliente ↔ admin) ============ */
.bell-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--gray-200, #E2E8F0); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--navy, #0B1E42); transition: background .15s, border-color .15s; }
.bell-btn:hover { background: var(--gray-050, #F8FAFC); border-color: var(--blue, #1F6FEB); }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red, #EF4444); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.bell-menu { position: absolute; top: 50px; right: 0; width: 340px; max-width: 88vw; max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid var(--gray-200, #E2E8F0); border-radius: 14px; box-shadow: 0 12px 34px rgba(2, 8, 40, .16); z-index: 60; padding: 8px; }
.bell-menu .bm-head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500, #64748B); font-weight: 700; padding: 8px 10px 4px; }
.bell-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px; border-radius: 10px; cursor: pointer; }
.bell-item:hover { background: var(--gray-050, #F8FAFC); }
.bell-item.unread { background: var(--blue-050, #EFF6FF); }
.bell-item .bi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue, #1F6FEB); margin-top: 6px; flex: none; }
.bell-empty { padding: 26px 12px; text-align: center; color: var(--gray-500, #64748B); font-size: 13px; }

.chat-thread { max-height: 46vh; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 12px; }
.chat-day { text-align: center; font-size: 11px; color: var(--gray-500, #64748B); margin: 6px 0; }
.chat-b { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; position: relative; word-break: break-word; }
.chat-b .cb-meta { font-size: 10px; opacity: .7; margin-top: 3px; }
.chat-b.them { align-self: flex-start; background: var(--gray-100, #F1F5F9); color: var(--navy, #0B1E42); border-bottom-left-radius: 4px; }
.chat-b.me { align-self: flex-end; background: var(--blue, #1F6FEB); color: #fff; border-bottom-right-radius: 4px; }
.chat-input { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--gray-200, #E2E8F0); padding-top: 12px; }
.chat-input .input { margin: 0; }
.chat-meta { display: flex; align-items: center; gap: 8px; background: var(--blue-050, #EFF6FF); border: 1px solid #BFDBFE; border-radius: 10px; padding: 9px 13px; margin-bottom: 10px; font-size: 13px; }
.chat-meta .cm-code { font-weight: 800; color: var(--blue, #1F6FEB); }
.chat-meta .cm-prod { color: var(--gray-500, #64748B); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--red, #EF4444); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.op-chat { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; padding: 2px 8px; border-radius: 999px; background: var(--gray-100, #F1F5F9); color: var(--gray-600, #475569); font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.op-chat:hover { border-color: var(--blue, #1F6FEB); color: var(--blue, #1F6FEB); }
.op-chat .chat-count { min-width: 16px; height: 16px; font-size: 10px; }

/* ============ Cards de Orçamento (aba Orçamentos) ============ */
.quote-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 12px; }
.quote-card { border: 1px solid var(--gray-200, #E2E8F0); border-radius: 16px; padding: 16px; background: #fff; transition: box-shadow .15s, border-color .15s, transform .1s; cursor: pointer; }
.quote-card:hover { border-color: var(--blue, #1F6FEB); box-shadow: 0 8px 24px rgba(2, 8, 40, .09); }
.quote-card:active { transform: scale(.995); }
.quote-card.expired { cursor: default; opacity: .72; }
.quote-card.expired:hover { border-color: var(--gray-200, #E2E8F0); box-shadow: none; }
.qc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.qc-title { display: flex; gap: 11px; min-width: 0; }
.q-img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: none; background: var(--gray-100, #F1F5F9); }
.q-ph { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--gray-100, #F1F5F9); font-size: 22px; flex: none; }
.qc-name { font-size: 14px; font-weight: 700; color: var(--navy, #0B1E42); line-height: 1.3; }
.q-count { font-size: 12px; font-weight: 800; color: var(--gray-600, #475569); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--gray-050, #F8FAFC); border: 1px solid var(--gray-200, #E2E8F0); padding: 4px 9px; border-radius: 9px; }
.q-count.urgent { color: var(--amber, #D97706); background: #FEF3C7; border-color: #FDE68A; }
.q-count.expired { color: var(--red, #EF4444); background: #FEE2E2; border-color: #FECACA; }
.qc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--gray-100, #F1F5F9); border-bottom: 1px solid var(--gray-100, #F1F5F9); }
.qc-grid > div { display: flex; flex-direction: column; gap: 2px; }
.qc-grid .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500, #64748B); }
.qc-grid b { font-size: 13px; color: var(--navy, #0B1E42); }
.qc-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.qc-brl { font-size: 23px; font-weight: 800; color: var(--navy, #0B1E42); font-family: var(--font-head, inherit); line-height: 1.05; }
.qc-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.qc-sm { font-size: 11px; color: var(--gray-500, #64748B); }

/* ============ Orçamentos por linha (lista) ============ */
.quote-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.quote-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--gray-200, #E2E8F0); border-radius: 14px; padding: 12px 14px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.quote-row:hover { border-color: var(--blue, #1F6FEB); box-shadow: 0 4px 16px rgba(2, 8, 40, .07); }
.quote-row.expired { opacity: .72; cursor: default; }
.quote-row.expired:hover { border-color: var(--gray-200, #E2E8F0); box-shadow: none; }
.qr-main { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 260px; }
.qr-name { font-size: 14px; font-weight: 700; color: var(--navy, #0B1E42); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-mid { font-size: 12px; color: var(--gray-500, #64748B); white-space: nowrap; flex: none; }
.qr-total { text-align: right; flex: none; min-width: 96px; }
.qr-total b { font-size: 16px; color: var(--navy, #0B1E42); }
.qr-act { display: flex; align-items: center; gap: 6px; flex: none; }
.qv-toggle { display: inline-flex; border: 1px solid var(--gray-200, #E2E8F0); border-radius: 10px; overflow: hidden; }
.qv-toggle button { border: none; background: #fff; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--gray-500, #64748B); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.qv-toggle button.on { background: var(--blue, #1F6FEB); color: #fff; }
@media (max-width: 720px) { .qr-mid { display: none; } }

/* ============ Barra de etapas do status (card admin) ============ */
/* Progresso das 8 etapas — barra em gradiente com divisórias por etapa */
.ao-progress { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.ao-bar { position: relative; width: 128px; max-width: 42vw; height: 7px; flex: none;
  border-radius: 999px; background: var(--gray-200, #E2E8F0); overflow: hidden; }
.ao-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #60A5FA, #2563EB);
  transition: width .45s cubic-bezier(.4,0,.2,1); }
.ao-progress.complete .ao-bar-fill { background: linear-gradient(90deg, #4ADE80, #16A34A); }
/* 7 divisórias finas (a cada 1/8) que "recortam" a barra em etapas */
.ao-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 2px), rgba(255,255,255,.85) calc(12.5% - 2px), rgba(255,255,255,.85) 12.5%); }
.ao-step-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--navy, #0B1E42); white-space: nowrap; min-width: 0; }
.ao-step-lbl em { font-style: normal; font-weight: 700; font-size: 10px; color: var(--gray-500, #64748B);
  background: var(--gray-100, #F1F5F9); padding: 1px 7px; border-radius: 999px; }
.ao-progress.cancel .ao-step-lbl { color: var(--red, #DC2626); }
@media (max-width: 640px) { .ao-bar { width: 96px; } }

/* ============ "Meus pedidos" como accordion (cliente) ============ */
.ord-acc { display: flex; flex-direction: column; gap: 12px; }
.ord-acc-item { border: 1.5px solid var(--gray-300, #CBD5E1); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.ord-acc-item:hover { border-color: var(--gray-400, #94A3B8); }
.ord-acc-item.open { border-color: var(--blue, #1F6FEB); box-shadow: 0 0 0 3px var(--blue-050, #EFF6FF), 0 6px 20px rgba(2, 8, 40, .09); }
.ord-acc-item > .ord-pick { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; }
.ord-acc-item > .ord-pick:hover { background: var(--gray-050, #F8FAFC); }
.ord-acc-item.open > .ord-pick { background: var(--blue-050, #EFF6FF); }
.ord-acc-body { padding: 6px 16px 18px; border-top: 1px solid var(--gray-100, #F1F5F9); }
.ord-caret { display: inline-grid; place-items: center; width: 22px; flex: none; color: var(--gray-500, #64748B); transition: transform .18s ease, color .15s; }
.ord-acc-item.open .ord-caret { transform: rotate(90deg); color: var(--blue, #1F6FEB); }

/* ============ Gestão de pedidos do admin como accordion ============ */
.adm-orders { }
.adm-acc-item { border: 1.5px solid var(--gray-300, #CBD5E1); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.adm-acc-item:hover { border-color: var(--gray-400, #94A3B8); }
.adm-acc-item.open { border-color: var(--blue, #1F6FEB); box-shadow: 0 0 0 3px var(--blue-050, #EFF6FF), 0 6px 20px rgba(31, 111, 235, .12); }
.adm-acc-item > .adm-order { border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.adm-acc-item > .adm-order:hover { background: var(--gray-050, #F8FAFC); }
.adm-acc-item.open > .adm-order { background: var(--blue-050, #EFF6FF); }
.adm-acc-body { padding: 8px 18px 18px; border-top: 1px solid var(--gray-100, #F1F5F9); }

/* ============ Financeiro por pedido — cards compactos + trilha rastreável ============ */
.fin-tot { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; background: var(--gray-050, #F8FAFC); border: 1px solid var(--gray-200, #E2E8F0); border-radius: 12px; padding: 12px 18px; margin-bottom: 12px; }
.fin-tot .t { display: flex; flex-direction: column; }
.fin-tot .t .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500, #64748B); }
.fin-tot .t .val { font-size: 17px; font-weight: 800; color: var(--navy, #0B1E42); }
.fin-list { display: flex; flex-direction: column; gap: 8px; }
.fin-card { border: 1px solid var(--gray-200, #E2E8F0); border-radius: 12px; background: #fff; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.fin-card.open { border-color: var(--blue, #1F6FEB); box-shadow: 0 6px 18px rgba(2, 8, 40, .07); }
.fin-head { display: flex; align-items: center; gap: 14px; padding: 11px 16px; cursor: pointer; flex-wrap: wrap; }
.fin-head:hover { background: var(--gray-050, #F8FAFC); }
.fin-card.open .fin-head { background: var(--blue-050, #EFF6FF); }
.fin-id { flex: 1 1 210px; min-width: 0; }
.fin-stats { display: flex; gap: 20px; flex: none; align-items: baseline; }
.fin-stat { text-align: right; }
.fin-stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500, #64748B); display: block; }
.fin-stat .val { font-size: 15px; font-weight: 800; }
.fin-caret { display: inline-grid; place-items: center; width: 20px; color: var(--gray-500, #64748B); flex: none; transition: transform .18s; }
.fin-card.open .fin-caret { transform: rotate(90deg); color: var(--blue, #1F6FEB); }
.fin-body { padding: 4px 16px 14px; border-top: 1px solid var(--gray-100, #F1F5F9); }
.fin-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--gray-200, #E2E8F0); font-size: 13px; align-items: baseline; }
.fin-row:last-child { border-bottom: none; }
.fin-row .k { color: var(--gray-700, #334155); }
.fin-row .k small { color: var(--gray-500, #64748B); display: block; font-size: 11px; margin-top: 1px; }
.fin-row .v { font-weight: 700; white-space: nowrap; }
.fin-ref { font-size: 11px; color: var(--gray-500, #64748B); margin-top: 8px; font-family: ui-monospace, monospace; word-break: break-all; }
@media (max-width: 620px) { .fin-stats { flex: 1 1 100%; justify-content: space-between; gap: 10px; } }
/* Trilha agrupada: Total (contexto) → Entradas / Saídas (cada uma num bloco visual) → Resultado em destaque */
.fin-row-total { padding: 10px 12px; margin-bottom: 10px; background: var(--gray-050, #F8FAFC); border-radius: 10px; border-bottom: none; }
.fin-row-total .k { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500, #64748B); }
.fin-row-total .k small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fin-row-total .v { font-size: 15px; font-weight: 800; color: var(--navy, #0B1E42); }
.fin-group { border-radius: 10px; padding: 2px 12px; margin-bottom: 10px; }
.fin-group.in { background: var(--green-050, #ECFDF5); }
.fin-group.out { background: #FEF2F2; }
.fin-group-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 8px 0 2px; }
.fin-group.in .fin-group-lbl { color: var(--green, #16A34A); }
.fin-group.out .fin-group-lbl { color: var(--red, #DC2626); }
.fin-group .fin-row { border-bottom-color: rgba(0, 0, 0, .06); }
.fin-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.fin-result .k { font-size: 13px; font-weight: 700; color: var(--gray-700, #334155); }
.fin-result .k small { display: block; font-size: 11px; font-weight: 400; color: var(--gray-500, #64748B); margin-top: 1px; }
.fin-result .v { font-size: 19px; font-weight: 800; white-space: nowrap; }

/* ============ Simulador progressivo (landing) ============ */
.sim-shell { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }

/* Bloco "Cole o link" — destaque premium (fundo escuro, luz e brilho) */
.sim-hero {
  position: relative; overflow: hidden;
  padding: 54px 32px 46px; text-align: center;
  background:
    radial-gradient(680px 320px at 12% -20%, rgba(59,130,246,.55), transparent 60%),
    radial-gradient(600px 340px at 92% 120%, rgba(34,197,94,.22), transparent 62%),
    linear-gradient(155deg, #103063 0%, var(--navy) 52%, #06132E 100%);
}
/* textura de pontos suave no topo */
.sim-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(130% 80% at 50% 0, #000 38%, transparent 76%);
  mask-image: radial-gradient(130% 80% at 50% 0, #000 38%, transparent 76%);
}
.sim-hero > * { position: relative; z-index: 1; }

.sim-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #DBEAFE; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 20px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.sim-hero-title { font-size: 30px; margin: 0 0 10px; color: #fff; line-height: 1.14; letter-spacing: -.01em; }
.sim-hero-sub { color: #A9C0E4; font-size: 15px; max-width: 480px; margin: 0 auto 26px; line-height: 1.55; }

.sim-hero .sim-url {
  max-width: 590px; margin: 0 auto; border: 1.5px solid transparent; border-radius: 16px;
  padding: 7px 7px 7px 16px;
  box-shadow: 0 18px 44px rgba(3,12,32,.42), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: box-shadow .2s, transform .2s;
}
.sim-hero .sim-url:focus-within {
  border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(3,12,32,.5), 0 0 0 4px rgba(59,130,246,.4);
}
.sim-hero .sim-url .sim-url-ic { font-size: 18px; opacity: .55; }
.sim-hero .sim-url input { padding: 15px 4px; font-size: 16px; }
.sim-hero .sim-url .btn {
  padding: 13px 22px; font-size: 15px; font-weight: 700; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3B82F6 0%, var(--blue) 55%, var(--blue-600) 100%);
  box-shadow: 0 8px 22px rgba(31,111,235,.5);
}
.sim-hero .sim-url .btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); animation: simShine 3.6s ease-in-out infinite;
}
.sim-hero .sim-url .btn:hover { box-shadow: 0 12px 30px rgba(31,111,235,.68); transform: translateY(-1px); }
@keyframes simShine { 0%, 62% { left: -120%; } 88%, 100% { left: 140%; } }

/* texto de apoio dentro do bloco escuro (hint da captura) */
.sim-hero .hint { color: #9FB6DA; }
.sim-hero .hint b { color: #fff; }

.sim-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.sim-chips a {
  font-size: 12.5px; font-weight: 600; color: #C7D7F0; text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  padding: 6px 13px; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.sim-chips a:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.32); transform: translateY(-1px); }

/* ---- Blocos "cole o link" reaproveitáveis (hero topo / CTA final) ---- */
.paste-jump { width: 100%; }
.hero-paste { max-width: 520px; margin: 22px auto 0; box-shadow: 0 14px 34px rgba(3,12,32,.35); }
.hero-paste .btn { position: relative; overflow: hidden; font-weight: 700; box-shadow: 0 8px 20px rgba(31,111,235,.45); }
.hero-paste .btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); animation: simShine 3.6s ease-in-out infinite 1.2s;
}
.hero-paste-hint { margin: 12px 0 0; font-size: 13px; color: #A9C0E4; display: flex; align-items: center; justify-content: center; gap: 7px; }
.cta-paste { max-width: 540px; margin: 4px auto 0; box-shadow: 0 14px 34px rgba(3,12,32,.3); }
.cta-paste .btn { font-weight: 700; }
.sim-reveal { border-top: 1px solid var(--gray-200); animation: simReveal .4s cubic-bezier(.2,.7,.3,1); }
.sim-reveal.hidden { display: none; }
.sim-reveal-grid { display: grid; grid-template-columns: 1.06fr .94fr; }
@keyframes simReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .sim-reveal-grid { grid-template-columns: 1fr; } }

/* ============ Assistente em etapas ("janelas" que abrem em ordem) ============ */
.sim-steps { padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--gray-050); }
.sim-step { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; transition: box-shadow .25s, border-color .25s, opacity .25s; }
.sim-step.is-active { border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: 0 12px 34px -14px rgba(31,111,235,.4); }
.sim-step.is-locked { opacity: .5; }
.sim-step.is-locked .ss-head { cursor: default; }
/* cabeçalho clicável de cada etapa */
.ss-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--navy); }
.sim-step.is-done .ss-head:hover { background: var(--gray-050); }
.ss-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500); display: grid; place-items: center; font-weight: 800; font-size: 14px; transition: background .25s, color .25s, box-shadow .25s; }
.sim-step.is-active .ss-n { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-050); }
.sim-step.is-done .ss-n { background: var(--green); color: #fff; font-size: 0; }
.sim-step.is-done .ss-n::after { content: '✓'; font-size: 16px; }
.ss-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-tt b { font-size: 15px; }
.ss-sub { font-size: 12.5px; color: var(--gray-500); font-weight: 500; }
.sim-step.is-done .ss-sub { display: none; }
.ss-sum { font-size: 13px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.sim-step:not(.is-done) .ss-sum { display: none; }
.ss-chev { flex: none; color: var(--gray-400); transition: transform .28s; font-size: 12px; }
.sim-step.is-active .ss-chev { transform: rotate(180deg); }
.sim-step.is-locked .ss-chev { opacity: .4; }
.ss-body { display: none; padding: 2px 18px 20px; animation: ssBody .34s cubic-bezier(.2,.7,.3,1); }
.sim-step.is-active .ss-body { display: block; }
.ss-body-final { padding: 0; }
.ss-body-final .sim-summary, .ss-body-final .result { border-radius: 0 0 16px 16px; }
/* rodapé de ações do assistente: Voltar discreto à esquerda, ação primária à direita */
.ss-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gray-100); }
.ss-actions [data-back] { margin-right: auto; color: var(--gray-500); }
.ss-actions [data-back]:hover { color: var(--navy); }
@media (max-width: 420px) { .ss-actions .btn[data-next] { flex: 1; } } /* em telas estreitas o primário ocupa a linha */
@keyframes ssBody { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .sim-steps { padding: 14px; gap: 12px; } .ss-head { padding: 14px; gap: 11px; } .ss-body { padding: 2px 14px 16px; } }

/* ============ Botão flutuante de suporte (WhatsApp) ============ */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .5);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wa-fab:hover { background: #1FB855; color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 32px rgba(37, 211, 102, .6); }
.wa-fab:active { transform: translateY(0); }
.wa-fab-ic { display: grid; place-items: center; flex: none; }
.wa-fab-label { display: none; } /* ícone apenas — sem rótulo (igual à referência) */
/* anel de pulso para atrair atenção */
.wa-fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 560px) { .wa-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; } }

/* peso na etapa Detalhes: nota discreta (identificado) × seção para informar (não identificado) */
.wz-weight-note { margin-top: 14px; font-size: 13px; color: var(--gray-600); background: var(--gray-050); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 13px; }
.wz-weight-note b { color: var(--navy); }
.wz-weight-prompt { margin-top: 14px; border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px; background: var(--gray-050); }
.wz-weight-head { font-size: 13.5px; font-weight: 700; color: var(--navy); }

/* ============ Modo "janela única" deslizante (landing) ============ */
/* Uma etapa por vez, num card estreito e centralizado que passa de janela em janela. */
.sim-steps.wz { display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--gray-050); padding: 30px 20px 40px; }
.wz .wz-ind-bar, .wz .wz-view { width: 100%; max-width: 600px; }
.wz .wz-ind-bar { display: flex; align-items: flex-start; margin-bottom: 20px; padding: 0 4px; }
.wz-ind { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; flex: 0 0 auto; width: 62px; }
.wz-ind-n { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-200); color: var(--gray-500); display: grid; place-items: center; font-weight: 800; font-size: 14px; font-family: var(--font-head); transition: background .2s, color .2s, box-shadow .2s; }
.wz-ind-l { font-size: 12px; font-weight: 600; color: var(--gray-400); transition: color .2s; text-align: center; }
.wz-ind.is-active .wz-ind-n { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-050); }
.wz-ind.is-active .wz-ind-l { color: var(--navy); }
.wz-ind.is-done .wz-ind-n { background: var(--green); color: #fff; font-size: 0; }
.wz-ind.is-done .wz-ind-n::after { content: '✓'; font-size: 15px; }
.wz-ind.is-done .wz-ind-l { color: var(--gray-700); }
.wz-ind:disabled { cursor: default; }
.wz-ind-sep { flex: 1 1 auto; height: 2px; background: var(--gray-200); margin: 15px 6px 0; border-radius: 2px; transition: background .2s; }
.wz-ind.is-done + .wz-ind-sep { background: var(--green); }

/* card da janela */
.wz .wz-view { background: #fff; border: 1px solid var(--gray-200); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
/* neutraliza o visual de accordion dentro do modo janela */
.wz .sim-step { border: none; background: none; box-shadow: none; border-radius: 0; opacity: 1; }
.wz .sim-step:not(.is-active) { display: none; }
.wz .wz-head { display: flex; align-items: center; gap: 12px; padding: 22px 26px 0; }
.wz .wz-head .ss-sub { display: block; }
.wz .ss-body { display: block; padding: 16px 26px 26px; animation: none; }
.wz .sim-step.is-active { animation: wzIn .34s cubic-bezier(.2,.7,.3,1); }
.wz[data-dir="back"] .sim-step.is-active { animation-name: wzInBack; }
.wz .ss-body-final { padding: 20px 26px 26px; }
.wz .ss-body-final .sim-summary, .wz .ss-body-final .result { border-radius: 16px; }
@keyframes wzIn { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes wzInBack { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .sim-steps.wz { padding: 20px 14px 28px; }
  .wz-ind { width: auto; flex: 1 1 0; }
  .wz-ind-l { display: none; }
  .wz .wz-head { padding: 18px 18px 0; }
  .wz .ss-body { padding: 14px 18px 20px; }
}

@media (max-width: 560px) { .sim-hero { padding: 34px 20px 30px; } .sim-hero-title { font-size: 23px; } }

/* ============ Comprovante REAL da transação (via gateway) ============ */
.fin-receipt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gray-200); }
.fin-receipt .fr-lbl { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
/* miniatura clicável (só quando há documento real do gateway) */
.rcpt-thumb { display: inline-flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1.5px solid var(--gray-300); border-radius: 11px; background: #fff; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .12s; text-align: left; }
.rcpt-thumb:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(31,111,235,.16); transform: translateY(-1px); }
.rcpt-mini { display: inline-flex; align-items: center; gap: 11px; }
.rcpt-mini-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--green-050); border: 1px solid #A7F3D0; }
.rcpt-mini-tx { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.rcpt-mini-tx b { font-size: 13px; color: var(--navy); }
.rcpt-mini-tx small { font-size: 11px; color: var(--gray-500); overflow-wrap: anywhere; }
.rcpt-mini-go { font-size: 11px; font-weight: 700; color: var(--blue); margin-left: 6px; }
/* miniatura quando o comprovante é imagem (mostra o próprio documento) */
.rcpt-thumb-img { padding: 0; overflow: hidden; width: 168px; }
.rcpt-thumb-img img { display: block; width: 100%; height: auto; }
.rcpt-full { display: block; width: 340px; max-width: 100%; margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow); }
/* link compacto de comprovante no extrato (ledger) */
.rcpt-link { background: none; border: none; padding: 0; cursor: zoom-in; color: var(--blue); font-weight: 700; font-size: 12px; }
.rcpt-link:hover { text-decoration: underline; }

/* ============ "Peso a confirmar" (comprar sem saber o peso) ============ */
.nw-box { margin-top: 12px; border: 1.5px dashed var(--gray-300); border-radius: 12px; padding: 12px 14px; background: var(--gray-050); transition: border-color .15s, background .15s; }
.nw-box.on { border-style: solid; border-color: var(--blue); background: var(--blue-050); }
.nw-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--navy); }
.nw-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.nw-note { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--gray-700); border-top: 1px dashed var(--gray-300); padding-top: 10px; }
.nw-box:not(.on) .nw-note { display: none; }
/* chip/aviso de frete pendente reutilizável (cliente/admin) */
.freight-pending-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--amber); background: #FEF3C7; border: 1px solid #FDE68A; padding: 3px 10px; border-radius: 999px; }
/* avisos honestos (sem documento real) */
.rcpt-note { font-size: 12.5px; color: var(--gray-700); background: var(--gray-050); border: 1px dashed var(--gray-300); border-radius: 10px; padding: 11px 13px; line-height: 1.55; }
.rcpt-note.ok { border-style: solid; border-color: #A7F3D0; background: var(--green-050); }
.rcpt-note code { font-family: ui-monospace, monospace; font-size: 11.5px; background: var(--gray-100); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
/* comprovante oficial embutido no modal */
.rcpt-frame-note { font-size: 12.5px; color: var(--gray-500); margin-bottom: 10px; line-height: 1.5; }
.rcpt-frame-note a { color: var(--blue); font-weight: 700; }
.rcpt-frame { width: 100%; height: 62vh; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }

/* ==========================================================================
   Tema "UsCloser" — áreas logadas (cliente + admin)
   Escopo restrito a .app-shell para NÃO afetar a landing (index.html).
   Objetivo: sidebar clara, fundo suave, cabeçalho com eyebrow + relógio,
   cards de cantos macios e KPIs com número grande — mantendo o conteúdo atual.
   ========================================================================== */
.app-shell { background: #EDF1F7; }

/* ---- Sidebar clara ---- */
.app-shell .sidebar {
  background: #fff;
  color: #4A5A73;
  border-right: 1px solid #E6EBF2;
  padding: 20px 16px;
}
/* marca no topo em formato de "card" (como o cartão da suíte na referência) */
.app-shell .sidebar .brand {
  color: var(--navy);
  border: 1px solid #E2E8F0;
  background: #fff;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  font-size: 17px;
}
.app-shell .sidebar .brand span { color: var(--blue) !important; }

.app-shell .side-link {
  color: #4A5A73;
  font-weight: 500;
  border-radius: 11px;
  padding: 11px 13px;
}
.app-shell .side-link:hover { background: #F1F5F9; color: var(--navy); }
.app-shell .side-link.active { background: var(--blue-050); color: var(--blue); font-weight: 600; }
.app-shell .side-link.active .ic svg { opacity: 1; }
.app-shell .side-foot { border-top: 1px solid #E6EBF2; }
.app-shell .side-link .credit-badge { background: var(--green-050); color: var(--green); }
/* menu mobile: sombra ao abrir sobre fundo claro */
@media (max-width: 900px) { .app-shell .sidebar.open { box-shadow: 0 24px 60px rgba(2, 8, 40, .28); } }

/* ---- Área principal ---- */
.app-shell .main { background: #EDF1F7; padding: 30px 38px; }
@media (max-width: 900px) { .app-shell .main { padding: 20px; } }

/* ---- Cabeçalho da página: eyebrow (breadcrumb) + título + relógio ---- */
/* Fixo no topo ao rolar (relógio + cotação do dólar sempre visíveis) */
.app-shell .page-head {
  position: sticky; top: -20px; z-index: 30;
  background: #EDF1F7; margin: -20px -38px 18px; padding: 20px 38px 12px;
}
@media (max-width: 900px) { .app-shell .page-head { top: -20px; margin: -20px -20px 18px; padding: 20px 20px 12px; } }
.ph-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7B8AA5; margin-bottom: 4px; }
.app-shell .page-head h1 { font-size: 21px; color: var(--navy); }
.app-shell .page-head p { color: var(--gray-500); font-size: 13px; margin-top: 1px; }
.ph-clock { font-size: 12px; color: #8A96AC; font-weight: 500; white-space: nowrap; }
/* grupo de ações do cabeçalho — padronizado no cliente e no admin (alinhado, agrupado) */
.app-shell .page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.app-shell .page-head-actions .ph-clock { order: -1; }
.app-shell .page-head-actions .btn { padding: 9px 16px; font-size: 13px; }

/* ---- Pílula de cotação (como "Cotação dólar R$ 5,10") ---- */
.app-shell .fx-chip {
  background: #fff; color: var(--gray-500); border: 1px solid #E2E8F0;
  border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.app-shell .fx-chip b { color: var(--navy); font-weight: 800; }

/* ---- Cards / painéis / KPIs: cantos macios, borda e sombra leves ---- */
.app-shell .card, .app-shell .panel, .app-shell .kpi {
  border-color: #E6EBF2;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

/* ---- Cartões de estatística (KPI): número grande + ícone em círculo ---- */
.app-shell .kpi { padding: 22px 24px; }
.app-shell .kpi .kpi-ic { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #E2E8F0; }
.app-shell .kpi .kpi-val { font-size: 34px; color: var(--navy); }
.app-shell .kpi .kpi-lbl { font-size: 14px; color: var(--gray-500); font-weight: 500; }
/* ---- Variante compacta (Financeiro): o foco da página é a lista de pedidos, não os totais ---- */
.kpi-grid-sm { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 6px; }
.app-shell .kpi.kpi-sm { padding: 12px 14px; }
.app-shell .kpi.kpi-sm .kpi-top { margin-bottom: 6px; }
.app-shell .kpi.kpi-sm .kpi-ic { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
.app-shell .kpi.kpi-sm .kpi-val { font-size: 18px; }
.app-shell .kpi.kpi-sm .kpi-lbl { font-size: 11.5px; margin-top: 0; }
.fx-card-sm { padding: 12px 18px; }

/* ---- Sino de mensagens no header ---- */
.app-shell .bell-btn { width: 36px; height: 36px; border-radius: 10px; }

/* ===================== Calculadora de importação ===================== */
.calc-wrap { display:flex; flex-direction:column; gap:18px; }
.calc-note { background:#FFFBEB; border:1px solid #FDE68A; color:#92400E; border-radius:12px; padding:12px 15px; font-size:13px; line-height:1.55; }
.calc-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; }
.calc-card { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:18px; }
.calc-card.soft { background:var(--gray-050); }
.calc-card h3 { font-family:var(--font-head); color:var(--navy); font-size:18px; margin:0 0 2px; }
.calc-card h4 { font-family:var(--font-head); color:var(--navy); font-size:14px; margin:0 0 10px; }
.calc-sub { color:var(--gray-500); font-size:13px; margin:0 0 16px; }
.calc-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.calc-field { display:flex; flex-direction:column; }
.calc-lab { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.calc-lab > span:first-child { font-size:12.5px; font-weight:600; color:var(--gray-700); }
.calc-badge { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:2px 7px; border-radius:999px; background:var(--gray-100); color:var(--gray-500); white-space:nowrap; }
.calc-badge.req { background:#EFF2FF; color:var(--blue); }
.calc-badge.ok { background:var(--green-050); color:var(--green); }
.calc-inp { display:flex; align-items:center; gap:0; border:1px solid var(--gray-200); border-radius:10px; background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.calc-inp:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.calc-pfx, .calc-sfx { flex:none; padding:0 10px; font-size:13px; font-weight:600; color:var(--gray-500); background:var(--gray-050); align-self:stretch; display:flex; align-items:center; }
.calc-sfx { border-left:1px solid var(--gray-100); }
.calc-inp input { flex:1; min-width:0; border:0; outline:0; padding:11px 12px; font-size:15px; font-weight:600; color:var(--navy); background:transparent; }
.calc-fx input { font-size:14px; }
.calc-fx .btn { margin:4px 5px 4px 0; white-space:nowrap; }
.calc-hint { font-size:11.5px; color:var(--gray-500); margin-top:5px; line-height:1.4; }
.calc-segs { display:flex; gap:8px; flex-wrap:wrap; }
.calc-seg { flex:1; min-width:130px; border:1px solid var(--gray-200); background:#fff; border-radius:10px; padding:10px; font-size:13px; font-weight:600; color:var(--gray-700); cursor:pointer; transition:.15s; }
.calc-seg:hover { border-color:var(--blue); }
.calc-seg.on { border-color:var(--blue); background:var(--blue-050); color:var(--blue); }
.calc-derived { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.calc-stat { background:var(--gray-050); border:1px solid var(--gray-100); border-radius:10px; padding:9px 12px; display:flex; flex-direction:column; gap:2px; }
.calc-stat span { font-size:11px; color:var(--gray-500); }
.calc-stat b { font-size:15px; color:var(--navy); font-variant-numeric:tabular-nums; }
.calc-fxinfo { grid-column:1 / -1; font-size:11px; color:var(--gray-500); margin-top:2px; }
/* resultado */
.calc-out { display:flex; flex-direction:column; gap:14px; }
.calc-total { background:linear-gradient(135deg, #1D4ED8, #2563EB); color:#fff; border-radius:14px; padding:18px 20px; }
.calc-total .ct-lbl { font-size:12.5px; opacity:.85; }
.calc-total .ct-big { font-family:var(--font-head); font-size:38px; font-weight:800; line-height:1.05; margin:4px 0 8px; font-variant-numeric:tabular-nums; }
.calc-total .ct-hint { font-size:11.5px; opacity:.9; line-height:1.5; }
.calc-cells { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calc-cell { border:1px solid var(--gray-200); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.calc-cell span { font-size:11.5px; color:var(--gray-500); }
.calc-cell b { font-size:17px; color:var(--navy); font-variant-numeric:tabular-nums; }
.calc-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--gray-100); font-size:13px; color:var(--gray-700); }
.calc-row:last-of-type { border-bottom:0; }
.calc-row b { color:var(--navy); }
.calc-mini { font-size:11px; color:var(--gray-500); margin-top:8px; line-height:1.45; }
.calc-empty, .calc-await { font-size:13px; color:var(--gray-500); line-height:1.5; }
.calc-await { background:var(--blue-050); border:1px solid #BFDBFE; color:#1E3A8A; border-radius:12px; padding:13px 15px; }
.calc-econ { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:12px 14px; border-radius:12px; font-size:13px; }
.calc-econ b { font-size:18px; font-variant-numeric:tabular-nums; }
.calc-econ .calc-pct { font-size:12px; font-weight:600; opacity:.85; }
.calc-econ.good { background:var(--green-050); border:1px solid #A7F3D0; color:var(--green); }
.calc-econ.bad { background:#FEF2F2; border:1px solid #FECACA; color:var(--red); }
/* tabelas de referência */
.calc-ref { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.calc-reftab { background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:16px; }
.calc-scroll { max-height:320px; overflow-y:auto; }
.calc-reftab table { width:100%; border-collapse:collapse; font-size:13px; }
.calc-reftab th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); padding:6px 4px; border-bottom:1px solid var(--gray-200); position:sticky; top:0; background:#fff; }
.calc-reftab th:last-child, .calc-reftab td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.calc-reftab td { padding:7px 4px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.calc-summary { background:var(--gray-050); border:1px solid var(--gray-200); border-radius:12px; padding:14px 16px; font-size:12.5px; color:var(--gray-700); line-height:1.6; }
@media (max-width:900px) {
  .calc-grid { grid-template-columns:1fr; }
  .calc-two { grid-template-columns:1fr; }
  .calc-ref { grid-template-columns:1fr; }
}

/* Cabeçalho da calculadora (página pública) */
.calc-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:16px 20px; margin-bottom:16px; }
.calc-head-main { display:flex; align-items:center; gap:14px; min-width:min(100%,320px); }
.calc-head-ic { flex:none; width:44px; height:44px; border-radius:12px; background:var(--blue-050); color:var(--blue);
  display:flex; align-items:center; justify-content:center; }
.calc-head-main h1 { font-family:var(--font-head); color:var(--navy); font-size:clamp(19px,2.4vw,23px); line-height:1.15; margin:0 0 3px; }
.calc-head-main p { color:var(--gray-500); font-size:13.5px; line-height:1.45; margin:0; }
.calc-head-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.calc-chips { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.calc-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gray-700);
  background:var(--gray-050); border:1px solid var(--gray-100); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.calc-clock { font-size:11.5px; color:var(--gray-500); }
.calc-clock b { color:var(--navy); font-variant-numeric:tabular-nums; }
@media (max-width:760px) {
  .calc-head { align-items:flex-start; }
  .calc-head-side { align-items:flex-start; width:100%; }
  .calc-chips { align-items:flex-start; }
}

/* ===================== FAQ ===================== */
.faq-wrap { max-width:720px; margin:0 auto; }
.faq-col { min-width:0; }
.faq-cat { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); margin:26px 0 10px; }
.faq-wrap > .faq-col:first-child > .faq-cat:first-child { margin-top:0; }
.faq-q { border:1px solid var(--gray-200); border-radius:12px; background:#fff; margin-bottom:8px; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.faq-q[open] { border-color:#BFD3F6; box-shadow:var(--shadow-sm); }
.faq-q > summary { cursor:pointer; list-style:none; padding:14px 16px; font-weight:600; font-size:14px; color:var(--navy); display:flex; align-items:center; gap:12px; }
.faq-q > summary::-webkit-details-marker { display:none; }
.faq-q > summary::after { content:'+'; margin-left:auto; font-size:20px; line-height:1; color:var(--blue); font-weight:700; flex:none; transition:transform .2s; }
.faq-q[open] > summary::after { content:'−'; }
.faq-q > summary:hover { color:var(--blue); }
.faq-a { padding:2px 16px 16px; font-size:13.5px; color:var(--gray-700); line-height:1.62; }
.faq-a b { color:var(--navy); }
.faq-a a { color:var(--blue); font-weight:600; }
.faq-foot { text-align:center; margin-top:30px; color:var(--gray-500); font-size:14px; }
.faq-foot a { color:var(--blue); font-weight:600; }
@media (max-width:760px) { .faq-wrap { grid-template-columns:1fr; gap:0 0; } }

/* ===================== Widget de ajuda (FAQ + WhatsApp) ===================== */
.sup-fab { border:none; cursor:pointer; padding:0; }
.sup-fab .sup-ic-close { display:none; font-size:22px; font-weight:700; }
.sup-fab.open .sup-ic-help { display:none; }
.sup-fab.open .sup-ic-close { display:grid; place-items:center; }
.sup-fab.open { background:#0F172A; box-shadow:0 10px 26px rgba(15,23,42,.4); }
.sup-fab.open::before { animation:none; }
.sup-panel {
  position:fixed; right:22px; bottom:94px; z-index:95;
  width:min(378px, calc(100vw - 32px)); max-height:min(72vh, 640px);
  background:#fff; border:1px solid var(--gray-200); border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.28); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.97); transform-origin:bottom right;
  pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.sup-panel.open { opacity:1; transform:none; pointer-events:auto; }
.sup-head { background:linear-gradient(135deg,#1FB855,#25D366); color:#fff; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none; }
.sup-title { font-weight:800; font-size:16px; font-family:var(--font-head); }
.sup-sub { font-size:12px; opacity:.92; margin-top:2px; }
.sup-close { background:rgba(255,255,255,.22); border:none; color:#fff; width:28px; height:28px;
  border-radius:9px; cursor:pointer; font-size:13px; flex:none; transition:background .15s; }
.sup-close:hover { background:rgba(255,255,255,.36); }
.sup-search { padding:12px 14px 2px; flex:none; }
.sup-search input { width:100%; border:1px solid var(--gray-200); border-radius:10px;
  padding:10px 12px; font-size:13.5px; outline:none; color:var(--navy); font-family:inherit; }
.sup-search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.sup-body { flex:1; overflow-y:auto; padding:6px 14px 14px; -webkit-overflow-scrolling:touch; }
.sup-cat { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); margin:16px 0 8px; }
.sup-body > .sup-cat:first-child { margin-top:8px; }
.sup-q { margin-bottom:6px; }
.sup-q > summary { padding:11px 13px; font-size:13.5px; }
.sup-q > summary::after { font-size:18px; }
.sup-q .faq-a { padding:2px 13px 12px; font-size:12.8px; }
.sup-empty { text-align:center; color:var(--gray-500); font-size:13px; padding:22px 12px; line-height:1.5; }
.sup-wa { display:flex; align-items:center; justify-content:center; gap:9px; background:#25D366; color:#fff;
  font-weight:700; padding:14px; text-decoration:none; font-size:14.5px; flex:none; transition:background .15s; }
.sup-wa:hover { background:#1FB855; color:#fff; }
@media (max-width:560px) { .sup-panel { right:12px; left:12px; width:auto; bottom:82px; max-height:74vh; } }

/* ============ Orçamento (tela final) — hierarquia por seções ============ */
.result .r-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.result .r-title { font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.result .r-sub { font-size: 12.5px; color: #94A3B8; margin-top: 3px; }
.result .r-fx { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.result .r-fx-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #7C93B8; }
.result .r-fx b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2; }
.result .r-fx-det { font-size: 10.5px; color: #64748B; margin-top: 1px; }

/* seções: agrupam o que é produto, o que é envio e o que é resumo */
.result .r-sec { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 4px 16px 8px; margin-bottom: 12px; }
.result .r-sec-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #7C93B8; padding: 12px 0 4px; }

/* linhas de valor: rótulo à esquerda, dinheiro alinhado à direita */
.result .rline { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14.5px; }
.result .r-sec .rline:last-child { border-bottom: 0; }
.result .rline .k { color: #94A3B8; min-width: 0; }
.result .rline .k em { font-style: normal; color: #64748B; font-size: 12px; }
.result .rline .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result .rline.r-sum { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 0; margin-top: 2px; }
.result .rline.r-sum .k, .result .rline.r-sum .v { color: #fff; font-weight: 700; }

/* item do pedido */
.result .r-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.result .r-item-n { width: 22px; height: 22px; border-radius: 50%; background: rgba(96,165,250,.18); color: #93C5FD; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.result .r-item-b { min-width: 0; }
.result .r-item-t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result .r-item-m { font-size: 11.5px; color: #7C93B8; margin-top: 1px; }
.result .r-item-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* modalidade de envio: bloco próprio, não uma linha de dinheiro */
.result .r-ship { display: flex; align-items: center; gap: 11px; padding: 10px 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.result .r-ship-ic { font-size: 20px; flex: none; }
.result .r-ship-b { display: flex; flex-direction: column; min-width: 0; }
.result .r-ship-b b { font-size: 14px; }
.result .r-ship-b span { font-size: 11.5px; color: #7C93B8; }

/* total */
.result .rtotal { margin-top: 16px; padding: 20px 22px; background: linear-gradient(135deg, rgba(37,99,235,.24), rgba(37,99,235,.12)); border: 1px solid rgba(96,165,250,.34); border-radius: 16px; }
.result .rtotal .brl { font-variant-numeric: tabular-nums; line-height: 1.05; }
.result .rtotal .usd { color: #A9C0E4; font-size: 13.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .result .r-head { flex-direction: column; } .result .r-fx { align-items: flex-start; text-align: left; } }

/* ===== Bloco unificado do peso identificado (conta + ressalva num card só) ===== */
.wz-weight-note { padding: 0 !important; overflow: hidden; }
.wn-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px 8px; font-size: 13.5px; color: var(--navy); }
.wn-head .wn-ic { font-size: 15px; line-height: 1; }
.wn-calc { padding: 0 14px 10px; }
.wn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; color: var(--gray-600, #4B5563); }
.wn-row b { color: var(--navy); font-variant-numeric: tabular-nums; }
.wn-row.wn-tot { border-top: 1px dashed var(--gray-300, #CBD5E1); margin-top: 4px; padding-top: 8px; font-weight: 600; color: var(--navy); }
.wn-row.wn-tot b { color: var(--blue); font-size: 14.5px; }
.wn-warn { display: flex; gap: 8px; background: #FFFBEB; border-top: 1px solid #FDE68A; padding: 10px 14px; font-size: 12px; color: #92400E; line-height: 1.5; }
.wn-warn > span { line-height: 1.35; flex: none; }

/* dica curta dentro da caixa "não sei o peso" (onde encontrar o peso na loja) */
.nw-hint { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--gray-300); }
.nw-hint b { color: var(--navy); }

/* ===================== Foto do produto pesado (armazém) ===================== */
.wh-photo { margin-top: 4px; }
.wh-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--gray-300); border-radius: 12px; padding: 18px 16px; background: var(--gray-050); transition: border-color .15s, background .15s; }
.wh-drop:hover { border-color: var(--blue); background: var(--blue-050); }
.wh-drop span { font-weight: 700; font-size: 14px; color: var(--navy); }
.wh-drop small { font-size: 11.5px; color: var(--gray-500); }
/* Estúdio de edição — prévia GRANDE para conseguir avaliar/ajustar a cobertura */
#whStudio { margin-top: 12px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--gray-050); padding: 14px; }
.wh-canvas-wrap { display: flex; justify-content: center; align-items: center; padding: 10px; border-radius: 12px;
  background: repeating-conic-gradient(#eef2f7 0% 25%, #e3e8f0 0% 50%) 50% / 22px 22px; border: 1px solid var(--gray-200);
  max-height: 62vh; overflow: auto; }
/* com zoom (pincel manual): vira scroll normal em vez de centralizar, senão a parte que
   estoura o quadro fica inacessível — assim dá pra rolar até qualquer canto pra contornar. */
.wh-canvas-wrap.zoomed { display: block; text-align: center; }
.wh-canvas-wrap canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(15,23,42,.18); touch-action: none; margin: 0 auto; }
.wh-range { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-top: 14px; }
.wh-range input[type="range"] { width: 100%; height: 6px; accent-color: var(--blue); cursor: pointer; }
.wh-studio-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wh-studio-actions .btn { min-width: 96px; }
.wh-current { margin: 4px 0 12px; }
.wh-current img { display: block; width: 100%; max-width: 300px; border-radius: 12px; border: 1px solid var(--gray-200); }
.wh-cur-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
/* lado do cliente */
.wh-client-img { display: block; width: 100%; max-width: 340px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }

/* Contador regressivo do prazo de armazém (120 dias p/ enviar) */
.wh-days { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.wh-days.ok { background: var(--gray-100, #F1F5F9); color: var(--gray-600, #475569); }
.wh-days.warn { background: #FEF3C7; color: #92400E; }
.wh-days.crit { background: #FEE2E2; color: var(--red, #DC2626); }

.wh-protect { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--gray-700); cursor: pointer; }
.wh-protect input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.wh-protect b { color: var(--navy); }

/* Galeria de fotos do produto (admin) */
.wh-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.wh-thumb { position: relative; width: 108px; }
.wh-thumb img { display: block; width: 108px; height: 108px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gray-200); }
.wh-thumb-del { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: var(--red, #DC2626); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); line-height: 1; }
.wh-thumb-del:hover { background: #B91C1C; }
/* Galeria no lado do cliente */
.wh-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wh-client-grid .wh-client-img { width: 100%; max-width: none; margin: 0; }

/* Timeline de rastreamento dos Correios (eventos ao vivo) */
.cor-tl { position: relative; }
.cor-ev { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; }
.cor-ev::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 2px; background: var(--gray-200); }
.cor-ev:last-child::before { display: none; }
.cor-ev .cor-dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #fff; border: 3px solid var(--gray-300); z-index: 1; }
.cor-ev.cur .cor-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.16); }
.cor-ev .cor-desc { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.cor-ev.cur .cor-desc { color: var(--blue); }
.cor-ev .cor-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* ============ Central de ajuda / FAQ — refino moderno ============ */
.sup-panel { width:min(404px, calc(100vw - 28px)); max-height:min(78vh, 700px);
  border-radius:22px; border:1px solid rgba(15,23,42,.07);
  box-shadow:0 34px 80px -24px rgba(15,23,42,.42); }
.sup-head { position:relative; overflow:hidden; padding:20px; align-items:flex-start;
  background:linear-gradient(135deg,#0E8C74 0%,#25D366 100%); }
.sup-head::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 100% at 92% -25%, rgba(255,255,255,.28), transparent 55%); }
.sup-title { font-size:17px; letter-spacing:-.01em; }
.sup-sub { font-size:12.5px; }
.sup-close { position:relative; z-index:1; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); border-radius:9px; }
.sup-search { padding:14px 16px 4px; }
.sup-search input { height:46px; border-radius:13px; background:var(--gray-050);
  border:1.5px solid var(--gray-200); font-size:14px; padding:0 16px; transition:border-color .18s, box-shadow .18s, background .18s; }
.sup-search input:focus { background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.sup-body { padding:8px 16px 16px; }
.sup-cat { display:inline-block; background:var(--blue-050); color:var(--blue);
  padding:5px 12px; border-radius:999px; font-size:10.5px; letter-spacing:.05em; margin:18px 0 10px; }
.sup-body > .sup-cat:first-child { margin-top:6px; }
.faq-q, .sup-q { border:1px solid #EDF0F5; border-radius:14px; background:var(--gray-050);
  margin-bottom:8px; overflow:hidden; transition:border-color .18s, box-shadow .18s, background .18s; }
.faq-q:hover, .sup-q:hover { border-color:#CBD9F2; background:#fff; }
.faq-q[open], .sup-q[open] { background:#fff; border-color:#BFD3F6; box-shadow:0 8px 22px -10px rgba(37,99,235,.28); }
.faq-q > summary, .sup-q > summary { padding:13px 15px; font-weight:600; gap:12px; }
.faq-q > summary::after, .sup-q > summary::after { content:'+'; width:24px; height:24px; min-width:24px;
  border-radius:50%; background:var(--blue-050); color:var(--blue); display:grid; place-items:center;
  font-size:17px; line-height:1; font-weight:700; margin-left:auto;
  transition:transform .25s ease, background .2s, color .2s; }
.faq-q[open] > summary::after, .sup-q[open] > summary::after { content:'−'; background:var(--blue); color:#fff; }
.sup-wa { height:52px; font-weight:700; font-size:14.5px; letter-spacing:.01em;
  box-shadow:0 -8px 20px -10px rgba(0,0,0,.16); background:linear-gradient(135deg,#25D366,#1FB855); }

/* ============ Tela de pagamento PIX — moderna ============ */
.pix-pay { max-width: 384px; margin: 0 auto; background: linear-gradient(180deg, var(--blue-050) 0%, #fff 42%);
  border: 1px solid #DCE7FB; border-radius: 20px; padding: 20px; box-shadow: var(--shadow-sm); }
.pix-head { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); color: #fff; box-shadow: 0 12px 26px -12px rgba(31,111,235,.55); }
.pix-logo { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.pix-head-t { font-size: 12.5px; font-weight: 600; opacity: .92; }
.pix-amount { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-family: var(--font-head, inherit); }
.pix-qr-card { background: #fff; border: 1.5px solid #BFDBFE; border-radius: 16px; padding: 18px; text-align: center;
  box-shadow: 0 8px 22px -14px rgba(31,111,235,.35); }
.pix-qr { width: 200px; height: 200px; display: block; margin: 0 auto; image-rendering: pixelated; }
.pix-qr-hint { font-size: 12.5px; color: var(--gray-500); margin-top: 12px; line-height: 1.45; max-width: 240px; margin-left: auto; margin-right: auto; }
.pix-copy-wrap { margin-top: 16px; }
.pix-copy-label { font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 7px; }
.pix-copy-row { display: flex; gap: 8px; }
.pix-copy-input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid #DCE7FB; border-radius: 11px; padding: 0 13px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy); background: var(--blue-050);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-copy-input:focus { outline: none; border-color: var(--blue); background: #fff; }
.pix-copy-btn { flex: none; height: 46px; padding: 0 18px; border: none; border-radius: 11px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .15s, transform .1s; }
.pix-copy-btn:hover { background: var(--blue); }
.pix-copy-btn:active { transform: translateY(1px); }
.pix-copy-btn.ok { background: var(--green); }
.pix-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 12px 14px;
  background: var(--blue-050); border: 1px solid #DBEAFE; border-radius: 12px; }
.pix-wait-dots { display: inline-flex; gap: 5px; }
.pix-wait-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: block; animation: pixPulse 1.2s ease-in-out infinite; }
.pix-wait-dots i:nth-child(2) { animation-delay: .18s; }
.pix-wait-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes pixPulse { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
.pix-wait-tx { font-size: 12.8px; font-weight: 600; color: var(--blue); }
.pix-secure { text-align: center; font-size: 11.5px; color: var(--gray-500); margin-top: 12px; }
.pix-test { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg,#7C3AED,#6D28D9); color: #fff;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.4; }
.pix-test span { font-size: 20px; flex: none; }
@media (prefers-reduced-motion: reduce) { .pix-wait-dots i { animation: none; } }

/* Badge vermelho no menu lateral (ex.: pedidos a comprar) */
.side-link { position: relative; }
.side-link .side-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  animation: sideBadgePulse 2s ease-in-out infinite;
}
@keyframes sideBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.side-link.has-pending { color: var(--navy); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .side-link .side-badge { animation: none; } }

/* ============================================================
   Admin — aba Clientes (cartões com resumo de pedidos)
   ============================================================ */
.cust-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 11px 15px; margin: 16px 0; box-shadow: var(--shadow); }
.cust-search span { color: var(--gray-400); font-size: 15px; }
.cust-search input { border: 0; outline: 0; flex: 1; font-size: 14px; background: transparent; color: var(--navy); }

.cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cust-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
  transition: transform .15s ease, box-shadow .15s ease; }
.cust-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.cust-top { display: flex; align-items: center; gap: 12px; }
.cust-av { width: 46px; height: 46px; flex: none; border-radius: 12px; color: #fff; font-weight: 800;
  font-size: 16px; display: grid; place-items: center; font-family: var(--font-head); letter-spacing: .02em; }
.cust-id { min-width: 0; flex: 1; }
.cust-name { font-weight: 700; color: var(--navy); font-size: 15px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; line-height: 1.25; }
.cust-name .badge { font-size: 10px; }
.cust-mail { font-size: 12.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.cust-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--gray-700); }
.cust-meta span { white-space: nowrap; }

.cust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--gray-050);
  border: 1px solid var(--gray-100); border-radius: 12px; padding: 12px 6px; }
.cust-stats > div { text-align: center; min-width: 0; }
.cust-stats b { display: block; font-size: 15px; font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.cust-stats span { font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }

.cust-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cust-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cust-chip.blue { background: var(--blue-050); color: var(--blue); }
.cust-chip.green { background: var(--green-050); color: var(--green); }
.cust-chip.amber { background: #FEF3C7; color: var(--amber); }
.cust-chip.gray { background: var(--gray-100); color: var(--gray-500); }