/* ============================================================
   LOJINHA RAFISA — Estilos (Mobile-First)
   Paleta: rosa, lilas, tons pastel — fofa e alegre
   ============================================================ */
:root {
  --rosa: #ff6fb1;
  --rosa-escuro: #e84d96;
  --rosa-claro: #ffd6ea;
  --lilas: #b388eb;
  --lilas-claro: #e9dcff;
  --amarelo: #ffd166;
  --fundo: linear-gradient(160deg, #ffe3f1 0%, #f3e8ff 50%, #ffeef7 100%);
  --texto: #5b3a5e;
  --texto-suave: #9b7ba0;
  --branco: #ffffff;
  --sombra: 0 6px 20px rgba(232, 77, 150, 0.14);
  --raio: 20px;
}

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

html { font-size: 16px; }

body {
  font-family: "Quicksand", 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: "Baloo 2", cursive; }

.hidden { display: none !important; }

/* ---------- Cabecalho ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, var(--rosa) 0%, var(--lilas) 100%);
  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: #ffe3f1; }
.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: "Baloo 2", cursive;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(232, 77, 150, 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: "Baloo 2", cursive;
}

.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(232, 77, 150, 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: "Baloo 2", cursive;
}

.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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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(232, 77, 150, 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: "Baloo 2", cursive;
  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(232, 77, 150, 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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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: "Baloo 2", cursive;
  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(232, 77, 150, 0.35);
}

.din-valor-grande {
  font-family: "Baloo 2", cursive;
  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; }