/* =====================================================================
   SUNSET POD — identidade carioca (bege / laranja / marrom)
   ===================================================================== */

:root{
  --areia:      #F0DCB8;
  --areia-2:    #F7EAD2;
  --creme:      #FDF6E9;
  --areia-d:    #E4C99C;

  --laranja:    #E24A12;
  --laranja-2:  #FF7A2F;
  --laranja-3:  #FFA24D;
  --brasa:      #B93A0C;

  --marrom:     #2E2019;
  --marrom-2:   #4A3226;
  --marrom-3:   #7A5540;
  --noite:      #1B120D;

  --mar:        #4E8E96;
  --verde:      #17944F;
  --verde-2:    #4ADE80;
  --verde-d:    #0F7A3F;
  --zap:        #22C55E;
  --zap-d:      #16A34A;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow:    0 10px 30px -12px rgba(46,32,25,.35);
  --shadow-lg: 0 28px 60px -24px rgba(46,32,25,.55);
  --ring: 0 0 0 3px rgba(226,74,18,.28);

  --nav-h: 74px;
  --max: 1220px;
  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Outfit", ui-sans-serif, system-ui, sans-serif;
  color:var(--marrom);
  background:var(--areia);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
/* o atributo hidden precisa vencer as regras de display abaixo */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:"Lilita One", Impact, sans-serif; font-weight:400; line-height:.98; letter-spacing:.4px; margin:0; }
::selection{ background:var(--laranja); color:var(--creme); }

/* textura de papel */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.kicker{
  text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; font-weight:700;
  color:var(--laranja); margin:0 0 14px;
}
.kicker-light{ color:var(--laranja-3); }
.muted{ color:var(--marrom-3); font-size:.9rem; }

/* ============================ BOTÕES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:.95rem; cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  background:transparent;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-lg{ padding:15px 30px; font-size:1.02rem; }
.btn-primary{ background:var(--laranja); color:var(--creme); box-shadow:0 10px 24px -12px var(--brasa); }
.btn-primary:hover{ background:var(--brasa); }
.btn-ghost{ border-color:rgba(46,32,25,.25); color:var(--marrom); }
.btn-ghost:hover{ border-color:var(--marrom); background:rgba(46,32,25,.06); }
.btn-zap{ background:var(--zap); color:#fff; }
.btn-zap:hover{ background:var(--zap-d); }
.btn-danger{ background:#B4271A; color:#fff; }
.btn-sm{ padding:8px 14px; font-size:.84rem; }

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:18px; padding:0 clamp(14px,3vw,34px);
  transition:color .3s;
}
/* o desfoque mora aqui, e não na barra: no Chrome o backdrop-filter recorta
   os filhos na própria caixa, e a logo saltada ficava cortada */
.nav::before{
  content: ""; position:absolute; inset:0; z-index:-1;
  background:rgba(240,220,184,.82); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(46,32,25,.12);
  transition:background .3s, border-color .3s;
}
.nav-brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav-brand img{
  width:42px; height:42px; object-fit:cover; border-radius:50%; box-shadow:var(--shadow);
  transition:width .35s var(--ease), height .35s var(--ease), transform .35s var(--ease);
}
.nav-brand span{ font-family:"Lilita One",sans-serif; font-size:1.32rem; letter-spacing:.5px; }
.nav-brand em{ font-style:normal; color:var(--laranja); }

.nav-tabs{ display:flex; gap:6px; }
.tab{
  position:relative; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.96rem;
  transition:background .2s, color .2s;
}
.tab:hover{ background:rgba(46,32,25,.08); }
.tab.is-on{ background:var(--marrom); color:var(--areia-2); }
.tab-adm{ font-size:.82rem; opacity:.55; }
.tab-adm.is-on{ opacity:1; }

.nav-zap{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:var(--zap); color:#fff; font-weight:700; font-size:.9rem;
  box-shadow:0 8px 20px -10px var(--zap-d); transition:transform .18s var(--ease), background .2s;
}
.nav-zap:hover{ transform:translateY(-2px); background:var(--zap-d); }
.nav-zap svg{ width:18px; height:18px; fill:currentColor; }
.nav-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav-burger span{ display:block; width:24px; height:2.5px; background:var(--marrom); border-radius:2px; margin:5px 0; transition:.25s; }

/* nav sobre a sessão escura */
body.nav-dark .nav{ color:var(--areia-2); }
body.nav-dark .nav::before{ background:rgba(27,18,13,.72); border-bottom-color:rgba(255,255,255,.1); }
body.nav-dark .tab:hover{ background:rgba(255,255,255,.12); }
body.nav-dark .tab.is-on{ background:var(--laranja); color:#fff; }
body.nav-dark .nav-burger span{ background:var(--areia-2); }

/* ============================ HERO / PALCO ============================ */
.stage{ position:relative; }

.hero{
  position:relative; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 78%, rgba(255,162,77,.85) 0%, rgba(255,122,47,.35) 32%, rgba(240,220,184,0) 62%),
    linear-gradient(180deg,#F7EAD2 0%, #F0DCB8 38%, #EFCB97 62%, #E9A96A 82%, #DE7C3C 100%);
  transition:filter .1s linear;
}
.hero-sun{
  position:absolute; left:50%; top:66%; width:min(64vh,90vw); aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:1; will-change:transform,opacity;
}
.hero-sun svg{ width:100%; height:100%; fill:var(--laranja); opacity:.92; }
.hero-sun #sunRays{ transform-origin:200px 200px; animation:spin 70s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-sea{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  width:100%; height:auto; aspect-ratio:1440 / 260; max-height:42vh;   /* nada de esticar */
}
.hero-sea.is-narrow{ aspect-ratio:760 / 300; }
.hero-sea .sea-narrow{ display:none; }
.hero-sea.is-narrow .sea-wide{ display:none; }
.hero-sea.is-narrow .sea-narrow{ display:block; }
.hero-sea svg{ display:block; width:100%; height:100%; }
.hero-sea .morro{ fill:#4A2E1E; opacity:.95; }
.hero-sea .morro-2{ fill:#382216; opacity:.95; }
.hero-sea .agua{ fill:#2C3A3A; opacity:.96; }

.hero-copy{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(var(--nav-h) + 3.5vh) 4vw 10vh; text-align:center; will-change:transform,opacity;
}
.hc-top{ width:min(820px,94vw); }
.hero-title{
  font-size:clamp(2.4rem,7.4vw,5.6rem); color:var(--marrom);
  text-shadow:0 3px 0 rgba(255,240,214,.45);
}
.hero-title span{ color:var(--laranja); display:inline-block; }
.hero-sub{
  margin:0; max-width:46ch; font-size:clamp(.98rem,1.5vw,1.14rem); color:var(--marrom-2);
  background:rgba(250,240,222,.9); backdrop-filter:blur(6px);
  padding:12px 24px; border-radius:999px;
  box-shadow:0 8px 20px -14px rgba(46,32,25,.55);
}

.pod-wrap{
  position:absolute; left:50%; top:55%; width:min(74vh, 84vw, 640px); height:auto; aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:2; will-change:transform,opacity;
  filter:drop-shadow(0 26px 34px rgba(46,32,25,.42));
}
.pod-photo{
  width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none;
  opacity:0; transition:opacity .35s var(--ease);
  animation:flutua 6s ease-in-out infinite;   /* o pod boia de leve */
}
/* camada revelada pelo rastro do mouse — empilhada sobre a da frente */
.pod-photo--reveal{ position:absolute; inset:0; }

@keyframes flutua{
  0%,100%{ transform:translateY(-1.6%) rotate(-1.3deg); }
  50%{     transform:translateY(1.8%)  rotate(1.3deg); }
}
/* halo quente atrás do pod, fora do grupo que usa multiply */

.scroll-cue{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--areia-2); opacity:.85; will-change:opacity;
}
.scroll-cue svg{ width:22px; height:36px; fill:none; stroke:currentColor; stroke-width:1.6; }
.scroll-cue circle{ fill:currentColor; stroke:none; animation:wheel 1.9s var(--ease) infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(13px); opacity:0 } 100%{ opacity:0 } }


/* ============================ SESSÃO 2 — SHOWCASE ============================ */
.showcase{
  position:relative; min-height:100svh; padding:14vh 0 12vh;
  display:flex; align-items:center;
  background:
    radial-gradient(80% 55% at 50% 8%, rgba(226,74,18,.28), rgba(27,18,13,0) 60%),
    linear-gradient(180deg,#241710 0%, #1B120D 55%, #241710 100%);
  color:var(--areia-2);
  overflow:hidden;
}
.showcase::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 15 Q15 0 30 15 T60 15 T90 15 T120 15' fill='none' stroke='%23FFA24D' stroke-width='2' opacity='.10'/%3E%3C/svg%3E");
  background-size:120px 30px; opacity:.5;
}
.showcase-inner{ position:relative; z-index:4; width:min(var(--max),94vw); margin:0 auto; text-align:center; will-change:opacity,transform; }
.showcase-title{
  font-size:clamp(2.6rem,7.6vw,5.4rem); color:var(--areia-2); margin-bottom:30px;
}
.showcase-title span{ color:var(--laranja-2); }

.btn-big{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 40px; border-radius:999px;
  background:var(--laranja); color:#FFF3E0; font-weight:800; font-size:1.12rem;
  letter-spacing:.02em; box-shadow:0 18px 44px -16px var(--laranja);
  transition:box-shadow .2s var(--ease), background .2s;
  position:relative; overflow:hidden; will-change:transform;
}
.btn-big svg{ width:22px; height:22px; transition:transform .2s var(--ease); }
.btn-big:hover{ background:var(--laranja-2); box-shadow:0 24px 54px -16px var(--laranja-2); }
.btn-big:hover svg{ transform:translateX(5px); }
.btn-big::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sheen 3.4s ease-in-out infinite;
}
@keyframes sheen{ 0%,60%{ left:-60% } 100%{ left:120% } }

/* ---- carrossel de promoções ---- */
.promo-carousel{ position:relative; margin-top:60px; }
.car-viewport{ overflow:hidden; padding:10px 0 4px; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.car-track{ display:flex; gap:22px; will-change:transform; transition:transform .75s var(--ease); }

.promo-card{
  flex:0 0 clamp(220px,25vw,268px);
  background:linear-gradient(165deg,rgba(247,234,210,.97),rgba(233,207,168,.94));
  border-radius:var(--r-lg); padding:18px 18px 20px; text-align:left; color:var(--marrom);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  transform:scale(.84) translateY(14px); opacity:.42; filter:saturate(.7);
  transition:transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease), box-shadow .3s;
  cursor:pointer;
}
/* só o card do meio fica em pé: é ele o destaque da vez */
.promo-card.is-active{ transform:scale(1) translateY(0); opacity:1; filter:none; }
.promo-card:hover{ box-shadow:0 34px 70px -22px rgba(0,0,0,.6); }
.promo-card .pc-img{
  height:170px; border-radius:var(--r); background:var(--creme);
  display:grid; place-items:center; overflow:hidden; margin-bottom:14px;
}
.promo-card .pc-img img{ height:100%; width:100%; object-fit:contain; padding:8px; }
.promo-card .pc-brand{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--laranja); font-weight:800; }
.promo-card h3{ font-size:1.2rem; margin:4px 0 8px; line-height:1.05; }
.promo-card .pc-prices{ display:flex; align-items:baseline; gap:9px; }
.promo-card .pc-old{ text-decoration:line-through; color:var(--marrom-3); font-size:.86rem; }
.promo-card .pc-new{ font-weight:800; font-size:1.34rem; color:var(--brasa); font-family:"Lilita One",sans-serif; letter-spacing:.5px; }
.pc-off{
  position:absolute; top:14px; right:-34px; transform:rotate(38deg);
  background:var(--verde); color:#fff; font-weight:800; font-size:.74rem;
  padding:5px 38px; letter-spacing:.06em; box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
.pc-puffs{
  display:inline-block; margin-top:10px; font-size:.72rem; font-weight:700;
  background:rgba(46,32,25,.1); padding:4px 10px; border-radius:999px; color:var(--marrom-2);
}

.car-arrow{
  position:absolute; top:44%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:2px solid rgba(247,234,210,.4);
  background:rgba(27,18,13,.6); color:var(--areia-2); font-size:1.5rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:.2s; backdrop-filter:blur(6px);
}
.car-arrow:hover{ background:var(--laranja); border-color:var(--laranja); }
.car-prev{ left:-6px; } .car-next{ right:-6px; }
.car-dots{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.car-dots button{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(247,234,210,.3); transition:.25s;
}
.car-dots button.is-on{ background:var(--laranja-2); width:26px; border-radius:999px; }
.promo-empty{ color:rgba(247,234,210,.6); padding:40px 0; }

/* ============================ FAIXA / TICKER ============================ */
.ticker{
  position:relative; z-index:4; background:var(--laranja); color:#FFF3E0;
  padding:14px 0; overflow:hidden; border-top:3px solid var(--marrom); border-bottom:3px solid var(--marrom);
}
.ticker-track{ display:flex; gap:44px; width:max-content; animation:slide 32s linear infinite; }
.ticker span{ font-family:"Lilita One",sans-serif; font-size:1.15rem; letter-spacing:.06em; white-space:nowrap; display:flex; align-items:center; gap:44px; }
.ticker span::after{ content:"☀"; opacity:.8; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================ PERKS / CTA ============================ */
.perks{
  position:relative; z-index:4; background:var(--areia);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px;
  width:100%; padding:80px calc((100% - min(var(--max),92vw)) / 2);
}
.perk{
  background:var(--creme); border-radius:var(--r-lg); padding:28px 24px;
  border:2px solid rgba(46,32,25,.1); box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.perk:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.perk-ico{ margin-bottom:14px; }
.perk-ico svg{ width:36px; height:36px; fill:none; stroke:var(--laranja); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.perk h3{ font-size:1.32rem; margin-bottom:8px; }
.perk p{ margin:0; color:var(--marrom-2); font-size:.95rem; }

.cta-final{
  position:relative; z-index:4; text-align:center; padding:90px 6vw 110px;
  background:linear-gradient(180deg,var(--areia) 0%, var(--areia-d) 100%);
}
.cta-final h2{ font-size:clamp(2.2rem,5.4vw,3.6rem); }
.cta-final p{ margin:14px auto 30px; max-width:46ch; color:var(--marrom-2); }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================ LOJA (ABA PODS) ============================ */
#view-pods{ padding-top:calc(var(--nav-h) + 34px); background:var(--areia); min-height:100vh; }
.shop-head{ width:min(var(--max),92vw); margin:0 auto 26px; }
.shop-head h1{ font-size:clamp(2.6rem,6.6vw,4.4rem); color:var(--marrom); }
.shop-head h1::after{ content:"."; color:var(--laranja); }
.shop-head p{ margin:8px 0 0; color:var(--marrom-2); font-size:1.05rem; }

.filters{ margin-bottom:10px; }
/* só a barra de busca acompanha o scroll — as tags ficam num painel recolhido */
.filter-bar{
  position:sticky; top:var(--nav-h); z-index:20; background:var(--areia);
  padding:12px 0 14px; box-shadow:0 16px 20px -22px rgba(46,32,25,.9);
}
.filters-toggle{
  display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px;
  border:2px solid rgba(46,32,25,.16); background:var(--creme); font-weight:700; cursor:pointer;
  transition:.18s; white-space:nowrap;
}
.filters-toggle svg{ width:18px; height:18px; }
.filters-toggle:hover{ border-color:var(--marrom); }
.filters-toggle[aria-expanded="true"]{ background:var(--marrom); color:var(--areia-2); border-color:var(--marrom); }
.fcount{
  background:var(--laranja); color:#fff; border-radius:999px; min-width:22px; padding:1px 7px;
  font-size:.78rem; text-align:center;
}
.chips-panel{
  width:min(var(--max),92vw); margin:14px auto 0; background:var(--creme);
  border:2px solid rgba(46,32,25,.12); border-radius:var(--r-lg); padding:18px 20px;
  animation:fade .2s ease both;
}
.search-row{ width:min(var(--max),92vw); margin:0 auto; display:flex; gap:12px; flex-wrap:wrap; }
.search-box{
  position:relative; flex:1 1 320px; display:flex; align-items:center; gap:10px;
  background:var(--creme); border:2px solid rgba(46,32,25,.16); border-radius:999px; padding:0 18px;
  transition:border-color .2s, box-shadow .2s;
}
.search-box:focus-within{ border-color:var(--laranja); box-shadow:var(--ring); }
.search-box svg{ width:19px; height:19px; color:var(--marrom-3); flex:none; }
.search-box input{ flex:1; border:0; background:none; outline:none; padding:14px 0; font-size:1rem; min-width:0; }
.search-clear{ border:0; background:rgba(46,32,25,.12); border-radius:50%; width:24px; height:24px; cursor:pointer; line-height:1; }
.sort-select{
  border:2px solid rgba(46,32,25,.16); background:var(--creme); border-radius:999px;
  padding:13px 18px; outline:none; cursor:pointer; font-weight:600;
}
.sort-select:focus{ border-color:var(--laranja); }

.chips-groups{ display:flex; flex-direction:column; gap:11px; }
.chip-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.chip-row > b{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--marrom-3);
  min-width:64px; font-weight:800;
}
.chip{
  border:2px solid rgba(46,32,25,.18); background:transparent; border-radius:999px;
  padding:6px 15px; font-size:.86rem; font-weight:600; cursor:pointer; transition:.18s;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--marrom); background:rgba(46,32,25,.06); }
.chip.is-on{ background:var(--laranja); border-color:var(--laranja); color:#fff; }
.chip-more{ border-style:dashed; color:var(--marrom-3); font-weight:700; }
.active-filters{ width:min(var(--max),92vw); margin:12px auto 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tag-x{ background:var(--marrom); color:var(--areia-2); border:0; border-radius:999px; padding:5px 12px; font-size:.8rem; cursor:pointer; }

.row-block{ width:min(var(--max),92vw); margin:0 auto 52px; }
.row-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.row-head h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); white-space:nowrap; }
.row-line{ flex:1; height:3px; background:repeating-linear-gradient(90deg,var(--laranja) 0 14px, transparent 14px 22px); opacity:.5; border-radius:2px; }
.count{ font-size:.85rem; color:var(--marrom-3); font-weight:600; white-space:nowrap; }

.rail{
  display:flex; gap:20px; overflow-x:auto; padding:6px 4px 20px; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--areia-d) transparent;
}
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-thumb{ background:var(--areia-d); border-radius:8px; }
.rail > *{ flex:0 0 clamp(210px,24vw,250px); scroll-snap-align:start; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:22px; }

/* ---- card de produto ---- */
.card{
  position:relative; background:var(--creme); border-radius:var(--r-lg);
  border:2px solid rgba(46,32,25,.1); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 18px -12px rgba(46,32,25,.5);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  animation:pop .45s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--laranja-3); }
.card-img{
  position:relative; aspect-ratio:1; background:radial-gradient(circle at 50% 40%, #fff 0%, var(--areia-2) 100%);
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
}
.card-img img{ width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .4s var(--ease); }
.card:hover .card-img img{ transform:scale(1.07) rotate(-2deg); }
.card-img .noimg{ font-family:"Lilita One",sans-serif; color:var(--areia-d); font-size:1.1rem; }
.badge{
  position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.badge span{
  background:var(--verde); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4);
}
.badge .b-best{ background:var(--marrom); }
.badge .b-out{ background:var(--marrom-3); }
.card-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-brand{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--laranja); }
.card-name{ font-size:1.06rem; line-height:1.12; cursor:pointer; }
.card-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.card-tags i{
  font-style:normal; font-size:.68rem; background:rgba(46,32,25,.08); color:var(--marrom-2);
  padding:3px 8px; border-radius:999px; font-weight:600;
}
.card-price{ margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price-old{ text-decoration:line-through; color:var(--marrom-3); font-size:.85rem; }
.price-now{ font-family:"Lilita One",sans-serif; font-size:1.5rem; color:var(--brasa); letter-spacing:.5px; }
.price-now.on-sale{ color:var(--brasa); }
.card .btn-zap{ width:100%; margin-top:10px; padding:11px; font-size:.9rem; }
.card.is-out{ opacity:.62; }

/* ---- modal produto ---- */
.modal-back{
  position:fixed; inset:0; z-index:100; background:rgba(27,18,13,.68); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:20px; animation:fade .25s ease both;
}
@keyframes fade{ from{ opacity:0 } }
.modal{
  /* 100% já respeita o recuo do fundo — com 96vw a ficha vazava e era cortada */
  background:var(--creme); border-radius:var(--r-xl); width:min(920px,100%); max-height:90vh; overflow:auto;
  box-shadow:var(--shadow-lg); position:relative; animation:rise .3s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px) scale(.98) } }
.modal-x{
  position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(46,32,25,.1); font-size:1.4rem; line-height:1; cursor:pointer;
}
.modal-x:hover{ background:var(--laranja); color:#fff; }
.pm-grid{ display:grid; grid-template-columns:1fr 1fr; }
/* a foto é presa à caixa por posicionamento: com height/max-height em % ela
   resolvia contra a linha auto do grid, estourava e pintava sobre o texto */
.pm-img{
  background:radial-gradient(circle at 50% 40%, #fff, var(--areia-2));
  position:relative; overflow:hidden; min-height:320px;
}
.pm-img img, .pm-img > svg{
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  object-fit:contain; padding:24px;
}
.pm-info{ padding:34px 34px 30px; display:flex; flex-direction:column; gap:12px; }
.pm-info h2{ font-size:2rem; line-height:1.02; }
.pm-desc{ color:var(--marrom-2); font-size:.98rem; }
.pm-specs{ display:flex; gap:8px; flex-wrap:wrap; }
.pm-specs i{ font-style:normal; font-size:.78rem; background:rgba(46,32,25,.08); padding:5px 11px; border-radius:999px; font-weight:600; }
.pm-price{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.pm-price .price-now{ font-size:2.2rem; }

/* ============================ ADM ============================ */
.view-adm{ padding-top:calc(var(--nav-h) + 30px); min-height:100vh; background:var(--areia-2); padding-bottom:80px; }
.adm-login{ display:grid; place-items:center; min-height:66vh; }
.adm-login-card{
  background:var(--creme); border-radius:var(--r-xl); padding:38px 34px; width:min(400px,92vw);
  box-shadow:var(--shadow-lg); text-align:center; display:flex; flex-direction:column; gap:14px;
  border:2px solid rgba(46,32,25,.1);
}
.adm-login-card img{ width:88px; margin:0 auto; border-radius:50%; }
.adm-login-card h2{ font-size:1.5rem; }
.adm-login-card input{
  border:2px solid rgba(46,32,25,.18); border-radius:var(--r); padding:13px 16px; outline:none; background:#fff;
}
.adm-login-card input:focus{ border-color:var(--laranja); }
.hint{ font-size:.8rem; color:var(--marrom-3); margin:0; }
.hint code, .help code{ background:rgba(46,32,25,.1); padding:1px 6px; border-radius:5px; font-size:.92em; }

/* o painel é ferramenta de trabalho, não vitrine: usa a tela toda.
   Vale só aqui — o resto do site mantém a largura de leitura. */
.adm-panel{ width:min(2000px,97vw); margin:0 auto; }
.adm-top-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.adm-top-actions .btn{ padding:10px 16px; font-size:.86rem; }

.adm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px; }
.stat{ background:var(--creme); border-radius:var(--r); padding:16px 18px; border:2px solid rgba(46,32,25,.1); }
.stat b{ display:block; font-family:"Lilita One",sans-serif; font-size:2rem; line-height:1; color:var(--laranja); }
.stat span{ font-size:.8rem; color:var(--marrom-3); font-weight:600; }

.atab{
  border:0; background:none; padding:12px 20px; cursor:pointer; font-weight:700; color:var(--marrom-3);
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:.2s;
}
.atab:hover{ color:var(--marrom); }
.atab.is-on{ color:var(--laranja); border-color:var(--laranja); }
.apane{ display:none; }
.apane.is-on{ display:block; animation:fade .25s ease both; }

.apane-head{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.search-box.small{ flex:1 1 260px; padding:0 14px; }
.search-box.small input{ padding:10px 0; font-size:.94rem; }

.table-wrap{ overflow-x:auto; background:var(--creme); border-radius:var(--r); border:2px solid rgba(46,32,25,.1); }
.adm-table{ width:100%; border-collapse:collapse; min-width:1180px; }
.adm-table th{
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--marrom-3);
  padding:14px 12px; border-bottom:2px solid rgba(46,32,25,.12); white-space:nowrap;
}
.adm-table td{ padding:10px 12px; border-bottom:1px solid rgba(46,32,25,.08); vertical-align:middle; font-size:.92rem; }
.adm-table tr:last-child td{ border-bottom:0; }
.adm-table tr:hover td{ background:rgba(240,220,184,.4); }
.adm-table th:first-child, .adm-table td:first-child{ width:64px; }
.t-thumb{
  width:48px; height:48px; min-width:48px; max-width:none;
  border-radius:10px; object-fit:contain; background:var(--areia-2);
}
.t-name{ font-weight:700; }
.t-name small{ display:block; font-weight:400; color:var(--marrom-3); font-size:.78rem; }
.t-input{
  width:96px; border:2px solid rgba(46,32,25,.16); border-radius:9px; padding:6px 9px; background:#fff; outline:none;
}
.t-input:focus{ border-color:var(--laranja); }
.t-input.narrow{ width:86px; }
.flagbtn{
  border:2px solid rgba(46,32,25,.18); background:transparent; border-radius:999px; padding:3px 10px;
  font-size:.72rem; font-weight:700; cursor:pointer; margin-right:4px; transition:.18s;
}
.flagbtn.is-on{ background:var(--marrom); border-color:var(--marrom); color:var(--areia-2); }
.flagbtn.promo.is-on{ background:var(--verde); border-color:var(--verde); color:#fff; }
.flagbtn.off.is-on{ background:var(--marrom-3); border-color:var(--marrom-3); color:#fff; }
.rowacts{ display:flex; gap:6px; white-space:nowrap; }
.iconbtn{
  border:2px solid rgba(46,32,25,.18); background:transparent; border-radius:9px; width:32px; height:32px;
  cursor:pointer; font-size:.9rem; line-height:1; transition:.18s; padding:0;
  display:inline-grid; place-items:center; color:var(--marrom-2);
}
/* o ícone dentro do botão perde a pílula própria e segue a cor do botão */
.iconbtn .dash-ico{
  width:16px; height:16px; padding:0; background:none; border-radius:0;
  stroke:currentColor; stroke-width:2;
}
.iconbtn:hover{ background:var(--marrom); color:var(--areia-2); border-color:var(--marrom); }
.iconbtn.del:hover{ background:#B4271A; border-color:#B4271A; }

/* sessões */
.sess-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; }
.sess-col{ background:var(--creme); border-radius:var(--r); padding:20px; border:2px solid rgba(46,32,25,.1); }
.sess-col h3{ font-size:1.2rem; margin-bottom:4px; }
.sortable{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; min-height:60px; }
.sortable li{
  display:flex; align-items:center; gap:10px; background:var(--areia-2); border-radius:12px; padding:9px 12px;
  cursor:grab; border:2px solid transparent; transition:.18s;
}
.sortable li:hover{ border-color:var(--areia-d); }
.sortable li.dragging{ opacity:.4; }
.sortable li.over{ border-color:var(--laranja); }
.sortable img{ width:34px; height:34px; object-fit:contain; border-radius:7px; background:#fff; flex:none; }
.sortable li > div{ flex:none; }
.sortable .s-name{ flex:1; font-weight:600; font-size:.9rem; }
.sortable .grip{ color:var(--marrom-3); cursor:grab; }
.sess-toggles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-top:12px; }
.sess-add{ background:var(--creme); border-radius:var(--r); padding:20px; border:2px solid rgba(46,32,25,.1); }
.sess-item{ display:flex; align-items:center; gap:10px; background:var(--areia-2); border-radius:12px; padding:9px 12px; }
.sess-item .s-name{ flex:1; font-size:.88rem; font-weight:600; }

/* config */
.cfg-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start; }
.cfg-form fieldset{ background:var(--creme); border:2px solid rgba(46,32,25,.1); border-radius:var(--r); padding:20px; }
.cfg-form legend{ font-family:"Lilita One",sans-serif; font-size:1.1rem; padding:0 8px; color:var(--laranja); }
.cfg-form label{ display:block; margin-bottom:14px; font-size:.86rem; font-weight:700; color:var(--marrom-2); }
.cfg-form label small{ font-weight:400; color:var(--marrom-3); }
.cfg-form input:not([type=checkbox]), .cfg-form textarea, .form-grid input, .form-grid textarea, .form-grid select{
  width:100%; margin-top:6px; border:2px solid rgba(46,32,25,.16); border-radius:11px; padding:10px 13px;
  background:#fff; outline:none; font-weight:400; font-size:.94rem;
}
.cfg-form input:focus, .cfg-form textarea:focus, .form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus{ border-color:var(--laranja); box-shadow:var(--ring); }
.row-check{ display:flex !important; align-items:center; gap:10px; }
.row-check input{ width:18px; height:18px; accent-color:var(--laranja); margin:0; }
.cfg-actions{ grid-column:1/-1; }

/* form de produto (modal) */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:30px 34px 26px; }
.form-grid h2{ grid-column:1/-1; font-size:1.7rem; margin-bottom:4px; }
.form-grid label{ display:block; font-size:.82rem; font-weight:700; color:var(--marrom-2); }
.form-grid .full{ grid-column:1/-1; }
.form-actions{ grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.img-picker{ display:flex; gap:14px; align-items:center; }
.img-preview{
  width:96px; height:96px; border-radius:14px; background:var(--areia-2); object-fit:contain; flex:none;
  border:2px solid rgba(46,32,25,.14);
}
.help{ background:var(--creme); border-radius:var(--r); padding:26px 28px; border:2px solid rgba(46,32,25,.1); max-width:760px; }
.help h3{ font-size:1.2rem; margin:20px 0 8px; color:var(--laranja); }
.help h3:first-child{ margin-top:0; }
.help ol{ padding-left:20px; }
.help li{ margin-bottom:6px; }
.danger-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* ============================ RODAPÉ / FAB / TOAST ============================ */
.foot{ position:relative; z-index:4; background:var(--marrom); color:var(--areia-2); padding:60px 0 26px; }
.foot-in{
  width:min(var(--max),92vw); margin:0 auto; display:grid;
  grid-template-columns:2fr 1fr 1fr; gap:34px; padding-bottom:34px;
  border-bottom:1px solid rgba(247,234,210,.16);
}
.foot-brand img{ width:96px; border-radius:16px; margin-bottom:14px; }
.foot-brand p{ margin:0; color:rgba(247,234,210,.72); font-size:.94rem; }
.foot-links h4{ font-size:1.05rem; margin-bottom:12px; color:var(--laranja-3); }
.foot-links a{ display:block; padding:5px 0; color:rgba(247,234,210,.78); font-size:.94rem; transition:.18s; }
.foot-links a:hover{ color:var(--laranja-3); transform:translateX(3px); }
.foot-legal{ width:min(var(--max),92vw); margin:22px auto 0; font-size:.78rem; color:rgba(247,234,210,.55); }
.foot-legal p{ margin:6px 0; }

.fab-zap{
  position:fixed; right:20px; bottom:20px; z-index:45; width:58px; height:58px; border-radius:50%;
  background:var(--zap); display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(0,0,0,.5);
  transition:transform .2s var(--ease); animation:bob 3s ease-in-out infinite;
}
.fab-zap:hover{ transform:scale(1.09); }
.fab-zap svg{ width:30px; height:30px; fill:#fff; }
@keyframes bob{ 50%{ transform:translateY(-6px) } }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:120;
  background:var(--marrom); color:var(--areia-2); padding:13px 24px; border-radius:999px;
  font-weight:600; font-size:.92rem; box-shadow:var(--shadow-lg); animation:rise .3s var(--ease) both;
}


.empty{ text-align:center; padding:50px 0; color:var(--marrom-3); }
.empty p{ font-size:1.05rem; margin-bottom:14px; }

/* ============================ RESPONSIVO ============================ */
@media (max-width:900px){
  .pm-grid{ grid-template-columns:1fr; }
  /* ficha do produto: foto menor e rodapé grudado embaixo, pra o preço e o
     botão aparecerem sem precisar rolar */
  .pm-img{ min-height:0; height:min(32vh,240px); }
  .pm-img img, .pm-img > svg{ padding:14px; }
  .pm-info{ padding:18px 20px 0; gap:8px; }
  .pm-info h2{ font-size:1.5rem; }
  .pm-desc{ font-size:.92rem; }
  .pm-specs i{ font-size:.72rem; padding:4px 9px; }
  .pm-price .price-now{ font-size:1.8rem; }
  .pm-foot{
    position:sticky; bottom:0; margin-top:8px;
    padding:12px 20px 16px; margin-inline:-20px;
    background:var(--creme); box-shadow:0 -12px 18px -12px rgba(46,32,25,.45);
  }
  .pm-foot .hint{ display:none; }
  .pm-foot .btn{ width:100%; }
  .sess-grid{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; padding:24px; }
}
@media (max-width:760px){
  :root{ --nav-h:64px; }

  /* topo do site: itens não podem se espremer nem quebrar linha */
  /* textura de papel fora do celular: presa ao visor com multiply, ela
     "nadava" sobre o degradê enquanto a pagina rolava e o fundo parecia
     tremer. Tambem custa uma composicao de tela cheia a cada quadro. */
  .grain{ display:none; }

  .nav{ gap:10px; padding:0 14px; }
  .nav-brand{ min-width:0; }
  .nav-brand img{ width:36px; height:36px; }
  .nav-brand span{ font-size:1.05rem; white-space:nowrap; }
  .nav{ overflow:visible; }
  .nav-zap{ display:none; }              /* o botão flutuante já resolve */
  .nav-brand{ position:absolute; left:50%; transform:translateX(-50%); margin:0; }
  .nav-burger{ margin-left:auto; }
  body.hero-logo .nav-brand span{ display:none; }
  body.hero-logo .nav-brand img{
    width:88px; height:88px; transform:translateY(20px); border-radius:22px;
    box-shadow:0 14px 26px -12px rgba(46,32,25,.55);
  }
  .nav-tabs{
    position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0;
    background:var(--creme); padding:10px; box-shadow:var(--shadow-lg);
    transform:translateY(-130%); transition:transform .3s var(--ease); border-bottom:2px solid rgba(46,32,25,.12);
  }
  body.menu-open .nav-tabs{ transform:translateY(0); }
  .tab{ border-radius:12px; padding:14px 16px; }
  .nav-burger{ display:block; flex:none; }

  /* hero: frase maior, pod maior e tudo com folga */
  .hero-copy{ padding:calc(var(--nav-h) + 7vh) 6vw 6vh; }  /* espaço pra logo saltada */

  /* a barra continua visível; o degrau vinha da cor. Agora ela usa o mesmo
     tom do topo do céu e, na hero, dispensa a linha de baixo. */
  .nav::before{
    top:calc(-1 * env(safe-area-inset-top, 0px));
    background:rgba(247,234,210,.88);
  }
  .hero-title{ font-size:clamp(2.9rem,12.5vw,4.2rem); line-height:.94; }
  .hero-sub{ font-size:1rem; max-width:32ch; padding:12px 20px; }
  .kicker{ font-size:.64rem; letter-spacing:.18em; margin-bottom:10px; }
  /* pod e sol no mesmo centro, abaixados pra não encostar no título */
  .pod-wrap{ width:min(102vw,430px); top:57%; }
  .hero-sun{ width:min(98vw,415px); top:57%; }

  /* só o ícone: a legenda encostava no subtítulo */
  .scroll-cue{ bottom:8px; gap:0; }
  .scroll-cue span{ display:none; }
  .scroll-cue svg{ width:18px; height:30px; }

  /* sessão da promoção */
  .showcase{ padding:12vh 0 10vh; }
  .showcase-title{ font-size:clamp(2.6rem,12.5vw,4rem); margin-bottom:24px; }
  .btn-big{ padding:16px 30px; font-size:1rem; }
  .promo-carousel{ margin-top:42px; }
  .car-arrow{ display:none; }
  .car-viewport{ mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }

  /* loja */
  .filter-bar{ padding:10px 0 12px; }
  .filters-toggle{ padding:13px 15px; }
  .filters-toggle span{ display:none; }
  .shop-head h1{ font-size:clamp(2.4rem,13vw,3.4rem); }
  .row-block{ margin-bottom:38px; }
  .row-head{ gap:12px; margin-bottom:14px; }
  .row-head h2{ font-size:clamp(1.4rem,6.2vw,1.9rem); }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
  .rail > *{ flex-basis:170px; }

  /* selo pequeno: no card estreito ele estava tampando o produto */
  .badge{ top:7px; left:7px; gap:4px; }
  .badge span{ font-size:.56rem; padding:3px 7px; letter-spacing:.04em; }

  /* card curto: menos rolagem pra varrer a vitrine */
  .card{ border-radius:20px; }
  .card-img img{ padding:8px; }
  .card-body{ padding:10px 11px 12px; gap:4px; }
  .card-brand{ font-size:.6rem; letter-spacing:.14em; }
  .card-img{ aspect-ratio:1 / .85; }
  /* nome sempre em 2 linhas: os cards se alinham sem sobrar vão morto */
  .card-name{
    font-size:.92rem; min-height:2.1em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .card-tags{ margin-top:0; }
  .card-tags i:nth-child(n+2){ display:none; }   /* só os puffs */
  .card-tags i{ font-size:.64rem; padding:2px 7px; }
  .card-price{ padding-top:6px; gap:6px; }
  .price-now{ font-size:1.18rem; }
  .price-old{ font-size:.76rem; }
  .card .btn-zap{ margin-top:8px; padding:9px; font-size:.82rem; }

  /* fecho da home */
  .ticker span{ font-size:1rem; gap:30px; }
  .ticker-track{ gap:30px; }
  .perks{ padding:56px calc((100% - min(var(--max),92vw)) / 2); gap:16px; }
  .perk{ padding:22px 20px; }
  .cta-final{ padding:66px 6vw 84px; }
  .cta-row{ flex-direction:column; }
  .cta-row .btn{ width:100%; }

  .foot{ padding:48px 0 22px; }
  .foot-in{ grid-template-columns:1fr; gap:26px; }

  .fab-zap{ width:52px; height:52px; bottom:16px; right:16px; }
}
/* celulares bem estreitos: a marca escrita sai pra não empurrar o menu */
@media (max-width:380px){
  .nav-brand span{ display:none; }
  .hero-sub{ font-size:.94rem; padding:10px 16px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---- selos de desconto em verde; preços seguem laranja ---- */
#blockPromo .row-head h2{ color:var(--brasa); }

.pm-off{ background:var(--verde); color:#fff; font-weight:800; font-size:.8rem; padding:5px 12px; border-radius:999px; }
.car-dots button.is-on{ background:var(--laranja-2); }

/* ---- painel: custo, lucro e aviso de pendência ---- */
.t-final{ font-weight:700; white-space:nowrap; }
.t-lucro{ font-weight:700; white-space:nowrap; }
.t-lucro.bom{ color:var(--verde); }
.t-lucro.ruim{ color:#B4271A; }
.t-lucro small{ display:block; font-weight:600; opacity:.65; font-size:.72rem; }
.adm-aviso{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#FFF1D6; border:2px solid var(--laranja-3); border-radius:var(--r);
  padding:12px 16px; margin-bottom:18px; font-size:.92rem;
}

/* ============================ DASHBOARD ============================
   Layout de três colunas: resumo e pendências à esquerda, dinheiro no
   meio, divisão e catálogo à direita. */
.adm-barra{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-bottom:2px solid rgba(46,32,25,.14); margin-bottom:26px;
}
.adm-tabs{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.adm-top-actions{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; gap:8px;
}
.adm-top-actions .btn{ padding:8px 14px; font-size:.82rem; }
@media (max-width:1240px){
  .adm-barra{ flex-direction:column; gap:12px; padding-bottom:12px; }
  .adm-top-actions{ position:static; transform:none; flex-wrap:wrap; justify-content:center; }
}

#apane-dashboard{ width:min(1560px,100%); margin:0 auto; }
.dash-app{ display:grid; grid-template-columns:300px minmax(0,1fr) 330px; gap:18px; align-items:start; }
.dash-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
@media (max-width:1400px){
  .dash-app{ grid-template-columns:290px minmax(0,1fr); }
  .dash-app > .dash-col:last-child{ grid-column:1 / -1; flex-direction:row; }
  .dash-app > .dash-col:last-child > *{ flex:1; }
}
@media (max-width:820px){
  .dash-app{ grid-template-columns:1fr; }
  .dash-app > .dash-col:last-child{ flex-direction:column; }
}

/* ---- cartão escuro do faturamento ---- */
.dash-hero{
  background:linear-gradient(150deg,#3A2418 0%, var(--marrom) 55%, #5A3520 100%);
  color:var(--areia-2); border-radius:var(--r-lg); padding:20px 22px 22px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.dash-hero .hero-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.dash-hero .dash-ico{ background:rgba(247,234,210,.14); stroke:var(--laranja-3); width:34px; height:34px; }
.hero-rot{ font-size:.78rem; opacity:.7; letter-spacing:.04em; }
.hero-num{
  display:block; font-family:"Lilita One",sans-serif; font-size:2.15rem; line-height:1.1;
  letter-spacing:.5px; margin-top:2px;
}
.hero-pes{ display:flex; gap:26px; margin-top:20px; }
.hero-pes span{ display:block; font-size:.72rem; opacity:.65; }
.hero-pes b{ font-size:1rem; }

/* ---- atalhos ---- */
.dash-atalhos{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--creme); border:2px solid rgba(46,32,25,.1); border-radius:var(--r-lg);
  padding:12px 6px; box-shadow:var(--shadow);
}
.atalho{
  border:0; background:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:6px; padding:4px 2px; color:var(--marrom-3);
  font-size:.72rem; font-weight:700; transition:.2s;
}
.atalho + .atalho{ border-left:1px solid rgba(46,32,25,.1); }
.atalho:hover{ color:var(--laranja); }
.atalho:hover .dash-ico{ background:var(--laranja); stroke:#fff; }

/* ---- cards e cabeçalhos ---- */
.dash-card{
  background:var(--creme); border:2px solid rgba(46,32,25,.1); border-radius:var(--r-lg);
  padding:18px 20px 20px; box-shadow:var(--shadow); min-width:0;
}
.dash-card header{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px;
}
.dash-card h3{ font-size:1.1rem; }
.dash-nota{ font-size:.74rem; color:var(--marrom-3); }
.dash-vazio{ color:var(--marrom-3); font-size:.88rem; line-height:1.6; margin:6px 0 0; }
.dash-ico{
  width:32px; height:32px; flex:none; padding:7px; border-radius:10px;
  background:rgba(226,74,18,.1); fill:none; stroke:var(--laranja);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:.2s;
}

/* ---- cards de número ---- */
.dash-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; }
.kpi{
  background:var(--creme); border:2px solid rgba(46,32,25,.1); border-radius:var(--r-lg);
  padding:16px 18px 18px; box-shadow:var(--shadow);
}
.kpi-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.kpi-var{
  font-style:normal; font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:999px;
  background:rgba(23,148,79,.12); color:var(--verde);
}
.kpi-var.baixa{ background:rgba(180,39,26,.12); color:#B4271A; }
.kpi strong{
  display:block; font-family:"Lilita One",sans-serif; font-size:1.9rem; line-height:1;
  color:var(--marrom); letter-spacing:.5px;
}
.kpi span{ display:block; margin-top:8px; font-size:.86rem; font-weight:700; color:var(--marrom-2); }
.kpi small{ display:block; margin-top:3px; font-size:.72rem; color:var(--marrom-3); }

/* ---- reposição, com a barra do estoque ---- */
.repor-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.repor-lista li{ background:var(--areia-2); border-radius:12px; padding:11px 13px; }
.repor-lista li.critico{ background:#FDECE9; }
.repor-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.repor-nome{ font-weight:700; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.repor-qtd{ font-weight:800; font-size:.76rem; color:var(--laranja); white-space:nowrap; }
.barrinha{ height:7px; border-radius:99px; background:rgba(46,32,25,.12); margin:9px 0 6px; overflow:hidden; }
.barrinha i{ display:block; height:100%; border-radius:99px; background:var(--laranja); transition:width .4s var(--ease); }
.critico .barrinha i{ background:#B4271A; }
.repor-pe{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--marrom-3); }

/* ---- gráfico cashflow: coluna acima e abaixo da linha do zero ---- */
.gr-topo{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.gr-num{ display:block; font-family:"Lilita One",sans-serif; font-size:1.7rem; line-height:1.1; color:var(--marrom); }
.legenda{ display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--marrom-3); flex-wrap:wrap; }
.legenda i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.legenda i + i{ margin-left:10px; }
.c-fat{ background:var(--marrom); }
.c-gas{ background:var(--laranja-3); }

.gr-palco{ position:relative; }
.grafico{ width:100%; height:300px; display:block; }
.grafico .gx{ stroke:rgba(46,32,25,.1); stroke-width:1; }
.grafico .gx.zero{ stroke:rgba(46,32,25,.22); }
.grafico .eixo{ font-size:11px; fill:var(--marrom-3); }
.grafico .b-fat{ fill:var(--marrom); }
.grafico .b-gas{ fill:var(--laranja-3); }
.grafico .alvo{ fill:transparent; }
.grafico .col:hover .b-fat{ fill:var(--marrom-2); }
.grafico .col:hover .b-gas{ fill:var(--laranja-2); }

.gr-tip{
  position:absolute; pointer-events:none; z-index:3; min-width:150px;
  background:var(--creme); border:2px solid rgba(46,32,25,.12); border-radius:12px;
  padding:9px 12px; box-shadow:var(--shadow-lg); font-size:.78rem;
}
.gr-tip b{ display:block; margin-bottom:6px; font-size:.82rem; }
.gr-tip span{ display:flex; justify-content:space-between; gap:14px; color:var(--marrom-3); }
.gr-tip em{ font-style:normal; font-weight:800; color:var(--marrom); }

/* ---- receita: abas + rosca com folga entre as fatias ---- */
.rec-abas{ display:flex; gap:4px; border-bottom:2px solid rgba(46,32,25,.12); margin:-4px 0 18px; }
.rec-aba{
  flex:1; border:0; background:none; cursor:pointer; padding:9px 4px 11px;
  font-size:.82rem; font-weight:700; color:var(--marrom-3);
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:.2s;
}
.rec-aba em{ font-style:normal; font-weight:600; opacity:.75; }
.rec-aba:hover{ color:var(--marrom); }
.rec-aba.is-on{ color:var(--laranja); border-color:var(--laranja); }

.pizza-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.rosca{ width:170px; height:170px; flex:none; transform:rotate(-90deg); }
.rosca .trilho{ fill:none; stroke:rgba(46,32,25,.07); stroke-width:15; }
.rosca .fatia{ fill:none; stroke-width:15; stroke-linecap:round; }
.rosca text{ transform:rotate(90deg); transform-origin:70px 70px; text-anchor:middle; }
.rosca-num{ font-family:"Lilita One",sans-serif; font-size:16px; fill:var(--marrom); }
.rosca-lab{ font-size:8.5px; fill:var(--marrom-3); }
.pizza-legenda{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:13px; }
.pizza-legenda li{ display:flex; align-items:center; gap:11px; font-size:.86rem; }
.pizza-legenda span{ flex:1; color:var(--marrom-2); }
.pizza-legenda b{ font-weight:800; white-space:nowrap; }
.pizza-legenda .pct{
  font-style:normal; font-size:.7rem; font-weight:800; padding:5px 8px; border-radius:9px;
  background:rgba(226,74,18,.12); color:var(--laranja); min-width:42px; text-align:center;
}
.pizza-legenda .pct.forte{ background:var(--marrom); color:var(--areia-2); }

/* ---- saúde do catálogo ---- */
.cat-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cat-lista li{ display:flex; align-items:center; gap:11px; }
.cat-lista li .dash-ico{ width:34px; height:34px; }
.cat-lista li.alerta .dash-ico{ background:rgba(180,39,26,.1); stroke:#B4271A; }
.cat-lista span{ flex:1; min-width:0; }
.cat-lista b{ display:block; font-size:.86rem; }
.cat-lista small{ display:block; font-size:.72rem; color:var(--marrom-3); }
.cat-lista strong{ font-family:"Lilita One",sans-serif; font-size:1.35rem; color:var(--marrom); }

/* ---- tabela compacta do "mais saem" ---- */
.mini-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.mini-table th{
  text-align:left; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--marrom-3); font-weight:700; padding:0 10px 10px 0; border-bottom:1px solid rgba(46,32,25,.12);
}
.mini-table td{ padding:11px 10px 11px 0; border-bottom:1px solid rgba(46,32,25,.07); white-space:nowrap; }
.mini-table tr:last-child td{ border-bottom:0; }
.mini-table td:first-child{ white-space:normal; min-width:150px; }
.mini-table td b{ display:block; font-size:.86rem; }
.mini-table td small{ display:block; font-size:.72rem; color:var(--marrom-3); }
.mini-table th:not(:first-child), .mini-table td:not(:first-child){ text-align:right; padding-right:0; padding-left:10px; }
.pct{
  font-style:normal; font-size:.72rem; font-weight:800; padding:4px 8px; border-radius:8px;
  background:rgba(23,148,79,.12); color:var(--verde);
}
.pct.baixa{ background:rgba(180,39,26,.12); color:#B4271A; }
.pizza-legenda .pct{ background:rgba(46,32,25,.08); color:var(--marrom-2); min-width:40px; text-align:center; }

/* ============================ ESTOQUE ============================
   Lista de produtos à esquerda, detalhe e histórico à direita. */
#apane-estoque{ width:min(1400px,100%); margin:0 auto; }
.est-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-bottom:20px; }
.est-app{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:980px){ .est-app{ grid-template-columns:1fr; } }

.est-lista-card{ display:flex; flex-direction:column; }
.est-lista{ list-style:none; margin:0; padding:0 4px 0 0; display:flex; flex-direction:column; gap:10px;
  max-height:640px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--areia-d) transparent; }
.est-lista::-webkit-scrollbar{ width:6px; }
.est-lista::-webkit-scrollbar-thumb{ background:var(--areia-d); border-radius:8px; }
.est-item{
  background:var(--areia-2); border:2px solid transparent; border-radius:14px; padding:12px 13px; cursor:pointer;
  transition:.18s;
}
.est-item:hover{ border-color:var(--areia-d); }
.est-item.is-on{ border-color:var(--laranja); background:var(--creme); }
.est-item-topo{ display:flex; align-items:center; gap:9px; }
.est-item-topo .dash-ico{ width:28px; height:28px; padding:5px; border-radius:9px; }
.est-item-topo b{ font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.est-item-num{ font-family:"Lilita One",sans-serif; font-size:1.35rem; color:var(--marrom); margin:8px 0 2px; }
.est-item-num em{ font-style:normal; font-family:inherit; font-size:.8rem; color:var(--marrom-3); margin-left:4px; }
.est-item-pe{ display:flex; justify-content:space-between; align-items:center; font-size:.72rem; color:var(--marrom-3); }
.est-tag{ font-weight:700; }
.est-item.ok .est-tag{ color:var(--verde); }
.est-item.baixo .est-tag, .est-item.baixo .barrinha i{ color:var(--laranja); background:var(--laranja); }
.est-item.baixo .est-tag{ background:none; }
.est-item.zerado .est-tag, .est-item.sem .est-tag{ color:#B4271A; }
.est-item.zerado .barrinha i{ background:#B4271A; }
.est-item.sem .barrinha i{ background:var(--areia-d); }
.est-item.ok .barrinha i{ background:var(--verde); }
.est-add{ margin-top:14px; width:100%; }
.btn-dark{ background:var(--marrom); color:var(--areia-2); border:0; }
.btn-dark:hover{ background:var(--marrom-2); }

/* detalhe do produto escolhido */
.det-topo{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.det-topo h3{ flex:1; font-size:1.15rem; }
.det-num{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.det-num strong{ font-family:"Lilita One",sans-serif; font-size:2.1rem; line-height:1; color:var(--marrom); }
.barrinha.grande{ height:11px; margin:14px 0 7px; }
.det-saldo{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--marrom-3); }
.det-lista{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:20px 0 0; }
.det-lista dt{ font-size:.72rem; color:var(--marrom-3); }
.det-lista dd{ margin:3px 0 0; font-weight:700; font-size:.92rem; }

.dicas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dicas li{
  background:var(--areia-2); border-left:4px solid var(--laranja); border-radius:10px;
  padding:10px 13px; font-size:.86rem; line-height:1.5;
}

/* linha do tempo do investimento */
.grafico.linha{ height:210px; }
.grafico .area{ fill:rgba(226,74,18,.12); }
.grafico .area.entrou{ fill:url(#fadeEnt); }
.grafico .area.saiu{ fill:url(#fadeSai); }
.grafico .curva{ fill:none; stroke:var(--laranja); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.grafico .ponto{ fill:var(--creme); stroke:var(--laranja); stroke-width:2.5; }

.mini-table.compras td{ white-space:nowrap; }
.mini-table.compras td:nth-child(2){ white-space:normal; }
.mini-table.compras .rowacts{ display:flex; gap:4px; justify-content:flex-end; }

/* formulário de compra */
.compra-card{ width:min(680px,94vw); }
.compra-card .form-grid{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.compra-card input, .compra-card select{
  width:100%; border:2px solid rgba(46,32,25,.18); border-radius:12px; padding:10px 12px;
  background:#fff; font:inherit; outline:none; margin-top:5px;
}
.compra-card input:focus, .compra-card select:focus{ border-color:var(--laranja); }
.compra-previa{
  margin:16px 0 0; background:var(--areia-2); border-radius:12px; padding:11px 14px; font-size:.86rem;
  min-height:20px;
}
.compra-previa .bom{ color:var(--verde); }
.compra-previa .ruim{ color:#B4271A; }

/* espelhos na tabela de produtos */
.t-desc, .t-est{ font-weight:700; }
.t-est.zero{ color:#B4271A; }
.t-sem{ display:block; font-size:.68rem; font-weight:600; color:#B4271A; }
.apane-dica{ margin:0 0 14px; font-size:.84rem; color:var(--marrom-3); }

/* status do banco */
.banco-status{ margin-bottom:18px; }
.banco-status p{ margin:0 0 8px; font-size:.92rem; line-height:1.6; }
.banco-on{ color:var(--verde-d); }
.banco-off{ color:#B4271A; }
.grafico.linha{ overflow:visible; }
.det-vendas{ display:block; margin-top:22px; font-size:.78rem; font-weight:700; color:var(--marrom-2); }
.det-vendas input{ display:block; width:120px; margin-top:6px; }
.det-vendas small{ display:block; margin-top:5px; font-weight:600; color:var(--marrom-3); font-size:.72rem; }

/* ============================ VENDA ============================
   Card único, no mesmo marrom do cartão de faturamento da dashboard. */
#apane-venda{ width:min(860px,100%); margin:0 auto; }
.venda-card{
  background:linear-gradient(150deg,#3A2418 0%, var(--marrom) 55%, #5A3520 100%);
  color:var(--areia-2); border-radius:var(--r-xl); padding:30px 32px 32px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:22px;
}
.venda-topo h2{ font-size:2rem; line-height:1.1; }
.venda-topo p{ margin:8px 0 0; opacity:.72; font-size:.94rem; }

.venda-busca input{
  width:100%; border:2px solid rgba(247,234,210,.2); border-radius:14px; padding:12px 16px;
  background:rgba(27,18,13,.34); color:var(--areia-2); font:inherit; outline:none;
}
.venda-busca input::placeholder{ color:rgba(247,234,210,.5); }
.venda-busca input:focus{ border-color:var(--laranja-3); }

.venda-produtos{
  margin-top:14px; display:flex; flex-direction:column; gap:8px;
  max-height:340px; overflow-y:auto; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:rgba(247,234,210,.35) transparent;
}
.venda-produtos::-webkit-scrollbar{ width:6px; }
.venda-produtos::-webkit-scrollbar-thumb{ background:rgba(247,234,210,.3); border-radius:8px; }
.venda-vazio{ opacity:.6; font-size:.9rem; margin:6px 0 0; }

.vprod{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:rgba(247,234,210,.07); border:2px solid transparent; border-radius:14px; padding:10px 12px;
  transition:.18s;
}
.vprod:hover{ background:rgba(247,234,210,.12); }
.vprod.is-on{ border-color:var(--laranja-3); background:rgba(255,162,77,.14); }
.vprod.sem{ opacity:.45; }
.vprod-info{ min-width:0; }
.vprod-info b{ display:block; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vprod-info small{ display:block; font-size:.75rem; opacity:.66; margin-top:2px; }

.vprod-qtd{ display:flex; align-items:center; gap:6px; flex:none; }
.qbtn{
  width:30px; height:30px; border-radius:9px; border:0; cursor:pointer; font-size:1.1rem; line-height:1;
  background:rgba(247,234,210,.14); color:var(--areia-2); transition:.15s;
}
.qbtn:hover{ background:var(--laranja); color:#fff; }
.qnum{
  width:46px; text-align:center; border:2px solid rgba(247,234,210,.2); border-radius:9px;
  background:rgba(27,18,13,.34); color:var(--areia-2); font:inherit; font-weight:700; padding:5px 2px; outline:none;
}
.qnum:focus{ border-color:var(--laranja-3); }

.venda-pe{
  display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;
  border-top:1px solid rgba(247,234,210,.16); padding-top:20px;
}
.venda-campo > span{ display:block; font-size:.74rem; opacity:.66; margin-bottom:8px; }
.venda-vendedores{ display:flex; gap:7px; flex-wrap:wrap; }
.vend-btn{
  border:2px solid rgba(247,234,210,.24); background:none; color:var(--areia-2); cursor:pointer;
  border-radius:999px; padding:8px 16px; font:inherit; font-size:.84rem; font-weight:700; transition:.18s;
}
.vend-btn:hover{ border-color:var(--laranja-3); }
.vend-btn.is-on{ background:var(--laranja); border-color:var(--laranja); color:#fff; }
.venda-data input{
  border:2px solid rgba(247,234,210,.2); border-radius:11px; padding:8px 12px;
  background:rgba(27,18,13,.34); color:var(--areia-2); font:inherit; outline:none;
}
.venda-data input:focus{ border-color:var(--laranja-3); }
.venda-resumo{ margin-left:auto; text-align:right; }
.venda-resumo span{ display:block; font-size:.74rem; opacity:.66; }
.venda-resumo strong{ font-family:"Lilita One",sans-serif; font-size:1.7rem; line-height:1.2; }

.venda-btn{
  background:var(--laranja); color:#fff; border:0; width:100%; padding:15px;
  font-size:1rem; font-weight:800; border-radius:999px; cursor:pointer; transition:.2s;
}
.venda-btn:hover:not(:disabled){ background:var(--laranja-2); }
.venda-btn:disabled{ opacity:.42; cursor:not-allowed; }

@media (max-width:640px){
  .venda-card{ padding:24px 20px 26px; }
  .venda-resumo{ margin-left:0; text-align:left; }
}

/* ---- seletor compra/venda dos cards de registro ---- */
.seletor{ display:flex; gap:4px; background:rgba(46,32,25,.07); border-radius:999px; padding:3px; }
.sel-btn{
  border:0; background:none; cursor:pointer; border-radius:999px; padding:6px 15px;
  font:inherit; font-size:.78rem; font-weight:700; color:var(--marrom-3); transition:.18s;
}
.sel-btn:hover{ color:var(--marrom); }
.sel-btn.is-on{ background:var(--creme); color:var(--laranja); box-shadow:0 1px 3px rgba(46,32,25,.14); }

/* ---- tabela de registros: cabe no card e rola sozinha ---- */
.mini-table.reg{ min-width:560px; }
.mini-table.reg td{ white-space:nowrap; vertical-align:top; }
.mini-table.reg td:nth-child(2){ white-space:normal; min-width:140px; }
.mini-table.reg .rowacts{ display:flex; gap:4px; justify-content:flex-end; }
.mini-table.reg small{ font-weight:600; }
.vendedor{
  font-style:normal; font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:999px;
  background:rgba(46,32,25,.08); color:var(--marrom-2);
}
.dash-card .table-wrap{ overflow-x:auto; }

/* quem vendeu, no detalhe do produto */
.det-vend{ margin-top:20px; }
.det-vend > span{ display:block; font-size:.72rem; color:var(--marrom-3); margin-bottom:8px; }
.det-vend ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.det-vend li{
  display:flex; align-items:baseline; gap:7px; font-size:.8rem;
  border-radius:999px; padding:6px 13px;
  background:rgba(78,142,150,.14); color:#2F5C62; border:1px solid rgba(78,142,150,.3);
}
.det-vend em{ font-style:normal; color:#4E8E96; font-size:.74rem; font-weight:700; }

/* ---- linha do tempo com duas séries e faixa de mês ---- */
.c-ent{ background:var(--laranja); }
.c-sai{ background:var(--marrom); }
.grafico .curva.entrou{ stroke:var(--laranja); }
.grafico .curva.saiu{ stroke:var(--marrom); }
.grafico .ponto.entrou{ stroke:var(--laranja); }
.grafico .ponto.saiu{ stroke:var(--marrom); }
.grafico .mes-linha{ stroke:rgba(46,32,25,.22); stroke-width:1.5; }
.grafico .mes-rot{ font-size:10px; fill:var(--marrom-3); letter-spacing:.04em; }

/* ---- rosca da dashboard: porcentagem sem cor ---- */
.pizza-legenda .pct, .pizza-legenda .pct.forte{
  background:rgba(46,32,25,.08); color:var(--marrom-2);
}

/* ============================ SABORES E EXCLUSÃO ============================ */
.det-acoes{ display:flex; gap:6px; flex-wrap:wrap; }
.det-acoes .btn{ padding:7px 13px; font-size:.79rem; }
.btn-ghost.perigo{ color:#B4271A; border-color:rgba(180,39,26,.35); }
.btn-ghost.perigo:hover{ background:#B4271A; border-color:#B4271A; color:#fff; }

/* saldo sabor a sabor no detalhe */
.det-sabores{ margin-top:20px; }
.det-sabores > span{ display:block; font-size:.72rem; color:var(--marrom-3); margin-bottom:8px; }
.det-sabores ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.det-sabores li{
  display:flex; align-items:baseline; gap:8px; border-radius:999px; padding:6px 13px;
  font-size:.8rem; background:var(--areia-2);
}
.det-sabores li em{ font-style:normal; font-size:.74rem; color:var(--marrom-3); }
.det-sabores li.acabou{ background:#FDECE9; }
.det-sabores li.acabou b{ text-decoration:line-through; opacity:.7; }
.det-sabores li.acabou em{ color:#B4271A; font-weight:700; }
.det-sabores li.nunca{ opacity:.55; }

/* sabores esgotados no card de reposição */
.repor-sabores{ margin-top:7px; font-size:.72rem; color:#B4271A; }
.repor-sabores em{
  font-style:normal; font-weight:700; background:rgba(180,39,26,.1);
  border-radius:6px; padding:2px 7px; margin-left:5px;
}

/* quantidade por sabor no formulário de compra */
.sabor-grid > .sabor-rot{ display:block; font-size:.82rem; font-weight:700; color:var(--marrom-2); margin-bottom:9px; }
.sabor-grid > div{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.sabor-campo{ display:block; }
.sabor-campo span{ display:block; font-size:.75rem; font-weight:600; color:var(--marrom-3); margin-bottom:4px; }

/* seletor de sabor na venda */
.vprod-sabor{ flex:none; width:200px; display:flex; justify-content:center; }
.vprod-sabor.vazio{ align-items:center; justify-content:center; opacity:.35; font-size:.8rem; }
.ssabor{
  width:100%; border:2px solid rgba(247,234,210,.2); border-radius:11px; padding:7px 10px;
  background:rgba(27,18,13,.4); color:var(--areia-2); font:inherit; font-size:.8rem; outline:none;
}
.ssabor:focus{ border-color:var(--laranja-3); }
.ssabor option{ background:#2E2019; color:var(--areia-2); }
.ssabor option:disabled{ color:rgba(247,234,210,.4); }
@media (max-width:560px){
  .vprod{ flex-wrap:wrap; }
  .vprod-info{ flex:1 1 100%; }
  .vprod-sabor{ width:auto; flex:1; }
}

/* card de confirmação */
.modal.modal-confirma{ width:min(440px,100%); }
.confirma{ padding:34px 32px 30px; text-align:center; }
.confirma h3{ font-size:1.25rem; line-height:1.35; }
.confirma p{ margin:12px 0 0; color:var(--marrom-2); font-size:.92rem; line-height:1.6; }
.confirma-btns{ display:flex; gap:10px; justify-content:center; margin-top:24px; }
.confirma-btns .btn{ min-width:110px; }

/* registro de produto que já foi excluído */
.sumido{
  font-style:normal; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(46,32,25,.1); color:var(--marrom-3); border-radius:5px; padding:2px 6px; margin-left:4px;
}

/* sabor indisponível na ficha do produto */

/* ---- linha do tempo no estilo do modelo: curva suave e pico destacado ---- */
.grafico.linha{ height:260px; }
.grafico .curva{ stroke-width:2.6; }
.grafico .gx{ stroke:rgba(46,32,25,.07); }
.grafico .pico-linha{ stroke:var(--marrom-3); stroke-width:1.4; stroke-dasharray:4 4; opacity:.6; }
.grafico .pico-ponto{ fill:var(--creme); stroke:var(--marrom); stroke-width:3; }
.grafico .pico-balao rect{ fill:var(--marrom); }
.grafico .pico-balao text{ fill:var(--areia-2); font-size:11.5px; font-weight:700; }
.periodo{
  border:2px solid rgba(46,32,25,.14); border-radius:999px; padding:6px 12px;
  background:var(--creme); font:inherit; font-size:.76rem; font-weight:700;
  color:var(--marrom-2); cursor:pointer; outline:none;
}
.periodo:focus{ border-color:var(--laranja); }

/* ---- lista de sabores no formulário de compra ---- */
.sabores-box{
  background:var(--areia-2); border-radius:14px; padding:14px 16px 16px;
}
.sabores-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }
.sabores-topo span{ font-size:.82rem; font-weight:700; color:var(--marrom-2); }
.sabores-topo b{ font-size:.78rem; color:var(--laranja); }
.sabor-linha{ display:grid; grid-template-columns:1fr 84px 34px; gap:8px; margin-bottom:8px; align-items:center; }
.sabor-linha input{
  border:2px solid rgba(46,32,25,.16); border-radius:11px; padding:9px 12px;
  background:#fff; font:inherit; font-size:.88rem; outline:none; width:100%;
}
.sabor-linha input:focus{ border-color:var(--laranja); }
.sabor-linha .s-qtd{ text-align:center; font-weight:700; }
.sabor-linha .iconbtn{ justify-self:center; }
#addSabor{ margin-top:4px; }

/* saldo que veio de lote sem sabor: aparece pra soma bater com o total */
.det-sabores li.solto{ background:rgba(46,32,25,.07); border:1px dashed rgba(46,32,25,.25); }
.det-sabores li.solto b{ color:var(--marrom-3); font-weight:600; }
.det-nota{ margin:9px 0 0; font-size:.72rem; color:var(--marrom-3); line-height:1.5; }

/* ---- login pelo Google ---- */
.login-ou{ display:flex; align-items:center; gap:12px; color:var(--marrom-3); font-size:.76rem; }
.login-ou::before, .login-ou::after{ content:""; flex:1; height:1px; background:rgba(46,32,25,.16); }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#3C4043; border:2px solid rgba(46,32,25,.16);
  font-weight:700; font-size:.92rem; padding:12px 18px; border-radius:999px;
  cursor:pointer; transition:.18s; width:100%;
}
.btn-google:hover:not(:disabled){ border-color:var(--marrom-3); box-shadow:var(--shadow); }
.btn-google:disabled{ opacity:.55; cursor:wait; }
.btn-google svg{ width:19px; height:19px; flex:none; }
.adm-login-card .hint{ color:#B4271A; font-weight:600; }
.equipe-lista{ list-style:none; margin:10px 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.equipe-lista li{
  display:flex; align-items:baseline; gap:7px; border-radius:999px; padding:5px 12px; font-size:.8rem;
  background:rgba(78,142,150,.14); color:#2F5C62; border:1px solid rgba(78,142,150,.3);
}
.equipe-lista li.eu{ background:var(--verde); border-color:var(--verde); color:#fff; }
.equipe-lista em{ font-style:normal; font-size:.72rem; opacity:.8; }

/* ---- configurações: blocos e editor de vendedores ---- */
.cfg-titulo{
  font-size:1.5rem; margin:0 0 14px; width:min(760px,100%);
}
.cfg-bloco{ margin-bottom:34px; }
.cfg-form fieldset .muted{ margin:0 0 12px; font-size:.82rem; }
.vend-editor{ display:flex; flex-direction:column; gap:12px; }

/* ---- cartões de vendedor: um abre, os outros cedem espaço ---- */
.vend-chips{ display:flex; align-items:stretch; gap:8px; width:100%; min-height:150px; }
.vcard{
  flex:1; min-width:0; min-height:150px; position:relative; cursor:pointer; overflow:hidden;
  border-radius:14px; border:2px solid rgba(46,32,25,.12);
  background:linear-gradient(160deg, var(--areia-2), var(--creme));
  display:flex; align-items:center; justify-content:center;
  transition:flex .55s cubic-bezier(.16,1,.3,1), background .4s, border-color .3s;
}
.vcard.aberto{
  flex:2; border-color:var(--laranja);
  background:linear-gradient(160deg,#3A2418 0%, var(--marrom) 60%, #5A3520 100%);
}
.vcard-meio{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px;
  text-align:center; min-width:0;
}
.vcard-meio .dash-ico{
  width:44px; height:44px; padding:10px; border-radius:50%;
  background:rgba(226,74,18,.12); stroke:var(--laranja); transition:.4s;
}
.vcard-meio b{ font-size:.9rem; white-space:nowrap; color:var(--marrom); transition:color .4s; }
.vcard-meio em{ font-style:normal; font-size:.7rem; color:var(--marrom-3); white-space:nowrap; transition:color .4s; }
.vcard.aberto .dash-ico{ background:rgba(247,234,210,.16); stroke:var(--laranja-3); }
.vcard.aberto .vcard-meio b{ color:var(--areia-2); }
.vcard.aberto .vcard-meio em{ color:rgba(247,234,210,.7); }
.vcard.oculto{ opacity:.55; }
.vcard.oculto .vcard-meio b{ text-decoration:line-through; }

.vcard-acoes{ display:none; }
.vcard.aberto .vcard-acoes{ opacity:1; transform:none; pointer-events:auto; }
.vbtn{
  width:28px; height:28px; padding:5px; border:0; border-radius:9px; cursor:pointer;
  background:rgba(247,234,210,.16); display:grid; place-items:center; transition:.18s;
}
.vbtn .dash-ico{ width:100%; height:100%; padding:0; border-radius:0; background:none; stroke:var(--areia-2); }
.vbtn:hover{ background:var(--laranja); }
.vbtn.del:hover{ background:#B4271A; }
.vbtn:hover .dash-ico{ stroke:#fff; }

@media (max-width:700px){
  .vend-chips{ flex-wrap:wrap; height:auto; }
  .vcard{ flex:1 1 calc(50% - 4px); height:130px; }
  .vcard.aberto{ flex:1 1 calc(50% - 4px); }
  .vcard-acoes{ opacity:1; transform:none; pointer-events:auto; }
  .vcard .vbtn{ background:rgba(46,32,25,.12); }
  .vcard .vbtn .dash-ico{ stroke:var(--marrom-2); }
  .vcard.aberto .vbtn{ background:rgba(247,234,210,.16); }
  .vcard.aberto .vbtn .dash-ico{ stroke:var(--areia-2); }
}

/* ---- cartão de cadastro e chave pix ---- */
.vpix{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.vcard.novo{
  background:none; border-style:dashed; border-color:rgba(46,32,25,.28);
}
.vcard.novo .dash-ico{ background:rgba(46,32,25,.07); stroke:var(--marrom-3); }
.vcard.novo:hover{ border-color:var(--laranja); }
.vcard.novo:hover .dash-ico{ background:rgba(226,74,18,.12); stroke:var(--laranja); }
.vcard.novo.aberto{ background:none; border-style:dashed; }
.vcard.novo.aberto .vcard-meio b{ color:var(--marrom); }
.vcard.novo.aberto .vcard-meio em{ color:var(--marrom-3); }
.vcard.novo.formando{
  flex:4; cursor:default; border-style:solid; border-color:var(--laranja);
  background:var(--creme); align-items:stretch;
}
.vcard-form{ display:flex; flex-direction:column; gap:7px; padding:12px 14px; width:100%; justify-content:center; }
.vcard-form span{ font-size:.76rem; font-weight:700; color:var(--marrom-3); }
.vcard-form input{
  border:2px solid rgba(46,32,25,.16); border-radius:10px; padding:8px 11px;
  background:#fff; font:inherit; font-size:.85rem; outline:none; width:100%;
}
.vcard-form input:focus{ border-color:var(--laranja); }
.vcard-form-btns{ display:flex; gap:6px; margin-top:2px; }
.vcard-form-btns .btn{ padding:7px 13px; font-size:.78rem; }
@media (max-width:700px){
  .vcard.novo.formando{ flex:1 1 100%; height:auto; }
}

}

/* ---- anel de cadastro preenchido ---- */
.anel-card{ padding:4px 0 18px; }
.anel-wrap{ position:relative; width:186px; margin:0 auto 18px; }
.anel{ width:100%; height:auto; display:block; transform:rotate(-90deg); }
.anel-trilho{ fill:none; stroke:rgba(46,32,25,.08); stroke-width:9; }
.anel-arco{
  fill:none; stroke:url(#anelGrad); stroke-width:9; stroke-linecap:round;
  transition:stroke-dasharray .6s var(--ease);
}
.anel-ponta{ fill:var(--creme); stroke:var(--laranja); stroke-width:3; }
.anel-disco{ fill:#fff; }
.anel-num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Lilita One",sans-serif; font-size:2.3rem; color:var(--marrom); letter-spacing:.5px;
}
.anel-card h4{ font-size:1.08rem; margin:0; }
.anel-card p{ margin:5px 0 0; font-size:.86rem; color:var(--marrom-3); }
.anel-falta{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; gap:6px; flex-wrap:wrap;
}
.anel-falta li{
  font-size:.72rem; color:var(--marrom-3); background:rgba(46,32,25,.07);
  border-radius:999px; padding:4px 11px;
}
.anel-falta li.mais{ background:none; padding-left:2px; }
#btnZerar{ width:100%; }
.confirma-conta{ font-size:.84rem !important; color:var(--marrom-3) !important; }

/* ---- Configurações da loja: vendedores largo + dois quadrados ---- */
.cfg-bloco .cfg-form{
  display:grid; grid-template-columns:minmax(0,1fr) 236px 236px;
  gap:18px; align-items:stretch;
}
.cfg-bloco .cfg-form fieldset{ display:flex; flex-direction:column; min-width:0; }
/* os dois pequenos acompanham a altura do card de vendedores */
.cfg-quadrado, .cfg-bloco .cfg-form fieldset:nth-child(2){ padding:18px; }
.cfg-quadrado .muted{ font-size:.78rem; line-height:1.5; }
.cfg-quadrado .danger-row{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.cfg-quadrado .danger-row .btn{ width:100%; padding:9px 12px; font-size:.8rem; }
.cfg-versao{ margin:12px 0 0; font-size:.72rem; color:var(--marrom-3); text-align:center; }

/* anel menor, pra caber no card estreito sem esticar a linha */
.anel-card{ padding:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.anel-wrap{ width:132px; margin:0 auto 12px; }
.anel-num{ font-size:1.65rem; }
.anel-card h4{ font-size:.95rem; }
.anel-card p{ font-size:.78rem; margin-top:3px; }
.anel-falta{ margin-top:10px; justify-content:center; }
.anel-falta li{ font-size:.68rem; padding:3px 9px; }
#btnZerar{ width:100%; margin-top:auto; padding:10px 12px; font-size:.84rem; }

@media (max-width:1100px){
  .cfg-bloco .cfg-form{ grid-template-columns:minmax(0,1fr) 236px; }
  .cfg-quadrado{ grid-column:2; }
}
@media (max-width:820px){
  .cfg-bloco .cfg-form{ grid-template-columns:1fr; }
  .cfg-quadrado{ grid-column:auto; }
}

/* a linha encolhe pra que os dois cards pequenos fiquem quadrados */
.cfg-bloco .vend-chips{ min-height:126px; }
.cfg-bloco .vcard{ min-height:126px; }
.cfg-bloco .vcard-meio{ gap:6px; padding:8px; }
.cfg-bloco .vcard-meio .dash-ico{ width:36px; height:36px; padding:8px; }
.cfg-bloco .vcard-meio b{ font-size:.84rem; }
.cfg-bloco .cfg-form fieldset .muted{ margin-bottom:9px; }
.cfg-bloco .cfg-form fieldset{ padding:16px 18px; }
.anel-wrap{ width:112px; margin-bottom:9px; }
.anel-num{ font-size:1.45rem; }
.anel-card h4{ font-size:.9rem; }
.anel-falta{ margin-top:8px; }
.cfg-versao{ margin-top:9px; }
.anel-wrap{ width:102px; }
.anel-num{ font-size:1.35rem; }

/* ---- cards de personalização com as formas do logo ao fundo ---- */
.pcard{ padding:0 !important; overflow:hidden; }
.pcard > legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.pcard-topo{
  position:relative; overflow:hidden; padding:20px 22px 22px;
  display:flex; align-items:center; gap:16px; min-height:138px;
}
.pcard-arte{
  position:absolute; left:-26px; bottom:-22px; width:124px; height:auto;
  pointer-events:none; opacity:.42;
}
.pcard-arte path, .pcard-arte circle, .pcard-arte rect{ fill:currentColor; }
.pcard-selo{
  position:relative; z-index:2; flex:none;
  width:52px; height:52px; border-radius:16px; background:var(--marrom);
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(46,32,25,.28);
}
.pcard-selo .dash-ico{ width:100%; height:100%; padding:13px; background:none; border-radius:0; stroke:var(--areia-2); }
.pcard-txt{ position:relative; z-index:2; min-width:0; }
.pcard-txt h4{ font-size:1.15rem; margin:0; color:var(--marrom); text-shadow:0 1px 0 rgba(255,255,255,.35); }
.pcard-txt p{ margin:5px 0 0; font-size:.82rem; line-height:1.45; color:var(--marrom-2); opacity:.85; }
.pcard-pilula{
  display:inline-block; margin-top:11px; padding:6px 15px; border-radius:999px;
  background:var(--creme); border:1.5px solid rgba(46,32,25,.16);
  font-size:.78rem; font-weight:700; color:var(--marrom);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* cada card puxa uma cor da paleta; a arte herda o tom pelo currentColor */
.pcard:nth-of-type(1) .pcard-topo{ background:#F7B98C; color:#E24A12; }
.pcard:nth-of-type(2) .pcard-topo{ background:#EFD3A6; color:#8A5A34; }
.pcard:nth-of-type(3) .pcard-topo{ background:#F3C4A8; color:#B93A0C; }
.pcard .cfg-corpo{ padding:20px 22px 22px; }
.pcard label:last-child{ margin-bottom:0; }

@media (max-width:520px){
  .pcard-topo{ min-height:120px; padding:16px 18px 18px; }
  .pcard-arte{ width:140px; }
}

/* ---- no computador o card fica só com o topo; os campos abrem no hover ----
   grid-template-rows de 0fr pra 1fr anima altura desconhecida sem calcular
   nada em JavaScript. Focar um campo pelo teclado também abre. */
@media (hover:hover) and (min-width:821px){
  .pcard{
    display:grid; grid-template-rows:auto 0fr;
    transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  }
  .pcard .cfg-corpo{
    min-height:0; overflow:hidden;
    padding-top:0; padding-bottom:0;
    transition:padding .45s cubic-bezier(.16,1,.3,1), opacity .3s;
    opacity:0;
  }
  .pcard:hover, .pcard:focus-within{ grid-template-rows:auto 1fr; box-shadow:var(--shadow-lg); }
  .pcard:hover .cfg-corpo, .pcard:focus-within .cfg-corpo{
    padding-top:20px; padding-bottom:22px; opacity:1;
  }
  /* o topo vira a alça: deixa claro que ali abre */
  .pcard .pcard-topo{ cursor:pointer; }
  .pcard .pcard-topo::after{
    content:"▾"; position:absolute; right:16px; bottom:12px; z-index:2;
    font-size:.9rem; color:var(--marrom-2); opacity:.5; transition:.35s;
  }
  .pcard:hover .pcard-topo::after, .pcard:focus-within .pcard-topo::after{
    transform:rotate(180deg); opacity:.8;
  }
  /* a grade da personalização alinha os cards pelo topo quando fechados */
  #cfgForm{ align-items:start; }
}
/* descrição em duas linhas: mantém os três topos com a mesma altura */
.pcard-txt p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.4em;
}
/* topo com altura fixa: os três cards ficam exatamente do mesmo tamanho */
.pcard-topo{ height:156px; min-height:0; }
@media (max-width:520px){ .pcard-topo{ height:auto; min-height:132px; } }
/* ícone de traço fechado: o glifo do WhatsApp é preenchido, não riscado */
.dash-ico.cheio{ fill:currentColor; stroke:none; }
.pcard-selo .dash-ico.cheio{ fill:var(--areia-2); padding:12px; }

/* divisor entre os grupos de abas do painel */
.atab-divisor{
  align-self:center; width:1px; height:20px; margin:0 10px;
  background:rgba(46,32,25,.22); flex:none;
}
@media (max-width:1240px){
  .atab-divisor{ width:100%; height:1px; margin:6px 0; }
}

/* ---- ações do painel no cabeçalho ----
   Sair mora à direita da barra de cima, e não solto no meio do conteúdo. */
.nav-acoes{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-acoes .btn{ padding:8px 16px; font-size:.82rem; }
@media (max-width:520px){
  .nav-acoes .btn{ padding:7px 14px; font-size:.78rem; }
}

/* ---- abas do painel no celular: barra no topo, ícone e nome ----
   Na largura do telefone as abas em linha viravam quatro linhas de texto
   solto. Viram uma barra só, logo abaixo do cabeçalho, com o ícone em cima
   e o nome embaixo — e o conteúdo ganha a tela inteira de volta. */
.atab-ico{ display:none; }

@media (max-width:760px){
  /* medidas do celular: a altura da barra e o quanto a logo desce pra fora
     do cabeçalho. As duas entram na conta do respiro do conteúdo. */
  body[data-view="adm"]{ --atabs-h:62px; --logo-salto:34px; }

  /* Na tela de acesso o cabeçalho fica vazio: o card de login já traz a
     logo, e duas seguidas na mesma tela não dizem nada a mais. */
  body[data-view="adm"]:not(.adm-logado) .nav-brand{ display:none; }

  /* já dentro do painel, a logo salta do cabeçalho como na capa da vitrine */
  body[data-view="adm"] .nav-brand span{ display:none; }
  body[data-view="adm"] .nav-brand img{
    width:88px; height:88px; transform:translateY(20px); border-radius:22px;
    box-shadow:0 14px 26px -12px rgba(46,32,25,.55);
  }

  .adm-barra{ border-bottom:0; margin-bottom:0; padding-bottom:0; gap:0; }

  /* A barra começa colada no cabeçalho e o creme sobe junto: assim a faixa
     onde a logo salta fica opaca, e o conteúdo passa por baixo dela em vez
     de aparecer atrás da logo enquanto a página rola. Os ícones ficam no pé
     da barra, abaixo da logo, por conta do respiro de cima. */
  .adm-tabs{
    position:fixed; top:var(--nav-h); left:0; right:0; z-index:40;
    flex-wrap:nowrap; justify-content:flex-start; gap:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    background:var(--creme); border-bottom:2px solid rgba(46,32,25,.12);
    padding:calc(var(--logo-salto) + 8px) 6px 7px;
    box-shadow:0 8px 22px rgba(46,32,25,.12);
  }
  .adm-tabs::-webkit-scrollbar{ display:none; }

  .atab{
    flex:1 0 auto; min-width:66px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:6px 6px 5px; margin-bottom:0; border-bottom:0; border-radius:13px;
    font-size:.61rem; font-weight:700; letter-spacing:.01em; line-height:1.1;
  }
  .atab.is-on{ background:rgba(226,74,18,.1); }
  .atab-ico{
    display:block; width:21px; height:21px; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .atab-divisor{ display:none; }

  /* o conteúdo começa logo abaixo da barra, sem faixa solta no meio */
  .view-adm{
    padding-top:calc(var(--nav-h) + var(--logo-salto) + var(--atabs-h));
    padding-bottom:0;
  }
  /* as outras abas ainda querem um respiro; a folha da venda, não */
  .apane{ padding-top:16px; }
  #apane-venda{ padding-top:0; }

  /* Registre sua venda vira a folha da tela: sangra até as bordas, arredonda
     só em cima e desce até o fim da tela, sem sobra embaixo. */
  /* o creme da barra segue por trás da folha e aparece pelos cantos
     arredondados dela — é o que emenda uma coisa na outra */
  #apane-venda{ margin:0 -1.5vw; background:var(--creme); }
  .venda-card{
    border-radius:26px 26px 0 0;
    padding:26px 20px calc(30px + env(safe-area-inset-bottom));
    min-height:calc(100vh - var(--nav-h) - var(--logo-salto) - var(--atabs-h));
    box-shadow:0 -12px 34px rgba(46,32,25,.22);
  }

  /* o rodapé só tem a linha de copyright e cortaria a folha ao meio */
  body[data-view="adm"] .foot{ display:none; }
  .venda-topo h2{ font-size:1.6rem; }
  .venda-topo p{ font-size:.86rem; }
  .venda-produtos{ max-height:none; }
  /* o botão fica no fim da folha, e o resto cresce até ele */
  .venda-pe{ margin-top:auto; }
}

/* ---- repasses e pagamentos ---- */
#apane-repasses, #apane-pagamentos{ width:min(1240px,100%); margin:0 auto; }
.rep-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-bottom:20px; }
.mini-table.reg tr.eu td{ background:rgba(78,142,150,.1); }
.mini-table.reg tr.eu td:first-child{ border-radius:10px 0 0 10px; }
.mini-table.reg tr.eu td:last-child{ border-radius:0 10px 10px 0; }
.pct.quitado{ background:rgba(46,32,25,.08); color:var(--marrom-3); }

.pag-app{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:900px){ .pag-app{ grid-template-columns:1fr; } }
.pag-form{ display:flex; flex-direction:column; gap:12px; }
.pag-form label{ display:block; font-size:.82rem; font-weight:700; color:var(--marrom-2); }
.pag-form input, .pag-form select{
  width:100%; margin-top:6px; border:2px solid rgba(46,32,25,.16); border-radius:11px;
  padding:10px 13px; background:#fff; font:inherit; font-size:.92rem; outline:none;
}
.pag-form input:focus, .pag-form select:focus{ border-color:var(--laranja); }
.pag-saldo{
  margin:0; background:var(--areia-2); border-radius:12px; padding:11px 13px;
  font-size:.82rem; line-height:1.55; color:var(--marrom-2);
}
.pag-saldo i{ color:var(--marrom-3); }
.cfg-comissao{ margin-top:14px; }

/* ---- respiro nas bordas das tabelas dos cards ----
   A primeira e a última coluna ficavam coladas na borda do card. */
.mini-table th:first-child, .mini-table td:first-child{ padding-left:4px; }
.mini-table th:last-child, .mini-table td:last-child{ padding-right:4px; }

.mini-table.reg td small{ display:block; font-size:.7rem; color:var(--marrom-3); margin-top:2px; }
.metodo{
  font-style:normal; font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:999px;
  background:rgba(78,142,150,.14); color:#2F5C62; white-space:nowrap;
}

/* ---- ficha do colaborador, aberta no meio da tela ---- */
.modal.modal-ficha{ width:min(440px,100%); }
.ficha{ padding:32px 30px 28px; }
.ficha-topo{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.ficha-topo .dash-ico{ width:52px; height:52px; padding:12px; border-radius:16px; }
.ficha-topo h3{ font-size:1.35rem; margin:0; }
.ficha-topo span{ font-size:.8rem; color:var(--marrom-3); }
.ficha-lista{ display:grid; gap:1px; margin:0; background:rgba(46,32,25,.09); border-radius:12px; overflow:hidden; }
.ficha-lista > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  background:var(--creme); padding:11px 14px;
}
.ficha-lista dt{ font-size:.78rem; color:var(--marrom-3); }
.ficha-lista dd{ margin:0; font-weight:700; font-size:.88rem; text-align:right; }
.ficha-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.ficha-btns .btn{ flex:1; min-width:104px; }

.ficha-form{ display:flex; flex-direction:column; gap:14px; }
.ficha-form h3{ font-size:1.3rem; margin:0; }
.ficha-form label{ display:block; font-size:.82rem; font-weight:700; color:var(--marrom-2); }
.ficha-form label small{ font-weight:400; color:var(--marrom-3); }
.ficha-form input{
  width:100%; margin-top:6px; border:2px solid rgba(46,32,25,.16); border-radius:11px;
  padding:10px 13px; background:#fff; font:inherit; font-size:.92rem; outline:none;
}
.ficha-form input:focus{ border-color:var(--laranja); }

/* o cartão inteiro é clicável agora */
.vcard{ user-select:none; }
.vcard:focus-visible{ outline:3px solid var(--laranja); outline-offset:2px; }
/* dentro de um card a moldura da tabela é redundante e encostava o texto na borda */
.dash-card .table-wrap{ background:none; border:0; border-radius:0; padding:0 2px; }
.mini-table th:first-child, .mini-table td:first-child{ padding-left:6px; }
.mini-table th:last-child, .mini-table td:last-child{ padding-right:6px; }

/* ---- cartões da equipe na aba Repasses ---- */
.rep-equipe .vend-chips{ min-height:0; }
.rep-equipe .vcard{ min-height:132px; cursor:default; }
.rep-equipe .vcard-meio em{ font-weight:800; font-size:.82rem; color:var(--laranja); }
.rep-equipe .vcard.aberto .vcard-meio em{ color:var(--laranja-3); }

/* ---- comprovante ---- */
.comp-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.comp-aviso{ display:block; margin-top:6px; font-size:.74rem; font-weight:600; color:var(--marrom-3); }
.comp-aviso.ok{ color:var(--verde-d); }
.ver-comp{ padding:5px 12px; font-size:.75rem; }
.sem-comp{ color:var(--marrom-3); opacity:.6; }
.modal.modal-comp{ width:min(560px,100%); }
.comp-vista{ padding:30px 28px 26px; text-align:center; }
.comp-vista h3{ font-size:1.25rem; margin:0; }
.comp-vista p{ margin:6px 0 18px; font-size:.82rem; color:var(--marrom-3); }
.comp-vista img{
  width:100%; max-height:62vh; object-fit:contain;
  border-radius:14px; border:2px solid rgba(46,32,25,.12); background:var(--areia-2);
}

/* sabor com preço próprio na ficha do produto */
.t-desc-sabor{ display:block; font-size:.68rem; font-weight:600; color:var(--laranja); margin-top:3px; line-height:1.5; }

/* preço anunciado de cada sabor, na tabela de produtos */
.t-precos{ list-style:none; margin:0; padding:0; min-width:132px; }
.t-precos li{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:.7rem; line-height:1.7; white-space:nowrap;
}
.t-precos li > span{ color:var(--marrom-3); overflow:hidden; text-overflow:ellipsis; }
.t-precos li > b{ font-weight:700; }
.t-precos li.proprio > b{ color:var(--laranja); }

/* ---- desconto: só leitura no Estoque, edição no formulário ---- */
.det-desc li.proprio{ background:rgba(226,74,18,.12); }
.det-desc li.proprio b{ color:var(--laranja); }
.det-desc li.proprio em{ color:var(--laranja); font-weight:700; }

.desc-box{ background:var(--areia-2); border-radius:14px; padding:14px 16px; }
.desc-box-topo{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.desc-box-topo > span{ font-size:.86rem; font-weight:700; color:var(--marrom-2); }
.desc-campo{ display:inline-flex; align-items:center; gap:5px; }
.desc-campo input{ width:74px; text-align:center; margin-top:0 !important; }
.desc-campo i{ font-style:normal; font-size:.78rem; color:var(--marrom-3); }
.desc-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:12px; }
.desc-item{
  display:flex !important; align-items:center; justify-content:space-between; gap:10px;
  background:var(--creme); border-radius:11px; padding:8px 12px; margin:0 !important;
}
.desc-item > span:first-child{ font-size:.82rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.desc-item > span:first-child small{
  display:block; font-weight:400; font-size:.68rem; color:var(--marrom-3); margin-top:1px;
}
.desc-nota{ margin:11px 0 0; font-size:.74rem; color:var(--marrom-3); line-height:1.5; }
.ficha-check{ display:flex !important; align-items:flex-start; gap:9px; font-weight:600 !important; }
.ficha-check input{ width:auto !important; margin:3px 0 0 !important; flex:none; }
.ficha-check small{ display:block; font-weight:400; color:var(--marrom-3); }

/* ---- escolha do sabor na ficha do produto ---- */
.pm-sabores{ margin-top:16px; }
.pm-sabores > span{
  display:block; font-size:.76rem; font-weight:700; color:var(--marrom-3);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px;
}
.sabor-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.sabor-chip{
  border:2px solid rgba(46,32,25,.16); background:var(--creme); cursor:pointer;
  border-radius:999px; padding:9px 16px; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--marrom-2); transition:.18s;
}
.sabor-chip:hover:not(:disabled){ border-color:var(--laranja); color:var(--laranja); }
.sabor-chip.is-on{
  background:var(--laranja); border-color:var(--laranja); color:#fff; font-weight:700;
}
.sabor-chip.fora{
  opacity:.5; cursor:not-allowed; text-decoration:line-through;
  background:rgba(180,39,26,.07); border-color:rgba(180,39,26,.2);
}
.sabor-chip em{
  font-style:normal; text-decoration:none; font-size:.68rem; font-weight:700;
  color:#B4271A; margin-left:6px;
}
.pm-escolha{
  margin:0 0 12px; font-size:.88rem; color:var(--marrom-3); font-weight:600;
}

/* ---- marcações: vendido e promo agora são automáticas ---- */
.flagtag{
  display:inline-block; border:2px solid rgba(46,32,25,.14); border-radius:999px;
  padding:5px 12px; font-size:.74rem; font-weight:700; color:var(--marrom-3);
  opacity:.5; margin-right:5px; cursor:default;
}
.flagtag.is-on{ opacity:1; background:var(--marrom); border-color:var(--marrom); color:var(--areia-2); }
.flagtag.promo.is-on{ background:var(--verde); border-color:var(--verde); color:#fff; }
.flagbtn.novo.is-on{ background:var(--laranja); border-color:var(--laranja); color:#fff; }

/* etiqueta de lançamento na vitrine */
.badge .b-novo{ background:var(--laranja); color:#fff; }

/* ---- caixa: a parte da venda que repõe o estoque ---- */
.pizza-legenda .pct{ color:#fff !important; border:0; }
.rec-caixa{
  margin:16px 0 0; width:100%; text-align:center; font-size:.82rem; color:var(--marrom-2);
  border-top:1px solid rgba(46,32,25,.1); padding-top:13px;
}
.rec-caixa b{ display:block; font-family:"Lilita One",sans-serif; font-size:1.25rem; color:var(--marrom); margin-top:3px; }
.rec-caixa small{ display:block; margin-top:4px; font-size:.7rem; color:var(--marrom-3); line-height:1.5; }
.preco-linha{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.preco-linha label{ display:block; font-size:.82rem; font-weight:700; color:var(--marrom-2); }
.preco-linha small{ font-weight:400; color:var(--marrom-3); }
@media (max-width:520px){ .preco-linha{ grid-template-columns:1fr; } }

/* ---- resumo da conta no formulário do produto ---- */
.resumo-preco{ margin-top:14px; border-top:1px solid rgba(46,32,25,.12); padding-top:12px; }
.resumo-topo{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:.82rem; font-weight:700; color:var(--marrom-2); margin-bottom:10px;
}
.resumo-topo b{ font-size:1rem; color:var(--marrom); }
.resumo-topo small{ font-weight:400; color:var(--marrom-3); font-size:.74rem; }
.resumo-linha{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:12px;
  background:var(--creme); border-radius:10px; padding:8px 12px; margin-bottom:6px; font-size:.82rem;
}
.resumo-linha > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resumo-linha b{ font-size:.95rem; }
.resumo-linha em{ font-style:normal; font-size:.75rem; color:var(--verde-d); font-weight:700; white-space:nowrap; }
.resumo-linha.ruim em{ color:#B4271A; }