/* =========================================================================
   GG OUTFIT — DESIGN SYSTEM "ORGANIC"
   Usado pelas duas paginas: index.html (vitrine) e admin.html (painel).
   ========================================================================= */

/* =========================================================================
   GG OUTFIT — DESIGN SYSTEM "ORGANIC"
   Vindo do handoff em design_handoff_gg_outfit_app/.
   A fonte dos valores e a folha do design system, na pasta design/_ds/.

   Regras do sistema: canto arredondado sempre (nunca angulo reto),
   botao e campo em pilula, foto passa pelo filtro .washed.

   PRA TROCAR AS CORES: mexa so no bloco :root. Todo o site puxa daqui.
   ========================================================================= */
:root{
  /* Os controles nativos (botao, campo, link, barra de rolagem, autofill)
     seguem O TEMA DO SITE, nunca o do sistema. Sem isto, quem esta com o
     Windows no escuro via o site claro com texto branco em cartao creme. */
  color-scheme:light;

  /* --- Base: chao branco, creme virou superficie --- */
  --color-bg:#ffffff;
  --color-surface:#f8f2e8;
  --surface-raised:#ffffff;           /* modal, menu */
  --surface-sunken:#ebddc5;           /* faixa, cabecalho */
  --color-text:#201e1d;
  --color-accent:#c67139;
  --color-accent-2:#7a8a5e;
  --color-divider:rgba(32,30,29,.12);

  /* --- Rampa neutra --- */
  --n-100:#f9f4ed; --n-200:#eee7db; --n-300:#dcd3c4; --n-400:#c0b6a5;
  --n-500:#a19786; --n-600:#82796a; --n-700:#645c50; --n-800:#474238; --n-900:#2e2b25;

  /* --- Rampa terracota (acento) --- */
  --a-100:#f7e3d4; --a-200:#eec9ad; --a-300:#e2ac86; --a-400:#d68f5f;
  --a-500:#c67139; --a-600:#a95c2a; --a-700:#8c491a; --a-800:#6a3611; --a-900:#47230a;

  /* --- Rampa salvia (positivo) --- */
  --g-100:#e6ecda; --g-200:#cfdabb; --g-300:#b6c69c; --g-400:#98ab7c;
  --g-500:#7a8a5e; --g-600:#63734a; --g-700:#4a5636; --g-800:#354025; --g-900:#212a16;

  /* --- Texto --- */
  --ink:#201e1d;
  --ink-70:#55504a;
  --ink-55:#7a746c;
  --ink-40:#a8a29a;

  /* --- Fontes ---
     Caprasimo e fonte de display: linha grossa, contraforma pequena. Ela
     resolve titulo grande e afunda em qualquer outra coisa — no tema escuro,
     texto claro sobre fundo preto ainda engorda o traco e o miolo das letras
     fecha. Titulo de cartao, botao, telefone, e-mail e valor em dinheiro
     estavam nela e ficaram ilegiveis.
     Regra da casa agora:
       --font-title    -> so h1/h2 e a marca. Voz da loja.
       --font-heading  -> todo o resto que antes era display. E a fonte do
                          texto, so que com peso; le bem em qualquer tamanho.
     O nome --font-heading ficou de proposito: dezenas de regras ja apontam
     pra ele, e trocar o valor num lugar so conserta a tela inteira. */
  --font-title:'Caprasimo', Georgia, serif;
  --font-body:'Figtree', system-ui, -apple-system, sans-serif;
  --font-heading:var(--font-body);
  --font-mono:'Courier New', ui-monospace, monospace;

  /* --- Espacamento --- */
  --sp-1:8px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:34px; --sp-6:48px;

  /* --- Raio ---
     A tela misturava tres formas: cartao muito redondo (30px), botao em
     pilula (999px) e campo em cilindro. Agora e uma familia so — retangulo de
     canto levemente arredondado. A escala continua existindo para separar
     modal > cartao > campo, mas com passos curtos: de longe tudo le como a
     mesma forma. --r-pill ficou com o nome antigo de proposito, para nao ter
     que reescrever 60 regras; hoje ele vale o mesmo que um canto pequeno. */
  --r-pill:10px;
  --r-lg:16px;
  --r-md:14px;
  --r-sm:12px;
  --r-xs:10px;

  --shadow-sm:0 1px 2px rgba(46,43,37,.14);
  --shadow-md:0 3px 10px rgba(46,43,37,.16);
  --shadow-lg:0 12px 32px rgba(46,43,37,.22);

  --t:.2s;
  --e:cubic-bezier(.4,0,.2,1);

  /* --- Veus: tom do texto ou do fundo usado como camada translucida ---
     Existem porque a rampa e opaca e estes casos precisam deixar passar o
     que esta atras (hover, separador fino, barra com desfoque, foto). --- */
  /* Tinta que vai POR CIMA de preenchimento cheio de acento (botao solido,
     etiqueta, aviso). Existe nos dois temas: no claro e o creme do fundo, no
     escuro e quase preto — senao o texto do botao some quando a rampa inverte. */
  --on-accent:#ffffff;

  /* Semanticos: papel, nao cor. */
  --ok:#63734a;                       /* em dia */
  --low:#96701f;                      /* estoque baixo */
  --alert:#b3452c;                    /* ruptura, queda */
  --sale:#c67139;                     /* promocao */

  --wash:rgba(32,30,29,.07);          /* hover neutro de botao e celula */
  --wash-soft:rgba(32,30,29,.04);     /* hover de linha de tabela */
  --line-soft:rgba(32,30,29,.1);      /* separador fino */
  --line-strong:rgba(32,30,29,.22);   /* borda de campo e contorno */
  --accent-soft:rgba(198,113,57,.3);  /* selecao de texto */
  --accent-line:rgba(140,73,26,.35);  /* contorno em terracota */
  --glass:rgba(255,255,255,.92);      /* barra fixa com desfoque */
  --scrim:rgba(46,43,37,.5);          /* fundo escuro atras do modal */
  --on-photo:rgba(245,234,216,.82);   /* texto secundario sobre foto */

  /* Tinta cheia sobre veu escuro (card do destaque, contador da galeria, seta
     da foto ampliada). NAO inverte com o tema: o fundo dessas pecas e sempre
     preto translucido, nos dois modos.
     Ficou 7 regras sem esta linha: `var(--cream)` sem token vira declaracao
     invalida, a cor caia para o herdado e o titulo do destaque saia em tinta
     escura em cima da foto — ilegivel no modo claro do celular. */
  --cream:#f5ead8;
  --scrim-foto:linear-gradient(to bottom, rgba(32,30,29,.45) 0%, transparent 34%, transparent 52%, rgba(32,30,29,.66) 100%);
}

/* =========================================================================
   TEMA ESCURO — so troca os tokens; nenhum componente muda de forma.

   As rampas INVERTEM de proposito: 100 e o passo mais claro no tema claro e o
   mais escuro no escuro. Assim quem escreveu --a-700 pra texto miudo sobre
   fundo tinto continua certo nos dois temas, sem regra separada. Pelo mesmo
   motivo, hover clareia e pressionado escurece sozinho no escuro.
   Elevacao aqui nao e sombra: e fio de 1px por dentro + escuridao ambiente.
   ========================================================================= */
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#0a0a0a;
  --color-surface:#151413;
  --surface-raised:#211f1d;
  --surface-sunken:#000000;
  --color-text:#f2ece3;
  --color-accent:#f6a06b;
  --color-accent-2:#aebf92;
  --color-divider:rgba(242,236,227,.13);

  --n-100:#181716; --n-200:#211f1d; --n-300:#2d2a27; --n-400:#403c37;
  --n-500:#67615a; --n-600:#8a847b; --n-700:#b3aca2; --n-800:#d8d2c8; --n-900:#f2ece3;
  --a-100:#402310; --a-200:#643312; --a-300:#8c491a; --a-400:#b2622d;
  --a-500:#d67f48; --a-600:#f6a06b; --a-700:#ffc6a5; --a-800:#ffe1d0; --a-900:#fff2eb;
  --g-100:#272e1b; --g-200:#3d472b; --g-300:#56633f; --g-400:#728157;
  --g-500:#8fa073; --g-600:#aebf92; --g-700:#ccdbb2; --g-800:#e1eecc; --g-900:#f0fae1;

  --ink:#f2ece3;
  --ink-70:#b3aca2;
  --ink-55:#8a847b;
  --ink-40:#5c574f;

  --on-accent:#1a0e05;

  /* Semanticos da folha de cor: no escuro cada estado ganha cor propria em vez
     de tudo virar terracota. */
  --ok:#aebf92;
  --low:#e0ab52;
  --alert:#e2705a;
  --sale:#f6a06b;

  --shadow-sm:inset 0 0 0 1px rgba(242,236,227,.08), 0 1px 2px rgba(0,0,0,.55);
  --shadow-md:inset 0 0 0 1px rgba(242,236,227,.08), 0 4px 14px rgba(0,0,0,.58);
  --shadow-lg:inset 0 0 0 1px rgba(242,236,227,.08), 0 12px 32px rgba(0,0,0,.6);

  --wash:rgba(242,236,227,.08);
  --wash-soft:rgba(242,236,227,.05);
  --line-soft:rgba(242,236,227,.11);
  --line-strong:rgba(242,236,227,.22);
  /* Terracota translucido sobre preto vira lama atras do texto selecionado;
     no escuro a selecao usa o proprio acento com tinta escura por cima. */
  --accent-soft:rgba(246,160,107,.85);
  --accent-line:rgba(246,160,107,.34);
  --glass:rgba(10,10,10,.94);
  --scrim:rgba(0,0,0,.78);
  --on-photo:rgba(242,236,227,.88);
  --scrim-foto:linear-gradient(to bottom, rgba(0,0,0,.32) 0%, transparent 34%, transparent 50%, rgba(0,0,0,.82) 100%);
}

/* No escuro a foto so perde um pouco de brilho, para nao estourar no fundo
   preto. A cor da peca continua fiel — quem compra roupa precisa ver a cor. */
:root[data-theme="dark"] .washed,
:root[data-theme="dark"] .product-image img,
:root[data-theme="dark"] .stock-thumb,
:root[data-theme="dark"] .admin-thumb{filter:brightness(.93);}

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

/* O atributo hidden tem que vencer o display das classes de layout */
[hidden]{display:none !important;}

body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* h1 e h2 sao titulo de tela e de secao: e onde a fonte de display trabalha. */
h1,h2{
  font-family:var(--font-title);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
}

/* h3 e h4 sao titulo de cartao, tamanho de leitura. Fonte do texto com peso. */
h3,h4{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.005em;
}

.brand-wordmark{
  font-family:Impact, 'Arial Black', var(--font-title), sans-serif;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.88), 0 2px 0 rgba(120,120,120,.48), 1px 3px 0 rgba(0,0,0,.75);
}

/* Quando a marca aparece desenhada, o nome escrito sai de cena: as duas juntas
   ficariam com sombra de texto por baixo do desenho.
   O nome da classe NAO pode ser .brand-logo: essa ja e a marca da barra do
   painel, com altura fixa de 46px. */
.brand-wordmark:has(.marca-loja){text-shadow:none; line-height:0;}

.marca-loja{
  width:176px;
  max-width:70%;
  height:auto;
  /* Mesma regra do topo do catalogo: a marca e prateada, entao no papel claro
     ela e invertida para virar grafite. */
  filter:invert(1) brightness(.42) contrast(1.5);
}

:root[data-theme="dark"] .marca-loja{filter:none;}

img{display:block; max-width:100%;}

/* O sistema Organic pedia foto lavada (saturate .6 / contrast .85), mas numa
   loja de roupa isso deixava a peca cinza e mentia sobre a cor do produto.
   Foto no claro vai sem filtro nenhum. */

::selection{background:var(--accent-soft);}
:root[data-theme="dark"] ::selection{color:var(--on-accent);}

/* O Chrome pinta campo preenchido automaticamente com cor propria, por cima do
   que o site pede. O box-shadow por dentro e a unica forma de recuperar. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--color-bg) inset;
  caret-color:var(--ink);
}

:is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

/* Rotulos em caixa alta */
.eyebrow,
.product-tag,
.m-label,
.stock-form label,
.stock-edit label,
.checkout-form label,
.size-picker,
.profit-cell span,
.goal-input,
.period-custom label,
table th{
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* ===== BARRA DE AVISO ===== */
.announce{
  background:var(--ink);
  color:var(--color-bg);
  text-align:center;
  padding:10px 16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ===== CABECALHO ===== */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--color-bg);
  border-bottom:1px solid var(--line-soft);
}

.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--sp-5);
  max-width:1600px;
  margin:0 auto;
  padding:14px 34px;
}

.brand-logo{
  height:46px;
  width:auto;
  border-radius:var(--r-xs);
  object-fit:contain;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Navegacao em pilula, como a sidebar do 5b */
nav.main-nav button,
nav.main-nav a.nav-btn{
  background:none;
  border:none;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-70);
  cursor:pointer;
  padding:9px 16px;
  min-height:42px;
  white-space:nowrap;
  transition:background var(--t) var(--e), color var(--t) var(--e);
}

nav.main-nav button:hover,
nav.main-nav a.nav-btn:hover{background:var(--wash); color:var(--ink);}

nav.main-nav button.active{
  background:var(--ink);
  color:var(--color-bg);
}

.top-actions{display:flex; align-items:center; gap:4px;}

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--r-xs);
  background:none;
  border:none;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.icon-btn:hover{background:var(--wash);}
.icon-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round;}

.icon-badge{
  position:absolute;
  right:4px;
  top:5px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-size:9px;
  font-weight:700;
  line-height:16px;
  text-align:center;
}

/* ===== LAYOUT ===== */
main{
  max-width:1600px;
  margin:0 auto;
  padding:var(--sp-5) 34px var(--sp-6);
}

.view{display:none;}
.view.active{display:block; animation:fadeIn .3s var(--e);}

@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}

.view-header{margin-bottom:var(--sp-4);}

.view-header .eyebrow{
  display:block;
  font-size:11px;
  color:var(--color-accent);
  margin-bottom:8px;
}

.view-header h1{font-size:clamp(30px, 3.2vw, 42px);}

.view-header p{
  margin-top:8px;
  max-width:640px;
  color:var(--ink-55);
  font-size:14px;
}

/* ===== CATALOGO — VITRINE ===== */
.hero-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 var(--sp-4);
}

.hero-card{
  position:relative;
  display:block;
  background:var(--color-surface);
  border:none;
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  font-family:inherit;
  text-align:left;
  width:100%;
}

.hero-card img{
  width:100%;
  height:clamp(320px, 40vw, 496px);
  object-fit:cover;
  transition:transform 1.2s var(--e);
}

.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--scrim-foto);
  pointer-events:none;
}

.hero-card:hover img{transform:scale(1.03);}

.hero-cap{
  position:absolute;
  left:26px;
  bottom:26px;
  right:26px;
  z-index:1;
  color:var(--color-bg);
}

.hero-cap strong{
  display:block;
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(24px, 2.4vw, 34px);
  line-height:1.06;
  letter-spacing:-.02em;
}

.hero-cap span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:11px 22px;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
}

.hero-card:hover .hero-cap span{background:var(--a-600);}

/* Faixas de categoria */
.strip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 var(--sp-4);
}

.strip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--color-surface);
  border:none;
  border-radius:var(--r-pill);
  padding:10px 18px;
  min-height:42px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.strip:hover{background:var(--n-300);}
.strip .arrow{color:var(--color-accent); transition:transform var(--t) var(--e);}
.strip:hover .arrow{transform:translateX(3px);}

/* ===== GRADE DE PRODUTOS ===== */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--sp-4) var(--sp-2);
}

.catalog-layout{
  display:grid;
  grid-template-columns:1fr 350px;
  gap:var(--sp-4);
  align-items:start;
}

.catalog-layout .catalog-grid{grid-template-columns:repeat(3, minmax(0,1fr));}

#catalogGrid .product-card{cursor:pointer;}

.product-image{
  aspect-ratio:3/4;
  background:var(--n-300);
  border-radius:var(--r-md);
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--e);
}

#catalogGrid .product-card:hover .product-image img,
.pos-item:hover .product-image img{transform:scale(1.04);}

.product-tag{
  display:inline-block;
  font-size:10px;
  color:var(--a-800);
  background:var(--a-100);
  padding:3px 10px;
  border-radius:var(--r-xs);
}

.product-name{font-size:13.5px; margin-top:8px; line-height:1.35;}
.product-desc{font-size:12px; color:var(--ink-55); margin-top:4px; line-height:1.4;}
.product-price{font-size:14px; font-weight:700; margin-top:4px;}
.product-price.sale{color:var(--sale);}

.product-price .old,
.pprice .old{
  color:var(--ink-40);
  text-decoration:line-through;
  font-weight:400;
  margin-right:8px;
  font-size:12.5px;
}

.product-actions{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* ===== FILTRO DE CATEGORIAS ===== */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:var(--sp-4);
}

.filter-btn,
.period-btn{
  background:var(--color-bg);
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-70);
  cursor:pointer;
  padding:9px 16px;
  min-height:38px;
  transition:background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
}

.filter-btn:hover,
.period-btn:hover{border-color:var(--ink); color:var(--ink);}

.filter-btn.active,
.period-btn.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--color-bg);
}

.product-card.hidden{display:none;}

/* ===== BOTOES ===== */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:var(--sp-3);
  padding:14px 24px;
  min-height:48px;
  background:var(--color-accent);
  color:var(--color-bg);
  border:1px solid var(--color-accent);
  border-radius:var(--r-pill);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background var(--t) var(--e), border-color var(--t) var(--e);
}

.btn-primary:hover{background:var(--a-600); border-color:var(--a-600);}
.btn-primary:active{background:var(--a-700);}

.btn-primary:disabled{
  background:var(--n-300);
  border-color:var(--n-300);
  color:var(--ink-40);
  cursor:not-allowed;
}

.btn-mini,
.btn-save,
.catalog-link,
.sale-actions button,
.pos-search button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  padding:10px 18px;
  min-height:42px;
  cursor:pointer;
  transition:background var(--t) var(--e), border-color var(--t) var(--e);
}

.btn-mini:hover,
.btn-save:hover,
.catalog-link:hover,
.sale-actions button:hover,
.pos-search button:hover{background:var(--wash);}

.btn-mini:disabled{opacity:.45; cursor:not-allowed;}
.catalog-link{margin-top:16px; padding:12px 24px; min-height:46px;}
.pos-search button{padding:0 24px; min-height:46px;}

.btn-delete,
.sale-actions .danger{
  background:transparent;
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  color:var(--a-700);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  padding:10px 18px;
  min-height:42px;
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.btn-delete:hover,
.sale-actions .danger:hover{background:var(--a-100);}

/* ===== CAMPOS ===== */
input, select, textarea{
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  caret-color:var(--color-accent);
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  padding:11px 16px;
  outline:none;
  transition:border-color var(--t) var(--e);
}

input::placeholder, textarea::placeholder{color:var(--ink-40);}
input:hover, select:hover, textarea:hover{border-color:var(--ink-40);}
input:focus, select:focus, textarea:focus{border-color:var(--color-accent);}
textarea{border-radius:var(--r-md); resize:vertical;}
select{cursor:pointer;}

input[type="file"]{padding:8px 12px; font-size:12px; color:var(--ink-55); cursor:pointer;}

input[type="file"]::file-selector-button{
  margin-right:12px;
  background:transparent;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  padding:8px 14px;
  cursor:pointer;
}

input[type="file"]::file-selector-button:hover{background:var(--wash);}

/* ===== VENDA (PDV) ===== */
.pos-layout{
  display:grid;
  grid-template-columns:1fr 350px;
  gap:var(--sp-4);
  align-items:start;
}

.pos-search{display:flex; gap:10px; margin-bottom:var(--sp-3);}
.pos-search input{flex:1; min-height:46px;}

.pos-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--sp-4) var(--sp-2);
}

.pos-item{cursor:pointer;}
.pos-item .product-image{aspect-ratio:1/1; margin-bottom:10px;}
.pos-item .pname{font-size:13px; line-height:1.35;}
.pos-item .pprice{font-size:13.5px; font-weight:700; margin-top:4px;}
.pos-item.unavailable{opacity:.5; cursor:not-allowed;}

.unavailable-ribbon{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  background:var(--glass);
  color:var(--ink);
  padding:7px 10px;
  border-radius:var(--r-pill);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
}

.size-picker{
  display:grid;
  gap:5px;
  margin-top:10px;
  font-size:10px;
  color:var(--ink-55);
}

.size-picker select{
  width:100%;
  min-height:40px;
  font-size:12.5px;
  letter-spacing:normal;
  text-transform:none;
}

.size-picker select:disabled{opacity:.5; cursor:not-allowed;}

.stock-badge{margin-top:8px; font-size:11.5px; color:var(--ok);}
.stock-badge.low{color:var(--low);}
.stock-badge.out{color:var(--alert);}

/* ===== CARRINHO ===== */
.cart{
  background:var(--color-surface);
  border-radius:var(--r-lg);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  height:fit-content;
  position:sticky;
  top:110px;
}

.cart h3{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  margin-bottom:14px;
}

/* Parte de cima da sacola (itens, totais e formulario). Sem o modo enquadrado
   ela se comporta como antes: apenas empilha o conteudo. */
.cart-scroll{display:flex; flex-direction:column;}
/* flex:none para o bloco nao encolher ate sumir quando o painel enquadrado
   limita a altura — quem rola e a lista de pecas, nao o resumo inteiro. */
.cart-resumo{display:flex; flex-direction:column; flex:none;}

/* Cabecalho so do painel sobreposto: no fluxo normal a sacola nao tem cabecalho. */
.cart-frame-head{display:none;}

/* Painel da sacola sobre a tela: usado ao carregar um pedido do catalogo e ao
   tocar na barra da sacola no celular. Sobe enquadrado, com itens, dados do
   cliente, total e Registrar Venda visiveis de uma vez — ninguem precisa rolar
   a pagina para fechar a venda. */
.cart-backdrop{
  position:fixed;
  inset:0;
  z-index:240;
  background:var(--scrim);
  animation:fadeIn .2s var(--e);
}

.cart-backdrop[hidden]{display:none;}

.cart.is-framed{
  position:fixed;
  z-index:250;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(460px, calc(100vw - 32px));
  max-height:calc(100svh - 24px);
  padding:0 0 18px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:cartUp .28s var(--e);
}

@keyframes cartUp{
  from{transform:translate(-50%, calc(-50% + 28px)); opacity:0;}
  to{transform:translate(-50%, -50%); opacity:1;}
}

/* Rodape do painel (botao, aviso) volta a ter o respiro lateral que o padding
   do .cart dava antes de ele zerar. */
.cart.is-framed > *:not(.cart-frame-head):not(.cart-scroll){
  width:auto;                     /* o botao tem width:100%: com margem, vazaria */
  margin-left:22px;
  margin-right:22px;
}

.cart.is-framed #finishSale{margin-top:14px;}

.cart.is-framed .cart-frame-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:none;
  padding:16px 22px 12px;
  border-bottom:1px solid var(--color-divider);
}

.cart-frame-head .eyebrow{display:block; font-size:11px; color:var(--color-accent);}
.cart-frame-head strong{font-family:var(--font-heading); font-size:19px; font-weight:600;}

.cart-frame-close{
  flex:none;
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--ink-70);
  font-family:var(--font-body);
  font-size:13px;
  border-radius:var(--r-pill);
  padding:9px 16px;
  min-height:40px;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e);
}

.cart-frame-close:hover{background:var(--surface-sunken); color:var(--ink);}

.cart.is-framed .cart-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:16px 22px 14px;
  border-bottom:1px solid var(--color-divider);
}

/* O cabecalho do painel ja anuncia a venda; aqui basta a contagem de pecas. */
.cart.is-framed .cart-scroll > h3{font-family:var(--font-body); font-size:12.5px; color:var(--ink-55); margin-bottom:8px;}

/* O aviso de descarte da venda em andamento nao cabe e nao ajuda a fechar. */
.cart.is-framed .sale-draft-note{display:none;}
.cart.is-framed .mini-feedback:empty{display:none;}

/* Com muitas pecas, quem rola e a lista — assim os dados do cliente e o total
   continuam na tela. */
.cart.is-framed .cart-lines{
  flex:none;                      /* sem isso a lista encolhe ate sumir */
  max-height:min(30svh, 260px);
  overflow-y:scroll;              /* barra sempre visivel: avisa que ha mais peca */
  scrollbar-width:thin;
}

/* Linha compacta dentro do painel: a foto grande e os controles embaixo davam
   um card de 138px, e so uma peca aparecia na lista. Aqui a peca vira uma
   faixa de ~80px (foto menor, nome/preco numa coluna e os botoes ao lado),
   entao tres ou quatro pecas ficam a vista de uma vez. */
.cart.is-framed .cart-item{
  grid-template-columns:44px minmax(0,1fr);   /* a coluna da foto tambem encolhe */
  gap:10px;
  align-items:center;
  padding:9px 11px;
  margin-bottom:6px;
}

.cart.is-framed .ci-foto{width:44px; height:56px;}
.cart.is-framed .ci-name{font-size:12.5px;}
.cart.is-framed .ci-meta{margin-top:2px;}
.cart.is-framed .ci-price{font-size:13px;}

.cart.is-framed .cart-item > div{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2px 10px;
}

.cart.is-framed .cart-item .ci-top{grid-column:1;}
.cart.is-framed .cart-item .ci-precos{grid-column:1; margin-top:0; gap:6px;}

/* Na faixa compacta o selo "-10% no M" jogava a peca em promocao para uma
   terceira linha e comia o espaco de outra peca. O preco cheio riscado ao lado
   do promocional ja mostra que ha desconto, e o total economizado continua no
   resumo logo abaixo. */
.cart.is-framed .cart-item .ci-promo{display:none;}
.cart.is-framed .cart-item .ci-alerta{grid-column:1 / -1; margin-top:5px;}

.cart.is-framed .cart-item .cart-controls{
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:0;
  gap:6px;
}

.cart.is-framed .cart-controls button{width:30px; height:30px;}
.cart.is-framed .cart-controls .remove-line{width:auto; height:30px; padding:0 11px;}

/* No computador o painel abre em duas colunas: pecas e total de um lado, dados
   do cliente do outro. Assim tudo que fecha a venda cabe sem rolar nada. */
@media (min-width:721px){
  .cart.is-framed{width:min(880px, calc(100vw - 32px));}

  .cart.is-framed .cart-scroll{
    flex-direction:row;
    align-items:flex-start;
    gap:26px;
  }

  .cart.is-framed .cart-resumo,
  .cart.is-framed .checkout-form{flex:1 1 0; min-width:0;}

  /* Lado a lado a linha divisoria do formulario nao faz sentido, e o respiro
     que ela pedia e justamente o que falta em tela baixa. */
  .cart.is-framed .checkout-form{margin-top:0; padding-top:0; border-top:0; gap:10px;}

  .cart.is-framed .cart-lines{max-height:min(40svh, 340px);}
}

.cart-lines{display:flex; flex-direction:column;}

.cart-empty{
  font-size:13px;
  color:var(--ink-55);
  padding:20px 0;
  text-align:center;
}

.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
}

.cart-item .ci-meta{font-size:12px; color:var(--ink-55); margin-top:4px;}

/* Peca que sumiu do estoque com a sacola montada, e peca cuja quantidade
   pedida passou do que restou. As duas travam o fechamento da venda. */
.cart-item-fora .ci-name{color:var(--alert);}
.cart-item-fora .ci-meta{color:var(--ink-70);}

.ci-alerta{
  margin-top:8px;
  padding:7px 10px;
  border-radius:var(--r-sm);
  background:var(--a-100);
  color:var(--a-800);
  font-size:11.5px;
  line-height:1.35;
}
.cart-item .ci-price{font-weight:700; white-space:nowrap;}

.ci-promo{
  display:inline-block;
  background:var(--a-100);
  color:var(--a-800);
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:var(--r-xs);
  margin-left:6px;
}

.cart-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:10px;
}

.cart-controls button{
  width:34px;
  height:34px;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  background:var(--color-bg);
  color:var(--ink);
  cursor:pointer;
  font-size:15px;
  line-height:1;
  transition:border-color var(--t) var(--e);
}

.cart-controls button:hover{border-color:var(--ink);}

.cart-controls .remove-line{
  width:auto;
  padding:0 14px;
  font-size:11.5px;
  color:var(--ink-55);
}

.cart-controls .remove-line:hover{color:var(--a-700); border-color:var(--a-700);}

.cart-totals{margin-top:16px; font-size:13.5px;}

.cart-totals .row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
  color:var(--ink-70);
}

.cart-totals .row.total{
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  border-top:1px solid var(--color-divider);
  margin-top:10px;
  padding-top:14px;
}

.checkout-form{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--color-divider);
  display:grid;
  gap:12px;
}

.checkout-form label{
  display:grid;
  gap:5px;
  font-size:10.5px;
  color:var(--ink-70);
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea{
  width:100%;
  font-size:14px;
  letter-spacing:normal;
  text-transform:none;
  min-height:44px;
  background:var(--color-bg);
}

.checkout-form textarea{min-height:72px;}
.checkout-form .two-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.checkout-form .hidden{display:none;}

.change-result{
  display:block;
  margin-top:2px;
  padding:10px 13px;
  border-radius:var(--r-sm);
  background:var(--g-200);
  color:var(--g-800);
  font-size:13px;
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
}

.change-result[hidden]{display:none;}
.change-result.is-error{background:var(--a-100); color:var(--a-800);}
.sale-draft-note{margin-top:10px; color:var(--ink-55); font-size:10.5px; line-height:1.45;}

.mini-feedback{
  font-size:12px;
  color:var(--g-700);
  margin-top:12px;
  min-height:18px;
  line-height:1.45;
}

/* Sem mensagem ele continuava ocupando 18px + 12px de margem. Em tela que quase
   nunca tem aviso (Usuarios), isso viravam 30px de vazio empurrando o conteudo
   pra baixo. O min-height so existe pra caixa nao pular quando o texto chega —
   e sem texto nao ha pulo pra evitar. */
.mini-feedback:empty{display:none;}

/* ===== PAINEL / CARTAO GENERICO ===== */
.panel,
.stock-manager,
.chart-panel,
.sales-panel,
.admin-list,
.ai-summary,
.goal-panel{
  background:var(--color-surface);
  border-radius:var(--r-lg);
  border:none;
  padding:24px 24px 26px;
  margin-bottom:var(--sp-3);
}

.stock-manager h3,
.panel h3,
.chart-panel h3,
.sales-panel h3,
.insight-card h3,
.ai-summary h3,
.goal-head h3{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  letter-spacing:-.015em;
  text-transform:none;
  margin-bottom:6px;
}

.chart-hint{font-size:13px; color:var(--ink-55); margin:0 0 18px; line-height:1.5;}

/* ===== ESTOQUE ===== */
.stock-form{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:14px;
  align-items:end;
}

.stock-form label,
.stock-edit label{
  display:grid;
  gap:5px;
  min-width:0;
  font-size:10px;
  color:var(--ink-70);
}

.stock-form input,
.stock-form select,
.stock-edit input,
.stock-edit select{
  width:100%;
  min-width:0;
  min-height:44px;
  font-size:13.5px;
  letter-spacing:normal;
  text-transform:none;
  background:var(--color-bg);
}

/* O campo de Tamanho(s) e tres vezes mais alto que os vizinhos (tem os botoes
   rapidos e a explicacao). Como todos dividiam a mesma linha do grid, a linha
   inteira crescia junto e sobrava um buraco de ~130px em cima de Produto,
   Descricao, Categoria e Cor. Agora ele ocupa duas linhas e os campos curtos
   preenchem o espaco ao lado:

     linha 1 | Produto(3)  Descricao(3)  Categoria(2)  Tipo(2)  Cor(2)
     linha 2 | Tamanho(s)(2) Qtd(2)  Custo(2)  Valor(2)  Fotos(4)
     linha 3 |  (Tamanho continua)   Adicionar novo produto(10)

   ATENCAO: e a ORDEM dos campos no HTML que manda aqui. Campo novo no meio do
   formulario desloca todos os nth-child seguintes. */
.stock-form label:nth-child(1){grid-column:span 3;}   /* Produto   */
.stock-form label:nth-child(2){grid-column:span 3;}   /* Descricao */
.stock-form label:nth-child(3){grid-column:span 2;}   /* Categoria */
.stock-form label:nth-child(4){grid-column:span 2;}   /* Tipo      */
.stock-form label:nth-child(5){grid-column:span 2;}   /* Cor       */
.stock-form label:nth-child(6){grid-column:span 2; grid-row:span 2; align-self:start;}  /* Tamanho(s) */
.stock-form label:nth-child(7){grid-column:span 2;}   /* Qtd       */
.stock-form label:nth-child(8){grid-column:span 2;}   /* Custo     */
.stock-form label:nth-child(9){grid-column:span 2;}   /* Venda     */
.stock-form label:nth-child(10){grid-column:span 4;}  /* Fotos     */
.stock-form .btn-primary{grid-column:span 10; margin-top:0; width:100%;}

/* ---- Tipos de peca (subcategorias) --------------------------------------
   Fica logo abaixo do cadastro de produto: o dono cria o tipo e ele aparece
   na lista Tipo do formulario sem sair da tela. */
.tipos-form{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(200px,1.4fr) auto;
  gap:12px;
  align-items:end;
  margin-top:12px;
}

.tipos-form label{display:grid; gap:5px; min-width:0; font-size:10px; color:var(--ink-70); text-transform:uppercase; letter-spacing:.1em;}
.tipos-form input,
.tipos-form select{width:100%; min-width:0; min-height:44px; font-size:13.5px; letter-spacing:normal; text-transform:none; background:var(--color-bg);}
.tipos-form .btn-primary{min-height:44px; margin-top:0; white-space:nowrap;}

.tipos-lista{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center;}

.tipo-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 8px 8px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-xs);
  background:var(--color-bg);
  font-size:13px;
}

.tipo-chip small{color:var(--ink-55); font-size:11px;}

.tipo-chip button{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:0;
  border-radius:6px;
  background:var(--n-200);
  color:var(--ink-70);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.tipo-chip button:hover{background:var(--r-100, var(--n-300)); color:var(--ink);}

@media (max-width:760px){
  .tipos-form{grid-template-columns:1fr;}
}

.stock-product-picker{position:relative; z-index:5;}

.stock-suggestions{
  position:absolute;
  z-index:30;
  top:calc(100% + 6px);
  left:0;
  width:min(520px, calc(100vw - 80px));
  padding:8px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--color-bg);
  box-shadow:0 18px 40px rgba(66,45,24,.16);
}

.stock-suggestions[hidden]{display:none;}

.stock-suggestion{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.stock-suggestion:hover,
.stock-suggestion:focus-visible{background:var(--color-surface); outline:none;}
.stock-suggestion img{width:42px; height:48px; border-radius:10px; object-fit:cover; background:var(--n-300);}
.stock-suggestion span{min-width:0;}
.stock-suggestion strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px;}
.stock-suggestion small{display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-55); font-size:10.5px;}
.stock-suggestion em{color:var(--color-accent); font-size:10.5px; font-style:normal; font-weight:700; white-space:nowrap;}

.stock-model-hint{
  display:block;
  margin-top:2px;
  padding:7px 10px;
  border-radius:10px;
  background:var(--g-200);
  color:var(--g-800);
  font-size:10.5px;
  font-weight:700;
  line-height:1.4;
}
.stock-model-hint[hidden]{display:none;}

.stock-field-hint{font-size:10.5px; font-weight:400; color:var(--ink-55); text-transform:none; letter-spacing:0;}
.stock-field-hint b{font-weight:700; color:var(--ink-70);}

/* Atalhos de tamanho no cadastro: clicar liga/desliga o tamanho na lista. */
.stock-size-quick{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px;}

.stock-size-quick button{
  border:1px solid var(--color-divider);
  background:var(--color-bg);
  color:var(--ink-70);
  border-radius:var(--r-pill);
  padding:5px 11px;
  min-height:30px;
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
}

.stock-size-quick button:hover{border-color:var(--ink-55); color:var(--ink);}
.stock-size-quick button.on{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}

.stock-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:var(--sp-3);
}

.stock-toolbar input{width:340px; max-width:100%; min-height:46px;}

table.stock-table{width:100%; font-size:13px;}
table.stock-table thead{display:none;}

table.stock-table,
table.stock-table tbody,
table.stock-table tr,
table.stock-table td{display:block; width:100%;}

table.stock-table td.stock-edit-cell{
  padding:0;
  background:var(--color-surface);
  border-radius:var(--r-md);
  margin-bottom:12px;
}

.stock-edit{
  display:grid;
  grid-template-columns:minmax(230px,1.5fr) minmax(180px,1.2fr) minmax(130px,.8fr) minmax(84px,.5fr) minmax(76px,.45fr) minmax(104px,.6fr);
  gap:16px;
  align-items:end;
  padding:22px 22px;
  width:100%;
}

.stock-edit > label:nth-child(7){grid-column:span 2;}
.stock-edit > .status-pill{grid-column:span 2; align-self:center;}
.stock-edit > .stock-actions{grid-column:span 2;}

.stock-edit-main{display:flex; align-items:flex-end; gap:14px; min-width:0;}
.stock-edit-main label{flex:1; min-width:0;}

.stock-thumb{
  width:96px;
  height:120px;
  object-fit:cover;
  border-radius:var(--r-xs);
  background:var(--n-300);
  flex:0 0 auto;
  cursor:zoom-in;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--ink-70);
  white-space:nowrap;
}

.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto;}
.dot.ok{background:var(--g-600);}
.dot.low{background:var(--color-accent);}
.dot.out{background:var(--a-600);}

.stock-actions{display:flex; justify-content:flex-end; gap:10px; align-items:center;}
.stock-actions button{white-space:nowrap;}

.photo-upload{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--color-bg);
  color:var(--ink-70);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color var(--t) var(--e), color var(--t) var(--e);
}

.photo-upload:hover{border-color:var(--color-accent); color:var(--color-accent);}

.photo-upload input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
  padding:0;
  border:0;
}

/* ===== DASHBOARD ===== */
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:var(--sp-4);
}

.metric-card{
  background:var(--color-surface);
  border-radius:var(--r-md);
  padding:20px 20px 22px;
  position:relative;
}

/* Cores por papel, como no 3b */
.metric-card.is-cost{background:var(--n-200);}
.metric-card.is-good{background:var(--g-200); color:var(--g-800);}
.metric-card.is-warn{background:var(--a-100); color:var(--a-800);}

.metric-card .m-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--ink-55);
  margin-bottom:10px;
}

.metric-card.is-good .m-label{color:var(--g-700);}
.metric-card.is-warn .m-label{color:var(--a-700);}

.metric-card .m-value{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:26px;
  line-height:1.1;
  overflow-wrap:anywhere;
}

.metric-card .m-delta{font-size:12px; margin-top:8px; color:var(--ink-55);}
/* No escuro os cartoes coloridos ficam com fundo escuro da propria rampa, e o
   cinza do --ink-55 quase some neles. Cada um usa o passo claro da sua cor,
   o mesmo que o rotulo ja usa. */
:root[data-theme="dark"] .metric-card.is-good .m-delta{color:var(--g-700);}
:root[data-theme="dark"] .metric-card.is-warn .m-delta{color:var(--a-700);}
.metric-card .m-delta.down{color:var(--a-700);}
.metric-card.has-tooltip{cursor:help;}

/* Chip de variacao vs periodo anterior */
.m-change{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:var(--r-pill);
  margin-right:8px;
}

.m-change.up{background:var(--g-200); color:var(--g-800);}
.m-change.down{background:var(--a-100); color:var(--a-800);}
.m-change.flat{background:var(--n-200); color:var(--n-800);}

.metric-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border:1px solid var(--color-divider);
  border-radius:50%;
  font-size:10px;
  letter-spacing:0;
  color:var(--ink-55);
}

.metric-tooltip{
  position:absolute;
  left:16px; right:16px;
  top:calc(100% - 10px);
  z-index:20;
  background:var(--ink);
  color:var(--color-bg);
  border-radius:var(--r-sm);
  padding:14px 16px;
  font-size:12px;
  line-height:1.6;
  opacity:0;
  pointer-events:none;
  box-shadow:var(--shadow-md);
  transition:opacity var(--t) var(--e);
}

.metric-card.has-tooltip:hover .metric-tooltip,
.metric-card.has-tooltip:focus-within .metric-tooltip{opacity:1;}

.metric-rule{margin-top:8px; font-size:11px; color:var(--ink-55); line-height:1.4;}

.dashboard-grid{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:12px;
  margin:0 0 var(--sp-4);
  align-items:start;
}

/* ===== GRAFICO ===== */
.sales-bars{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  height:220px;
  padding:0 0 10px;
}

/* Com um mes so, a barra unica esticava de ponta a ponta e virava um bloco
   laranja em vez de grafico. O teto de largura segura a forma de barra; com
   muitos pontos o flex:1 divide o espaco como antes. */
.sales-bar-col{
  flex:1;
  max-width:180px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  height:100%;
  gap:8px;
  min-width:0;
}

.sales-bar,
.bar{
  width:100%;
  min-height:5px;
  border-radius:var(--r-xs) var(--r-xs) 4px 4px;
  background:var(--n-300);
}

.sales-bar.above{background:var(--color-accent);}

.bar-value{font-size:10.5px; color:var(--ink-55); white-space:nowrap;}
.sales-bar-col span,
.bar-col span{font-size:10px; color:var(--ink-55);}

.bars{display:flex; align-items:flex-end; gap:18px; height:200px; padding-bottom:10px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}

.category-chart{display:grid; gap:14px;}

.category-row{
  display:grid;
  /* A coluna do valor cresce com o numero: com largura fixa "R$ 16.200,00"
     vazava para fora do card. A barra e que cede espaco. */
  grid-template-columns:120px minmax(0,1fr) minmax(92px, max-content);
  gap:14px;
  align-items:center;
  font-size:12.5px;
}

.category-track{height:10px; background:var(--n-300); border-radius:var(--r-pill); overflow:hidden;}
.category-fill{height:100%; border-radius:var(--r-pill); background:var(--color-accent); transform-origin:left center;}

.category-row strong{text-align:right; white-space:nowrap; font-weight:700; font-size:12.5px;}
.category-percent{color:var(--ink-55); font-weight:400; margin-left:5px;}

/* ===== INSIGHTS ===== */
/* Sao sempre dois cartoes (clientes e produtos). A grade era de 4 colunas de
   uma versao antiga com mais cartoes: acima de 1400px os dois ficavam apertados
   na metade esquerda e a outra metade da linha ficava vazia. */
.dashboard-insights{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:0 0 var(--sp-4);
}

.insight-card{
  background:var(--color-surface);
  border-radius:var(--r-md);
  padding:22px 20px;
  min-height:190px;
}

.ranking-card{min-height:0;}

.ranking-list{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

/* Linha do ranking em flex com quebra, e nao em grid de colunas fixas: o card
   do ranking fica numa coluna estreita do dashboard e valores como
   "R$ 16.200,00" nao cabiam ao lado do nome — o texto vazava para fora do
   card. Assim o valor desce para a linha de baixo quando falta largura. */
.ranking-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-bg);
}

.ranking-list li > .ranking-position{flex:none;}
.ranking-list li > .ranking-thumb{flex:none;}
.ranking-list li > .ranking-copy{flex:1 1 110px; min-width:0;}
.ranking-list li > .ranking-value{flex:0 0 auto; margin-left:auto;}
.ranking-list li > .insight-link{flex:none;}

.ranking-position{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:var(--ink);
  color:var(--color-bg);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13px;
}

/* Reconhecer a peca pela foto e mais rapido do que ler o nome. */
.ranking-thumb{
  width:42px;
  height:52px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line-soft);
  background:var(--n-200);
}

.ranking-copy,
.ranking-value{display:grid; gap:3px; min-width:0;}
.ranking-copy strong{overflow-wrap:anywhere;}
.ranking-copy small,
.ranking-value small{color:var(--ink-55); font-size:10.5px; line-height:1.35;}
/* min-width:auto anula o min-width:0 herdado acima: sem isso a coluna do valor
   encolhia abaixo do proprio texto e "R$ 16.200,00" saia do card. */
.ranking-value{text-align:right; white-space:nowrap; min-width:auto;}
.ranking-value strong{font-size:12.5px;}
.ranking-list .insight-link{white-space:nowrap;}
.ranking-empty{grid-template-columns:1fr !important; color:var(--ink-55); text-align:center;}

.insight-main{font-family:var(--font-heading);font-weight:700; font-size:26px; line-height:1.1; margin-bottom:6px;}
.insight-note{font-size:12px; color:var(--ink-55); line-height:1.5; margin-bottom:14px;}

.insight-list{list-style:none; display:grid; gap:10px;}

.insight-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line-soft);
  padding-top:10px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink-70);
}

.insight-list strong{white-space:nowrap; font-weight:700; color:var(--ink);}

.insight-card-finance{grid-column:1 / -1; min-height:0;}
.finance-breakdown{grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px;}

.finance-breakdown li{
  display:grid;
  align-content:start;
  gap:5px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-bg);
}

.finance-breakdown li span{font-size:10.5px; color:var(--ink-55);}
.finance-breakdown li strong{font-size:13px; white-space:normal; overflow-wrap:anywhere;}

.insight-formula{
  margin-top:12px;
  color:var(--ink-70);
  font-size:11.5px;
  line-height:1.55;
}

.split-track{height:10px; display:flex; background:var(--n-300); border-radius:var(--r-pill); overflow:hidden; margin:12px 0 10px;}
.split-track span{transform-origin:left center;}
.split-track span:first-child{background:var(--color-accent);}
.split-track span:last-child{background:var(--color-accent-2);}

/* ===== TABELAS ===== */
.sales-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
}

.sales-panel-header h3{margin-bottom:0;}
.sales-table-wrap{overflow-x:auto;}

table.sales-table,
table.admin-table,
table.profit-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.sales-table{min-width:900px;}

table.sales-table th,
table.admin-table th,
table.profit-table th{
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-55);
  padding:10px 12px;
  border-bottom:1px solid var(--color-divider);
  white-space:nowrap;
}

table.sales-table td,
table.admin-table td,
table.profit-table td{
  padding:12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}

table tbody tr:hover{background:var(--wash-soft);}

td.num, th.num{text-align:right; white-space:nowrap;}
td.pos{color:var(--g-700);}
td.neg{color:var(--a-700);}

.sale-actions{display:flex; gap:8px; justify-content:flex-end; white-space:nowrap;}

.admin-grid{display:grid; gap:var(--sp-3); align-items:start;}
.admin-product-cell{display:flex; align-items:center; gap:14px;}

.admin-thumb{
  width:84px;
  height:104px;
  object-fit:cover;
  border-radius:var(--r-xs);
  background:var(--n-300);
  flex:0 0 auto;
  cursor:zoom-in;
}

.admin-product-name{font-size:13.5px; line-height:1.35;}
.admin-product-desc{font-size:11.5px; color:var(--ink-55); margin-top:3px;}

.ai-summary p{font-size:14.5px; line-height:1.7; color:var(--ink-70); margin-bottom:12px;}
.summary-list{list-style:none; display:grid; gap:10px; margin-top:16px;}

.summary-list li{
  border-top:1px solid var(--line-soft);
  padding-top:10px;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-70);
}

/* ===== BARRA DE CARRINHO NO CELULAR ===== */
.mobile-cart-bar{display:none;}

.mobile-cart-bar button{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border:none;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  box-shadow:var(--shadow-md);
}

.mobile-cart-bar strong{font-size:17px; white-space:nowrap;}

/* ===== RODAPE ===== */
footer{
  border-top:1px solid var(--line-soft);
  background:var(--color-surface);
  padding:var(--sp-5) 34px var(--sp-4);
  margin-top:var(--sp-5);
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-4);
  max-width:1600px;
  margin:0 auto var(--sp-4);
}

.footer-col h4{font-family:var(--font-heading);font-weight:700; font-size:17px; margin-bottom:12px;}

.footer-col a,
.footer-col p{
  display:block;
  font-size:13px;
  color:var(--ink-70);
  text-decoration:none;
  margin-bottom:7px;
}

.footer-col a:hover{color:var(--color-accent);}

.footer-bottom{
  max-width:1600px;
  margin:0 auto;
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-soft);
  text-align:center;
  font-size:11px;
  color:var(--ink-55);
}

.footer-bottom a{color:var(--ink-55); font-weight:600; text-decoration:underline;}
.footer-bottom a:hover{color:var(--color-accent);}

/* ===== MOTION ===== */
[data-reveal]{
  opacity:0;
  transition:opacity .4s var(--e);
  transition-delay:calc(var(--i, 0) * 40ms);
}

[data-reveal].is-visible{opacity:1;}
.cart-item{animation:fadeIn .2s var(--e);}

.product-card.added .product-image,
.pos-item.added .product-image{animation:addedFlash .5s var(--e);}

@keyframes addedFlash{
  0%{box-shadow:inset 0 0 0 0 var(--color-accent);}
  40%{box-shadow:inset 0 0 0 3px var(--color-accent);}
  100%{box-shadow:inset 0 0 0 0 var(--color-accent);}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;}
}

/* =========================================================================
   BLOCOS DO PAINEL (filtros, meta, alertas, lucro, 5b e cupom)
   ========================================================================= */

/* ----- Filtros ----- */
.period-bar{
  background:var(--color-surface);
  border-radius:var(--r-md);
  padding:18px 20px;
  margin-bottom:var(--sp-3);
}

.period-bar h4{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  margin-bottom:2px;
}

.period-hint{font-size:12.5px; color:var(--ink-55); margin-bottom:14px;}

.filter-group{margin-bottom:14px;}
.filter-group:last-child{margin-bottom:0;}

.filter-group > span{
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
  margin-bottom:7px;
}

.period-quick{display:flex; flex-wrap:wrap; gap:7px;}

.period-custom{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:10px;}

.period-custom label{
  display:grid;
  gap:5px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
}

/* width/min-width: o campo de data tem largura propria (~149px) e no celular
   vazava para fora da coluna de 113px em que o rotulo cabe. */
.period-custom input{min-height:38px; width:100%; min-width:0; font-size:13px; background:var(--color-bg);}
.period-custom .btn-save{min-height:38px;}

.period-info{font-size:13px; color:var(--ink-55);}

/* ----- Cabecalho de secao ----- */
.section-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin:var(--sp-4) 0 14px;
}

.section-head h2{font-family:var(--font-title); font-size:26px;}
.section-head p{font-size:13px; color:var(--ink-55); margin:0;}
.section-head-action{margin-left:auto;}

/* ----- Selo de promocao ----- */
.promo-flag{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:var(--color-accent);
  color:var(--color-bg);
  font-size:10.5px;
  font-weight:700;
  padding:4px 11px;
  border-radius:var(--r-pill);
}

.margin-chip{
  display:inline-block;
  background:var(--g-200);
  color:var(--g-800);
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:var(--r-pill);
  white-space:nowrap;
}

.margin-chip.low{background:var(--a-100); color:var(--a-800);}

/* ----- Meta com ritmo ----- */
.goal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.goal-value{font-family:var(--font-heading);font-weight:700; font-size:30px; line-height:1.1;}
.goal-sub{font-size:13px; color:var(--ink-55);}

.goal-track{
  position:relative;
  height:12px;
  background:var(--n-300);
  border-radius:var(--r-pill);
  overflow:hidden;
}

.goal-fill{height:100%; background:var(--color-accent); border-radius:var(--r-pill); transition:width .6s var(--e);}

/* Marcador preto: onde a loja deveria estar hoje */
.goal-pace{
  position:absolute;
  top:-3px;
  width:3px;
  height:18px;
  background:var(--ink);
  border-radius:var(--r-pill);
}

.goal-note{margin-top:10px; font-size:13px; color:var(--ink-70);}

.goal-projection{
  background:var(--g-200);
  border-radius:var(--r-sm);
  padding:16px 18px;
  margin-top:14px;
}

.goal-projection span{font-size:12.5px; color:var(--g-700);}
.goal-projection strong{display:block; font-family:var(--font-heading); font-weight:700; font-size:26px; color:var(--g-800); margin:4px 0;}
.goal-projection em{font-style:normal; font-size:12px; color:var(--g-700);}

/* ----- Ponto de equilibrio ----- */
.break-list{list-style:none; margin:14px 0 0;}

.break-list li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
}

.break-list li.total{
  border-bottom:none;
  border-top:1px solid var(--color-divider);
  margin-top:4px;
  padding-top:12px;
  font-weight:700;
}

.break-msg{
  background:var(--color-bg);
  border-radius:var(--r-sm);
  padding:14px 16px;
  margin-top:14px;
  font-size:13px;
  line-height:1.55;
}

.break-msg.ok{background:var(--g-200); color:var(--g-800);}

/* ----- Dinheiro parado ----- */
.money-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:var(--sp-3);
  align-items:start;
}

.money-card{background:var(--color-surface); border-radius:var(--r-md); padding:22px 20px;}
.money-card.warn{background:var(--a-100);}
.money-card.has-preview{position:relative; z-index:2;}

.money-card > span{
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
  margin-bottom:8px;
}

.money-card strong{font-family:var(--font-heading);font-weight:700; font-size:28px; line-height:1.1;}
.money-card.warn strong{color:var(--a-800);}
.money-card p{font-size:12.5px; color:var(--ink-55); margin:8px 0 0; line-height:1.5;}

.money-card-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:14px;
  padding:8px 16px;
  border:1px solid var(--a-700);
  border-radius:var(--r-pill);
  background:var(--a-700);
  color:var(--on-accent);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:11px;
  cursor:pointer;
}

.money-card-action:hover{background:var(--a-800); border-color:var(--a-800);}
.money-card-action:disabled{opacity:.55; cursor:default;}

.money-card-preview{
  position:absolute;
  z-index:20;
  top:calc(100% - 8px);
  right:16px;
  width:340px;
  max-width:calc(100vw - 40px);
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--color-bg);
  box-shadow:0 20px 45px rgba(66,45,24,.18);
  color:var(--ink);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity var(--t) var(--e), transform var(--t) var(--e), visibility var(--t) var(--e);
}

.money-card-preview > b{display:block; font-family:var(--font-heading); font-weight:700; font-size:16px;}
.money-card-preview > small{display:block; margin-top:2px; color:var(--ink-55); font-size:10.5px;}
.money-card-preview ul{display:grid; gap:7px; margin-top:12px; list-style:none;}
.money-card-preview li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:10px; background:var(--color-surface); font-size:11.5px;}
.money-card-preview li span{min-width:0; font-weight:700;}
.money-card-preview li small{display:block; margin-top:2px; color:var(--ink-55); font-size:9.5px; font-weight:400;}
.money-card-preview li strong{flex:0 0 auto; font-family:var(--font-body); font-size:11.5px;}
.money-card-preview > em{display:block; margin-top:10px; color:var(--ink-55); font-size:10px; font-style:normal;}

@media (hover:hover) and (pointer:fine){
  .money-card.has-preview:hover .money-card-preview,
  .money-card.has-preview:focus-within .money-card-preview{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
}

.target-chip{
  display:inline-block;
  background:var(--color-bg);
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:11px;
  padding:3px 10px;
  margin-left:8px;
  vertical-align:middle;
}

/* ----- Onde agir hoje ----- */
.act-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:var(--sp-4);
  align-items:start;
}

.act-col{background:var(--color-surface); border-radius:var(--r-lg); padding:22px 20px;}
.act-col h3{font-family:var(--font-heading);font-weight:700; font-size:20px; margin-bottom:4px;}
.act-col > p{font-size:12.5px; color:var(--ink-55); margin-bottom:14px;}

.act-list{list-style:none; display:grid; gap:8px;}

.act-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--color-bg);
  border-radius:var(--r-sm);
  padding:11px 14px;
}

.act-col.warn .act-item{background:var(--a-100);}

.act-item img{
  width:34px;
  height:34px;
  border-radius:8px;
  object-fit:cover;
  flex:0 0 auto;
  background:var(--n-300);
}

.act-item div{flex:1; min-width:0;}
.act-item .act-name{font-size:13px; line-height:1.3; overflow-wrap:anywhere;}
.act-item .act-note{font-size:11.5px; color:var(--ink-55); margin-top:2px;}
.act-item .act-breakdown{font-size:10.5px; color:var(--ink-55); margin-top:4px; line-height:1.35;}
.act-item .act-money{font-weight:700; font-size:13.5px; white-space:nowrap;}

.act-foot{
  background:var(--g-200);
  color:var(--g-800);
  border-radius:var(--r-sm);
  padding:12px 16px;
  margin-top:12px;
  font-size:12.5px;
}

/* ----- Alertas ----- */
.alert-list{list-style:none; display:grid; gap:8px; margin-top:14px;}

.alert-item{
  display:grid;
  grid-template-columns:9px 1fr auto;
  gap:14px;
  align-items:center;
  background:var(--color-bg);
  border-radius:var(--r-sm);
  padding:14px 18px;
  font-size:13.5px;
}

.alert-item.out,
.alert-item.low{background:var(--a-100);}

.alert-item::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--n-600);
}

.alert-item.out::before,
.alert-item.low::before{background:var(--a-600);}
.alert-item.ok::before{background:var(--g-600);}

.alert-body{min-width:0;}
.alert-name{line-height:1.3; overflow-wrap:anywhere;}
.alert-note{font-size:12px; color:var(--ink-55); margin-top:2px;}
.alert-do{font-size:12.5px; color:var(--a-700); white-space:nowrap; background:none; border:none; font-family:inherit; font-weight:600; cursor:pointer; padding:4px 2px;}
.alert-do:hover{text-decoration:underline;}

.row-flash{animation:rowFlash .9s var(--e);}

@keyframes rowFlash{
  0%{background:var(--a-100);}
  100%{background:transparent;}
}

.alert-badge{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--ink-55);
  margin-left:auto;
}

/* ----- Relatorio de lucro ----- */
.profit-summary{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
  margin:14px 0 var(--sp-3);
}

.profit-cell{background:var(--color-bg); border-radius:var(--r-sm); padding:16px 16px;}
.profit-cell span{display:block; font-size:10px; color:var(--ink-55); margin-bottom:6px;}
.profit-cell strong{font-family:var(--font-heading);font-weight:700; font-size:21px;}

/* ----- Editor de preco (3b) ----- */
.promo-cell{display:flex; align-items:center; gap:10px;}

.switch{position:relative; display:inline-block; width:40px; height:23px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}

.slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:var(--n-400);
  border-radius:var(--r-pill);
  transition:background var(--t) var(--e);
}

.slider::before{
  content:"";
  position:absolute;
  height:17px;
  width:17px;
  left:3px;
  bottom:3px;
  background:var(--color-bg);
  border-radius:50%;
  transition:transform var(--t) var(--e);
}

.switch input:checked + .slider{background:var(--color-accent);}
.switch input:checked + .slider::before{transform:translateX(17px);}
.switch input:focus-visible + .slider{outline:2px solid var(--color-accent); outline-offset:2px;}

.cell-input{width:104px; min-height:40px; font-size:13.5px; padding:9px 14px; background:var(--color-bg);}
.cell-input.small{width:70px;}
.cell-input:disabled{opacity:.5;}

/* Campo de saida — o "Fica em" do 3b */
.cell-out{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:9px 16px;
  border-radius:var(--r-pill);
  background:var(--g-100);
  border:1px solid var(--g-300);
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
}

/* ----- Ajustes ----- */
.settings-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.settings-column{display:grid; gap:12px;}

.expense-list{list-style:none; display:grid; gap:10px; margin:14px 0;}

.expense-row{
  display:grid;
  grid-template-columns:1fr 150px auto;
  gap:10px;
  align-items:center;
}

.expense-row input{background:var(--color-bg); min-height:42px;}

.expense-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:14px;
  border-top:1px solid var(--color-divider);
  font-weight:700;
  font-size:15px;
}

.settings-field{display:grid; gap:6px; margin-bottom:14px;}

.settings-field > span{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
}

.settings-field input{background:var(--color-bg); min-height:44px;}
.settings-note{font-size:12.5px; color:var(--ink-55); margin-top:6px; line-height:1.5;}

/* ----- Links de catalogo por vendedor(a) ----- */
.seller-links{display:flex; flex-direction:column; gap:10px; margin-top:14px;}

.seller-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:13px 15px;
  border:1px solid var(--color-divider);
  border-radius:var(--r-sm);
  background:var(--color-bg);
}

.seller-link-info{display:grid; gap:4px; min-width:0; flex:1 1 220px;}
.seller-link-info strong{font-size:14.5px; font-weight:700;}

.seller-link-info code{
  font-size:11.5px;
  color:var(--ink-55);
  overflow-wrap:anywhere;
  line-height:1.4;
}

.seller-link-acoes{display:flex; gap:7px; flex-wrap:wrap; flex:0 0 auto;}
.seller-link-acoes .btn-mini{text-decoration:none; display:inline-flex; align-items:center;}

@media (max-width:720px){
  .seller-link{align-items:stretch;}
  .seller-link-acoes{width:100%;}
  .seller-link-acoes .btn-mini{flex:1 1 auto; justify-content:center; min-height:38px;}
}

/* =========================================================================
   CUPOM — bottom sheet + impressao
   ========================================================================= */
.modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:var(--scrim);
}

.modal[hidden]{display:none;}
body.no-scroll{overflow:hidden;}

.modal-box{
  background:var(--color-bg);
  width:100%;
  max-width:520px;
  max-height:94vh;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-lg);
  animation:sheetUp .28s var(--e);
}

@keyframes sheetUp{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 26px 16px;
}

.modal-head h3{font-family:var(--font-heading);font-weight:700; font-size:24px;}

/* Seletor 58/80mm: mesma forma dos outros botoes, sem virar moeda */
.paper-pick{display:flex; gap:8px;}

.paper-opt{
  width:52px;
  height:52px;
  border-radius:var(--r-xs);
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  line-height:1.15;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e);
}

.paper-opt:hover{background:var(--wash);}
.paper-opt.active{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}

.receipt-preview{
  flex:1;
  overflow:auto;
  padding:0 26px;
  display:flex;
  justify-content:center;
}

.receipt{
  background:#fff;
  color:#000;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.75;
  padding:4mm 3mm;
  width:72mm;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.receipt.w58{width:50mm; font-size:10.5px; padding:3mm 2mm;}

.r-center{text-align:center;}
.r-strong{font-weight:700;}
.r-shop{letter-spacing:.14em; text-transform:uppercase;}
.r-order{margin:3mm 0 1.5mm; padding:1.5mm 1mm; border:1px solid #000; text-align:center; font-size:1.08em; font-weight:700; letter-spacing:.08em;}
.r-small{font-size:.92em;}
.r-kicker{font-size:.82em; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px;}
.r-detail{display:grid; grid-template-columns:54px minmax(0,1fr); gap:7px; align-items:start; margin:2px 0;}
.r-detail span{font-size:.86em; text-transform:uppercase; color:#444;}
.r-detail strong{text-align:right; overflow-wrap:anywhere;}
.r-sep{border-top:1px dashed #555; margin:9px 0;}
.r-item{margin-bottom:3px;}
.r-item-name{overflow-wrap:anywhere;}
.r-row{display:flex; justify-content:space-between; gap:10px;}
.r-total{font-size:1.15em; margin:5px 0;}
.r-feed{height:12mm;}

.print-hint{
  padding:14px 26px 0;
  font-size:12px;
  color:var(--ink-55);
  line-height:1.5;
}

.modal-actions{display:flex; gap:10px; padding:18px 26px 26px;}
.modal-actions .btn-mini{flex:1; min-height:48px;}
.modal-actions .btn-primary{flex:1.4; margin-top:0;}

.sale-edit-box{max-width:780px;}
.sale-edit-kicker{display:block; margin-bottom:5px; color:var(--color-accent); font-size:10px; letter-spacing:.12em; text-transform:uppercase;}

.sale-edit-body{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  padding:0 26px;
  overflow:auto;
}

.sale-edit-field{display:grid; gap:6px; min-width:0;}
.sale-edit-field > span{color:var(--ink-55); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
.sale-edit-field input,
.sale-edit-field select,
.sale-edit-field textarea{width:100%; min-width:0; background:var(--color-surface);}
.sale-edit-field textarea{resize:vertical; line-height:1.5;}
.sale-edit-field small{color:var(--ink-55); font-size:10.5px; line-height:1.4;}
.sale-edit-wide{grid-column:1 / -1;}
.sale-edit-note{margin:0; padding:11px 13px; border-radius:var(--r-sm); background:var(--g-200); color:var(--g-800); font-size:11.5px; line-height:1.5;}
.sale-edit-feedback{min-height:18px; margin:0; color:var(--a-700); font-size:12px; font-weight:600;}

.sale-detail-box{max-width:860px;}
.sale-detail-body{
  display:grid;
  gap:16px;
  padding:0 26px;
  overflow:auto;
}

.sale-detail-summary,
.sale-detail-money{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}

.sale-detail-summary div,
.sale-detail-money div{
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-surface);
  min-width:0;
}

.sale-detail-summary span,
.sale-detail-money span{
  display:block;
  margin-bottom:4px;
  color:var(--ink-55);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.sale-detail-summary strong,
.sale-detail-money strong{
  display:block;
  font-size:13px;
  overflow-wrap:anywhere;
}

.sale-detail-section{
  border-top:1px solid var(--line-soft);
  padding-top:14px;
}

.sale-detail-section h4{
  margin:0 0 10px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:18px;
}

.sale-detail-item{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}

.sale-detail-item img{
  width:64px;
  height:78px;
  object-fit:cover;
  border-radius:var(--r-xs);
  background:var(--n-300);
}

.sale-detail-item strong{display:block; font-size:14px;}
.sale-detail-item small,
.sale-detail-item span{display:block; margin-top:2px; color:var(--ink-55); font-size:12px;}
.sale-detail-section ul{display:grid; gap:8px; margin:0; padding:0; list-style:none;}
.sale-detail-section li{padding:10px 12px; border-radius:var(--r-sm); background:var(--color-surface); font-size:12.5px;}
.sale-detail-section li small{display:block; margin-top:3px; color:var(--ink-55);}

.sale-exchange{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--color-divider);
  border-radius:var(--r-md);
  background:var(--wash);
}
.sale-exchange[hidden]{display:none;}
.sale-exchange-head{display:flex; align-items:start; justify-content:space-between; gap:18px;}
.sale-exchange-head h4{font-family:var(--font-heading);font-weight:700; font-size:20px;}
.sale-exchange-head p{max-width:360px; margin:0; color:var(--ink-55); font-size:11.5px; line-height:1.5;}
.sale-exchange-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.sale-exchange-settlement{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px;}
.sale-exchange-preview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:12px;
  border-radius:var(--r-sm);
  background:var(--color-surface);
}
.sale-exchange-preview > span{display:grid; gap:3px; min-width:0; color:var(--ink-55); font-size:10px; text-transform:uppercase; letter-spacing:.08em;}
.sale-exchange-preview strong{color:var(--ink); font-size:14px; letter-spacing:0; text-transform:none; overflow-wrap:anywhere;}
.sale-exchange-preview .is-charge strong{color:var(--a-700);}
.sale-exchange-preview .is-refund strong{color:var(--g-800);}
.sale-exchange-history{display:block; margin-top:5px; color:var(--a-700); font-size:10.5px; font-weight:700;}

@media print{
  @page{size:80mm auto; margin:0;}

  html,
  body{
    width:var(--paper, 80mm) !important;
    min-width:0 !important;
    max-width:var(--paper, 80mm) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#fff !important;
  }

  body *{visibility:hidden !important;}
  #receipt, #receipt *{visibility:visible !important;}

  .modal{position:static; background:none; display:block;}
  /* No papel nao existe canto arredondado: a regra 1 do Organic vale na tela. */
  .modal-box{max-width:none; max-height:none; border-radius:0; box-shadow:none; animation:none;}
  .modal-head, .modal-actions, .print-hint{display:none !important;}
  .receipt-preview{overflow:visible; padding:0; display:block;}

  #receipt{
    position:absolute;
    left:2mm;
    top:0;
    width:var(--printable, 72mm);
    max-width:var(--printable, 72mm);
    margin:0;
    padding:3mm 2mm;
    background:#fff;
    color:#000;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
}
/* ----- Grafico com eixo Y, grade e linha de media ----- */
.chart-wrap{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:stretch;}

.chart-axis{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:26px;
  font-size:10.5px;
  color:var(--ink-55);
  text-align:right;
  white-space:nowrap;
}

.chart-plot{
  position:relative;
  /* linhas de grade: uma a cada 25% da altura util */
  background-image:repeating-linear-gradient(to top, var(--line-soft) 0 1px, transparent 1px 25%);
  background-size:100% calc(100% - 26px);
  background-position:0 -26px;
  background-repeat:no-repeat;
}

/* Linha tracejada da media diaria.
   O 26px de baixo e a faixa dos rotulos de data: a area util da barra e
   "100% - 26px". Antes o JS mandava bottom em % da caixa INTEIRA e o CSS ainda
   somava margin-bottom:26px — quanto mais alta a media, mais a linha subia
   demais, e no topo ela saia do grafico e riscava o texto de cima. Agora o JS
   manda o bottom ja calculado sobre a area util e a margem sai daqui. */
.chart-avg{
  position:absolute;
  left:0; right:0;
  border-top:1.5px dashed var(--a-700);
  pointer-events:none;
  z-index:1;
}

.chart-avg[hidden]{display:none;}

/* ----- Chips dos cartoes de metrica ----- */
.m-chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 8px;
  margin-top:8px;
  font-size:12px;
}

.m-delta-txt{color:var(--ink-55);}
.metric-card.is-good .m-delta-txt{color:var(--g-700);}

.insight-link{
  border:none;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:700;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

.insight-link:hover{color:var(--a-700);}


/* =========================================================================
   VITRINE DO CLIENTE — tela de peça, sacola e fechamento
   Baseado nas telas 3a e 4a do handoff.
   ========================================================================= */

/* ----- Tela da peça ----- */
.produto-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--sp-5);
  align-items:start;
  max-width:1180px;
}

.produto-galeria{position:relative;}

.produto-foto{
  position:relative;
  background:var(--n-300);
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  max-height:min(72vh, 620px);
}

.produto-foto img{width:100%; height:100%; object-fit:cover;}

.produto-voltar{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:var(--r-xs);
  border:none;
  background:var(--glass);
  color:var(--ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.produto-voltar:hover{background:var(--color-bg);}

.produto-tag{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-55);
}

.produto-nome{
  font-family:var(--font-title);
  font-size:clamp(25px, 3vw, 34px);
  line-height:1.1;
  margin:8px 0 12px;
}

.produto-preco{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  font-size:26px;
  font-weight:700;
}

.produto-preco .old{
  font-size:17px;
  font-weight:400;
  color:var(--ink-40);
  text-decoration:line-through;
}

.produto-preco.sale .produto-preco-valor{color:var(--a-700);}

.produto-pix{font-size:12.5px; color:var(--ink-55); margin-top:4px;}
.produto-desc{font-size:14px; color:var(--ink-70); line-height:1.6; margin:16px 0 22px;}

/* Seletor de tamanho em pílulas — esgotado fica riscado e não clica */
.tamanho-bloco{margin-bottom:18px;}

.tamanho-bloco > span{
  display:block;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
  margin-bottom:9px;
}

.tamanho-lista{display:flex; flex-wrap:wrap; gap:8px;}

.tamanho-opt{
  min-width:52px;
  padding:10px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
}

.tamanho-opt:hover:not(:disabled){border-color:var(--ink);}

.tamanho-opt.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--color-bg);
}

.tamanho-opt:disabled{
  text-decoration:line-through;
  color:var(--ink-40);
  border-color:var(--color-divider);
  cursor:not-allowed;
}

/* Aviso de escassez: só aparece com 10 peças ou menos */
.escassez{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  color:var(--a-700);
  margin-bottom:18px;
}

.escassez::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-accent);
  flex:0 0 auto;
}

/* Card verde de ajuda pelo WhatsApp */
.card-zap{
  background:var(--g-200);
  border-radius:var(--r-md);
  padding:18px 20px;
  margin-bottom:20px;
}

.card-zap strong{display:block; font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--g-800); margin-bottom:4px;}
.card-zap p{font-size:13px; color:var(--g-700); margin:0 0 12px;}

.btn-zap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--g-700);
  color:var(--g-100);
  border:none;
  border-radius:var(--r-pill);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  padding:12px 22px;
  min-height:46px;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.btn-zap:hover{background:var(--g-800);}

.produto-acoes{display:flex; gap:10px; align-items:center;}
.produto-acoes .btn-primary{margin-top:0; flex:1;}
.produto-frete{font-size:12px; color:var(--ink-55); text-align:center; margin-top:12px;}

/* ----- Sacola ----- */
.cart-item{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:14px;
  align-items:start;
  background:var(--color-bg);
  border-radius:var(--r-md);
  border-bottom:none;
  padding:12px;
  margin-bottom:10px;
}

.ci-foto{
  width:78px;
  height:96px;
  border-radius:var(--r-sm);
  object-fit:cover;
  background:var(--n-300);
}

#cartLines .ci-foto{cursor:zoom-in;}

.ci-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.ci-name{font-size:13.5px; line-height:1.3; overflow-wrap:anywhere;}
.ci-meta{font-size:12px; color:var(--ink-55); margin-top:3px;}

.ci-precos{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:6px;}
.ci-price{font-weight:700; font-size:14px; white-space:nowrap;}
.ci-price.sale{color:var(--sale);}

.ci-full{font-size:12px; color:var(--ink-40); text-decoration:line-through;}

.ci-promo{
  display:inline-block;
  background:var(--a-100);
  color:var(--a-800);
  font-size:10.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:var(--r-pill);
}

.cart-controls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

/* Stepper em pílula única */
.stepper{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  overflow:hidden;
}

.stepper button{
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:var(--ink);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:background var(--t) var(--e);
}

.stepper button:hover{background:var(--wash);}
.stepper span{min-width:26px; text-align:center; font-size:13.5px; font-weight:700;}

.remove-line{
  margin-left:auto;
  background:none;
  border:none;
  color:var(--ink-55);
  font-family:inherit;
  font-size:11.5px;
  cursor:pointer;
  padding:6px 4px;
  text-decoration:underline;
  text-underline-offset:3px;
}

.remove-line:hover{color:var(--a-700);}

.cart-totals .row.frete-gratis span:last-child{color:var(--g-700); font-weight:700;}
.cart-totals .row.economia span{color:var(--a-700); font-weight:700;}

.reserva{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--g-700);
  margin-top:12px;
}

.reserva::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--g-600);
  flex:0 0 auto;
}

/* ----- Fechamento ----- */
.seg-pills{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

.seg-pill{
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  min-height:46px;
  transition:background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
}

.seg-pill:hover{border-color:var(--ink);}
.seg-pill.active{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}

.pay-tags{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.pay-tag{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  min-height:40px;
  white-space:normal;
  line-height:1.15;
  text-align:center;
  transition:background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
}

.pay-tag:hover{border-color:var(--ink);}
.pay-tag.active{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}

/* Prévia exata da mensagem que vai pro WhatsApp */
.msg-preview{
  background:var(--g-200);
  border-radius:var(--r-md);
  padding:18px 20px;
  margin-top:6px;
}

.msg-preview > span{
  display:block;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--g-700);
  margin-bottom:8px;
}

.msg-preview pre{
  font-family:inherit;
  font-size:13px;
  line-height:1.6;
  color:var(--g-800);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
}

.nada-cobrado{font-size:12px; color:var(--ink-55); text-align:center; margin-top:10px;}

/* ----- Consentimento de dados (LGPD) -----
   Fica colado no botao de enviar de proposito: o consentimento tem que estar
   onde a coleta acontece, nao escondido num rodape. */
/* Precisa de dois niveis (.checkout-form .aceite-lgpd) para vencer a regra
   ".checkout-form label" que poe rotulo em caixa alta — classe sozinha perde
   em especificidade e o texto continuava gritado. */
.checkout-form .aceite-lgpd{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:4px 0 2px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-70);
  cursor:pointer;
  /* Os outros <label> do formulario sao rotulo curto em caixa alta. Este e
     frase corrida: em maiuscula com espacamento de rotulo, vira grito e fica
     dificil de ler bem na hora em que o cliente precisa entender o que aceita. */
  text-transform:none;
  letter-spacing:normal;
}
.aceite-lgpd input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:1px;
  accent-color:var(--color-accent);
  cursor:pointer;
}
.aceite-lgpd strong{color:var(--color-text); font-weight:600;}

.link-privacidade{
  display:inline;
  padding:0;
  border:0;
  background:none;
  color:var(--color-accent);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}

/* A barra de cima (1500) e a barra de abas (1600) do catalogo sao mais altas
   que o .modal padrao (300) do painel. Sem subir aqui, o aviso abria por baixo
   das barras e o botao Fechar nao recebia o toque. */
#privacidadeModal{z-index:1700;}
.privacidade-box{max-width:620px; width:100%;}
.privacidade-corpo{padding:0 26px 6px; overflow:auto; display:grid; gap:16px;}
.privacidade-corpo h4{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-70); margin-bottom:6px;}
.privacidade-corpo p{font-size:13.5px; line-height:1.6; color:var(--ink-70); margin-bottom:6px;}
.privacidade-corpo strong{color:var(--color-text);}

@media (max-width:720px){
  .privacidade-corpo{padding-left:16px; padding-right:16px;}
}

/* ----- Busca do catálogo ----- */
.busca-bar{display:flex; gap:10px; margin-bottom:14px;}

.busca-bar input{flex:1; min-height:48px;}

.busca-limpar{
  width:44px;
  height:44px;
  align-self:center;
  border-radius:var(--r-xs);
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}

.busca-limpar:hover{background:var(--wash);}

.filtro-linha{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.filtro-linha > span{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-55);
  min-width:70px;
}

.resultado-linha{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:12px 0 var(--sp-3);
  font-size:13px;
  color:var(--ink-55);
}

.resultado-linha select{min-height:38px; font-size:13px; padding:8px 14px;}

/* ----- Estoque agrupado por modelo (4b) ----- */
.modelo-card{
  background:var(--color-surface);
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:12px;
}

.modelo-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}

.modelo-head img{
  width:84px;
  height:104px;
  border-radius:var(--r-xs);
  object-fit:cover;
  background:var(--n-300);
  flex:0 0 auto;
  cursor:zoom-in;
}

.modelo-photo-strip{
  display:flex;
  align-items:center;
  gap:7px;
  margin:10px 0 4px;
  flex-wrap:wrap;
}

.modelo-photo-strip button{
  position:relative;
  width:46px;
  height:54px;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:var(--r-xs);
  overflow:hidden;
  background:var(--color-bg);
  cursor:pointer;
}

.modelo-photo-strip img{width:100%; height:100%; object-fit:cover; display:block;}

.modelo-photo-strip span{
  position:absolute;
  right:3px;
  bottom:3px;
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(0,0,0,.76);
  color:var(--cream);
  font-size:9px;
  font-weight:800;
}

.modelo-photo-strip small{
  color:var(--color-accent);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.modelo-photo-strip.empty{margin-top:8px;}
.modelo-photo-strip.empty small{color:var(--ink-40);}

.photo-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,17,13,.86);
  padding:40px;
}

.photo-lightbox-box{display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%;}

.photo-lightbox img{
  max-width:min(90vw, 640px);
  max-height:80vh;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  object-fit:contain;
  background:var(--color-surface);
}

.photo-lightbox-label{
  background:var(--color-surface);
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  padding:8px 18px;
  border-radius:var(--r-pill);
}
.photo-lightbox-label:empty{display:none;}

.photo-lightbox-close{
  position:absolute;
  top:20px;
  right:24px;
  width:40px;
  height:40px;
  border-radius:var(--r-xs);
  border:none;
  background:var(--color-surface);
  color:var(--ink);
  font-size:20px;
  cursor:pointer;
}

.exchange-photo-row{display:flex; align-items:center; gap:12px; margin-top:8px;}
.exchange-photo-row img{width:56px; height:70px; object-fit:cover; border-radius:var(--r-xs); background:var(--n-300); flex:0 0 auto;}
.exchange-photo-row span{font-size:12.5px; color:var(--ink-55);}

.exchange-picker-search{margin-top:8px;}

.exchange-picker-list{
  display:grid;
  gap:6px;
  margin-top:8px;
  max-height:220px;
  overflow-y:auto;
  padding-right:2px;
}

.exchange-pick-card{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--color-surface);
  text-align:left;
  cursor:pointer;
  font-family:inherit;
}

.exchange-pick-card:hover{border-color:var(--line-soft);}
.exchange-pick-card.is-selected{border-color:var(--color-accent); background:var(--a-100);}

.exchange-pick-card img{width:40px; height:50px; object-fit:cover; border-radius:var(--r-xs); background:var(--n-300); flex:0 0 auto;}

.exchange-pick-info{display:grid; gap:2px; min-width:0;}
.exchange-pick-info strong{font-size:12.5px; line-height:1.3;}
.exchange-pick-info small{font-size:11px; color:var(--ink-55);}

.exchange-pick-empty{padding:10px; font-size:12.5px; color:var(--ink-55);}

.modelo-nome{font-family:var(--font-heading);font-weight:700; font-size:19px; line-height:1.15;}
.modelo-meta{font-size:12px; color:var(--ink-55); margin-top:3px;}

.modelo-flag{
  background:var(--a-100);
  color:var(--a-800);
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:var(--r-pill);
  white-space:nowrap;
}

.modelo-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
}

.modelo-action{
  min-height:36px;
  padding:8px 13px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--color-bg);
  color:var(--ink-70);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:10.5px;
  cursor:pointer;
}

.modelo-action:hover,
.modelo-action.active{border-color:var(--color-accent); color:var(--color-accent);}
.modelo-action.add{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}
.modelo-action.danger{border-color:var(--accent-line); color:var(--a-700);}
.modelo-action.danger:hover{border-color:var(--a-700); background:var(--a-100); color:var(--a-800);}

.model-edit{
  margin-top:14px;
  padding:20px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--color-bg);
}

.model-edit-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.model-edit-head h4{margin:3px 0 0; font-family:var(--font-heading); font-weight:700; font-size:19px;}
.model-edit-head p{max-width:600px; margin:0; color:var(--ink-55); font-size:11.5px; line-height:1.5;}

.model-general-grid{
  display:grid;
  /* Produto · Descricao · Cor · Categoria · Tipo · Fotos */
  grid-template-columns:minmax(160px,1.1fr) minmax(200px,1.4fr) minmax(110px,.6fr) minmax(120px,.65fr) minmax(120px,.65fr) auto;
  gap:12px;
  align-items:end;
}

.model-general-grid label,
.model-size-grid label{display:grid; gap:5px; min-width:0; color:var(--ink-70); font-size:10px;}
.model-photo-hint{display:block; max-width:190px; color:var(--ink-55); font-size:10px; line-height:1.35; text-transform:none; letter-spacing:normal;}
.model-general-grid input,
.model-general-grid select,
.model-size-grid input{width:100%; min-width:0; min-height:44px; background:var(--color-surface); font-size:13.5px; letter-spacing:normal; text-transform:none;}
.model-save{min-height:44px; white-space:nowrap;}
.model-photo-field{align-self:stretch;}
.model-photo-gallery{
  display:flex;
  gap:8px;
  margin-top:8px;
  max-width:260px;
  overflow-x:auto;
  padding:2px 2px 6px;
  scrollbar-width:thin;
}
.model-photo-gallery::-webkit-scrollbar{height:4px;}
.model-photo-gallery::-webkit-scrollbar-thumb{background:var(--line-strong);}
.model-photo-thumb{
  position:relative;
  flex:0 0 58px;
  width:58px;
  height:72px;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:var(--r-xs);
  overflow:hidden;
  background:var(--color-bg);
  color:var(--cream);
  cursor:pointer;
}
.model-photo-open{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.model-photo-open img{width:100%; height:100%; object-fit:cover; display:block;}
.model-photo-open span{
  position:absolute;
  left:3px;
  right:3px;
  bottom:3px;
  border-radius:var(--r-pill);
  padding:2px 4px;
  background:rgba(0,0,0,.74);
  color:var(--cream);
  font-size:8px;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.model-photo-remove{
  position:absolute;
  top:3px;
  right:3px;
  z-index:2;
  width:20px;
  height:20px;
  border:1px solid rgba(245,234,216,.45);
  border-radius:6px;
  background:rgba(0,0,0,.82);
  color:var(--cream);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e), transform var(--t) var(--e);
}
.model-photo-remove:hover{
  background:var(--color-accent);
  color:var(--ink);
  transform:scale(1.08);
}
.model-photo-empty{
  margin-top:8px;
  padding:10px;
  border:1px dashed var(--line-soft);
  border-radius:var(--r-xs);
  color:var(--ink-55);
  font-size:10.5px;
  text-transform:none;
  letter-spacing:normal;
}

.catalog-featured-panel{
  margin:20px 0 22px;
  padding:20px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--color-surface);
}

.catalog-featured-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:14px;
}

.catalog-featured-head h3{margin:4px 0 3px; font-family:var(--font-heading); font-weight:700; font-size:22px;}
.catalog-featured-head p{margin:0; color:var(--ink-55); font-size:12.5px;}
.catalog-featured-head .catalog-featured-tip{margin-top:7px; color:var(--a-700); font-weight:700;}
.catalog-featured-head strong{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); white-space:nowrap;}

.catalog-featured-picker{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto;
  gap:10px;
  margin-bottom:12px;
  align-items:start;
}

.featured-product-picker{position:relative; min-width:0;}

.catalog-featured-picker input{
  width:100%;
  min-height:44px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--color-bg);
  color:var(--ink);
  padding:0 12px;
  font-size:13px;
}

.featured-suggestions{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  z-index:30;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--surface-raised);
  box-shadow:var(--shadow-lg);
}

.featured-suggestions[hidden]{display:none;}

.featured-suggestion{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:8px;
  border:0;
  border-radius:var(--r-xs);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.featured-suggestion:hover{background:var(--wash);}
.featured-suggestion img{width:54px; height:62px; object-fit:cover; border-radius:var(--r-xs); background:var(--n-300);}
.featured-suggestion strong{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.featured-suggestion small{display:block; margin-top:2px; color:var(--ink-55); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.catalog-featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:10px;
}

.catalog-featured-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:74px;
  padding:10px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-bg);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:transform var(--t) var(--e), border-color var(--t) var(--e), box-shadow var(--t) var(--e);
}

.catalog-featured-card:hover{transform:translateY(-1px); border-color:var(--accent-line); box-shadow:var(--shadow-sm);}
.catalog-featured-card.selected{border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent);}
.catalog-featured-card img{width:52px; height:58px; object-fit:cover; border-radius:var(--r-xs); background:var(--n-300);}
.catalog-featured-card strong{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.catalog-featured-card small{display:block; color:var(--ink-55); font-size:11px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.catalog-featured-card em{font-style:normal; font-size:10px; font-weight:800; color:var(--ink-55); text-transform:uppercase; letter-spacing:.08em;}
.catalog-featured-card.selected em{color:var(--color-accent);}

.model-size-block{
  display:grid;
  grid-template-columns:minmax(170px,.65fr) minmax(0,2fr);
  gap:18px;
  align-items:end;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

.model-size-block h5{margin:0 0 4px; font-family:var(--font-heading); font-weight:700; font-size:16px;}
.model-size-block p{margin:0; color:var(--ink-55); font-size:11px; line-height:1.45;}
.model-size-grid{display:grid; grid-template-columns:minmax(110px,.7fr) 80px minmax(105px,.7fr) minmax(105px,.7fr) minmax(165px,1fr); gap:10px; align-items:end;}
.model-size-grid .btn-primary{min-height:44px; margin:0; width:100%;}

.tamanho-grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(74px, 1fr));
  gap:8px;
}

.tamanho-box{
  background:var(--color-bg);
  border-radius:var(--r-sm);
  border:1px solid transparent;
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--t) var(--e);
}

.tamanho-box:hover{border-color:var(--color-accent);}
.tamanho-box.critico{background:var(--a-100);}
.tamanho-box.selecionado{border-color:var(--color-accent);}

.tamanho-box small{display:block; font-size:11px; color:var(--ink-55); margin-bottom:2px;}
.tamanho-box strong{font-family:var(--font-heading);font-weight:700; font-size:17px;}
.tamanho-box.critico strong{color:var(--a-800);}
/* Edicao aberta dentro do card do modelo */
.modelo-card .stock-edit{
  background:var(--color-bg);
  border-radius:var(--r-md);
  margin-top:12px;
  padding:18px;
}


.cart-discount-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:color-mix(in srgb, var(--color-surface) 70%, transparent);}
.cart-discount-box label{display:grid;gap:6px;font-size:11px;color:var(--ink-55);text-transform:uppercase;letter-spacing:.08em;}
.cart-discount-box input{width:100%;min-width:0;}
.cart-discount-box small{grid-column:1 / -1;font-size:11px;color:var(--ink-55);line-height:1.4;}
.cart-discount-box .discount-toggle{grid-column:1 / -1;display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--ink);text-transform:none;letter-spacing:normal;cursor:pointer;}
.cart-discount-box .discount-toggle input{width:auto;accent-color:var(--color-accent);cursor:pointer;}
/* Enquanto o desconto nao esta marcado os campos ficam escondidos (ja estao
   desligados de qualquer forma) e a sacola fica bem mais curta. */
.cart-discount-box:has(#discountEnabled:not(:checked)){grid-template-columns:1fr;}
.cart-discount-box:has(#discountEnabled:not(:checked)) > label:not(.discount-toggle),
.cart-discount-box:has(#discountEnabled:not(:checked)) > small{display:none;}
/* A peca escolhida ocupa a linha inteira: com a foto do lado nao sobra
   largura para o nome numa coluna so. */
#discountItemField{grid-column:1 / -1;}
.discount-item-pick{display:flex; align-items:center; gap:10px;}
.discount-item-pick img{
  flex:none;
  width:40px;
  height:50px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line-soft);
  background:var(--n-200);
}
.discount-item-pick select{flex:1 1 auto; min-width:0; width:100%;}
@media (max-width: 760px){.cart-discount-box{grid-template-columns:1fr;}}

/* ---- Combos e preco por quantidade -------------------------------------- */
.promo-form{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-bg);
}

.promo-form-head{display:grid; grid-template-columns:minmax(240px,1.2fr) minmax(200px,1fr); gap:12px;}
.promo-bloco{display:grid; gap:10px;}
/* `.hidden` nao e global neste projeto (so vale dentro de .checkout-form e do
   card de produto). Sem esta linha os dois formularios de promocao apareciam
   ao mesmo tempo. */
.promo-bloco.hidden{display:none;}
.promo-linha{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; align-items:end;}

.promo-form label{display:grid; gap:5px; min-width:0; font-size:10px; color:var(--ink-70); text-transform:uppercase; letter-spacing:.1em;}
.promo-form input,
.promo-form select{width:100%; min-width:0; min-height:44px; font-size:13.5px; letter-spacing:normal; text-transform:none; background:var(--color-surface);}
.promo-form .btn-primary{min-height:44px; margin-top:0; justify-self:start; padding-inline:26px;}

.promo-lista{display:grid; gap:10px; margin-top:16px;}

.promo-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  padding:13px 15px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--color-bg);
}

.promo-item-copy{display:grid; gap:3px; flex:1 1 220px; min-width:0;}
.promo-item-copy strong{font-size:14px; overflow-wrap:anywhere;}
.promo-item-copy small{color:var(--ink-55); font-size:11.5px; line-height:1.4;}
.promo-item-acoes{display:flex; gap:8px; flex:none; margin-left:auto;}
/* Desligada continua na lista, so que apagada: e para o dono ligar de novo na
   proxima campanha sem precisar cadastrar tudo outra vez. */
.promo-item.is-off{opacity:.55;}
.promo-item.is-off .promo-item-copy strong{text-decoration:line-through;}

/* Nome das promocoes que a sacola pegou — no balcao e no catalogo. */
.cart-promos{display:grid; gap:6px; margin-top:10px;}

.cart-promo-item{
  display:grid;
  gap:2px;
  padding:9px 11px;
  border-radius:var(--r-xs);
  border:1px dashed var(--g-500, var(--line-soft));
  background:color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.cart-promo-item strong{font-size:12.5px;}
.cart-promo-item small{color:var(--ink-55); font-size:11px; line-height:1.4;}

@media (max-width:760px){
  .promo-form-head{grid-template-columns:1fr;}
  .promo-item-acoes{margin-left:0; width:100%;}
  .promo-item-acoes button{flex:1;}
}

.welcome-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  background:var(--color-surface);
  border-radius:var(--r-md);
  padding:20px 24px;
  margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-sm);
}

.welcome-banner strong{font-family:var(--font-heading);font-weight:700; font-size:22px;}
.welcome-banner p{margin-top:4px; font-size:13.5px; color:var(--ink-55);}

.welcome-clock{text-align:right; flex:0 0 auto;}
.welcome-clock span{display:block; font-family:var(--font-heading); font-weight:700; font-size:26px; color:var(--color-accent); line-height:1.1;}
.welcome-clock small{font-size:11px; color:var(--ink-55); text-transform:uppercase; letter-spacing:.06em;}

.cloud-migrate-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  background:var(--a-100);
  border-radius:var(--r-md);
  padding:18px 22px;
  margin-bottom:var(--sp-4);
}

.cloud-migrate-banner strong{display:block; font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--a-800);}
.cloud-migrate-banner p{margin-top:4px; font-size:13px; color:var(--ink-70, var(--ink-55));}
.cloud-migrate-banner .btn-primary{flex:0 0 auto; white-space:nowrap;}

/* ----- Caixa do dia (abertura e fechamento) -----
   Fica no topo do Dashboard porque e a primeira e a ultima coisa do dia. */
.caixa-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  flex-wrap:wrap;
  background:var(--color-surface);
  border-radius:var(--r-md);
  border-left:4px solid var(--line-strong);
  padding:20px 24px;
  margin-bottom:var(--sp-3);
  box-shadow:var(--shadow-sm);
}
.caixa-panel.is-aberto{border-left-color:var(--ok);}
.caixa-status{flex:1 1 320px; min-width:0;}
.caixa-status h2{font-family:var(--font-heading);font-weight:700; font-size:21px; margin-top:2px;}
.caixa-status p{margin-top:4px; font-size:13.5px; color:var(--ink-55);}
.caixa-acoes{display:flex; flex-direction:column; gap:8px; flex:0 0 auto;}
.caixa-acoes .btn-primary{white-space:nowrap;}

.caixa-marcos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-top:14px;
}
.caixa-marcos > div{
  background:var(--wash-soft);
  border-radius:var(--r-xs);
  padding:10px 12px;
  min-width:0;
}
.caixa-marcos span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-55);}
.caixa-marcos strong{display:block; font-family:var(--font-heading); font-weight:700; font-size:19px; margin-top:2px;}
.caixa-marcos small{display:block; font-size:11.5px; color:var(--ink-55); margin-top:2px;}

.caixa-historico{margin-bottom:var(--sp-4);}
/* Titulos e datas miudos usam a fonte do texto, nao a de display. Caprasimo e
   uma fonte cheia: abaixo de ~16px ela fecha os buracos das letras, e no tema
   escuro o claro sobre o preto ainda engorda o traco — data e rotulo de bloco
   viravam borrao. A fonte de display fica so onde o corpo e grande. */
.caixa-historico h3{font-family:var(--font-body); font-size:14px; font-weight:700; margin-bottom:8px;}
.caixa-historico-lista{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px;}
.caixa-historico-item{
  display:grid;
  gap:2px;
  text-align:left;
  background:var(--color-surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xs);
  padding:10px 12px;
  cursor:pointer;
  transition:background var(--t) var(--e);
}
.caixa-historico-item:hover{background:var(--wash);}
.caixa-hist-data{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-55);}
.caixa-hist-valor{font-family:var(--font-heading);font-weight:700; font-size:17px;}
.caixa-hist-meta{font-size:11.5px; color:var(--ink-55);}
.caixa-hist-dif{font-size:12px; font-weight:600;}
.caixa-hist-dif.ok, .caixa-conferencia.ok{color:var(--ok);}
.caixa-hist-dif.sobra, .caixa-conferencia.sobra{color:var(--low);}
.caixa-hist-dif.falta, .caixa-conferencia.falta{color:var(--alert);}

/* ----- Janela de abrir/fechar e relatorio ----- */
.caixa-box{max-width:520px; width:100%;}
.caixa-form-body{padding:0 26px 4px; display:grid; gap:12px; overflow:auto;}
.caixa-form-hint{font-size:13px; color:var(--ink-55);}
.caixa-form-erro{font-size:13px; color:var(--alert); font-weight:600;}
.caixa-preview{
  background:var(--wash-soft);
  border-radius:var(--r-xs);
  padding:10px 12px;
  display:grid;
  gap:4px;
}
.caixa-linha{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13.5px;}
.caixa-linha span{color:var(--ink-55); min-width:0;}
.caixa-linha strong{white-space:nowrap;}
.caixa-linha-forte{border-top:1px solid var(--line-soft); padding-top:5px; margin-top:3px; font-weight:600;}
.caixa-linha-forte span{color:var(--color-text);}

.caixa-relatorio-box{max-width:720px; width:100%;}
.caixa-relatorio{padding:0 26px 6px; display:grid; gap:14px; overflow:auto;}
.caixa-rel-cabeca{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px;}
.caixa-rel-cabeca > div{background:var(--wash-soft); border-radius:var(--r-xs); padding:10px 12px; min-width:0;}
.caixa-rel-cabeca span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-55);}
.caixa-rel-cabeca strong{display:block; font-size:14.5px; font-weight:600; margin-top:2px;}
.caixa-rel-cabeca small{display:block; font-size:11.5px; color:var(--ink-55);}
.caixa-rel-colunas{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;}
.caixa-rel-bloco{border:1px solid var(--line-soft); border-radius:var(--r-xs); padding:12px 14px; display:grid; gap:5px; min-width:0;}
.caixa-rel-bloco h4{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-70); margin-bottom:5px;}
.caixa-rel-conferencia{background:var(--wash-soft);}
.caixa-conferencia{font-family:var(--font-heading);font-weight:700; font-size:19px; margin-top:8px;}
.caixa-rel-nota{font-size:11.5px; color:var(--ink-55);}
.caixa-rel-obs{font-size:13px;}

@media (max-width:720px){
  .caixa-panel{padding:16px 18px; align-items:stretch;}
  .caixa-acoes{flex-direction:row; flex-wrap:wrap; width:100%;}
  .caixa-acoes .btn-primary, .caixa-acoes .btn-mini{flex:1 1 auto;}
  .caixa-marcos{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));}
  .caixa-form-body, .caixa-relatorio{padding-left:16px; padding-right:16px;}
}

/* ----- Plano do sistema ----- */
.system-plan-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:16px;
  align-items:stretch;
}
.system-plan-main,
.system-plan-countdown,
.system-plan-kpi{
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}
.system-plan-main{
  min-height:260px;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  position:relative;
  overflow:hidden;
}
.system-plan-main::after{
  content:"";
  position:absolute;
  inset:auto -80px -100px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:color-mix(in srgb, var(--color-accent) 22%, transparent);
  filter:blur(18px);
  opacity:.7;
}
.system-plan-main h2{
  max-width:560px;
  font-family:var(--font-title);
  font-size:clamp(28px,3vw,44px);
  line-height:1;
  margin:0;
}
.system-plan-main p{
  max-width:520px;
  color:var(--ink-55);
  margin:0;
  line-height:1.55;
}
.system-plan-price{
  display:block;
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(34px,3.6vw,54px);
  line-height:1;
}
.system-plan-main small,
.system-plan-countdown small,
.system-plan-kpi small{
  color:var(--ink-55);
  line-height:1.45;
}
.system-plan-countdown{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.system-plan-status{
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  color:var(--g-700);
  background:var(--g-100);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.system-plan-grid.is-near .system-plan-status,
.system-plan-grid.is-today .system-plan-status{
  color:var(--a-800);
  background:var(--a-100);
  border-color:var(--accent-line);
}
.system-plan-countdown strong{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(54px,6vw,86px);
  line-height:.95;
}
.system-plan-progress{
  height:11px;
  border-radius:var(--r-pill);
  background:var(--wash);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.system-plan-progress span{
  display:block;
  width:var(--plan-progress, 0%);
  height:100%;
  border-radius:inherit;
  background:var(--color-accent);
  transition:width .35s ease;
}
.system-plan-countdown p{
  margin:0;
  color:var(--ink-55);
  line-height:1.45;
}
.system-plan-kpi{
  min-height:132px;
  padding:22px;
  display:grid;
  align-content:center;
  gap:8px;
}
.system-plan-kpi span{
  color:var(--ink-55);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.system-plan-kpi strong{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(20px,2vw,28px);
  line-height:1.08;
  overflow-wrap:anywhere;
}

@media (max-width:640px){
  .welcome-banner{flex-direction:column; align-items:flex-start; text-align:left;}
  .welcome-clock{text-align:left;}
  .cloud-migrate-banner{flex-direction:column; align-items:flex-start; text-align:left;}
  .system-plan-grid{grid-template-columns:1fr;}
  .system-plan-main,
  .system-plan-countdown,
  .system-plan-kpi{border-radius:var(--r-md);}
  .system-plan-main,
  .system-plan-countdown{padding:22px;}
  .system-plan-main{min-height:220px;}
}