/* =====================================================================
   Pesquisa de Preços — folha de estilo
   Tokens herdados do Ruptura Extrato (ruptura_extrato/app/public/styles.css),
   que os herdou do app de sugestão de VB (trade_fv). Referência completa:
   ruptura_extrato/ui-reference/ease-labs-ui-system.html
   ===================================================================== */

:root {
  /* indigo — a base da empresa */
  --primary-950:#1E1F5C; --primary-900:#2A2C7A; --primary-800:#373A9E;
  --primary-700:#4648B8; --primary-600:#5558D4; --primary-500:#6366F1;
  --primary-400:#7B83E8; --primary-300:#A5A8F3; --primary-200:#C7C9F7;
  --primary-100:#E8E9FC; --primary-50:#F4F4FE;

  --success:#3FB868; --success-700:#2B8A4C; --success-bg:#E2F8EB;
  --warning:#F5A623; --warning-700:#B26E00; --warning-bg:#FFF4E0;
  --error:#E5484D;   --error-bg:#FEECEC;

  --bg-page:#F7F8FA; --bg-card:#FFFFFF;
  --border-light:#EEEEF3; --border-default:#DDDFE6; --border-strong:#BEC2D0;

  --gray-950:#0F1119; --gray-900:#1A1D2E; --gray-800:#2D3148;
  --gray-700:#454A66; --gray-600:#5E6484; --gray-500:#7A80A0;
  --gray-400:#9CA1B8; --gray-300:#BEC2D0; --gray-200:#DDDFE6;
  --gray-100:#EEEEF3; --gray-50:#F7F8FA;

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:20px; --radius-full:9999px;

  --shadow-xs:0 1px 2px rgba(15,17,25,.04);
  --shadow-sm:0 1px 3px rgba(15,17,25,.06), 0 1px 2px rgba(15,17,25,.04);
  --shadow-md:0 4px 6px rgba(15,17,25,.06), 0 2px 4px rgba(15,17,25,.04);
  --shadow-lg:0 10px 15px rgba(15,17,25,.06), 0 4px 6px rgba(15,17,25,.04);
  --shadow-xl:0 20px 25px rgba(15,17,25,.08), 0 8px 10px rgba(15,17,25,.04);

  --transition-fast:150ms ease;
  --transition-base:200ms ease;
  --transition-slow:300ms ease;

  --topbar-h:76px;
  --lista-w:360px;
  --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*, *::before, *::after { box-sizing:border-box }
[hidden] { display:none !important }
html, body { margin:0; height:100%; }
body {
  font-family:var(--font-family); background:var(--bg-page); color:var(--gray-900);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.45; overflow:hidden;
}
button, input, textarea { font-family:inherit; font-size:inherit; color:inherit }
button { cursor:pointer }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none }
:focus-visible { outline:2px solid var(--primary-500); outline-offset:2px; border-radius:var(--radius-sm) }
kbd { font-family:inherit; font-size:11px; padding:1px 6px; border-radius:4px; background:rgba(255,255,255,.2); margin-left:4px; font-weight:600 }

@keyframes fadeInUp     { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes slideInRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes shimmer      { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes flutua       { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-22px)} }
@keyframes correFio {
  0% { transform:translateX(-40%); opacity:0 } 14% { opacity:.7 } 70% { opacity:.7 }
  86%,100% { transform:translateX(700%); opacity:0 }
}
@keyframes pulso { 0%{box-shadow:0 0 0 0 rgba(99,102,241,.45)} 100%{box-shadow:0 0 0 10px rgba(99,102,241,0)} }

/* ------------------------------------------------------------ logo (máscara) */
.logo {
  display:inline-block; width:132px; height:27px; flex:none;
  -webkit-mask:url("img/ease.png") left center/contain no-repeat;
  mask:url("img/ease.png") left center/contain no-repeat;
}
.logo-branca { background:#fff }
.logo-indigo { background:var(--primary-600) }

/* ------------------------------------------------------------ botões */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--radius-md); border:1px solid transparent;
  font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;
  transition:transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.btn-primario { background:var(--primary-600); color:#fff; box-shadow:0 1px 2px rgba(85,88,212,.3) }
.btn-primario:hover { background:var(--primary-700); transform:translateY(-1px); box-shadow:0 6px 14px rgba(85,88,212,.28) }
.btn-primario:disabled { opacity:.6; transform:none; cursor:progress }
.btn-secundario { background:#fff; color:var(--primary-700); border-color:var(--primary-200) }
.btn-secundario:hover { border-color:var(--primary-400); background:var(--primary-50); transform:translateY(-1px) }
.btn-fantasma { background:transparent; color:var(--gray-600) }
.btn-fantasma:hover { background:var(--gray-100); color:var(--gray-900) }
.btn-largo { width:100% }
.btn-pequeno { height:34px; padding:0 12px; font-size:13px }

/* ================================================================ LOGIN */
.login {
  position:fixed; inset:0; z-index:100; display:grid;
  grid-template-columns:minmax(0,560px) 440px; justify-content:center; align-content:center; column-gap:clamp(48px, 9vw, 160px); padding:0 32px;
  background:linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 45%, var(--primary-500) 100%);
  overflow:hidden;
}
.login-fundo { position:absolute; inset:0; pointer-events:none }
.bolha { position:absolute; border-radius:50%; filter:blur(2px); animation:flutua 14s ease-in-out infinite }
.b1 { width:520px; height:520px; left:-160px; top:-180px; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%) }
.b2 { width:380px; height:380px; left:32%; bottom:-140px; background:radial-gradient(circle, rgba(165,168,243,.30), transparent 70%); animation-delay:-5s }
.b3 { width:260px; height:260px; right:8%; top:12%; background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); animation-delay:-9s }

.login-lado {
  position:relative; align-self:center; color:#fff;
  animation:fadeInUp .6s ease-out backwards;
}
.login-lado .logo { width:170px; height:35px; margin-bottom:44px }
.login-lado h1 { font-size:44px; line-height:1.08; margin:0 0 16px; font-weight:800; letter-spacing:-.02em }
.login-lado h1 span { display:block; font-weight:300; color:rgba(255,255,255,.78) }
.login-lado p { font-size:17px; color:rgba(255,255,255,.82); max-width:440px; margin:0 0 34px; font-weight:400 }
.login-passos { list-style:none; margin:0; padding:0; display:grid; gap:14px }
.login-passos li { display:flex; align-items:center; gap:14px; font-size:15px; color:rgba(255,255,255,.92) }
.login-passos span {
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
}

.login-cartao {
  position:relative; align-self:center; justify-self:stretch; width:min(440px, 92vw); margin-top:-3vh;
  background:#fff; border-radius:var(--radius-2xl); padding:40px 42px; box-shadow:0 8px 24px rgba(15,17,60,.18), 0 2px 6px rgba(15,17,60,.12);
  animation:fadeIn .5s ease-out .12s backwards;
}
.login-cartao .logo { width:120px; height:25px; margin-bottom:26px }
.login-cartao h2 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.01em }
.login-cartao .sub { margin:6px 0 26px; color:var(--gray-500) }
.campo { display:block; margin-bottom:18px }
.campo > span:first-child { display:block; font-size:13px; font-weight:600; color:var(--gray-700); margin-bottom:7px }
.campo input {
  width:100%; height:48px; padding:0 14px; font-size:16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-default); background:#fff; transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.campo input:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 4px var(--primary-100) }
.senha-wrap { position:relative; display:block }
.senha-wrap input { padding-right:48px }
.olho { position:absolute; right:6px; top:6px; width:36px; height:36px; border:0; background:transparent; color:var(--gray-500); border-radius:var(--radius-md); display:grid; place-items:center }
.olho:hover { background:var(--gray-100); color:var(--gray-800) }
.login-erro { background:var(--error-bg); color:#B42318; border-radius:var(--radius-md); padding:10px 12px; margin:-4px 0 16px; font-size:13px; font-weight:500; animation:fadeIn .2s }
.login-cartao .btn-largo { height:50px; font-size:15px; margin-top:4px }
.login-ajuda { text-align:center; font-size:12.5px; color:var(--gray-500); margin:18px 0 0 }

/* ================================================================ TOPO */
.layout { height:100vh; display:flex; flex-direction:column }
.topbar {
  height:var(--topbar-h); padding:0 22px; display:flex; align-items:center; gap:24px; flex:none;
  position:relative; z-index:30; isolation:isolate; color:#fff;
  background:
    radial-gradient(120% 180% at 8% -40%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(105deg, var(--primary-700) 0%, var(--primary-600) 52%, #5F63DE 100%);
  box-shadow:0 2px 14px rgba(30,31,92,.28);
}
.topbar::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--primary-300) 0%, #fff 50%, var(--primary-300) 100%); opacity:.55;
}
.topbar .brilho {
  position:absolute; left:0; bottom:0; height:4px; width:15%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent);
  filter:blur(1.5px); animation:correFio 9s ease-in-out infinite;
}
.marca { display:flex; align-items:center; gap:16px; min-width:0 }
.marca .logo { width:118px; height:24px }
.divisor { width:1px; height:34px; background:rgba(255,255,255,.3) }
.titulos { display:flex; flex-direction:column; gap:4px; min-width:0 }
.eyebrow { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:600 }
.t { margin:0; font-size:20px; font-weight:700; white-space:nowrap; letter-spacing:-.01em }
.t .leve { font-weight:300 } .t .tsep { color:rgba(255,255,255,.4); font-weight:300; margin:0 4px }

.abas { display:flex; gap:4px; margin-left:auto; background:rgba(255,255,255,.12); padding:4px; border-radius:var(--radius-lg) }
.aba { border:0; background:transparent; color:rgba(255,255,255,.8); font-weight:600; height:34px; padding:0 16px; border-radius:var(--radius-md); transition:background var(--transition-base), color var(--transition-base) }
.aba:hover { color:#fff; background:rgba(255,255,255,.1) }
.aba.ativa { background:#fff; color:var(--primary-700); box-shadow:var(--shadow-sm) }

.sessao { display:flex; align-items:center; gap:10px }
.selo-demo { background:var(--warning); color:#4A2E00; font-size:11px; font-weight:700; padding:4px 9px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.06em }
.avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.4) }
.quem { display:flex; flex-direction:column; line-height:1.2 }
.quem b { font-size:13.5px } .quem small { font-size:11.5px; color:rgba(255,255,255,.7) }
.btn-sair { width:38px; height:38px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; display:grid; place-items:center; transition:background var(--transition-base) }
.btn-sair:hover { background:rgba(255,255,255,.15) }

/* ================================================================ PAINÉIS */
.panel { display:none; flex:1; min-height:0 }
.panel.ativa { display:flex; animation:fadeIn .25s ease-out }

/* ---------------------------------------------------- lista de lojas */
.lista { width:var(--lista-w); flex:none; border-right:1px solid var(--border-light); background:#fff; display:flex; flex-direction:column; min-height:0 }
.progresso-geral { padding:18px 18px 14px; border-bottom:1px solid var(--border-light) }
.pg-linha { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px }
.pg-linha b { font-size:22px; font-weight:800; letter-spacing:-.02em }
.pg-linha span { color:var(--gray-500); font-size:12.5px }
.barra { height:8px; border-radius:var(--radius-full); background:var(--gray-100); overflow:hidden }
.barra i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--primary-500), var(--primary-400)); transition:width .6s cubic-bezier(.2,.7,.3,1) }
.pg-sub { margin-top:8px; font-size:12px; color:var(--gray-500) }

.lista-filtros { padding:12px 14px; display:grid; gap:10px; border-bottom:1px solid var(--border-light) }
.busca { display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1.5px solid var(--border-default); border-radius:var(--radius-md); color:var(--gray-400) }
.busca:focus-within { border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100) }
.busca input { border:0; outline:0; flex:1; font-size:14px; background:transparent; color:var(--gray-900) }
.chips { display:flex; gap:6px }
.chip { border:1px solid var(--border-default); background:#fff; color:var(--gray-600); height:30px; padding:0 12px; border-radius:var(--radius-full); font-size:12.5px; font-weight:600; transition:all var(--transition-fast) }
.chip:hover { border-color:var(--primary-300); color:var(--primary-700) }
.chip.ativo { background:var(--primary-600); border-color:var(--primary-600); color:#fff }

.lista-itens { overflow:auto; padding:6px 10px 24px; flex:1 }
.grupo-rede { margin-top:12px }
.grupo-rede h4 { display:flex; align-items:center; gap:8px; margin:0 6px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); font-weight:700 }
.grupo-rede h4 em { font-style:normal; color:var(--gray-400); font-weight:600 }
.loja {
  width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; text-align:left;
  padding:10px 10px; margin-bottom:6px; border-radius:var(--radius-lg); border:1px solid var(--border-light); background:#fff;
  transition:border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  animation:fadeInUp .35s ease-out backwards;
}
.loja:hover { border-color:var(--primary-300); box-shadow:var(--shadow-md) }
.loja.ativa { border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100); background:var(--primary-50) }
.loja.sem-loja { opacity:.6; cursor:default }
.logo-rede { width:44px; height:44px; border-radius:var(--radius-md); border:1px solid var(--border-light); background:#fff; display:grid; place-items:center; overflow:hidden }
.logo-rede img { max-width:80%; max-height:80%; object-fit:contain }
.loja-txt { min-width:0 }
.loja-txt b { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600 }
.uf { display:inline-grid; place-items:center; min-width:28px; height:20px; padding:0 5px; border-radius:5px; background:var(--primary-100); color:var(--primary-800); font-size:11px; font-weight:700; letter-spacing:.03em }
.loja-txt small { display:block; color:var(--gray-500); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px }
.mini-barra { height:4px; border-radius:4px; background:var(--gray-100); margin-top:7px; overflow:hidden }
.mini-barra i { display:block; height:100%; background:var(--primary-500); border-radius:inherit }
.status { font-size:11px; font-weight:700; padding:4px 8px; border-radius:var(--radius-full); white-space:nowrap }
.st-afazer   { background:var(--gray-100); color:var(--gray-600) }
.st-andamento{ background:var(--warning-bg); color:var(--warning-700) }
.st-ok       { background:var(--success-bg); color:var(--success-700) }
.st-semloja  { background:var(--error-bg); color:#B42318 }

/* ---------------------------------------------------- ficha da loja */
.ficha { flex:1; min-width:0; overflow:auto; padding:24px 28px 120px; scroll-behavior:smooth }
.vazio { height:100%; display:grid; place-content:center; text-align:center; color:var(--gray-500); animation:fadeIn .4s }
.vazio-ic { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--primary-100); color:var(--primary-600) }
.vazio-ic svg { width:32px; height:32px }
.vazio h2 { color:var(--gray-800); margin:0 0 6px; font-size:20px }
.vazio p { margin:0; max-width:380px }

.cabecalho {
  display:flex; align-items:center; gap:18px; padding:20px 22px; background:#fff; border:1px solid var(--border-light);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); animation:fadeInUp .35s ease-out;
}
.cabecalho .logo-rede { width:68px; height:68px; border-radius:var(--radius-lg) }
.cab-txt { flex:1; min-width:0 }
.cab-txt .rede-uf { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--primary-700); text-transform:uppercase; letter-spacing:.08em }
.cab-txt h2 { margin:4px 0 6px; font-size:22px; font-weight:700; letter-spacing:-.01em }
.selos { display:flex; flex-wrap:wrap; gap:6px }
.selo { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--radius-full); background:var(--gray-100); color:var(--gray-700) }
.selo.verde { background:var(--success-bg); color:var(--success-700) }
.selo.copiar { cursor:pointer; border:0 }
.selo.copiar:hover { background:var(--primary-100); color:var(--primary-800) }
.selo svg { width:13px; height:13px }
.cab-acoes { display:flex; gap:8px; flex:none }

.grade { display:grid; grid-template-columns:minmax(320px, 1fr) minmax(360px, 1.35fr); gap:16px; margin-top:16px }
.cartao { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-xl); padding:18px 20px; box-shadow:var(--shadow-xs); animation:fadeInUp .4s ease-out .05s backwards }
.cartao h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--gray-500); font-weight:700 }
.cartao h3 svg { width:16px; height:16px; color:var(--primary-500) }

/* contato */
.contato { border-color:var(--primary-200); background:linear-gradient(180deg, var(--primary-50), #fff 60%) }
.tel {
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:10px; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--border-default); transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.tel:hover { border-color:var(--primary-400); box-shadow:var(--shadow-md) }
.tel-ic { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--primary-600); color:#fff; flex:none; text-decoration:none }
.tel-ic:hover { animation:pulso 1s }
.tel-num { flex:1; min-width:0 }
.tel-num a { font-size:19px; font-weight:700; color:var(--gray-900); text-decoration:none; letter-spacing:.01em }
.tel-num a:hover { color:var(--primary-700) }
.tel-num small { display:block; font-size:12px; margin-top:2px; font-weight:600 }
.tel-num small.bom { color:var(--success-700) }
.tel-num small.alerta { color:var(--warning-700) }
.tel-num small.neutro { color:var(--gray-500); font-weight:500 }
.icone-btn { width:34px; height:34px; border-radius:var(--radius-md); border:1px solid var(--border-default); background:#fff; color:var(--gray-600); display:grid; place-items:center; transition:all var(--transition-fast) }
.icone-btn:hover { border-color:var(--primary-400); color:var(--primary-700); background:var(--primary-50) }
.icone-btn svg { width:16px; height:16px }

.aviso { display:flex; gap:10px; padding:10px 12px; border-radius:var(--radius-md); background:var(--warning-bg); color:#7A4B00; font-size:12.5px; margin:4px 0 12px }
.aviso svg { color:var(--warning-700); margin-top:1px }
.links-contato { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px }
.link-acao { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary-700); text-decoration:none; border:0; background:none; padding:6px 4px; border-radius:var(--radius-sm) }
.link-acao:hover { background:var(--primary-50) }
.link-acao svg { width:15px; height:15px }

.form-tel { display:none; gap:8px; margin-top:8px; animation:fadeIn .2s }
.form-tel.aberto { display:grid; grid-template-columns:1fr 1fr auto }
.input { height:40px; padding:0 12px; border:1.5px solid var(--border-default); border-radius:var(--radius-md); font-size:14px; background:#fff; width:100% }
.input:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100) }

.tentativas { margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-default) }
.tentativas p { margin:0 0 8px; font-size:12.5px; color:var(--gray-600); font-weight:600 }
.tent-btns { display:flex; flex-wrap:wrap; gap:6px }
.tent-btn { height:32px; padding:0 11px; border-radius:var(--radius-full); border:1px solid var(--border-default); background:#fff; font-size:12.5px; font-weight:600; color:var(--gray-700); transition:all var(--transition-fast) }
.tent-btn:hover { border-color:var(--gray-400); background:var(--gray-50) }
.tent-hist { margin:10px 0 0; padding:0; list-style:none; font-size:12px; color:var(--gray-500); display:grid; gap:3px }

/* dados da loja */
.dados { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 20px; margin:0 }
.dados div { min-width:0 }
.dados dt { font-size:11.5px; color:var(--gray-500); font-weight:600; margin-bottom:2px }
.dados dd { margin:0; font-size:14px; color:var(--gray-900); font-weight:500; overflow-wrap:anywhere }
.dados .largo { grid-column:1 / -1 }
.dados dd.vazio-dd { color:var(--gray-300) }

.roteiro { margin-top:16px }
.roteiro summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:600; color:var(--primary-700); font-size:13.5px }
.roteiro summary::-webkit-details-marker { display:none }
.roteiro summary svg { transition:transform var(--transition-base) }
.roteiro[open] summary svg { transform:rotate(90deg) }
.roteiro blockquote { margin:12px 0 0; padding:14px 16px; border-left:3px solid var(--primary-400); background:var(--primary-50); border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--gray-800); font-size:14px; line-height:1.6 }

/* ---------------------------------------------------- preços */
.precos { margin-top:22px }
.precos-topo { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; flex-wrap:wrap }
.precos-topo h2 { margin:0; font-size:20px; font-weight:700 }
.precos-topo p { margin:3px 0 0; color:var(--gray-500); font-size:13px }
.segmento { display:inline-flex; background:var(--gray-100); padding:3px; border-radius:var(--radius-md); gap:2px }
.segmento button { border:0; background:transparent; height:30px; padding:0 12px; border-radius:6px; font-weight:600; font-size:12.5px; color:var(--gray-600); transition:all var(--transition-fast) }
.segmento button.ativo { background:#fff; color:var(--gray-900); box-shadow:var(--shadow-sm) }

.classe { margin-top:18px }
.classe-titulo { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:13px; font-weight:700; color:var(--gray-700) }
.classe-titulo .linha { flex:1; height:1px; background:var(--border-default) }
.classe-titulo em { font-style:normal; font-weight:600; color:var(--gray-400); font-size:12px }

.produto {
  position:relative; display:grid; grid-template-columns:minmax(220px, 1.6fr) 150px 190px minmax(140px, .8fr); gap:14px; align-items:center;
  padding:12px 16px; margin-bottom:8px; background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-lg);
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.produto:hover { border-color:var(--border-default); box-shadow:var(--shadow-sm) }
.produto:focus-within { border-color:var(--primary-300); box-shadow:0 0 0 3px var(--primary-50) }
.produto::before { content:''; position:absolute; left:-1px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:transparent }
.produto.ease { background:linear-gradient(90deg, var(--primary-50), #fff 45%) }
.produto.ease::before { background:var(--primary-500) }
.produto.alterado { border-color:var(--warning) }
.produto.alterado::before { background:var(--warning) }
.produto.sem-info .campo-preco, .produto.sem-info .campo-prog { opacity:.35; pointer-events:none }

.prod-nome b { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700 }
.prod-nome .tag-ease { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); background:var(--primary-600); color:#fff; letter-spacing:.03em }
.prod-nome span { display:block; font-size:13.5px; color:var(--gray-800); margin-top:1px }
.prod-nome small { display:block; font-size:11px; color:var(--gray-400); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.rotulo { display:block; font-size:11px; font-weight:600; color:var(--gray-500); margin-bottom:4px }
.moeda { position:relative }
.moeda::before { content:'R$'; position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:13px; font-weight:600; pointer-events:none }
.moeda input::placeholder { color:var(--gray-300); font-weight:500; font-size:13px }
.moeda input { padding-left:34px; font-variant-numeric:tabular-nums; font-weight:600; font-size:15px }

.sim-nao { display:inline-flex; border:1.5px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; height:40px }
.sim-nao button { border:0; background:#fff; padding:0 16px; font-weight:600; color:var(--gray-600); transition:all var(--transition-fast) }
.sim-nao button + button { border-left:1.5px solid var(--border-default) }
.sim-nao button:hover { background:var(--gray-50) }
.sim-nao button.on-sim { background:var(--success-bg); color:var(--success-700) }
.sim-nao button.on-nao { background:var(--gray-100); color:var(--gray-800) }

.prod-status { font-size:11.5px; color:var(--gray-500); text-align:right }
.prod-status .ok { display:inline-flex; align-items:center; gap:4px; color:var(--success-700); font-weight:600 }
.prod-status .ok svg { width:14px; height:14px }
.prod-status .pend { color:var(--warning-700); font-weight:600 }
.prod-status button.nao-inf { margin-top:4px; border:0; background:none; color:var(--gray-500); font-size:11.5px; text-decoration:underline; text-underline-offset:2px; padding:0 }
.prod-status button.nao-inf:hover { color:var(--gray-800) }

.programa-extra {
  grid-column:1 / -1; display:grid; grid-template-columns:150px 1fr; gap:14px; padding:12px 14px; margin-top:2px;
  background:var(--success-bg); border-radius:var(--radius-md); animation:fadeInUp .25s ease-out;
}
.programa-extra textarea { min-height:40px; height:40px; padding:9px 12px; resize:vertical; line-height:1.4 }
.programa-extra .moeda input { background:#fff }

/* ---------------------------------------------------- barra salvar */
.barra-salvar {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 20px; background:var(--gray-900); color:#fff; border-radius:var(--radius-xl); box-shadow:0 18px 40px rgba(15,17,25,.35);
  animation:fadeInUp .3s ease-out;
}
.barra-txt { margin-right:10px; font-size:14px } .barra-txt b { color:var(--warning) }
.barra-salvar .btn-fantasma { color:rgba(255,255,255,.7) }
.barra-salvar .btn-fantasma:hover { background:rgba(255,255,255,.1); color:#fff }

/* ---------------------------------------------------- registros */
.registros { flex:1; overflow:auto; padding:26px 28px 60px }
.registros-topo { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px }
.registros-topo h2 { margin:0; font-size:22px }
.registros-topo p { margin:4px 0 0; color:var(--gray-500) }
.tabela-wrap { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-xl); overflow:auto; box-shadow:var(--shadow-xs) }
table { width:100%; border-collapse:collapse; font-size:13px }
th { position:sticky; top:0; background:var(--gray-50); text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--border-default); white-space:nowrap }
td { padding:10px 14px; border-bottom:1px solid var(--border-light); vertical-align:top }
tr:hover td { background:var(--primary-50) }
td.num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap }
td small { display:block; color:var(--gray-500) }
.vazio-tabela { padding:50px; text-align:center; color:var(--gray-500) }

/* ---------------------------------------------------- modal e toast */
.modal-fundo { position:fixed; inset:0; z-index:200; background:rgba(15,17,25,.45); display:grid; place-items:center; animation:fadeIn .2s; backdrop-filter:blur(2px) }
.modal { width:min(460px, 92vw); background:#fff; border-radius:var(--radius-2xl); padding:24px; box-shadow:var(--shadow-xl); animation:fadeInUp .25s ease-out }
.modal h3 { margin:0 0 8px; font-size:18px }
.modal p { margin:0 0 14px; color:var(--gray-600) }
.modal textarea { width:100%; min-height:80px; padding:10px 12px; border:1.5px solid var(--border-default); border-radius:var(--radius-md); resize:vertical }
.modal textarea:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100) }
.opcoes-motivo { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
.modal-acoes { display:flex; justify-content:flex-end; gap:8px; margin-top:18px }

.toasts { position:fixed; right:22px; bottom:90px; z-index:300; display:grid; gap:8px }
.toast { display:flex; align-items:center; gap:10px; min-width:280px; max-width:400px; padding:12px 16px; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--border-light); box-shadow:var(--shadow-lg); font-size:13.5px; animation:slideInRight .3s ease-out }
.toast.ok svg { color:var(--success) } .toast.erro svg { color:var(--error) } .toast.info svg { color:var(--primary-500) }

.skeleton { border-radius:var(--radius-lg); height:64px; margin-bottom:8px; background:linear-gradient(90deg, var(--gray-100) 0%, var(--gray-50) 50%, var(--gray-100) 100%); background-size:800px 100%; animation:shimmer 1.3s linear infinite }

/* ---------------------------------------------------- responsivo */
@media (max-width:1180px) {
  .grade { grid-template-columns:1fr }
  .produto { grid-template-columns:1fr 150px 190px; }
  .prod-status { grid-column:1 / -1; text-align:left; display:flex; gap:12px; align-items:center }
  .prod-status button.nao-inf { margin:0 }
}
@media (max-width:860px) {
  body { overflow:auto }
  .layout { height:auto; min-height:100vh }
  .login { grid-template-columns:1fr; justify-items:center; overflow:auto; padding:24px 16px }
  .login-cartao { margin-top:0 }
  .login-lado { display:none }
  .topbar { padding:0 14px; gap:12px }
  .titulos, .divisor, .quem { display:none }
  .panel.ativa { flex-direction:column }
  .lista { width:100%; border-right:0; max-height:none }
  .ficha { padding:16px 14px 120px; overflow:visible }
  .cabecalho { flex-wrap:wrap }
  .produto { grid-template-columns:1fr 1fr }
  .prod-nome { grid-column:1 / -1 }
  .programa-extra { grid-template-columns:1fr }
  .dados { grid-template-columns:1fr }
  .barra-salvar { left:12px; right:12px; transform:none }
  .barra-salvar kbd { display:none }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important }
}

/* ---------------------------------------------------- progresso: você e a equipe */
.meu { margin-bottom:14px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--primary-50); border:1px solid var(--primary-100) }
.meu-topo { display:flex; align-items:center; justify-content:space-between; gap:8px }
.meu-topo b { font-size:13.5px }
.meu-hoje { font-size:11.5px; font-weight:700; color:var(--success-700); background:var(--success-bg); padding:2px 8px; border-radius:var(--radius-full) }
.meu-num { margin-top:6px; font-size:13px; color:var(--gray-700) }
.meu-num strong { font-size:24px; font-weight:800; color:var(--primary-700); margin-right:2px }
.meu-num span { color:var(--gray-500) }
.tiles { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 8px }
.tile { position:relative; width:26px; height:26px; border-radius:7px; background:#fff; border:1.5px solid var(--primary-200); overflow:hidden }
.tile::after { content:''; position:absolute; left:0; right:0; bottom:0; height:var(--f); background:linear-gradient(0deg, var(--primary-600), var(--primary-500)); transition:height .6s ease }
.tile.cheio { border-color:var(--primary-600) }
.tile.cheio::before { content:''; position:absolute; z-index:1; left:8px; top:4px; width:7px; height:12px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) }
.tile.bonus { border-color:var(--success) }
.tile.bonus::after { background:var(--success) }
.meu small { display:block; font-size:12px; color:var(--gray-600) }
.meu small b { color:var(--primary-700) }
.barra-dupla { position:relative }
.barra-dupla i { position:absolute; left:0; top:0; bottom:0 }
.barra-dupla .b-equipe { background:var(--primary-200) }
.barra-dupla .b-meu { background:linear-gradient(90deg, var(--primary-600), var(--primary-500)) }
.equipe { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.membro { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px 0 3px; border-radius:var(--radius-full); background:var(--gray-100); font-size:12px; color:var(--gray-700) }
.membro i { font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:#fff; font-size:9.5px; font-weight:700; color:var(--gray-600) }
.membro b { color:var(--gray-900) }
.membro.eu { background:var(--primary-100); color:var(--primary-800) }
.membro.eu i { background:var(--primary-600); color:#fff }
.btn-atualizar { margin-top:12px; height:38px; font-size:13px }
.btn-bloqueado { background:var(--gray-100); color:var(--gray-500); border-color:var(--border-default); cursor:not-allowed }
.btn-bloqueado:hover { transform:none }
.tel.tel-principal { border-color:var(--success); box-shadow:0 0 0 3px var(--success-bg) }
.tel.tel-principal .tel-ic { background:var(--success) }
.tel-ordem { display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--success-700); margin-bottom:1px }
.tel-se-nao { margin:14px 0 6px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500) }