/* =====================================================
   Painel do Estúdio — estilos (mobile-first, sem framework)
   ===================================================== */

:root {
  --fundo: #f4f4f6;
  --superficie: #ffffff;
  --texto: #22252b;
  --texto-suave: #6b7280;
  --borda: #e4e5ea;
  --primario: #1f2430;
  --wa: #25d366;

  --vermelho: #dc2626;
  --vermelho-bg: #fee2e2;
  --amarelo: #b45309;
  --amarelo-bg: #fef3c7;
  --azul: #1d4ed8;
  --azul-bg: #dbeafe;
  --verde: #15803d;
  --verde-bg: #dcfce7;
  --cinza: #4b5563;
  --cinza-bg: #e5e7eb;

  --raio: 12px;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Cabeçalho ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--primario);
  color: #fff;
}

.topo h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.topo-acoes { display: flex; gap: 8px; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--cinza-bg);
  color: var(--texto);
  min-height: 40px; /* alvo de toque confortável no celular */
}

.btn:active { transform: scale(0.98); }

.btn-primario { background: var(--primario); color: #fff; }
.btn-claro { background: #fff; border-color: var(--borda); }
.btn-fantasma {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: inherit;
}
.lista .btn-fantasma,
.propostas .btn-fantasma { border-color: var(--borda); color: var(--texto-suave); }

.btn-wa { background: var(--wa); color: #fff; }
.btn-largo { width: 100%; }

/* Botão WhatsApp desabilitado: contato @lid não tem número conhecido,
   então não geramos link wa.me (seria quebrado). */
.btn-desabilitado {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Aviso no lugar do telefone quando o número real não existe (@lid). */
.tel-aviso { font-style: italic; }

/* ---------- Telefone manual (contatos @lid) ---------- */

/* Botão "Adicionar número": aparece no lugar do WhatsApp quando o
   contato @lid ainda não tem número (nem automático, nem manual). */
.btn-add-tel {
  background: #fff;
  border: 1px dashed var(--wa);
  color: var(--verde);
}

/* Link pequeno "editar" ao lado do número no card. */
.tel-editar {
  border: none;
  background: transparent;
  padding: 0 2px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  text-decoration: underline;
}

/* Editor inline: input + Salvar/Cancelar dentro do card. */
.tel-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

.tel-input {
  flex: 1 1 150px;
  min-height: 40px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--texto);
}

.tel-input:disabled { opacity: 0.6; }

/* ---------- Feedback ---------- */

.feedback {
  margin: 10px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}
.fb-info { background: var(--azul-bg); color: var(--azul); }
.fb-erro { background: var(--vermelho-bg); color: var(--vermelho); }
.fb-ok { background: var(--verde-bg); color: var(--verde); }

/* ---------- Cards de resumo ---------- */

.resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 16px 4px;
}

.card-resumo {
  border: none;
  border-radius: var(--raio);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}

.cr-num { font-size: 1.4rem; font-weight: 800; }
.cr-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

.cr-sem_resposta { background: var(--vermelho-bg); color: var(--vermelho); }
.cr-cliente_sumiu { background: var(--amarelo-bg); color: var(--amarelo); }
.cr-em_dia { background: var(--verde-bg); color: var(--verde); }
.cr-encerrado { background: var(--cinza-bg); color: var(--cinza); }

/* ---------- Abas ---------- */

.abas {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aba {
  flex: 0 0 auto;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.aba.ativa { background: var(--primario); color: #fff; border-color: var(--primario); }

/* ---------- Lista de conversas ---------- */

.lista { padding: 4px 16px 24px; display: grid; gap: 10px; }

.vazio {
  text-align: center;
  color: var(--texto-suave);
  padding: 32px 8px;
}

.card {
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px;
}

.card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.card-quem h3 { margin: 0; font-size: 1rem; }
.tel { font-size: 0.8rem; color: var(--texto-suave); }

/* Chips de categoria */
.chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.chip-vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.chip-amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.chip-azul { background: var(--azul-bg); color: var(--azul); }
.chip-verde { background: var(--verde-bg); color: var(--verde); }
.chip-cinza { background: var(--cinza-bg); color: var(--cinza); }

.tempo { margin: 6px 0 4px; font-size: 0.8rem; color: var(--texto-suave); }

.ultima {
  margin: 0 0 10px;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.status-sel select {
  min-height: 40px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  background: #fff;
  color: var(--texto);
  font-family: inherit;
}

/* ---------- Rodapé ---------- */

.rodape {
  text-align: center;
  padding: 8px 16px 24px;
  font-size: 0.75rem;
  color: var(--texto-suave);
}

/* ---------- Modal de histórico ---------- */

/* Elementos com o atributo hidden ficam realmente escondidos,
   mesmo quando a classe define display:flex. */
[hidden] {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end; /* no celular sobe de baixo, tipo "sheet" */
  justify-content: center;
  z-index: 50;
}

.modal-caixa {
  background: var(--fundo);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
}

.modal-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
}
.modal-topo h2 { margin: 0; font-size: 1rem; }
.modal-topo .btn { font-size: 1.3rem; padding: 2px 12px; }

.modal-corpo {
  overflow-y: auto;
  padding: 12px 16px 20px;
  display: grid;
  gap: 8px;
}

/* Bolhas de mensagem */
.msg {
  max-width: 85%;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--sombra);
  font-size: 0.9rem;
}
.msg-cliente { background: #fff; justify-self: start; border-top-left-radius: 4px; }
.msg-estudio { background: #d9fdd3; justify-self: end; border-top-right-radius: 4px; }
.msg-texto { overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-meta { margin-top: 4px; font-size: 0.68rem; color: var(--texto-suave); text-align: right; }

/* ---------- Propostas (catálogo de ofertas) ---------- */

.propostas { padding: 4px 16px 32px; }
.propostas-dica { font-size: 0.85rem; color: var(--texto-suave); }

/* Seção de categoria (Newborn, Família, Smash...). */
.prop-cat { margin: 0 0 20px; }

.prop-cat h3 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6px;
}

.prop-cat-pacotes { display: grid; gap: 10px; }

/* Card de pacote (mesmo visual dos cards de conversa). */
.pacote {
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px;
}

.pacote-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.pacote-topo h4 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.2px;
}

.pacote-valor {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  background: var(--verde-bg);
  color: var(--verde);
}

/* Valor 0 no catálogo = "valor a confirmar". */
.pacote-valor-pendente { background: var(--amarelo-bg); color: var(--amarelo); }

.pacote-itens {
  margin: 8px 0 12px;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--texto);
}
.pacote-itens li { margin: 2px 0; }

.pacote-vazio {
  margin: 0;
  padding: 12px 14px;
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texto-suave);
}

@media (min-width: 720px) {
  .prop-cat-pacotes { grid-template-columns: repeat(2, 1fr); }
  .pacote-vazio { grid-column: 1 / -1; }
}

/* ---------- Gerador de contrato ---------- */

.contrato { padding: 4px 16px 32px; }

/* Botão "Gerar contrato" no card da conversa. */
.btn-contrato { background: var(--azul-bg); color: var(--azul); }

/* Cabeçalho da tela de contrato (aberta pelo botão do card):
   nome do contato + botão Voltar. */
.ctr-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
}
.ctr-cabecalho h2 { margin: 0; font-size: 1.05rem; }
.ctr-contato-info { margin: 2px 0 0; font-size: 0.8rem; color: var(--texto-suave); }

/* Dica abaixo do seletor de pacote. */
.ctr-pacote-dica { margin: 8px 0 0; font-size: 0.78rem; color: var(--texto-suave); }

.ctr-grupo {
  background: var(--superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 12px 14px 14px;
  margin: 0 0 12px;
}

.ctr-grupo legend {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-suave);
  padding: 0 4px;
}

.ctr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.ctr-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
}

/* Campo que ocupa a linha inteira (nome, endereço, e-mail, textareas). */
.ctr-largo { grid-column: 1 / -1; }

.ctr-grid input,
.ctr-grid select,
.ctr-grid textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 400;
  color: var(--texto);
  background: #fff;
}

.ctr-grid textarea { resize: vertical; line-height: 1.4; }

.ctr-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.ctr-acoes .btn:disabled { opacity: 0.55; cursor: wait; }

/* Caixa de resultado (sucesso com links do Autentique / erro). */
.ctr-resultado {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.ctr-resultado ul { margin: 8px 0; padding-left: 18px; }
.ctr-res-ok { background: var(--verde-bg); color: var(--verde); }
.ctr-res-erro { background: var(--vermelho-bg); color: var(--vermelho); }
.ctr-res-info { background: var(--azul-bg); color: var(--azul); }
.ctr-resultado a { color: inherit; font-weight: 700; }

@media (min-width: 720px) {
  .contrato { max-width: 1000px; margin-left: auto; margin-right: auto; }
}

/* ---------- Login ---------- */

.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--primario);
}

.login-caixa {
  background: var(--superficie);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.login-caixa h1 { margin: 0 0 4px; font-size: 1.3rem; }
.login-sub { margin: 0 0 18px; color: var(--texto-suave); font-size: 0.9rem; }

.login-caixa input[type="password"] {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  margin-bottom: 12px;
}

.login-erro {
  margin-top: 12px;
  color: var(--vermelho);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---------- Telas maiores (tablet/desktop) ---------- */

@media (min-width: 720px) {
  .lista { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
  .resumo, .abas, .propostas { max-width: 1000px; margin-left: auto; margin-right: auto; }
  .modal { align-items: center; }
  .modal-caixa { border-radius: 16px; }
}