/* ==========================================================================
   CATÁLOGO DE CESTINHAS — folha de estilo única
   Tudo comentado em português. Mobile-first: o padrão é o celular,
   e no final do arquivo estão os ajustes para telas maiores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PALETA DA MARCA (definida pela dona da loja — não trocar sem falar com ela)
   -------------------------------------------------------------------------- */
:root {
  --cor-fundo: #f0ede4;           /* creme — fundo da página */
  --cor-superficie: #faf8f3;      /* cards das cestinhas */
  --cor-primaria: #b27a45;        /* caramelo — marca, ícones, detalhes */
  --cor-primaria-escura: #96633a; /* botões com texto branco e hover */
  --cor-primaria-suave: #e8dccb;  /* tags, fundos de destaque, bordas suaves */
  --cor-texto: #3a2e23;           /* marrom escuro — todo texto de leitura */
  --cor-texto-suave: #6d5c4a;     /* texto secundário, legendas */
  --cor-borda: #ddd4c5;

  /* Cores de estado do painel financeiro. Escolhidas por calculo, nao no olho:
     verde x vermelho e o par que mais falha para daltonicos. Este par tem
     separacao 13.4 em deuteranopia (o alvo e 8) e contraste 4.9:1 e 10.5:1
     sobre o creme. Ainda assim a cor NUNCA vai sozinha: sempre acompanha
     sinal, icone e a palavra "Lucro" ou "Prejuizo". */
  --cor-positivo: #3f7a3a;
  --cor-negativo: #6b2419;

  /* Cantos arredondados */
  --raio: 16px;
  --raio-p: 10px;

  /* Sombras quentes (marrom com opacidade baixa — nunca cinza-azulado) */
  --sombra: 0 1px 2px rgba(58, 46, 35, .05), 0 6px 18px rgba(58, 46, 35, .07);
  --sombra-forte: 0 10px 34px rgba(58, 46, 35, .16);

  /* Tipografia: fonte com personalidade nos títulos, legível no corpo.
     Sempre com fallback do sistema, caso o Google Fonts não carregue. */
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --largura: 1080px;

  /* Tema claro único — sem modo escuro. O creme é a identidade da marca. */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2) RESET E BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cor-primaria-escura); }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-texto);
  line-height: 1.2;
  margin: 0 0 .4em;
  font-weight: 700;
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 18px;
}

.escondido { display: none !important; }

/* Texto visível só para leitores de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3) CABEÇALHO
   -------------------------------------------------------------------------- */
.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 30;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  text-decoration: none;
  color: var(--cor-texto);
  min-width: 0;
}

.marca__logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-primaria-suave);
  flex: 0 0 auto;
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cor-primaria);   /* título grande em caramelo: permitido */
  line-height: 1.15;
  /* Deixa o nome quebrar em até 2 linhas em vez de cortar com "..."
     (min-width:0 é o que permite ao flex encolher o bloco e quebrar a linha) */
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu { display: flex; gap: 6px; flex: 0 0 auto; }

/* padding generoso: no celular o dedo precisa de pelo menos 44px de altura */
.menu a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 999px;
}

.menu a:hover { background: var(--cor-primaria-suave); color: var(--cor-texto); }
.menu a[aria-current="page"] { background: var(--cor-primaria-suave); color: var(--cor-texto); }

/* --------------------------------------------------------------------------
   4) APRESENTAÇÃO DA VITRINE
   -------------------------------------------------------------------------- */
.apresentacao {
  padding: 30px 0 6px;
  text-align: center;
}

.apresentacao h1 {
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  color: var(--cor-primaria);   /* título grande — área grande, ok em caramelo */
  margin-bottom: .25em;
}

.apresentacao p {
  color: var(--cor-texto-suave);
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.02rem;
}

/* Filigrana decorativa entre o título e a grade */
.enfeite {
  display: block;
  margin: 18px auto 6px;
  width: 78px;
  height: 10px;
  color: var(--cor-primaria);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   5) BUSCA E FILTROS
   -------------------------------------------------------------------------- */
.filtros {
  display: grid;
  gap: 10px;
  margin: 22px 0 8px;
}

.campo-busca { position: relative; }

.campo-busca svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--cor-primaria);
  pointer-events: none;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="search"] { padding-left: 42px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(178, 122, 69, .18);
}

textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

/* Campo de subir foto. Sem isto o navegador desenha um controle cru de 21px
   de altura — dificil de acertar no celular e destoando do resto do painel. */
input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 11px 12px;
}

input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: #fff;
  background: var(--cor-primaria-escura);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  margin-right: 12px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #7f5330; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b27a45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

/* Chips de categoria */
.categorias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}

.chip:hover { border-color: var(--cor-primaria); color: var(--cor-texto); }

.chip[aria-pressed="true"] {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: #fff;
}

.contagem {
  color: var(--cor-texto-suave);
  font-size: .85rem;
  margin: 4px 0 14px;
}

/* --------------------------------------------------------------------------
   6) GRADE DE CESTINHAS
   -------------------------------------------------------------------------- */
.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 0 40px;
  list-style: none;
  margin: 0;
}

/* Faz o cartão ocupar toda a altura da linha, para os preços ficarem
   alinhados mesmo quando um nome ocupa duas linhas e o outro só uma. */
.grade > li { display: flex; }
.grade > li > .cartao { width: 100%; }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.cartao:active { transform: translateY(0); }

/* Proporção fixa: a vitrine nunca desalinha, mesmo com fotos de tamanhos diferentes */
.cartao__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cor-primaria-suave);
  overflow: hidden;
}

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

.cartao__corpo {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.cartao__categoria {
  font-size: .75rem;   /* 12px: abaixo disso fica dificil de ler no celular */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.cartao__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

.cartao__preco {
  margin-top: auto;
  padding-top: 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-primaria);   /* preço em destaque: caramelo, grande e negrito */
  font-family: var(--fonte-titulo);
}

.cartao__preco small {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .68rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Selo de destaque */
.selo {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(250, 248, 243, .94);
  color: var(--cor-primaria-escura);
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 4px;
}

/* Foto ausente: placeholder bonito na paleta da marca (nunca imagem quebrada) */
.foto-vazia {
  width: 100%; height: 100%;
  background-color: var(--cor-primaria-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b27a45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h36l-3.4 20.2A4 4 0 0 1 34.6 41.6H13.4A4 4 0 0 1 9.4 38.2z'/%3E%3Cpath d='M15.5 18 24 6l8.5 12'/%3E%3Cpath d='M18 25v9M24 25v9M30 25v9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
}

/* Esqueleto enquanto os dados e as fotos carregam */
.esqueleto {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-p);
  position: relative;
  overflow: hidden;
}

.esqueleto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: brilho 1.4s infinite;
}

@keyframes brilho { 100% { transform: translateX(100%); } }

.cartao-esqueleto { pointer-events: none; }
.cartao-esqueleto .linha { height: 12px; margin-bottom: 8px; }
.cartao-esqueleto .linha.curta { width: 55%; }

@media (prefers-reduced-motion: reduce) {
  .esqueleto::after { animation: none; }
  .cartao { transition: none; }
}

/* Estado vazio (busca sem resultado) */
.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
}

.vazio strong { display: block; color: var(--cor-texto); font-size: 1.05rem; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   7) BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  line-height: 1.2;
}

/* Botão principal: fundo escuro obrigatório para o texto branco ficar legível */
.botao--principal {
  background: var(--cor-primaria-escura);
  color: #fff;
  box-shadow: var(--sombra);
}
.botao--principal:hover { background: #7f5330; }
.botao--principal:active { transform: scale(.985); }

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}
.botao--secundario:hover { border-color: var(--cor-primaria); }

.botao--perigo { background: #fff; color: #8a3324; border-color: #e2c3bb; }
.botao--perigo:hover { background: #8a3324; color: #fff; border-color: #8a3324; }

.botao--bloco { width: 100%; }
.botao--pequeno { font-size: .85rem; padding: 12px 16px; gap: 6px; }

.botao svg { width: 20px; height: 20px; flex: 0 0 auto; }
.botao--pequeno svg { width: 16px; height: 16px; }

.botao[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   8) PÁGINA DA CESTINHA
   -------------------------------------------------------------------------- */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;          /* area de toque confortavel */
  margin: 8px 0 4px;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.voltar:hover { color: var(--cor-primaria-escura); }
.voltar svg { width: 16px; height: 16px; }

/* A folga para a barra fixa do WhatsApp fica no rodapé (.com-barra-fixa),
   não aqui — senão sobra um vazio grande no fim da página no celular. */
.produto { padding-bottom: 28px; }

.produto__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-primaria-suave);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra);
}
.produto__foto img { width: 100%; height: 100%; object-fit: cover; }

.produto__categoria {
  display: inline-block;
  background: var(--cor-primaria-suave);
  color: var(--cor-texto);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 18px 0 10px;
}

.produto h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); margin-bottom: .2em; }

.produto__preco {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cor-primaria);   /* preço em destaque */
  margin: 6px 0 14px;
}
.produto__preco span {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: -2px;
}

.produto__descricao { color: var(--cor-texto-suave); font-size: 1.03rem; }



/* Lista do que vem dentro */
.bloco {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 20px;
  margin: 22px 0;
  box-shadow: var(--sombra);
}

.bloco h2 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.bloco h2 svg { width: 22px; height: 22px; color: var(--cor-primaria); flex: 0 0 auto; }

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

.itens li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 1rem;
  color: var(--cor-texto);
}

.itens li::before {
  content: "";
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--cor-primaria-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396633a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* Botão do WhatsApp que aparece só no computador, junto do preço */
.cta-computador { display: none; margin: 24px 0 6px; }

/* Barra fixa do WhatsApp no celular */
.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(240, 237, 228, .93);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cor-borda);
}
.barra-fixa .container { padding: 0; }

/* --------------------------------------------------------------------------
   9) PÁGINA DE REGRAS
   -------------------------------------------------------------------------- */
.texto-longo { max-width: 62ch; padding-bottom: 50px; }
.texto-longo h2 { font-size: 1.2rem; margin-top: 28px; color: var(--cor-primaria); }
.texto-longo p { color: var(--cor-texto-suave); }
.texto-longo ul { padding-left: 20px; color: var(--cor-texto-suave); }
.texto-longo li { margin-bottom: 7px; }

.destaque-horario {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cor-primaria-suave);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin: 22px 0;
}
.destaque-horario svg { width: 24px; height: 24px; color: var(--cor-primaria-escura); flex: 0 0 auto; margin-top: 2px; }
.destaque-horario strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); }

/* --------------------------------------------------------------------------
   10) RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding: 30px 0 34px;
  margin-top: 30px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}
.rodape a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 10px 6px;        /* area de toque confortavel no celular */
}
.rodape a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }
.rodape__links { display: flex; gap: 2px 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.rodape__discreto { font-size: .78rem; opacity: .65; margin-top: 6px; }
.rodape__discreto a { padding: 12px 6px; }

/* Na pagina da cestinha, a barra fixa do WhatsApp flutua por cima de tudo.
   Sem esta folga ela cobria os links e o horario do rodape quando a
   cliente rolava ate o fim. */
.com-barra-fixa .rodape {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   11) AVISOS, TOASTS E MODAL
   -------------------------------------------------------------------------- */

/* Aviso discreto de "modo demonstração" — aparece só para o desenvolvedor */
.aviso-dev {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 35;              /* fica ATRÁS da barra do WhatsApp (z-index 40) */
  pointer-events: none;     /* nunca rouba o toque de um botão */
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: .75rem;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: var(--sombra-forte);
  opacity: .9;
  max-width: calc(100vw - 24px);
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: 90;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: var(--sombra-forte);
  font-weight: 600;
  font-size: .93rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.aparece { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--erro { background: #8a3324; color: #fff; }

/* Modal de confirmação (usado antes de excluir) */
.fundo-modal {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(58, 46, 35, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  padding: 26px 22px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--sombra-forte);
  text-align: center;
}
.modal h3 { font-size: 1.2rem; }
.modal p { color: var(--cor-texto-suave); margin-bottom: 20px; }
.modal__acoes { display: flex; gap: 10px; }
.modal__acoes .botao { flex: 1; }

/* --------------------------------------------------------------------------
   12) ADMIN
   -------------------------------------------------------------------------- */
.painel { padding: 24px 0 70px; }

.login-caixa {
  max-width: 400px;
  margin: 40px auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 30px 24px;
  box-shadow: var(--sombra);
}
.login-caixa h1 { font-size: 1.5rem; text-align: center; }
.login-caixa > p { text-align: center; color: var(--cor-texto-suave); margin-top: 0; font-size: .95rem; }

.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cor-texto);
  margin-bottom: 5px;
}
.campo .ajuda { font-size: .78rem; color: var(--cor-texto-suave); margin: 5px 0 0; font-weight: 400; }

.mensagem-erro {
  background: #f7e7e3;
  color: #7d2f21;
  border-radius: var(--raio-p);
  padding: 11px 14px;
  font-size: .9rem;
  margin-bottom: 14px;
}

.link-texto {
  background: none; border: none;
  color: var(--cor-primaria-escura);
  font-family: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; padding: 11px 10px; text-decoration: underline;
}

/* Abas do painel */
.abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 22px;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
  padding: 11px 13px;
  cursor: pointer;
}
.aba[aria-selected="true"] { color: var(--cor-primaria-escura); border-bottom-color: var(--cor-primaria); }

.barra-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.barra-topo h2 { margin: 0; font-size: 1.3rem; }

/* Lista de cestinhas no admin */
.lista-admin { display: grid; gap: 10px; margin: 16px 0; }

.item-admin {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 10px;
  box-shadow: var(--sombra);
}
.item-admin.inativa { opacity: .58; }

.item-admin__foto {
  width: 58px; height: 58px;
  border-radius: 9px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--cor-primaria-suave);
}
.item-admin__foto img { width: 100%; height: 100%; object-fit: cover; }

.item-admin__info { flex: 1; min-width: 0; }
.item-admin__info strong { display: block; font-size: .98rem; line-height: 1.25; }
.item-admin__info span { font-size: .85rem; color: var(--cor-texto-suave); }

.item-admin__acoes { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.botao-icone {
  /* 40px e o minimo para o dedo acertar. Vale para o admin inteiro:
     subir, descer, olhinho, editar, excluir e os meses do financeiro. */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 9px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 0;
}
.botao-icone svg { width: 17px; height: 17px; }
.botao-icone:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }
.botao-icone[disabled] { opacity: .35; cursor: not-allowed; }

.etiqueta {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-primaria-suave);
  color: var(--cor-texto);
  margin-left: 6px;
}
.etiqueta--off { background: #e6ddd2; color: var(--cor-texto-suave); }

/* Lista de itens da cestinha (dentro do formulário) */
.itens-editaveis { display: grid; gap: 7px; margin-bottom: 10px; }

.item-editavel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 8px 8px 8px 13px;
  font-size: .95rem;
}
.item-editavel span { flex: 1; min-width: 0; word-break: break-word; }

.linha-dupla { display: flex; gap: 8px; align-items: flex-start; }
.linha-dupla > *:first-child { flex: 1; }

/* Interruptor ativar/desativar
   ATENÇÃO ao seletor: a regra ".campo label" (display:block) lá em cima tem
   especificidade (0,1,1) e vencia ".interruptor" sozinha, que é (0,1,0).
   O label virava block, o trilho virava um span inline — e largura/altura não
   se aplicam a span inline, então o trilho sumia e sobrava só a bolinha.
   Por isso o seletor abaixo repete ".campo": assim ele ganha a disputa. */
.interruptor,
.campo label.interruptor {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
  position: relative;        /* segura o checkbox escondido dentro do label */
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 0;
}

.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

/* O texto ao lado do interruptor quebra linha em vez de estourar */
.interruptor > span:last-child { min-width: 0; }

.interruptor__trilho {
  display: block;            /* nunca inline: largura e altura precisam valer */
  width: 46px; height: 27px;
  border-radius: 999px;
  background: var(--cor-borda);
  position: relative;
  transition: background .18s ease;
  flex: 0 0 auto;
}
.interruptor__trilho::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(58,46,35,.3);
  transition: transform .18s ease;
}
.interruptor input:checked + .interruptor__trilho { background: var(--cor-primaria-escura); }
.interruptor input:checked + .interruptor__trilho::after { transform: translateX(19px); }
.interruptor input:focus-visible + .interruptor__trilho { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }

/* Pré-visualização */
.previa {
  background: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 16px;
}
.previa > h3 {
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cor-texto-suave);
  margin-bottom: 12px;
}
.previa .cartao { max-width: 230px; }

.previa-mensagem {
  background: #dcf8c6;
  color: #1b2a1b;
  border-radius: 12px 12px 12px 3px;
  padding: 11px 14px;
  font-size: .93rem;
  line-height: 1.45;
  max-width: 340px;
  box-shadow: var(--sombra);
  word-break: break-word;
}

.aviso-caixa {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio-p);
  padding: 14px 16px;
  font-size: .9rem;
  color: var(--cor-texto);
  margin-bottom: 18px;
}
.aviso-caixa strong { display: block; margin-bottom: 3px; }

.grupo-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.carregando-foto { font-size: .85rem; color: var(--cor-texto-suave); }

/* --------------------------------------------------------------------------
   12.4) MONTE SUA CESTA
   -------------------------------------------------------------------------- */

.apresentacao--monte { text-align: left; padding: 8px 0 4px; }
.apresentacao--monte h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
.apresentacao--monte p { margin: 0; max-width: 56ch; }

/* Cartao especial na vitrine que leva para a montagem */
.cartao--monte { border-style: dashed; }

.cartao--monte .cartao__foto {
  background: var(--cor-primaria-suave);
  display: grid;
  place-items: center;
}

.cartao--monte .cartao__foto svg {
  width: 44%;
  height: auto;
  color: var(--cor-primaria);
}

.cartao--monte .cartao__preco { color: var(--cor-primaria-escura); font-size: .95rem; }

/* Lista de itens para escolher */
.monte {
  display: grid;
  gap: 10px;
  margin: 14px 0 20px;
  padding-bottom: 24px;
}

.item-monte {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 10px 12px 10px 10px;
  box-shadow: var(--sombra);
  transition: border-color .15s ease, background .15s ease;
}

/* Item ja escolhido fica marcado, para a cliente nao se perder na lista */
.item-monte.escolhido {
  border-color: var(--cor-primaria);
  background: linear-gradient(0deg, rgba(178, 122, 69, .06), rgba(178, 122, 69, .06)), var(--cor-superficie);
}

.item-monte__foto {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.item-monte__foto img { width: 100%; height: 100%; object-fit: cover; }
.item-monte__foto .foto-vazia { background-size: 52%; }

.item-monte__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item-monte__info strong { font-size: .97rem; line-height: 1.25; color: var(--cor-texto); }
.item-monte__info span { font-size: .84rem; color: var(--cor-texto-suave); line-height: 1.35; }

.item-monte__preco {
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  color: var(--cor-primaria);
}

/* Preço à esquerda, botões à direita, na mesma linha.
   O nome do item fica com a largura inteira acima. */
.item-monte__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;      /* se nao couber, os botoes descem — nunca estouram */
  gap: 8px 12px;
  margin-top: 5px;
}

/* Botoes de menos e mais */
.passo { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.passo__botao {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-primaria-escura);
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, border-color .12s ease;
}
.passo__botao svg { width: 17px; height: 17px; }
.passo__botao:hover:not([disabled]) { border-color: var(--cor-primaria); }
.passo__botao:active:not([disabled]) { transform: scale(.94); }
.passo__botao[disabled] { opacity: .35; cursor: not-allowed; }

.passo__botao--mais {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: #fff;
}
.passo__botao--mais:hover { background: #7f5330; }

.passo__qtd {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

/* Barra fixa com o total que sobe em tempo real */
.barra-total__interno { display: flex; flex-direction: column; gap: 9px; }

.barra-total__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.barra-total__rotulo {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.barra-total__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.barra-total__vazio {
  margin: 0;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: .93rem;
  padding: 5px 0;
}

.barra-total__aviso {
  margin: 0;
  font-size: .84rem;
  color: #8a3324;
  background: #f7e7e3;
  border-radius: var(--raio-p);
  padding: 8px 12px;
}

.botao--travado { opacity: .5; pointer-events: none; }

/* Celular bem estreito (iPhone SE e afins): a linha do item nao cabia com
   foto de 62px + preco + os dois botoes, e a pagina rolava para o lado. */
@media (max-width: 359px) {
  /* O espaço sai da foto e das margens, NUNCA do tamanho dos botões:
     40px é o mínimo para o dedo acertar sem errar. Se ainda assim não
     couber (preço comprido), o flex-wrap desce os botões para a linha
     de baixo — feio é melhor que rolagem lateral. */
  .item-monte { padding: 9px; gap: 9px; }
  .item-monte__foto { width: 52px; height: 52px; }
  .item-monte__preco { font-size: 1rem; }
  .passo__qtd { min-width: 24px; }
  .container { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   12.44) GRUPO RECOLHIVEL — o componente de todos os blocos do financeiro
   --------------------------------------------------------------------------
   A aba tem seis assuntos. Empilhados abertos, viravam uma rolagem sem fim.
   Cada um vira um grupo que mostra o titulo e um numero-resumo; a pessoa
   abre so o que quer ver.
   -------------------------------------------------------------------------- */
.grupo {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-bottom: 12px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.grupo__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: 54px;
}
.grupo__topo::-webkit-details-marker { display: none; }
.grupo__topo:hover { background: var(--cor-fundo); }

.grupo__seta {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--cor-texto-suave);
  transition: transform .18s ease;
}
.grupo[open] > .grupo__topo .grupo__seta { transform: rotate(90deg); }

/* Titulo e resumo dividem a mesma linha. Se nao couber, o resumo cai para
   a linha de baixo — melhor que espremer o titulo em tres linhas. */
.grupo__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  flex-wrap: wrap;
}

.grupo__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
}

.grupo__resumo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cor-primaria);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grupo__resumo:empty { display: none; }

.grupo__corpo {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--cor-borda);
}

@media (prefers-reduced-motion: reduce) {
  .grupo__seta { transition: none; }
}

/* --------------------------------------------------------------------------
   12.45) FINANCEIRO (painel da dona)
   -------------------------------------------------------------------------- */

/* Navegacao de mes */
.mes-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 18px;
}

.mes-nav__mes {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.mes-nav__hoje {
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  display: block;
}

/* Os tres numeros-manchete */
.indicadores {
  display: grid;
  /* Um por linha no celular. Lado a lado, "R$ 1.350,70" nao cabia e o
     numero quebrava no meio ("R$ 1.350" / ",70"), que e pior que ocupar
     mais altura. Em tela maior voltam para tres colunas. */
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.indicador {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 15px 16px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* O lucro e o numero que importa: ocupa a linha inteira */
.indicador--destaque { grid-column: 1 / -1; }

.indicador__rotulo {
  font-size: .76rem;   /* 12px: minimo confortavel de leitura no celular */
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  display: flex;
  align-items: center;
  gap: 6px;
}
.indicador__rotulo svg { width: 14px; height: 14px; }

.indicador__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  /* Valor em reais nunca parte no meio */
  white-space: nowrap;
}

.indicador--destaque .indicador__valor { font-size: 2.1rem; }

/* A cor reforca; quem informa mesmo sao o sinal, o icone e a palavra */
.indicador--positivo .indicador__valor,
.indicador--positivo .indicador__rotulo { color: var(--cor-positivo); }
.indicador--negativo .indicador__valor,
.indicador--negativo .indicador__rotulo { color: var(--cor-negativo); }

.indicador__nota { font-size: .84rem; color: var(--cor-texto-suave); margin-top: 2px; }

/* Custos por categoria: barras de UMA cor so.
   Cor categorica seria errado aqui — as categorias nao sao identidades
   rastreadas, sao fatias da mesma medida. */
.barras { display: grid; gap: 13px; margin-top: 4px; }

.barra-linha { display: grid; gap: 5px; }

.barra-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.barra-nome { font-size: .92rem; font-weight: 600; color: var(--cor-texto); }

.barra-valor {
  font-size: .92rem;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barra-valor b { color: var(--cor-texto); font-weight: 700; }

.barra-trilho {
  height: 10px;
  background: var(--cor-primaria-suave);
  border-radius: 999px;
  overflow: hidden;
}

.barra-preenchida {
  height: 100%;
  background: var(--cor-primaria-escura);
  border-radius: 0 4px 4px 0;   /* ponta arredondada, ancorada na base */
  min-width: 3px;
}

/* Comparacao entre meses: barra que sai do centro.
   Para a direita = lucro, para a esquerda = prejuizo. A direcao e o sinal
   informam sozinhos; a cor so reforca. */
.meses { display: grid; gap: 12px; }

.mes-linha { display: grid; gap: 5px; }
.mes-linha--atual .mes-linha__nome { color: var(--cor-primaria-escura); }

.mes-linha__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.mes-linha__nome { font-size: .92rem; font-weight: 600; color: var(--cor-texto); }
.mes-linha__nome b { font-weight: 700; }

.mes-linha__valor {
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mes-linha--lucro .mes-linha__valor { color: var(--cor-positivo); }
.mes-linha--prejuizo .mes-linha__valor { color: var(--cor-negativo); }
.mes-linha--vazio .mes-linha__valor { color: var(--cor-texto-suave); font-weight: 400; }

/* O trilho tem uma marca no meio: e o zero */
.mes-trilho {
  position: relative;
  height: 12px;
  background: var(--cor-primaria-suave);
  border-radius: 999px;
  overflow: hidden;
}

.mes-trilho::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--cor-borda);
}

.mes-barra { position: absolute; top: 0; bottom: 0; min-width: 3px; }
.mes-barra--lucro { left: 50%; background: var(--cor-positivo); border-radius: 0 4px 4px 0; }
.mes-barra--prejuizo { right: 50%; background: var(--cor-negativo); border-radius: 4px 0 0 4px; }

.mes-linha__detalhe { font-size: .8rem; color: var(--cor-texto-suave); }

/* Anotacoes agrupadas por dia.
   Um mes movimentado tem dezenas de anotacoes; soltas, viravam uma lista
   sem fim. Agrupadas, cada dia e uma linha com o saldo, e ela abre so o
   dia que quer ver. */
.dias { display: grid; gap: 8px; }

.dia {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  overflow: hidden;
}

.dia__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dia__topo::-webkit-details-marker { display: none; }
.dia__topo:hover { background: var(--cor-fundo); }

.dia__seta {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--cor-texto-suave);
  transition: transform .18s ease;
}
.dia[open] .dia__seta { transform: rotate(90deg); }

.dia__data {
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.dia__qtd { font-size: .84rem; color: var(--cor-texto-suave); flex: 1; min-width: 0; }

.dia__saldo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dia__saldo--positivo { color: var(--cor-positivo); }
.dia__saldo--negativo { color: var(--cor-negativo); }

.dia__lista {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
  border-top: 1px solid var(--cor-borda);
  padding-top: 12px;
}

/* Dentro do dia os cartoes ficam mais leves: a moldura ja e o dia */
.dia__lista .lancamento { background: var(--cor-fundo); }

@media (prefers-reduced-motion: reduce) {
  .dia__seta { transition: none; }
}

/* Lancamentos */
.seletor-tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 4px;
}

.seletor-tipo button {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  padding: 10px 8px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
}
.seletor-tipo button[aria-pressed="true"] { background: var(--cor-primaria-escura); color: #fff; }

.lancamento {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 11px 12px;
}

.lancamento__sinal {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: var(--cor-primaria-suave);
  color: var(--cor-texto);
}
.lancamento--entrada .lancamento__sinal { background: #e2ecdf; color: var(--cor-positivo); }
.lancamento--saida .lancamento__sinal { background: #f0dfda; color: var(--cor-negativo); }

.lancamento.em-edicao {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(178, 122, 69, .18);
}

.lancamento__info { flex: 1; min-width: 0; }
.lancamento__info strong { display: block; font-size: .95rem; line-height: 1.3; }
.lancamento__info span { font-size: .82rem; color: var(--cor-texto-suave); }

.lancamento__valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* No celular os dois botoes descem para a propria linha: com o selo do
   sinal, a descricao, o valor e mais dois botoes de 40px, nao cabia tudo
   lado a lado num iPhone SE — a pagina rolava para o lado. */
.lancamento__acoes { display: flex; gap: 6px; }

@media (max-width: 480px) {
  .lancamento__acoes {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--cor-borda);
    padding-top: 8px;
  }
}
.lancamento--entrada .lancamento__valor { color: var(--cor-positivo); }
.lancamento--saida .lancamento__valor { color: var(--cor-negativo); }

.bloco-admin {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.bloco-admin > h3 {
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cor-texto-suave);
  margin: 0 0 14px;
}

/* No celular, Faturamento e Custos viram uma linha compacta cada
   (rotulo a esquerda, valor a direita). So o Lucro fica em bloco. */
@media (max-width: 639px) {
  .indicador:not(.indicador--destaque) {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
  }
  .indicador:not(.indicador--destaque) .indicador__valor { font-size: 1.3rem; }
}

@media (min-width: 640px) {
  .indicadores { grid-template-columns: repeat(3, 1fr); }
  .indicador--destaque { grid-column: auto; }
  .indicador--destaque .indicador__valor { font-size: 1.7rem; }
}

/* --------------------------------------------------------------------------
   12.46) DASHBOARD DO ANO (so no financeiro)
   --------------------------------------------------------------------------
   Cores proprias, fora da paleta da marca, porque aqui elas precisam
   SEPARAR duas series e nao decorar. O par foi escolhido por calculo:
   #2b5f9e x #a8501c tem separacao 20.3 no pior caso de daltonismo (o alvo
   e 8) e contraste 6.1:1 e 5.2:1 sobre o creme.
   O lucro NAO e uma terceira barra: e um numero, com sinal e cor. Assim
   nao existe o par verde-x-vermelho dentro do grafico, que e justamente
   o que mais falha para quem tem daltonismo.
   -------------------------------------------------------------------------- */
:root {
  --fin-faturamento: #2b5f9e;
  --fin-custos: #a8501c;
}

.painel-ano__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.legenda { display: flex; gap: 14px; flex-wrap: wrap; }

.legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.legenda__cor { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.legenda__cor--fat { background: var(--fin-faturamento); }
.legenda__cor--cus { background: var(--fin-custos); }

/* Colunas do grafico */
.ano-rolagem { overflow-x: auto; padding-bottom: 6px; }

.dica-rolagem {
  margin: -8px 0 10px;
  font-size: .8rem;
  color: var(--cor-texto-suave);
}

.ano-trilho {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  min-width: min-content;
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 8px;
}

.ano-mes {
  flex: 1 0 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.ano-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;              /* 2px de folga entre as barras, x2 */
  height: 118px;
  width: 100%;
}

.ano-barra {
  width: 15px;
  min-height: 3px;
  border-radius: 4px 4px 0 0;   /* ponta arredondada, ancorada na base */
}
.ano-barra--fat { background: var(--fin-faturamento); }
.ano-barra--cus { background: var(--fin-custos); }
.ano-barra--zero { background: var(--cor-borda); height: 3px !important; }

.ano-nome {
  font-size: .8rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ano-mes--atual .ano-nome { color: var(--cor-primaria-escura); }

.ano-lucro {
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ano-lucro--positivo { color: var(--cor-positivo); }
.ano-lucro--negativo { color: var(--cor-negativo); }
.ano-lucro--vazio { color: var(--cor-texto-suave); font-weight: 400; }

/* Tabela com os numeros exatos: e a leitura precisa do mesmo dado */
.ano-tabela-rolagem { overflow-x: auto; margin-top: 18px; }

.ano-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

.ano-tabela th, .ano-tabela td {
  padding: 8px 6px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--cor-borda);
}
.ano-tabela th:first-child, .ano-tabela td:first-child { text-align: left; }

.ano-tabela thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cor-texto-suave);
  font-weight: 700;
}

.ano-tabela tbody tr:last-child td { border-bottom: none; }
.ano-tabela tbody tr.linha-atual td { background: var(--cor-primaria-suave); font-weight: 700; }
.ano-tabela td.col-lucro.positivo { color: var(--cor-positivo); font-weight: 700; }
.ano-tabela td.col-lucro.negativo { color: var(--cor-negativo); font-weight: 700; }
.ano-tabela tfoot td {
  border-top: 2px solid var(--cor-borda);
  font-weight: 700;
  padding-top: 10px;
}

/* Tipos de gasto: etiquetas que fluem lado a lado.
   Em linhas de largura inteira, sete tipos tomavam a tela toda. */
.tipos { display: flex; flex-wrap: wrap; gap: 8px; }

.tipo-chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;        /* o dedo precisa de 40px; sobra folga */
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
}

.tipo-chip__nome {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cor-texto);
  background: none;
  border: none;
  padding: 11px 6px 11px 15px;
  cursor: pointer;
  border-radius: 999px 0 0 999px;
}
.tipo-chip__nome:hover { color: var(--cor-primaria-escura); }

.tipo-chip__x {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  min-width: 40px;
  align-self: stretch;
  padding: 0 13px 0 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 0 999px 999px 0;
}
.tipo-chip__x svg { width: 13px; height: 13px; }
.tipo-chip__x:hover { color: var(--cor-negativo); }

/* Etiqueta virada em campo de texto, enquanto renomeia */
.tipo-chip--editando { padding: 3px; gap: 5px; border-color: var(--cor-primaria); }
.tipo-chip--editando input {
  width: 150px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--cor-superficie);
}
.tipo-chip--editando input:focus { box-shadow: none; }

.tipo-chip__ok {
  border: none;
  background: var(--cor-primaria-escura);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.tipo-chip__ok svg { width: 15px; height: 15px; }

/* A ultima etiqueta e o campo de adicionar: flui junto, sem linha extra */
.tipo-chip--novo { padding: 3px; gap: 5px; border-style: dashed; }
.tipo-chip--novo input {
  width: 128px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: .88rem;
  border-radius: 999px;
  background: var(--cor-superficie);
}
.tipo-chip--novo input:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   12.47) CALCULADORA DE PRECO
   -------------------------------------------------------------------------- */
.calc-etapa {
  padding: 18px 0;
  border-bottom: 1px dashed var(--cor-borda);
}
.calc-etapa:last-of-type { border-bottom: none; }

.calc-etapa h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  margin: 0 0 6px;
}

.calc-num {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--fonte-corpo);
}

.calc-etapa .ajuda { margin-top: 0; margin-bottom: 12px; }

.calc-subtotal {
  margin: 12px 0 0;
  font-size: .92rem;
  color: var(--cor-texto-suave);
  text-align: right;
}
.calc-subtotal b {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}

/* O resultado */
.calc-resultado { margin-top: 20px; }

.calc-preco {
  background: var(--cor-primaria-suave);
  border-radius: var(--raio);
  padding: 18px;
  text-align: center;
}

.calc-preco__rotulo {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.calc-preco__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--cor-primaria-escura);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px;
}

.calc-preco__nota { font-size: .9rem; color: var(--cor-texto); margin: 0; }

.calc-alerta {
  background: #f7e7e3;
  color: #7d2f21;
  border-radius: var(--raio-p);
  padding: 14px 16px;
  font-size: .92rem;
}

.calc-quebra { margin-top: 18px; }
.calc-quebra > h5 {
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cor-texto-suave);
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   12.5) AJUSTES DE CELULAR ESTREITO (ate 430px)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  /* O nome da loja JA leva para a vitrine. No celular estreito o link
     repetido do menu so roubava espaco e espremia o nome em 53px.
     Some com ele — "Como funciona" continua ali, que e o que nao tem
     outro caminho. No admin o menu e outro, entao nao e afetado. */
  .menu__vitrine { display: none; }

  .cabecalho__interno { gap: 8px; }
  .menu a { padding: 11px 10px; }
}

/* --------------------------------------------------------------------------
   13) TELAS MAIORES (tablet e computador)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .container { padding: 0 24px; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .filtros { grid-template-columns: 1fr 240px; align-items: center; }
  .categorias { grid-column: 1 / -1; }
  .marca__nome { font-size: 1.3rem; }
  .menu a { font-size: .95rem; padding: 8px 14px; }
  .bloco { padding: 26px; }
}

@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(4, 1fr); }

  /* Na página da cestinha, foto à esquerda e informações à direita */
  .produto {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-bottom: 60px;
  }
  .produto__coluna-foto { position: sticky; top: 90px; }
  .produto__categoria { margin-top: 0; }

  /* No computador, some a barra fixa e aparece o botão ao lado do preço */
  .barra-fixa { display: none; }
  .com-barra-fixa .rodape { padding-bottom: 34px; }   /* sem barra, sem folga */

  /* Exceção: na página de montar, o total continua fixo também no
     computador — é ele que dá a sensação de "o valor está subindo". */
  .pagina-monte .barra-fixa {
    display: block;
    position: fixed;
    background: rgba(240, 237, 228, .93);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--cor-borda);
    padding: 14px 18px;
  }
  .pagina-monte .barra-total__interno {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: var(--largura);
    margin: 0 auto;
  }
  .pagina-monte .barra-total__linha { flex: 0 0 auto; gap: 22px; }
  .pagina-monte .barra-fixa .botao { width: auto; min-width: 280px; }
  .pagina-monte .rodape { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .cta-computador { display: block; }
  .cta-computador .botao { min-width: 290px; }

  .painel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
  .previa { position: sticky; top: 90px; }
}

/* --------------------------------------------------------------------------
   14) ITENS A MAIS NA PÁGINA DA CESTINHA
   --------------------------------------------------------------------------
   Parente pobre do .item-monte de propósito: aqui a lista vem DEPOIS do que
   interessa, que é a cestinha. Linha mais baixa, foto menor, sem descrição —
   quem chegou nesta página já decidiu o principal.
   -------------------------------------------------------------------------- */

#bloco-extras > div { display: flex; flex-direction: column; gap: 8px; }

.extra {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 7px 9px;
  transition: border-color .15s ease, background .15s ease;
}

.extra--escolhido {
  border-color: var(--cor-primaria);
  background: linear-gradient(0deg, rgba(178, 122, 69, .06), rgba(178, 122, 69, .06)), var(--cor-superficie);
}

.extra__foto {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.extra__foto img { width: 100%; height: 100%; object-fit: cover; }
.extra__foto .foto-vazia { background-size: 52%; }

.extra__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.extra__info strong { font-size: .92rem; line-height: 1.25; color: var(--cor-texto); }

.extra__preco {
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  color: var(--cor-primaria);
}

/* O contador vive na MESMA linha do titulo. Ele e a resposta para "posso
   continuar?", entao tem que estar onde o olho ja esta — e ocupando zero
   linha propria, porque a tela da cliente ja estava cheia. */
.extras__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.extras__topo h2 { margin: 0; }

.extras__regra {
  font-size: .85rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.extras__regra--cheio { color: var(--cor-primaria-escura); font-weight: 700; }

/* A conta do preco, embaixo do numero grande: "R$ 269,90 da cestinha + R$ 42,00
   em 3 itens a mais". Sem isto o total sobe e a cliente nao sabe de onde veio. */
.produto__extras {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cor-texto-suave);
  margin-top: 5px;
}

/* O total com extras, dentro da barra fixa, logo acima do botão. */
.barra-extras {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.barra-extras span {
  font-size: .82rem;
  color: var(--cor-texto-suave);
  text-transform: lowercase;
}
.barra-extras strong {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   15) CELULAR: A PÁGINA DA CESTINHA CABENDO NA TELA
   --------------------------------------------------------------------------
   A foto era 4/5 ocupando a largura inteira: num celular de 390px isso dá
   437px de altura, mais de metade da tela só de foto, e o preço e o botão
   ficavam abaixo da dobra.

   O conserto NÃO é cortar mais a foto (recortar 4/5 em 4/3 comeria a cesta).
   É limitar a LARGURA a partir da altura que eu quero: com aspect-ratio 4/5,
   largura = altura x 0,8. Assim a foto encolhe inteira, centralizada, sem
   perder enquadramento nenhum.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .produto__foto {
    max-width: calc(42vh * 0.8);
    margin-inline: auto;
  }

  /* O resto da página também estava largo demais para a tela. */
  .produto__categoria { margin: 14px 0 8px; padding: 4px 10px; font-size: .72rem; }
  .produto h1 { font-size: clamp(1.35rem, 5.4vw, 1.75rem); }
  .produto__preco { font-size: 1.6rem; margin: 4px 0 10px; }
  .produto__descricao { font-size: .96rem; }
  .bloco { padding: 16px 14px; }
  .produto { padding-bottom: 18px; }
}

/* Celular deitado (ou tela baixa): 42vh vira quase nada. Aí mando pela
   largura mesmo, senão a foto some. */
@media (max-width: 899px) and (max-height: 520px) {
  .produto__foto { max-width: 220px; }
}

/* O "ver os outros N itens": discreto, centralizado, sem virar botão. */
.extras__mais { text-align: center; margin: 12px 0 0; }

/* Aviso dentro de um campo do painel: mesma família do .ajuda, mas com peso
   suficiente para ela não passar batido por uma configuração que se contradiz. */
.ajuda--alerta {
  color: #8a3324;
  font-weight: 600;
  background: rgba(138, 51, 36, .07);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   16) CHIP DE ESCOLHA (liga/desliga)
   --------------------------------------------------------------------------
   Usado para marcar quais itens uma cestinha aceita como item a mais.

   O GANCHO DE ESTILO É O aria-pressed, não uma classe.
   Eu tinha usado uma classe ".tipo-chip--ativo" que simplesmente NÃO EXISTIA
   no CSS: o estado mudava por dentro e a tela ficava igual. Com o seletor
   preso ao aria-pressed, o que o leitor de tela anuncia e o que o olho vê são
   a mesma coisa — não há como um mudar e o outro não.

   E o tique não é enfeite: marcado não pode depender só da cor, senão quem
   não distingue as duas não sabe o que escolheu.
   -------------------------------------------------------------------------- */

.chip-escolha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.chip-escolha:hover { border-color: var(--cor-primaria); }

.chip-escolha[aria-pressed="true"] {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
  color: #fff;
}

.chip-escolha__tique {
  font-size: .9em;
  width: 0;
  overflow: hidden;
  transition: width .14s ease;
}
.chip-escolha[aria-pressed="true"] .chip-escolha__tique { width: 1em; }

@media (prefers-reduced-motion: reduce) {
  .chip-escolha, .chip-escolha__tique { transition: none; }
}

/* --------------------------------------------------------------------------
   17) A FOTO QUE ABRE
   --------------------------------------------------------------------------
   A foto da cestinha virou botão: tocar abre ela grande. Um <button> traz
   padding, borda e cor de fundo do navegador, e cada um alinha diferente —
   zerado aqui para ele ocupar exatamente o lugar da foto de antes.
   -------------------------------------------------------------------------- */

.produto__foto--abre {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  position: relative;
}

/* A dica de que dá para tocar. Pequena e no canto: grande, ela cobriria
   justamente a cestinha que a cliente quer ver. */
.produto__lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 248, 243, .92);
  color: var(--cor-texto);
  box-shadow: 0 2px 8px rgba(58, 46, 35, .18);
  pointer-events: none;
}
.produto__lupa svg { width: 17px; height: 17px; }

.produto__foto--abre:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
}

/* A foto grande por cima de tudo. */
.foto-grande {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  /* A linha e a coluna do tamanho da tela, nem um pixel a mais. Sem isto a
     linha crescia até a altura da foto, o "max-height: 100%" da foto passava
     a valer a altura dela mesma, e no computador a foto em pé saía maior que
     a tela, cortada embaixo (medido em 08/10/2026: 900 x 1600 numa janela de
     900 de altura). No celular não aparecia: lá quem limita é a largura. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 56px 12px 24px;
  background: rgba(24, 18, 13, .94);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .2s ease;
}
.foto-grande.aberta { opacity: 1; }

/* contain, não cover: aqui o ponto é ver a cestinha INTEIRA, sem corte. */
.foto-grande__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--raio-p);
}

.foto-grande__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 243, .14);
  color: #fff;
  cursor: pointer;
}
.foto-grande__fechar svg { width: 22px; height: 22px; }
.foto-grande__fechar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .foto-grande { transition: none; }
}