/*
 * Componentes reutilizáveis do design system — o CSS das partials de
 * app/views/shared. Valores copiados de /mockup/agendador-cardapio-web.html.
 */

/* ───────────────────────── Cabeçalho ───────────────────────── */
.topo{position:relative;z-index:1;padding:20px clamp(16px,4vw,40px) 0}
.topo-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,var(--lilas),var(--roxo) 72%);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-.4px;
  box-shadow:0 4px 12px rgba(89,50,122,.28);
}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}
.logo-txt b{font-size:15px;font-weight:800;color:var(--roxo);letter-spacing:-.2px}
.logo-txt span{font-size:11px;font-weight:600;color:var(--tinta-fraca);letter-spacing:.06em;text-transform:uppercase}

.fuso{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-full);
  padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--tinta-media);box-shadow:var(--sombra-sm);
}
.fuso .ponto{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.18)}

/* ───────────────────────── Stepper ───────────────────────── */
.stepper{max-width:1080px;margin:26px auto 0;display:flex;align-items:center;gap:6px;padding:0 clamp(16px,4vw,40px)}
.stepper[hidden]{display:none}
.step{display:flex;align-items:center;gap:9px;flex:none}
.step-bola{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--papel);border:2px solid var(--linha-forte);color:var(--tinta-fraca);
  font-size:12px;font-weight:700;transition:var(--transicao);
}
.step-nome{font-size:13px;font-weight:600;color:var(--tinta-fraca);white-space:nowrap;transition:var(--transicao)}
.step.atual .step-bola{background:var(--roxo);border-color:var(--roxo);color:#fff}
.step.atual .step-nome{color:var(--roxo)}
.step.feito .step-bola{background:var(--lilas);border-color:var(--lilas);color:#fff}
.step.feito .step-nome{color:var(--tinta-media)}
.step-linha{flex:1;height:2px;background:var(--linha-forte);border-radius:2px;min-width:14px}
.step-linha.ativa{background:var(--lilas)}
@media (max-width:620px){ .step-nome{display:none} .step-linha{min-width:8px} }

/* ───────────────────────── Cartão ───────────────────────── */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-lg);box-shadow:var(--sombra-md)}

/* ───────────────────────── Botões ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-full);padding:14px 30px;font-size:15px;font-weight:700;
  transition:var(--transicao);white-space:nowrap;
}
.btn-coral{background:var(--coral);color:#fff;box-shadow:var(--sombra-coral)}
.btn-coral:hover:not(:disabled){background:var(--coral-escuro);transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,89,89,.38)}
.btn-coral:active:not(:disabled){transform:translateY(0)}
.btn-roxo{background:var(--roxo);color:#fff;box-shadow:0 4px 14px rgba(89,50,122,.26)}
.btn-roxo:hover:not(:disabled){background:var(--roxo-escuro);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--tinta-media);border:1.5px solid var(--linha-forte)}
.btn-ghost:hover{border-color:var(--lilas);color:var(--roxo);background:var(--lilas-suave)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn-bloco{width:100%}

/* Um <a> com classe .btn não herda o reset de link; garante o mesmo visual do
   <button> do mockup. */
a.btn{text-decoration:none}

.rodape-acoes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}

/* ───────────────────────── Títulos de seção ───────────────────────── */
.cabecalho-tela{margin-bottom:24px}
.cabecalho-tela h2{font-size:clamp(22px,3.4vw,29px);font-weight:800;letter-spacing:-.6px;margin-bottom:6px}
.cabecalho-tela p{color:var(--tinta-media);font-size:15px}

/* ───────────────────────── Recibo ─────────────────────────
   O .recibo do mockup (tela de reunião agendada). Vive aqui porque a
   administração reusa o mesmo bloco para resumir a reunião que vai ser
   excluída. */
.recibo{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--r-md);padding:6px 18px;text-align:left;margin-bottom:18px}
.linha-recibo{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--linha);font-size:14px}
.linha-recibo:last-child{border-bottom:0}
.linha-recibo dt{color:var(--tinta-media);font-size:13px;font-weight:600;flex:none}
.linha-recibo dd{font-weight:700;text-align:right;letter-spacing:-.2px}
.linha-recibo dd small{display:block;font-weight:500;font-size:12px;color:var(--tinta-fraca);letter-spacing:0}

/* ───────────────────────── Estado vazio ───────────────────────── */
.vazio{text-align:center;padding:40px 20px;color:var(--tinta-media)}
.vazio .ico{width:52px;height:52px;border-radius:50%;background:var(--amarelo-suave);color:#b98600;display:grid;place-items:center;margin:0 auto 14px}
.vazio b{display:block;font-size:16px;font-weight:700;color:var(--tinta);margin-bottom:4px}
.vazio p{font-size:14px;max-width:340px;margin:0 auto}

/* ───────────────────────── Avatar ───────────────────────── */
.avatar{
  width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:18px;letter-spacing:-.4px;box-shadow:0 4px 12px rgba(89,50,122,.24);
}

/* ───────────────────────── Formulário ─────────────────────────
   O mockup só tem <input> no formulário do modal. As regras de <select> e
   <textarea> repetem as mesmas medidas, para o formulário da administração
   ficar igual ao do lead. */
.form{padding:20px 24px 24px;display:grid;gap:15px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-media);margin-bottom:6px}
.campo label .obr{color:var(--coral)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--linha-forte);border-radius:var(--r-sm);
  font-size:14.5px;background:var(--papel);transition:var(--transicao);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-fraca)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--linha-forte)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px rgba(89,50,122,.13)}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:var(--coral);background:#fff7f7}
.campo.erro input:focus,.campo.erro select:focus,.campo.erro textarea:focus{box-shadow:0 0 0 3px rgba(255,89,89,.15)}
.msg-erro{display:none;font-size:12px;font-weight:600;color:var(--coral-escuro);margin-top:5px}
.campo.erro .msg-erro{display:block}
.msg-dica{display:block;font-size:12px;color:var(--tinta-fraca);margin-top:5px;line-height:1.45}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:480px){ .dupla{grid-template-columns:1fr} }

.nota-form{font-size:12px;color:var(--tinta-fraca);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.nota-form svg{flex:none;margin-top:1px}

/* ───────────────────────── Aviso ─────────────────────────
   O amarelo é o do mockup. A variante .aviso-ok não existe lá: ela usa os
   mesmos tokens da marca para as mensagens de sucesso da administração. */
.aviso{
  display:flex;gap:11px;align-items:flex-start;background:var(--amarelo-suave);
  border:1px solid rgba(255,192,0,.42);border-left:4px solid var(--amarelo);
  border-radius:var(--r-md);padding:13px 16px;font-size:13px;color:#7a5a00;margin-bottom:18px;
}
.aviso svg{flex:none;margin-top:1px;color:#b98600}
.aviso b{font-weight:700}
.aviso-ok{background:var(--lilas-suave);border-color:rgba(162,110,205,.42);border-left-color:var(--roxo);color:var(--roxo)}
.aviso-ok svg{color:var(--roxo)}


/* ───────────────────────── Convite de conexão da agenda ─────────────────────────
   Tela que o responsável abre pelo link para conectar a própria agenda do
   Google. Fora do fluxo do lead: não tem stepper. */
.cartao.convite{max-width:520px;margin:clamp(8px,5vw,48px) auto 0;text-align:center}
.cartao.convite .avatar{margin:0 auto 14px}
.cartao.convite .cabecalho-tela{text-align:center}
.cartao.convite .recibo{text-align:left;margin:18px 0}
.cartao.convite .aviso{text-align:left}
.cartao.convite .btn-bloco{margin-top:18px}
.nota-convite{
  margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--tinta-fraca)
}
.nota-convite b{color:var(--tinta-media)}