/* ============================================================
   MAQUININHAKIDS — Estilos (Mobile-First)
   Paleta oficial da marca: magenta #FF007A, rosa suave #FF52A2,
   dourado #FFD166, ciano #00C6FF, royal #0066FF, ink #232243,
   lavanda #F6F4FF + gradiente #FF007A → #B13BFF → #0066FF
   Fontes: Fredoka (títulos) + Nunito (texto)
   ============================================================ */
:root {
  --rosa: #FF007A;
  --rosa-escuro: #C2005F;
  --rosa-claro: #FFC2DE;
  --rosa-suave: #FF52A2;
  --lilas: #0066FF;
  --lilas-claro: #C9ECFF;
  --ciano: #00C6FF;
  --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F6F4FF 0%, #FFEAF4 50%, #EAF6FF 100%);
  --texto: #232243;
  --texto-suave: #7A7799;
  --branco: #ffffff;
  --sombra: 0 6px 20px rgba(255, 0, 122, 0.14);
  --raio: 20px;
  --gradiente: linear-gradient(90deg, #FF007A 0%, #B13BFF 50%, #0066FF 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 16px; }

body {
  font-family: "Nunito", sans-serif;
  background: var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, .total-valor, .btn-gerar { font-family: "Fredoka", sans-serif; }

.hidden { display: none !important; }

/* ---------- Cabecalho ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gradiente);
  border-radius: 0 0 28px 28px;
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.header-text { flex: 1; }

.header-text h1 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header-text .raf { color: #FFC2DE; }
.header-text .isa { color: var(--amarelo); }

.header-text p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-link {
  font-size: 1.3rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Container ---------- */
.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Cards genericos ---------- */
.card {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
}

.card h2, .section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rosa-escuro);
  margin-bottom: 12px;
}

/* ---------- Cliente ---------- */
.cliente-card label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.cliente-card input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 14px;
  outline: none;
  background: #fffafd;
  transition: border-color 0.2s;
}

.cliente-card input:focus { border-color: var(--rosa); }

/* ---------- Produtos ---------- */
.lista-produtos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.produto-card {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 14px;
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.1s;
}

.produto-card:active { transform: scale(0.98); }

.produto-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.produto-emoji {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--rosa-claro), var(--lilas-claro));
  border-radius: 14px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.produto-nome {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.produto-preco {
  color: var(--rosa-escuro);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 2px;
}

.produto-obs {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.75rem;
}

.qtd-controle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.qtd-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Fredoka", sans-serif;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(255, 0, 122, 0.3);
  transition: transform 0.1s;
  user-select: none;
}

.qtd-btn:active { transform: scale(0.88); }

.qtd-btn.mais { background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro)); }
.qtd-btn.menos { background: linear-gradient(135deg, var(--lilas), #9a6fd8); }

.qtd-valor {
  min-width: 28px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: "Fredoka", sans-serif;
}

.dica {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  font-weight: 600;
  text-align: center;
}

/* ---------- Resumo ---------- */
.resumo-card { border: 2px dashed var(--rosa-claro); }

.resumo-itens .vazio {
  color: var(--texto-suave);
  font-weight: 600;
  text-align: center;
  padding: 8px 0;
  font-size: 0.9rem;
}

.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid #fde8f3;
}

.resumo-linha:last-child { border-bottom: none; }

.total-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--rosa-claro);
  font-weight: 800;
  font-size: 1.05rem;
}

.total-valor {
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--rosa-escuro), var(--lilas));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Botao Gerar ---------- */
.btn-gerar {
  width: 100%;
  padding: 18px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--rosa) 0%, var(--lilas) 100%);
  box-shadow: 0 8px 24px rgba(255, 0, 122, 0.4);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
  position: sticky;
  bottom: 14px;
}

.btn-gerar:active { transform: scale(0.97); }
.btn-gerar:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

/* ---------- Modal Pix ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(91, 58, 94, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
  overflow-y: auto;
}

.modal-card {
  background: var(--branco);
  border-radius: 26px;
  padding: 24px 20px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: surgir 0.3s ease;
  margin: auto;
}

@keyframes surgir {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-confete { font-size: 2.4rem; }

.modal-card h2 {
  color: var(--rosa-escuro);
  font-size: 1.3rem;
  margin: 6px 0 2px;
}

.modal-card h2 span { color: var(--lilas); }

.modal-sub {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.qrcode-box {
  background: #fff;
  border: 3px solid var(--rosa-claro);
  border-radius: 18px;
  padding: 14px;
  display: inline-block;
  margin-bottom: 14px;
}

.qrcode-box img, .qrcode-box canvas, .qrcode-box table { display: block; margin: 0 auto; }

.modal-total {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-total strong {
  color: var(--rosa-escuro);
  font-size: 1.5rem;
  font-family: "Fredoka", sans-serif;
}

.modal-itens {
  background: #fff5fa;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  max-height: 130px;
  overflow-y: auto;
}

.modal-linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.btn-copiar, .btn-novo {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  font-family: "Fredoka", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.12s;
}

.btn-copiar:active, .btn-novo:active { transform: scale(0.97); }

.btn-copiar {
  background: linear-gradient(90deg, var(--amarelo), #ffb347);
  color: #7a4a00;
}

.btn-novo {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  color: #fff;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 200;
  animation: surgir 0.25s ease;
  max-width: 90vw;
  text-align: center;
}

/* ============================================================
   AREA ADMINISTRATIVA
   ============================================================ */
.login-card {
  max-width: 360px;
  margin: 60px auto;
  text-align: center;
}

.login-card .cadeado { font-size: 3rem; }

.login-card h2 { margin: 8px 0 16px; }

.login-card input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.1rem;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  border: 2px solid var(--rosa-claro);
  border-radius: 14px;
  outline: none;
  margin-bottom: 12px;
}

.login-card input:focus { border-color: var(--rosa); }

.erro-login {
  color: #d6336c;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 10px;
}

.btn-admin {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  color: #fff;
  border: none;
  padding: 13px 22px;
  border-radius: 14px;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.painel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.painel-header h2 { margin: 0; }

.btn-sair {
  background: var(--lilas-claro);
  color: var(--texto);
  border: none;
  padding: 9px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}

.metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.metrica-card {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
  text-align: center;
}

.metrica-card .rotulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metrica-card .valor {
  font-family: "Fredoka", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--rosa-escuro);
  margin-top: 4px;
}

.itens-vendidos .item-contagem {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid #fde8f3;
}

.itens-vendidos .item-contagem:last-child { border-bottom: none; }
.itens-vendidos .item-contagem strong { color: var(--rosa-escuro); }

.tabela-wrap { overflow-x: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 560px;
}

.tabela th {
  text-align: left;
  padding: 10px 8px;
  color: var(--texto-suave);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--rosa-claro);
}

.tabela td {
  padding: 10px 8px;
  border-bottom: 1px solid #fde8f3;
  font-weight: 600;
  vertical-align: top;
}

.tabela .col-itens { max-width: 220px; }
.tabela .col-data { white-space: nowrap; }
.tabela .vazio { text-align: center; color: var(--texto-suave); padding: 18px; }

.status-select {
  border: none;
  border-radius: 50px;
  padding: 6px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  outline: none;
}

.status-pendente { background: #fff3cd; color: #997404; }
.status-pago { background: #d3f9d8; color: #2b8a3e; }
.status-entregue { background: var(--lilas-claro); color: #6c3fb5; }

.acoes-admin {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-exportar, .btn-limpar {
  flex: 1;
  min-width: 140px;
  padding: 13px;
  border: none;
  border-radius: 14px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-exportar { background: linear-gradient(90deg, #51cf66, #37b24d); color: #fff; }
.btn-limpar { background: #ffe3e3; color: #c92a2a; }

.btn-voltar {
  display: block;
  text-align: center;
  color: var(--rosa-escuro);
  font-weight: 700;
  text-decoration: none;
  padding: 10px;
  font-size: 0.9rem;
}

/* ---------- Telas maiores ---------- */
@media (min-width: 700px) {
  .container { max-width: 640px; }
  .header-text h1 { font-size: 1.7rem; }
}

/* ---------- Campos de nome do adesivo customizado ---------- */
.nomes-adesivos-wrap {
  background: #fff5fa;
  border: 2px dashed var(--rosa-claro);
  border-radius: var(--raio);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nomes-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--rosa-escuro);
}

.nome-adesivo-input {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}

.nome-adesivo-input:focus { border-color: var(--rosa); }

/* ============================================================
   MODAL DO RESUMO GRANDE (conferencia antes de gerar)
   ============================================================ */
.modal-resumo-card { max-width: 430px; }

.rg-cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--lilas-claro);
  border-radius: 14px;
  padding: 12px;
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.rg-cliente strong { color: var(--texto); }

.rg-itens {
  text-align: left;
  margin-bottom: 6px;
  max-height: 40vh;
  overflow-y: auto;
}

.rg-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid #fde8f3;
}

.rg-linha:last-child { border-bottom: none; }

.rg-linha span:last-child {
  color: var(--rosa-escuro);
  white-space: nowrap;
}

.rg-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 18px;
  padding: 14px 6px 0;
  border-top: 3px dashed var(--rosa-claro);
  font-weight: 800;
  font-size: 1.2rem;
}

.rg-total strong {
  font-family: "Fredoka", sans-serif;
  font-size: 2.2rem;
  background: linear-gradient(90deg, var(--rosa-escuro), var(--lilas));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-confirmar, .btn-voltar-edicao {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 16px;
  font-family: "Fredoka", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.12s, opacity 0.2s;
}

.btn-confirmar:active, .btn-voltar-edicao:active { transform: scale(0.97); }
.btn-confirmar:disabled { opacity: 0.5; }

.btn-confirmar {
  background: linear-gradient(90deg, #51cf66, #37b24d);
  color: #fff;
  box-shadow: 0 6px 18px rgba(55, 178, 77, 0.35);
}

.btn-voltar-edicao {
  background: var(--lilas-claro);
  color: var(--texto);
}

/* ============================================================
   EDITOR DE PRECOS (admin)
   ============================================================ */
.preco-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #fde8f3;
  font-weight: 600;
  font-size: 0.95rem;
}

.preco-linha:last-child { border-bottom: none; }

.preco-nome { flex: 1; min-width: 0; }

.preco-atual {
  font-weight: 800;
  color: var(--rosa-escuro);
  font-family: "Fredoka", sans-serif;
  font-size: 1.05rem;
}

.preco-input {
  width: 110px;
  padding: 9px 10px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  text-align: right;
  color: var(--texto);
  border: 2px solid var(--rosa);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
}

.btn-editar-preco, .btn-salvar-preco, .btn-cancelar-preco {
  border: none;
  background: var(--rosa-claro);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-salvar-preco { background: #d3f9d8; }
.btn-cancelar-preco { background: #ffe3e3; }

/* ============================================================
   AVISO ADESIVO CUSTOMIZADO (resumo e modal Pix)
   ============================================================ */
.rg-aviso {
  background: #fff8e1;
  border: 2px dashed var(--amarelo);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #7a4a00;
  text-align: left;
  margin-bottom: 14px;
  line-height: 1.35;
}

/* ============================================================
   FILTRO DE STATUS (admin)
   ============================================================ */
.filtro-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn-filtro {
  border: 2px solid var(--rosa-claro);
  background: #fff;
  color: var(--texto);
  border-radius: 50px;
  padding: 7px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-filtro.ativo {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  border-color: transparent;
  color: #fff;
}

.status-cancelado { background: #ffe3e3; color: #c92a2a; }

/* ============================================================
   SELETOR "NOME DO PAI" POR ITEM (admin)
   ============================================================ */
.modo-nome-select {
  border: 2px solid var(--lilas-claro);
  background: #fbf8ff;
  border-radius: 10px;
  padding: 7px 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--texto);
  cursor: pointer;
  outline: none;
  max-width: 130px;
}

.modo-nome-select:focus { border-color: var(--lilas); }

/* ============================================================
   MODAL DO NOME DO CLIENTE
   ============================================================ */
.modal-nome-card { max-width: 380px; }

.nome-modal-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 1.15rem;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--texto);
  border: 2px solid var(--rosa);
  border-radius: 14px;
  outline: none;
  background: #fffafd;
  margin-bottom: 14px;
}

.cliente-card input { cursor: pointer; caret-color: transparent; }

.rg-cliente-clicavel { cursor: pointer; }

.rg-editar-hint { font-size: 0.9rem; opacity: 0.7; }

/* ============================================================
   SEM SELECAO DE TEXTO (evita menu de copiar acidental no toque)
   — campos de texto continuam selecionáveis para digitar/editar
   ============================================================ */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ============================================================
   MODAL LIMPAR HISTORICO (2 etapas)
   ============================================================ */
.modal-limpar-card { max-width: 380px; }

.limpar-instrucao {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 12px;
}

.limpar-instrucao strong {
  color: #c92a2a;
  letter-spacing: 1px;
}

.limpar-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--texto);
  border: 2px solid #ffc9c9;
  border-radius: 14px;
  outline: none;
  background: #fffafa;
  margin-bottom: 12px;
}

.limpar-input:focus { border-color: #ff8787; }

.btn-perigo {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 16px;
  font-family: "Fredoka", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  background: linear-gradient(90deg, #ff8787, #e03131);
  color: #fff;
  box-shadow: 0 6px 18px rgba(224, 49, 49, 0.3);
  transition: transform 0.12s, opacity 0.2s;
}

.btn-perigo:active { transform: scale(0.97); }
.btn-perigo:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }

/* ============================================================
   BOTAO X PARA FECHAR MODAL
   ============================================================ */
.modal-card { position: relative; }

.modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
}

.modal-fechar:active { transform: scale(0.88); }

/* ============================================================
   AREA DOS PAPAIS — ABAS
   ============================================================ */
.abas {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  padding: 6px;
  border-radius: 16px;
}

.aba {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 6px;
  border-radius: 12px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.aba.ativa {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 122, 0.3);
}

.filtro-periodo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filtro-periodo + .filtro-status { margin-top: 10px; }
.filtro-periodo, .filtro-status { margin-bottom: 12px; }

/* ---------- Dashboard (aba Resumo) ---------- */
.metricas-status { grid-template-columns: 1fr 1fr; }

.metrica-card .sub-valor {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-top: 2px;
}

.metrica-card.st-emitidos .valor { color: var(--lilas); }
.metrica-card.st-pagos .valor { color: #2b8a3e; }
.metrica-card.st-entregues .valor { color: #1971c2; }
.metrica-card.st-cancelados .valor { color: #c92a2a; }

.h2-nota {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-suave);
}

/* ---------- Lista de pedidos (cabe no celular, sem rolagem) ---------- */
.lista-pedidos-admin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-vazia {
  text-align: center;
  color: var(--texto-suave);
  font-weight: 600;
  padding: 14px 0;
}

.pedido-item {
  background: #fffafd;
  border: 2px solid #fde8f3;
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.pedido-item:active { transform: scale(0.98); border-color: var(--rosa-claro); }

.pi-linha1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.pi-cliente {
  font-weight: 800;
  font-size: 1rem;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-linha2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pi-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.pi-valor {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--rosa-escuro);
}

.badge-status {
  flex-shrink: 0;
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---------- Modal de detalhe do pedido ---------- */
.det-status-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 6px;
  text-align: left;
}

.det-status-select {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 13px 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  text-align: center;
}

/* ============================================================
   VENDEDORAS
   ============================================================ */
.lista-vendedoras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}

.vendedora-chip {
  border: 2px solid var(--rosa-claro);
  background: #fff;
  color: var(--texto);
  border-radius: 50px;
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
}

.vendedora-chip.selecionada {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 122, 0.35);
}

.chip-nota { font-size: 0.75rem; opacity: 0.8; }

.rg-vendedoras {
  background: var(--lilas-claro);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--texto);
  text-align: center;
  margin-bottom: 12px;
}

/* ---------- Admin: cadastro de vendedoras ---------- */
.sub-abas { margin-bottom: 14px; }

.linha-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dica-inline { font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; }

.switch { position: relative; width: 54px; height: 30px; flex-shrink: 0; }
.switch input { display: none; }
.slider {
  position: absolute; inset: 0;
  background: #e9d5e8; border-radius: 50px;
  transition: background 0.2s; cursor: pointer;
}
.slider::before {
  content: ""; position: absolute;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.switch input:checked + .slider { background: linear-gradient(90deg, var(--rosa), var(--lilas)); }
.switch input:checked + .slider::before { transform: translateX(24px); }

.form-vendedora {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-vendedora input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
}

.form-vendedora input[type="text"]:focus { border-color: var(--rosa); }
.form-vendedora input:disabled { opacity: 0.45; }

.vendedora-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #fde8f3;
  font-weight: 600;
  flex-wrap: wrap;
}

.vendedora-linha:last-child { border-bottom: none; }

.vendedora-nome { flex: 1; min-width: 140px; }

.badge-tipo {
  background: var(--lilas-claro);
  color: #6c3fb5;
  border-radius: 50px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}

.badge-inativa { background: #ffe3e3; color: #c92a2a; }

.vendedora-acoes { display: flex; gap: 6px; }

.btn-mini {
  border: none;
  background: var(--rosa-claro);
  border-radius: 10px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--texto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.vend-edit-nome {
  flex: 1;
  min-width: 100px;
  padding: 9px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--texto);
  border: 2px solid var(--rosa);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
}

/* ---------- Admin: relatório de comissões ---------- */
.comissao-card { margin-bottom: 14px; }

.comissao-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.comissao-nome { font-weight: 800; font-size: 1.05rem; }

.comissao-total-wrap { text-align: right; flex-shrink: 0; }

.comissao-total {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #2b8a3e;
}

.comissao-acoes { margin-bottom: 10px; }

.comissao-vendas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comissao-venda {
  background: #fffafd;
  border: 2px solid #fde8f3;
  border-radius: 14px;
  padding: 10px 12px;
}

/* ---------- Página pública da vendedora ---------- */
.vend-ola { text-align: center; }

.vend-ola .vend-emoji { font-size: 3rem; }

.vend-ola h2 { color: var(--rosa-escuro); margin: 6px 0 2px; }

/* ============================================================
   COMISSAO GLOBAL (admin)
   ============================================================ */
.form-comissao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.form-comissao input {
  width: 110px;
  padding: 12px 14px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 800;
  text-align: center;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
}

.form-comissao input:focus { border-color: var(--rosa); }

.comissao-pct {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--rosa-escuro);
}

.form-comissao .btn-admin { flex: 1; }

/* ============================================================
   EDITAR VENDEDORAS NO DETALHE DO PEDIDO (admin)
   ============================================================ */
.det-vend-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.det-vend-linha .rg-vendedoras { flex: 1; margin-bottom: 0; }

/* ============================================================
   PAGAMENTOS DE COMISSAO / EXTRATO
   ============================================================ */
.comissao-totais {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tot-item {
  flex: 1;
  min-width: 90px;
  background: #fffafd;
  border: 2px solid #fde8f3;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}

.tot-valor {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--texto);
}

.tot-verde { color: #2b8a3e !important; }
.tot-destaque { color: var(--rosa-escuro) !important; }

.extrato-pagamento { background: #f0fff4 !important; border-color: #d3f9d8 !important; }

.valor-recebido { color: #2b8a3e !important; }

.metricas-3 { grid-template-columns: 1fr 1fr 1fr; }

.btn-pagar { background: #d3f9d8; }

.vend-edit-pix { flex: 1 1 100%; }

/* ============================================================
   BOTAO APAGAR VENDA (detalhe do pedido)
   ============================================================ */
.btn-apagar-venda {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 2px dashed #ffc9c9;
  background: #fffafa;
  color: #c92a2a;
  border-radius: 14px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-apagar-venda:active { background: #ffe3e3; }

/* ============================================================
   MEMORIA DE CALCULO DA COMISSAO + FIX DOS CARDS DE TOTAIS
   ============================================================ */
.memoria-comissao {
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: #fbf5ff;
  border-radius: 8px;
  padding: 5px 8px;
}

/* Cards de totais da vendedora: empilhados no celular (sem sobreposição),
   3 colunas só em telas largas */
.metricas-3 { grid-template-columns: 1fr !important; }

@media (min-width: 560px) {
  .metricas-3 { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ============================================================
   PERFIS DE ACESSO (admin / viewer)
   ============================================================ */
.badge-perfil {
  background: var(--amarelo);
  color: #7a4a00;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Modo só visualização: esconde ações de escrita e trava os seletores */
.modo-viewer .so-admin { display: none !important; }

.modo-viewer .status-select,
.modo-viewer .det-status-select,
.modo-viewer .modo-nome-select {
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================================
   ITENS VENDIDOS COM TOTAIS (qtd/vendido/pago/a receber)
   ============================================================ */
.itens-vendidos .item-contagem,
.itens-cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 0.5fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 7px 0;
  font-weight: 600;
  font-size: 0.82rem;
  border-bottom: 1px solid #fde8f3;
}

.itens-vendidos .item-contagem:last-child { border-bottom: none; }

.itens-cabecalho {
  color: var(--texto-suave);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--rosa-claro);
}

.col-num { text-align: right; white-space: nowrap; }

/* Dashboard com 3 cards */
.metricas-status { grid-template-columns: 1fr 1fr 1fr; }

.metricas-status .metrica-card .valor { font-size: 1.35rem; }
.metricas-status .metrica-card .sub-valor { font-size: 0.82rem; }

/* Viewer PODE mudar o status do pedido (única escrita permitida) —
   desfaz a trava só para os seletores de status */
.modo-viewer .status-select,
.modo-viewer .det-status-select {
  pointer-events: auto;
  opacity: 1;
}

/* ============================================================
   ABA RESULTADO + COMISSOES RECOLHIDAS
   ============================================================ */
.tot-negativo { color: #c92a2a !important; }

.comissao-toggle { cursor: pointer; }

.comissao-resumo-lado {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.comissao-seta {
  color: var(--rosa-escuro);
  font-size: 1rem;
  font-weight: 800;
}

.comissao-detalhe { margin-top: 10px; }

/* ============================================================
   CUSTO POR ITENS (modal) + SOCIAS EM DESTAQUE
   ============================================================ */
.custo-total-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fffafd;
  border: 2px dashed var(--rosa-claro);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  margin-bottom: 8px;
}

.custo-total-valor {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--rosa-escuro);
}

.custo-total-hint {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.custo-itens-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 35vh;
  overflow-y: auto;
  margin-bottom: 12px;
  text-align: left;
}

.custo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fffafd;
  border: 2px solid #fde8f3;
  border-radius: 12px;
  padding: 10px 12px;
}

.custo-item-info { flex: 1; min-width: 0; }
.custo-item-desc { font-weight: 700; font-size: 0.95rem; }

.custo-form { margin-bottom: 8px; }
.custo-form input,
.custo-edit-desc {
  width: 100%;
  padding: 11px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
  margin-bottom: 8px;
}

.custo-form-linha { display: flex; gap: 8px; }
.custo-form-linha input { margin-bottom: 0; }
.custo-form-linha input:first-child { max-width: 80px; text-align: center; }
.custo-form-linha .btn-admin { flex-shrink: 0; width: auto; padding: 11px 18px; }

/* Sócias: valores bem destacados */
.socia-linha { align-items: center; }

.socia-nome {
  font-weight: 800;
  font-size: 1.1rem;
}

.socia-valor {
  font-family: "Fredoka", sans-serif;
  font-size: 1.6rem !important;
  font-weight: 800;
}

/* Listas do Resultado (comissões e sócias) em formato linha */
#r-comissoes-lista .item-contagem,
#r-socias-lista .item-contagem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #fde8f3;
  font-weight: 600;
}

#r-comissoes-lista .item-contagem:last-child,
#r-socias-lista .item-contagem:last-child { border-bottom: none; }

/* ============================================================
   FORMA DE PAGAMENTO (resumo) + MODAL DINHEIRO
   ============================================================ */
.pagamento-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--texto-suave);
  text-align: center;
  margin-bottom: 8px;
}

.pagamento-opcoes {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.pagamento-opcao {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--rosa-claro);
  background: #fff;
  color: var(--texto);
  border-radius: 16px;
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.15s;
}

.pagamento-opcao.selecionada {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 122, 0.35);
}

.din-valor-grande {
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  background: linear-gradient(90deg, #2b8a3e, #51cf66);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}

.rg-total .badge-status { align-self: center; }

/* ============================================================
   EDITAR CLIENTE NO DETALHE DO PEDIDO
   ============================================================ */
.det-cliente-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--texto);
  border: 2px solid var(--rosa);
  border-radius: 10px;
  outline: none;
  background: #fff;
}

/* ============================================================
   COMPARTILHAR NO WHATSAPP + PIX COPIA E COLA VISÍVEL
   ============================================================ */
.btn-whatsapp {
  width: 100%;
  margin-top: 12px;
  padding: 13px 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(90deg, #25d366, #1da851);
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn-whatsapp:active { filter: brightness(0.92); }

/* Caixa com o código Pix Copia e Cola (somente leitura) */
.pix-payload {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 2px solid var(--lilas, #b197fc);
  border-radius: 12px;
  background: #f8f5ff;
  color: var(--texto, #333);
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  resize: none;
  outline: none;
  word-break: break-all;
}

/* ============================================================
   EDICAO COMPLETA DE PRODUTO (admin)
   ============================================================ */
.prod-edit-form { flex: 1; min-width: 0; }

.prod-edit-form input,
.prod-edit-form select {
  width: 100%;
  padding: 9px 10px;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 10px;
  outline: none;
  background: #fffafd;
  margin-bottom: 6px;
}

.prod-edit-form input:focus { border-color: var(--rosa); }

.prod-edit-form .custo-form-linha input { margin-bottom: 6px; }
.prod-edit-form .pe-preco { max-width: 110px; text-align: right; }
.prod-edit-form .pe-emoji { max-width: 80px; text-align: center; }

/* Sócias no Resultado: comissão + lucro + total */
.socia-detalhe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

/* ============================================================
   CAMPANHAS
   ============================================================ */
.badge-ativa { background: #d3f9d8; color: #2b8a3e; }

.campanha-copiar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.campanha-copiar input { width: 20px; height: 20px; }

/* ============================================================
   COMBO DE CAMPANHA NO TOPO
   ============================================================ */
.combo-campanha {
  max-width: 150px;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 50px;
  padding: 8px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 1;
  text-overflow: ellipsis;
}

.combo-campanha option { color: var(--texto); }

.combo-campanha-unica { pointer-events: none; opacity: 0.85; }

/* ============================================================
   SELETOR DE CAMPANHA (chip + roleta centralizada)
   ============================================================ */
.combo-campanha {
  max-width: 170px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 50px;
  padding: 9px 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s;
}

.combo-campanha:active { background: rgba(255, 255, 255, 0.4); }

.roleta-card { max-width: 340px; text-align: center; }

.roleta-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 45vh;
  overflow-y: auto;
  padding: 6px 2px 12px;
  margin-bottom: 10px;
  scroll-snap-type: y mandatory;
}

.roleta-item {
  scroll-snap-align: center;
  border: 2px solid var(--rosa-claro);
  background: #fffafd;
  color: var(--texto);
  border-radius: 18px;
  padding: 16px 12px;
  font-family: "Fredoka", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.15s;
}

.roleta-item:active { transform: scale(0.97); }

.roleta-item.selecionada {
  background: linear-gradient(90deg, var(--rosa), var(--lilas));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 0, 122, 0.35);
}

/* Resumo por campanha na aba Campanhas */
.campanha-card { margin-bottom: 14px; }

.campanha-resumo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.campanha-resumo .tot-item { flex: 1; min-width: 70px; }

/* Botão pequeno de perigo (excluir campanha) */
.btn-perigo-mini { background: #ffe3e3; color: #c92a2a; }

/* ============================================================
   FIX RESPONSIVIDADE + ESPAÇAMENTO GLOBAL ENTRE CARTÕES
   ============================================================ */

/* Barra de abas: rolagem horizontal suave no celular (nunca estoura a tela) */
.abas {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.abas::-webkit-scrollbar { display: none; }

.abas .aba {
  flex: 1 0 auto;
  white-space: nowrap;
  min-width: max-content;
  padding: 11px 14px;
}

/* Espaçamento mínimo padrão entre os cartões DENTRO das abas
   (estavam encostados no sistema inteiro) */
.aba-conteudo,
.subaba-conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* remover margens antigas agora desnecessárias */
.campanha-card, .comissao-card { margin-bottom: 0; }

/* ============================================================
   FORM DE PRODUTO ORGANIZADO (edição e novo) + SELETOR DE EMOJI
   ============================================================ */
.campo-form { margin-bottom: 10px; }

.campo-form label {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

.campo-form input,
.campo-form select {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.98rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
}

.campo-form input:focus, .campo-form select:focus { border-color: var(--rosa); }

.campo-form-linha { display: flex; gap: 10px; }
.campo-form-linha .campo-form { flex: 1; }

.btn-emoji-seletor {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--texto);
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  background: #fffafd;
  cursor: pointer;
  text-align: left;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  margin: 10px 0;
}

.emoji-op {
  border: 2px solid transparent;
  background: #fffafd;
  border-radius: 12px;
  font-size: 1.5rem;
  padding: 8px 0;
  cursor: pointer;
  transition: all 0.1s;
}

.emoji-op:active, .emoji-op:hover { border-color: var(--rosa-claro); background: var(--rosa-claro); }

/* ============================================================
   FIX 2 — gap entre os cartões das LISTAS + valores sem estouro
   ============================================================ */
#lista-campanhas,
#lista-comissoes,
#lista-comissoes-socias {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* totais: 2×2 no celular (cabe sem estourar), 4 colunas em telas largas */
.campanha-resumo,
.comissao-totais {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.campanha-resumo .tot-valor,
.comissao-totais .tot-valor {
  font-size: 1rem;
  word-break: break-word;
}

@media (min-width: 560px) {
  .campanha-resumo,
  .comissao-totais { grid-template-columns: repeat(4, 1fr); }
}

/* grade de emojis maior cabe melhor */
.emoji-grid { max-height: 50vh; }

/* Modal "o que copiar?" da nova campanha */
.copiar-opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: #fff5fa;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

/* ============================================================
   SELETOR DE EMOJI COM ABAS DE CATEGORIA (estilo teclado)
   ============================================================ */
.emoji-modal { max-width: 420px; }

.emoji-abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid #fde8f3;
}

.emoji-abas::-webkit-scrollbar { display: none; }

.emoji-aba {
  flex-shrink: 0;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.12s;
}

.emoji-aba.ativa {
  opacity: 1;
  background: var(--lilas-claro);
}

/* ============================================================
   COMEMORAÇÃO AO GERAR O PEDIDO (4 animações aleatórias)
   ============================================================ */
.celebracao {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}

/* 1) Confete caindo */
.confete {
  position: absolute;
  top: -4vh;
  width: 10px;
  height: 16px;
  opacity: 0.95;
  animation: confete-cair linear forwards;
}

@keyframes confete-cair {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}

/* 2) Bichinho fofinho pulando no centro */
.bichinho {
  position: absolute;
  left: 50%;
  top: 42vh;
  transform: translateX(-50%);
  font-size: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bichinho-pula 0.55s ease-in-out infinite alternate;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.bichinho-texto {
  font-family: "Fredoka", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(255, 0, 122, 0.6);
}

@keyframes bichinho-pula {
  from { transform: translateX(-50%) translateY(0) rotate(-6deg); }
  to { transform: translateX(-50%) translateY(-60px) rotate(6deg); }
}

.faisca {
  position: absolute;
  font-size: 1.4rem;
  animation: faisca-pisca 0.8s ease-in-out infinite alternate;
}

@keyframes faisca-pisca {
  from { transform: scale(0.6); opacity: 0.4; }
  to { transform: scale(1.3); opacity: 1; }
}

/* 3) Corações subindo */
.coracao-sobe {
  position: absolute;
  bottom: -6vh;
  animation: coracao-subir linear forwards;
}

@keyframes coracao-subir {
  from { transform: translateY(0) rotate(-8deg); opacity: 0.95; }
  to { transform: translateY(-115vh) rotate(10deg); opacity: 0; }
}

/* 4) Explosão de estrelas do centro */
.estrela-explode {
  position: absolute;
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
  animation: estrela-explodir 1.6s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}

@keyframes estrela-explodir {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.4); opacity: 0; }
}

/* ============================================================
   FIX ABAS: quebram em 2 linhas quando não couberem
   (funciona com mouse no PC e com touch no celular)
   ============================================================ */
.abas {
  flex-wrap: wrap;
  overflow-x: visible;
}

.abas .aba {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Entrar (conta do responsável + escolha da loja) ---------- */
.entrar-abas {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.entrar-aba {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--rosa-claro);
  border-radius: 14px;
  background: var(--branco);
  color: var(--texto-suave);
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.entrar-aba.ativa {
  background: var(--gradiente);
  border-color: transparent;
  color: #fff;
}

.entrar-form { display: flex; flex-direction: column; gap: 10px; }

.entrar-divisor {
  text-align: center;
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 16px 0 10px;
}

.lista-lojas { max-height: none; overflow: visible; }

.loja-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.loja-mascote {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.mascote-escolha {
  display: flex;
  gap: 10px;
}

.mascote-opcao {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 3px solid var(--rosa-claro);
  border-radius: 16px;
  background: var(--branco);
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}

.mascote-opcao img {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
}

.mascote-opcao.selecionada {
  border-color: var(--rosa);
  box-shadow: var(--sombra);
}

.entrar-sair {
  display: block;
  margin: 12px auto 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Assistente de onboarding (F2) */
.entrar-progresso {
  text-align: center;
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.entrar-ajuda {
  background: #F6F4FF;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

.entrar-ajuda strong { color: var(--texto); }

.entrar-link {
  display: block;
  margin: 10px auto 0;
  border: none;
  background: none;
  color: var(--rosa);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Dica de boas-vindas no caixa (logo após o onboarding) */
.aviso-bemvindo {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: 92vw;
  background: var(--gradiente);
  color: #fff;
  padding: 12px 18px;
  border-radius: 16px;
  box-shadow: var(--sombra);
  font-weight: 700;
  text-align: center;
  z-index: 60;
  cursor: pointer;
}

/* ---------- Indicador de limite do plano no caixa (F3) ---------- */
.chip-limite {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--rosa-claro);
}

.chip-limite-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--texto-suave);
  margin-bottom: 6px;
  text-align: center;
}

.chip-limite-barra {
  height: 10px;
  border-radius: 999px;
  background: #F0EDFF;
  overflow: hidden;
}

.chip-limite-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradiente);
  transition: width 0.4s ease;
}

/* 80%: alerta dourado; 100%: lotado (magenta pulsando) */
.chip-limite.alerta .chip-limite-label { color: #B8860B; }
.chip-limite.alerta .chip-limite-fill { background: var(--amarelo); }
.chip-limite.cheio .chip-limite-label { color: var(--rosa); }
.chip-limite.cheio .chip-limite-fill { background: var(--rosa); animation: pulsar 1.2s ease-in-out infinite; }

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.limite-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 12px;
}

/* ---------- Admin: assinatura e upsell de plano (F3) ---------- */
.upsell-card { text-align: center; }
.upsell-card .btn-admin { margin-top: 10px; }

.assinatura-plano {
  font-family: "Fredoka", sans-serif;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.assinatura-linha {
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.92rem;
  margin: 4px 0;
}

.assinatura-atual { margin-bottom: 14px; }

/* Billing Pix (F4) */
.assinatura-pendente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #FFF7E0;
  border: 2px solid var(--amarelo);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.assinatura-preco {
  font-family: "Fredoka", sans-serif;
  font-size: 1.1rem;
  color: var(--rosa-escuro);
  margin: 8px 0 12px;
}

#select-plano, #select-periodo { margin-bottom: 8px; }

.troca-manual { margin-top: 14px; }
.troca-manual summary {
  cursor: pointer;
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.85rem;
}
.troca-manual .btn-admin { margin-top: 8px; }

#billing-qr {
  width: 220px;
  height: 220px;
  border-radius: 12px;
}


/* ============================================================
   TEMAS DA LOJA (F4b) — 16 paletas. A loja escolhe <html data-tema="N">
   e todas as variáveis mudam (header, botões, cards, gradientes).
   Tema 1 = oficial (padrão no :root).
   ============================================================ */
html[data-tema="2"] { /* Royal */
  --rosa: #0066FF; --rosa-escuro: #004FC4; --rosa-claro: #BFD9FF; --rosa-suave: #4D94FF;
  --lilas: #FF007A; --lilas-claro: #FFD6EA; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F6F4FF 0%, #E3EEFF 50%, #EAF6FF 100%);
  --sombra: 0 6px 20px rgba(0, 102, 255, 0.16);
  --gradiente: linear-gradient(90deg, #0066FF 0%, #00C6FF 50%, #FF007A 100%);
}
html[data-tema="3"] { /* Oceano */
  --rosa: #00C6FF; --rosa-escuro: #0096C7; --rosa-claro: #C9ECFF; --rosa-suave: #5AD9FF;
  --lilas: #0066FF; --lilas-claro: #C9ECFF; --ciano: #0066FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F0FBFF 0%, #DDF3FF 50%, #EAF6FF 100%);
  --sombra: 0 6px 20px rgba(0, 198, 255, 0.18);
  --gradiente: linear-gradient(90deg, #00C6FF 0%, #00A3FF 50%, #0066FF 100%);
}
html[data-tema="4"] { /* Roxo encantado */
  --rosa: #B13BFF; --rosa-escuro: #8A1FD1; --rosa-claro: #E8CCFF; --rosa-suave: #C973FF;
  --lilas: #FF007A; --lilas-claro: #FFD6EA; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F6F4FF 0%, #F0E3FF 50%, #FFEAF4 100%);
  --sombra: 0 6px 20px rgba(177, 59, 255, 0.18);
  --gradiente: linear-gradient(90deg, #B13BFF 0%, #D24DFF 50%, #FF007A 100%);
}
html[data-tema="5"] { /* Verde vitrine */
  --rosa: #22C55E; --rosa-escuro: #15803D; --rosa-claro: #C9F2D8; --rosa-suave: #5ADB8A;
  --lilas: #0066FF; --lilas-claro: #D6E6FF; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F4FFF8 0%, #E3F8EB 50%, #EAF6FF 100%);
  --sombra: 0 6px 20px rgba(34, 197, 94, 0.18);
  --gradiente: linear-gradient(90deg, #22C55E 0%, #00C6FF 50%, #0066FF 100%);
}
html[data-tema="6"] { /* Laranja pôr do sol */
  --rosa: #FF8A00; --rosa-escuro: #CC6E00; --rosa-claro: #FFE3B8; --rosa-suave: #FFAB4D;
  --lilas: #FF007A; --lilas-claro: #FFD6EA; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FFFAF0 0%, #FFEED3 50%, #FFEAF4 100%);
  --sombra: 0 6px 20px rgba(255, 138, 0, 0.18);
  --gradiente: linear-gradient(90deg, #FF8A00 0%, #FF5C4D 50%, #FF007A 100%);
}
html[data-tema="7"] { /* Moranguinho */
  --rosa: #EF4444; --rosa-escuro: #B91C1C; --rosa-claro: #FFD2D2; --rosa-suave: #F47171;
  --lilas: #FF8A00; --lilas-claro: #FFE3B8; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FFF5F5 0%, #FFE3E3 50%, #FFF3E0 100%);
  --sombra: 0 6px 20px rgba(239, 68, 68, 0.18);
  --gradiente: linear-gradient(90deg, #EF4444 0%, #FF6B6B 50%, #FF8A00 100%);
}
html[data-tema="8"] { /* Rosa chiclete */
  --rosa: #FF52A2; --rosa-escuro: #D12E7E; --rosa-claro: #FFD6EA; --rosa-suave: #FF85BC;
  --lilas: #B13BFF; --lilas-claro: #E8CCFF; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FFF5FA 0%, #FFE0EF 50%, #F3E8FF 100%);
  --sombra: 0 6px 20px rgba(255, 82, 162, 0.18);
  --gradiente: linear-gradient(90deg, #FF52A2 0%, #FF7BC0 50%, #B13BFF 100%);
}
html[data-tema="9"] { /* Dourado real */
  --rosa: #E5A800; --rosa-escuro: #B8860B; --rosa-claro: #FFF0C2; --rosa-suave: #FFD166;
  --lilas: #FF007A; --lilas-claro: #FFD6EA; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FFFCF0 0%, #FFF4CC 50%, #FFEAF4 100%);
  --sombra: 0 6px 20px rgba(229, 168, 0, 0.20);
  --gradiente: linear-gradient(90deg, #FFD166 0%, #FF9E4D 50%, #FF007A 100%);
}
html[data-tema="10"] { /* Turquesa */
  --rosa: #14B8A6; --rosa-escuro: #0F766E; --rosa-claro: #C2F0EA; --rosa-suave: #4DD0C3;
  --lilas: #0066FF; --lilas-claro: #D6E6FF; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F0FDFB 0%, #D3F5F0 50%, #EAF6FF 100%);
  --sombra: 0 6px 20px rgba(20, 184, 166, 0.18);
  --gradiente: linear-gradient(90deg, #14B8A6 0%, #00C6FF 50%, #0066FF 100%);
}
html[data-tema="11"] { /* Menta */
  --rosa: #10B981; --rosa-escuro: #047857; --rosa-claro: #C9F5E3; --rosa-suave: #4DD6A6;
  --lilas: #00C6FF; --lilas-claro: #C9ECFF; --ciano: #0066FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F2FFFA 0%, #DFF9EE 50%, #E3F4FF 100%);
  --sombra: 0 6px 20px rgba(16, 185, 129, 0.18);
  --gradiente: linear-gradient(90deg, #10B981 0%, #34D399 50%, #00C6FF 100%);
}
html[data-tema="12"] { /* Coral */
  --rosa: #FF6B6B; --rosa-escuro: #D64545; --rosa-claro: #FFDBDB; --rosa-suave: #FF9090;
  --lilas: #FF8A00; --lilas-claro: #FFE3B8; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FFF7F5 0%, #FFE8E5 50%, #FFF6E0 100%);
  --sombra: 0 6px 20px rgba(255, 107, 107, 0.18);
  --gradiente: linear-gradient(90deg, #FF6B6B 0%, #FF8A5C 50%, #FFD166 100%);
}
html[data-tema="13"] { /* Violeta pop */
  --rosa: #7C3AED; --rosa-escuro: #5B21B6; --rosa-claro: #E2D4FB; --rosa-suave: #9F6BF2;
  --lilas: #EC4899; --lilas-claro: #FBD3E6; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F8F5FF 0%, #EDE4FC 50%, #FDEAF4 100%);
  --sombra: 0 6px 20px rgba(124, 58, 237, 0.18);
  --gradiente: linear-gradient(90deg, #7C3AED 0%, #A855F7 50%, #EC4899 100%);
}
html[data-tema="14"] { /* Lima elétrica */
  --rosa: #84CC16; --rosa-escuro: #4D7C0F; --rosa-claro: #E4F5C2; --rosa-suave: #A3E635;
  --lilas: #00C6FF; --lilas-claro: #C9ECFF; --ciano: #0066FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #FBFFF0 0%, #EFF9D4 50%, #EAF6FF 100%);
  --sombra: 0 6px 20px rgba(132, 204, 22, 0.20);
  --gradiente: linear-gradient(90deg, #A3E635 0%, #4DD6A6 50%, #00C6FF 100%);
}
html[data-tema="15"] { /* Céu de verão */
  --rosa: #38BDF8; --rosa-escuro: #0284C7; --rosa-claro: #CDEFFF; --rosa-suave: #6FD0FA;
  --lilas: #818CF8; --lilas-claro: #DEE1FD; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F2FAFF 0%, #DDF0FF 50%, #EBEBFF 100%);
  --sombra: 0 6px 20px rgba(56, 189, 248, 0.18);
  --gradiente: linear-gradient(90deg, #38BDF8 0%, #6FA8FA 50%, #818CF8 100%);
}
html[data-tema="16"] { /* Noite estrelada */
  --rosa: #4C4A8C; --rosa-escuro: #232243; --rosa-claro: #D6D5F0; --rosa-suave: #7A7799;
  --lilas: #B13BFF; --lilas-claro: #E8CCFF; --ciano: #00C6FF; --amarelo: #FFD166;
  --fundo: linear-gradient(160deg, #F6F4FF 0%, #E6E4F8 50%, #F0E3FF 100%);
  --sombra: 0 6px 20px rgba(35, 34, 67, 0.22);
  --gradiente: linear-gradient(90deg, #232243 0%, #6C3BD9 50%, #B13BFF 100%);
}

/* ---------- Personalização da loja (modal/aba — F4b) ---------- */
.temas-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}

.tema-op {
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 6px;
  background: var(--branco);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.tema-op .tema-amostra {
  width: 100%;
  height: 30px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.tema-op.selecionada {
  border-color: var(--rosa);
  box-shadow: var(--sombra);
  color: var(--texto);
}

.logo-abas { display: flex; gap: 8px; margin-bottom: 12px; }

.logo-aba {
  flex: 1;
  padding: 8px;
  border: 2px solid var(--rosa-claro);
  border-radius: 12px;
  background: var(--branco);
  color: var(--texto-suave);
  font-family: "Fredoka", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.logo-aba.ativa { background: var(--gradiente); border-color: transparent; color: #fff; }

.logo-opcoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.logo-op {
  position: relative;
  border: 3px solid var(--rosa-claro);
  border-radius: 14px;
  background: var(--branco);
  padding: 6px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-op img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.logo-op .logo-emoji-grande { font-size: 2rem; }
.logo-op.selecionada { border-color: var(--rosa); box-shadow: var(--sombra); }

.logo-op .cadeado-premium {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(35, 34, 67, 0.55);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.logo-op .cadeado-premium small { font-size: 0.6rem; padding: 0 4px; text-align: center; }

.header-logo-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background: #fff;
}

.aviso-premium {
  background: #FFF7E0;
  border: 2px solid var(--amarelo);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 10px;
}

.perso-titulo {
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  color: var(--rosa-escuro);
  margin: 14px 0 8px;
}

.perso-salvar { width: 100%; margin-top: 6px; }

/* ---------- Meu cantinho (criança — F5) ---------- */
.convite-info { text-align: center; margin-bottom: 14px; line-height: 1.5; }
.convite-mascote {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  object-fit: cover;
  border: 3px solid var(--rosa-claro);
  box-shadow: var(--sombra);
  margin-bottom: 10px;
}
.crianca-papel { text-align: center; color: var(--texto-suave); font-weight: 700; margin: 6px 0 14px; }
.crianca-caixa { display: block; text-align: center; text-decoration: none; }
.metricas .valor { font-size: 1.05rem; }

/* ---------- Gamificação (F6): upsell completo + selos ---------- */
.limite-mascote {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  object-fit: cover;
  border: 3px solid var(--rosa-claro);
  box-shadow: var(--sombra);
  margin: 0 auto 10px;
  display: block;
}

.limite-plano-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #F6F4FF;
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
  text-align: left;
}

.limite-plano-card img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.limite-plano-info strong { display: block; margin-bottom: 4px; }
.limite-plano-info p { font-size: 0.82rem; color: var(--texto-suave); font-weight: 700; margin: 0; }
.limite-precos { color: var(--rosa-escuro) !important; margin-top: 4px !important; }

.chip-selos {
  display: block;
  margin: 10px auto 0;
  border: 2px solid var(--amarelo);
  background: #FFF7E0;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--texto);
  cursor: pointer;
}

.trilha-selos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }

.selo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
}

.selo-item.desbloqueado {
  background: linear-gradient(90deg, #FFF7E0, #FFEAF4);
  border: 2px solid var(--amarelo);
}

.selo-item.bloqueado {
  background: #F4F3FA;
  border: 2px dashed #D6D5E8;
  opacity: 0.75;
}

.selo-icone { font-size: 1.8rem; }
.selo-item.bloqueado .selo-icone { filter: grayscale(1); }
.selo-info strong { display: block; font-size: 0.95rem; }
.selo-info small { color: var(--texto-suave); font-weight: 700; }

/* Admin: card de conquistas + banner de upgrade */
.banner-limite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--gradiente);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  margin-bottom: 14px;
}

.banner-limite .btn-admin {
  background: #fff;
  color: var(--rosa-escuro);
  flex-shrink: 0;
}

/* ---------- LGPD (F9): aceite e páginas legais ---------- */
.aceite-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texto-suave);
  line-height: 1.4;
}

.aceite-linha input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--rosa); }
.aceite-linha a { color: var(--rosa); }

.legal-doc h3 {
  font-family: "Fredoka", sans-serif;
  color: var(--rosa-escuro);
  font-size: 1rem;
  margin: 18px 0 6px;
}

.legal-doc p { font-size: 0.92rem; line-height: 1.6; margin-bottom: 8px; }
.legal-doc .btn-voltar { margin-top: 16px; display: inline-block; }

/* ---------- Pivot: nível (E1), perfis (E3), crianças da conta (E4) ---------- */
.nivel-atual-linha { display: flex; align-items: center; gap: 10px; }
.nivel-icone { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }

.nivel-trilha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.nivel-item {
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  background: #F4F3FA;
  border: 2px dashed #D6D5E8;
}

.nivel-item img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; margin-bottom: 4px; }
.nivel-item strong { display: block; font-size: 0.82rem; }
.nivel-item small { color: var(--texto-suave); font-weight: 700; font-size: 0.68rem; }

.nivel-item.desbloqueado {
  background: linear-gradient(90deg, #FFF7E0, #FFEAF4);
  border: 2px solid var(--amarelo);
  border-style: solid;
}

.nivel-item.atual { border-color: var(--rosa); box-shadow: var(--sombra); }
.nivel-item.bloqueado img { filter: grayscale(1); opacity: 0.7; }

/* Login por perfis (E3) */
.perfis-loja {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.perfil-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 3px solid var(--rosa-claro);
  border-radius: 16px;
  background: var(--branco);
  padding: 10px 14px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
}

.perfil-chip .perfil-avatar { font-size: 1.6rem; }
.perfil-chip .perfil-nome { font-weight: 800; font-size: 0.85rem; }
.perfil-chip small { color: var(--texto-suave); font-weight: 700; font-size: 0.68rem; }
.perfil-chip.selecionado { border-color: var(--rosa); box-shadow: var(--sombra); }

/* Crianças da conta na tela de lojas (E4) */
.crianca-linha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2px solid var(--rosa-claro);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  text-align: left;
}

.crianca-vinculo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crianca-vinculo select { flex: 1; min-width: 110px; }