/* k-padrao.css — PADRÃO VISUAL do site público (Guia de Estilo: docs/Guia_de_Estilo_Site.md).
   Carregado POR ÚLTIMO em todas as páginas: define os tokens e as peças comuns (voltar, botões, cartões, subcaixas, campos,
   mensagens, etiquetas) e alinha as peças antigas (.k-card, .k-btn de borda fina e raio 8) ao padrão das telas novas
   (carrinho, checkout, pedido). Cores da marca vêm do tema (/api/tema.css): aqui só se usam as variáveis. */

/* ======================================================================= tokens */
:root {
  /* raios: cartão > subcaixa > controle > pequeno */
  --k-raio-cartao: 20px; --k-raio-subcaixa: 16px; --k-raio-controle: 14px; --k-raio-campo: 12px; --k-raio-pequeno: 10px; --k-raio-pilula: 999px;
  /* sombras */
  --k-sombra-cartao: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 36px rgba(16, 24, 40, .08);
  --k-sombra-flutuante: 0 18px 40px rgba(16, 24, 40, .22), 0 2px 8px rgba(16, 24, 40, .08);
  /* neutros (translúcidos: funcionam sobre branco e sobre a tinta da marca) */
  --k-cinza: rgba(0, 0, 0, .055); --k-cinza-forte: rgba(0, 0, 0, .09); --k-linha: #eef0f1;
  --k-tinta: rgba(0, 0, 0, .035); --k-anel: rgba(0, 0, 0, .08);
  /* texto */
  --k-texto-rotulo: #5f6368; --k-texto-apoio: #767676;
  /* alturas */
  --k-alt-grande: 52px; --k-alt-media: 42px; --k-alt-compacta: 34px; --k-alt-campo: 48px;
  /* espaçamento (múltiplos de 4) */
  --k-esp-1: 4px; --k-esp-2: 8px; --k-esp-3: 12px; --k-esp-4: 16px; --k-esp-5: 20px; --k-esp-6: 24px;
  /* estados */
  --k-ok-fundo: #e8f6ec; --k-ok-texto: #1b5e2e; --k-ok-borda: #b9e2c4;
  --k-erro-fundo: #fdecee; --k-erro-texto: #8a1c28; --k-erro-borda: #f5c2c7;
  --k-aviso-fundo: #fff7e0; --k-aviso-texto: #6b4e00; --k-aviso-borda: #f1dc9a;
  --k-info-fundo: #eaf4f8; --k-info-texto: #1d4e63; --k-info-borda: #bddbe8;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --k-tinta: color-mix(in srgb, var(--primary-color, #2d9fa3) 7%, transparent); --k-anel: color-mix(in srgb, var(--primary-color, #2d9fa3) 22%, transparent); }
}

/* ======================================================================= VOLTAR (um só jeito no site inteiro)
   Página com título: na linha do título, à direita. Sem título de página (ou dentro de uma aba, lista -> detalhe):
   no topo, à esquerda. Texto diz para onde volta ("Voltar aos pedidos").
   Páginas sem o cabeçalho preto (entrar, checkout): só o ícone, mesmo lugar (.k-so-icone). */
.k-voltar { display: inline-flex; align-items: center; gap: 8px; min-height: var(--k-alt-media); margin: 0 0 var(--k-esp-4); padding: 0 16px;
  border: 0; border-radius: var(--k-raio-controle); background: var(--k-cinza); color: var(--text-color, #333);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.k-voltar i { font-size: .8rem; }
@media (hover: hover) { .k-voltar:hover { background: var(--k-cinza-forte); color: var(--text-color, #333); } }
.k-voltar:active { transform: scale(.98); }
.k-voltar:focus { outline: 0; }
.k-voltar:focus-visible { box-shadow: 0 0 0 3px var(--k-anel); }
.k-voltar.k-so-icone { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; margin: 0; }
.k-voltar[hidden] { display: none !important; }
/* com titulo de pagina: Voltar na MESMA linha, a direita (nao empurra o conteudo para baixo) */
.k-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-topo > .k-voltar, .cx-topo > .k-voltar { margin: 0; flex: none; }
.k-topo > h1 { min-width: 0; overflow-wrap: anywhere; }
/* os Voltar so de icone que ja existiam (entrar/criar conta: .k-icone-btn; checkout: .co-voltar) ficam com a mesma medida */
.k-auth .k-icone-btn, .co-voltar { width: 44px; height: 44px; border-radius: var(--k-raio-controle); background: var(--k-cinza); }

/* ======================================================================= BOTÕES
   Primário (degradê da marca) · Secundário (cinza) · Perigo (vermelho) · Link (texto).
   Grande 52px (ação principal da tela) · Médio 42px (.k-peq: ações dentro de cartões) · Compacto 34px (ações em linha de lista). */
.k-btn { min-height: var(--k-alt-grande); padding: 0 18px; border-radius: var(--k-raio-controle); font-weight: 700; line-height: 1.2;
  transition: filter .15s, transform .05s, background .15s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .k-btn:hover:not(:disabled) { filter: brightness(.95); } }
.k-btn:active:not(:disabled) { transform: scale(.99); }
.k-btn:focus { outline: 0; }
.k-btn:focus-visible { box-shadow: 0 0 0 3px var(--k-anel); }
.k-btn.k-peq { min-height: var(--k-alt-media); padding: 0 16px; font-size: .9rem; }
.k-btn.k-peq i { font-size: .8rem; }
.k-btn.k-sec, .k-btn.k-suave { background: var(--k-cinza); color: var(--text-color, #333); border: 0; font-weight: 600; }
@media (hover: hover) { .k-btn.k-sec:hover:not(:disabled), .k-btn.k-suave:hover:not(:disabled) { filter: none; background: var(--k-cinza-forte); } }
.k-btn.k-perigo { background: var(--danger-color, #dc3545); color: #fff; }
.k-btn-compacto { display: inline-flex; align-items: center; gap: 6px; min-height: var(--k-alt-compacta); margin: 0; padding: 0 12px; border: 0; border-radius: var(--k-raio-pequeno);
  background: var(--k-cinza); color: var(--text-color, #333); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; }
@media (hover: hover) { .k-btn-compacto:hover { background: var(--k-cinza-forte); } }
.k-btn-compacto:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--k-anel); }
.k-link-btn { font-weight: 600; text-decoration: none; }
@media (hover: hover) { .k-link-btn:hover { text-decoration: underline; } }

/* ======================================================================= CARTÃO (fundo branco, sem borda, sombra suave)
   Um bloco principal da tela. Dentro dele: SUBCAIXAS (borda fina) ou SEÇÕES (linha fina no topo). Nunca cartão dentro de cartão. */
.k-card, .k-auth .k-card, .pp-card { border: 0; border-radius: var(--k-raio-cartao); box-shadow: var(--k-sombra-cartao); }
.k-card { padding: var(--k-esp-6); }
@media (max-width: 480px) { .k-card, .k-auth .k-card, .pp-card { border-radius: 18px; } .k-card { padding: 20px 18px; } }
.k-card h1 { color: var(--text-color, #333); font-weight: 700; }

/* SUBCAIXA: grupo dentro do cartão (itens de lista clicáveis, endereço, bloco de informação) */
.k-subcaixa { margin: 0 0 var(--k-esp-3); padding: var(--k-esp-4); border: 1.5px solid var(--border-color, #ddd); border-radius: var(--k-raio-subcaixa); background: var(--surface-color, #fff); }
/* CAIXA TINTA: destaque leve sem borda (resumo, dica, "entrar de outras formas") */
.k-caixa-tinta, .k-outras, .k-aceite { border-radius: var(--k-raio-controle); }
.k-caixa-tinta { padding: var(--k-esp-3) var(--k-esp-4); background: var(--k-tinta); }
.k-perigo-zona { border-radius: var(--k-raio-subcaixa); }

/* ======================================================================= TÍTULO DA PÁGINA
   Texto escuro (a cor da marca fica para ações, links, preços e itens ativos). */
.k-topo h1 { color: var(--text-color, #333); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }

/* ======================================================================= CAMPOS (fora das telas de entrar, que têm o seu) */
.k-wrap:not(.k-auth) .k-campo input:not([type="checkbox"]):not([type="radio"]), .k-wrap:not(.k-auth) .k-campo select { min-height: var(--k-alt-campo); padding: 0 14px; border-radius: var(--k-raio-campo); }
.k-wrap:not(.k-auth) .k-campo textarea, .k-textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--border-color, #ddd); border-radius: var(--k-raio-campo);
  background: #fff; color: var(--text-color, #333); font: inherit; font-size: 1rem; line-height: 1.45; resize: vertical; box-sizing: border-box; }
.k-wrap:not(.k-auth) .k-campo input:focus, .k-wrap:not(.k-auth) .k-campo select:focus, .k-wrap:not(.k-auth) .k-campo textarea:focus, .k-textarea:focus {
  outline: 0; border-color: var(--primary-color, #2d9fa3); box-shadow: 0 0 0 3px var(--k-anel); }

/* ======================================================================= MENSAGENS e ETIQUETAS */
.k-msg { border-radius: var(--k-raio-campo); }
.k-pilula { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--k-raio-pilula); font-size: .74rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: var(--k-cinza); color: #555; }
.k-pilula.marca { background: var(--primary-color, #2d9fa3); color: #fff; }
.k-pilula.ok { background: var(--k-ok-fundo); color: var(--k-ok-texto); }
.k-pilula.aviso { background: var(--k-aviso-fundo); color: var(--k-aviso-texto); }
.k-pilula.erro { background: var(--k-erro-fundo); color: var(--k-erro-texto); }
.k-pilula.info { background: var(--k-info-fundo); color: var(--k-info-texto); }

/* texto de apoio único */
.k-apoio { color: var(--k-texto-apoio); font-size: .8rem; line-height: 1.4; }