/* Painel e telas de acesso no padrão da página de vendas (zapye.css):
   fundo claro esverdeado, cartões brancos arredondados, verde do WhatsApp
   nas ações (texto escuro sobre o verde: contraste 9:1), tinta escura nos
   destaques. Carregado depois de marca.css e estilo.css (_cabeca.html);
   as páginas públicas do bar (noite.css) não usam este arquivo. */
:root {
  --fundo: #f6fbf8;
  --fundo-2: #ffffff;
  --texto: #14202a;
  --texto-2: #3b4a54;
  --texto-3: #56656f;
  --inverso: #0b141a;
  --inverso-texto: #eef7f2;
  --acao: #25d366;
  --acao-forte: #1fbf5b;
  --acao-texto: #0b141a;
  --linha: #e1e8ec;
  --campo: #7d8b94;
  --raio: 16px;
  --grad: linear-gradient(120deg, #25d366, #1f9be0, #6d5dfc);
  --sombra: 0 14px 40px -24px rgba(20, 32, 42, .35);
}
::selection { background: #c9f2da; color: var(--texto); }
/* verde sobre fundo claro não dá contraste de foco: o anel é escuro */
:focus-visible { outline-color: var(--inverso); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--inverso); border-color: var(--inverso); }

/* marca: o ícone do Zapye (zapye-icone-96.png); o raio esconde os cantos pretos do desenho */
.marca-simbolo { border-radius: 8px; object-fit: cover; display: block; }
.marca-nome { font-weight: 600; }

/* cabeçalho claro com linha, como o topo da página de vendas */
.topo-app { background: rgba(246, 251, 248, .92); border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.menu-app a:hover { background: #e9f3ee; }

/* botões: verde com sombra, secundários brancos */
button, .botao { box-shadow: 0 10px 24px -14px rgba(37, 211, 102, .9); font-weight: 600; }
button:hover, .botao:hover { transform: translateY(-1px); }
button.secundario, .botao-secundario { box-shadow: none; background: #ffffff; }
button.secundario:hover, .botao-secundario:hover { background: #e9f3ee; }
button.perigo { box-shadow: none; background: #ffffff; }
button:disabled, button:disabled:hover { transform: none; box-shadow: none; }

/* cartões brancos com borda leve e sombra */
.cartao { background: #ffffff; border: 1px solid var(--linha); box-shadow: var(--sombra); }
.link-cartao:hover { background: #ffffff; border-color: #c4d3cb; }

/* conversa: resposta do bot no verde do WhatsApp */
.msg-cliente { background: #ffffff; border: 1px solid var(--linha); }
.msg-bot { background: #dcf8e6; }
.logo-ye { color: #12a150; }

/* Ajustar o bot (painel/ajustar.html) */
.msg-corrigir { display: block; margin-top: 4px; font-size: 12.5px; color: #0f7a3c; }
.ajuste-proposta { border-color: #9fe0b8; }
.ajuste-teste { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ajuste-teste .msg { max-width: 100%; }
.ajuste-rotulo { margin: 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ajuste-antes { opacity: .75; }
.ajuste-detalhe { margin: 12px 0; }
.ajuste-detalhe pre { white-space: pre-wrap; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 10px; font-size: 13px; }
.ajuste-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.lista-versoes { padding-left: 18px; font-size: 15px; }
.lista-versoes li { margin: 6px 0; }
.lista-versoes .desfeita { color: var(--texto-3); text-decoration: line-through; }

/* Meu negócio (painel/negocio.html) */
.passos .lista-passos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.lista-passos li { display: flex; gap: 12px; align-items: flex-start; }
.passo-marca { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
               font-weight: 700; font-size: 14px; background: #e9f3ee; color: var(--texto); }
.lista-passos .feito .passo-marca { background: var(--acao); color: var(--acao-texto); }
.lista-passos .feito strong { color: var(--texto-2); font-weight: 500; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 8px 0;
         border: 1px solid var(--linha); border-radius: 12px; background: #fff; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--acao); box-shadow: 0 0 0 2px #c9f2da; }
.opcao input { margin-top: 4px; accent-color: #12a150; width: 18px; height: 18px; flex: none; }
.opcao-extra { margin: 4px 0 12px 44px; }
.opcao-extra[hidden] { display: none; }
.caixa { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.caixa input { margin-top: 4px; accent-color: #12a150; width: 18px; height: 18px; flex: none; }
.campo-negocio { padding: 14px 0; border-top: 1px solid var(--linha); }
.campo-negocio:first-of-type { border-top: 0; }
.campo-negocio .dica { margin: 2px 0 8px; }
.campo-negocio.com-erro input, .campo-negocio.com-erro textarea, .campo-negocio.com-erro select { border-color: var(--erro); }
.erro-campo { color: var(--erro); font-weight: 600; font-size: 14px; margin: 6px 0 0; }
.previa-zap { background: #efeae2; border-radius: 12px; padding: 8px 12px 12px; margin: 8px 0; }
.previa-zap .msg { max-width: 100%; white-space: pre-wrap; }
.curto-num { width: 7em; }
@media (max-width: 700px) { .opcao-extra { margin-left: 0; } }