/* =========================================================
   CRM APVS Regional — componentes.css
   ---------------------------------------------------------
   Peças de UI reutilizadas em MAIS DE UMA tela: cards,
   estrutura de formulário (seção/grid/campo), botões.

   Carregue este arquivo em toda página que usar algum desses
   componentes. Ex.: Novo Lead, Editar Cliente, Usuários (CRUD)
   provavelmente vão usar .form-section e .btn.

   Se uma página precisar de algo BEM específico dela (uma
   tabela, um dashboard com cards de gráfico), isso não entra
   aqui — vai em paginas/<nome>.css.
   ========================================================= */

/* ---------- 1. Card genérico ---------- */
.card {
  background: #ffffff;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borda);
  overflow: hidden;
  margin-bottom: 26px;
}

/* ---------- 2. Estrutura de formulário em seções ---------- */
/* Padrão: <div class="form-section">
             <div class="form-section__title">Nome da seção</div>
             <div class="form-section__body">...campos...</div>
           </div> */
.form-section { margin-bottom: 22px; }

.form-section__title {
  background: var(--azul-800);
  color: var(--texto-claro);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}

.form-section__body {
  background: #ffffff;
  border: 1px solid var(--borda);
  border-top: none;
  border-radius: 0 0 var(--raio-sm) var(--raio-sm);
  padding: 18px 16px;
  box-shadow: var(--sombra);
}

/* Compatível com <fieldset>/<legend>, caso alguma tela prefira semântica nativa */
fieldset.form-section__body { margin: 0; }
legend.form-section__title { width: 100%; border-radius: var(--raio-sm) var(--raio-sm) 0 0; }

/* ---------- 3. Grid de campos ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--azul-900);
}

.form-group label .obrigatorio {
  color: var(--erro);
  margin-left: 2px;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: #fbfdff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px rgba(47, 124, 194, 0.20);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-group input:disabled,
.form-group select:disabled {
  background: var(--azul-100);
  color: var(--texto-muted);
  cursor: not-allowed;
}

/* Estado de erro de validação de campo individual */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.form-group .mensagem-erro {
  font-size: 12px;
  color: var(--erro);
}

/* Campo que ocupa a linha inteira (ex.: Observação) */
.form-group--full { grid-column: 1 / -1; }

/* ---------- 4. Ações do formulário ---------- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
}

/* ---------- 5. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--raio-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--azul-800);
  color: var(--texto-claro);
}

.btn--primary:hover {
  background: var(--azul-900);
  border-color: var(--dourado);
}

.btn--link {
  background: transparent;
  color: var(--azul-800);
  border-color: var(--borda);
}

.btn--link:hover {
  border-color: var(--azul-500);
  color: var(--azul-500);
  text-decoration: none;
}

/* ---------- 6. Responsivo dos componentes ---------- */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }

  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn,
  .form-actions a { width: 100%; text-align: center; }
}

/* ---------- 7. Tabela genérica (usada em Leads, Consultores, etc.) ---------- */
.tabela-wrap {
  background: #ffffff;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  overflow-x: auto; /* rola só a tabela em telas estreitas, sem quebrar o layout */
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela th,
.tabela td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
}

.tabela th {
  background: var(--azul-800);
  color: var(--texto-claro);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
}

/* Listras alternadas: ajuda a acompanhar a linha visualmente
   quando a lista cresce (10, 20+ leads) */
.tabela tbody tr:nth-child(even) { background: var(--azul-050); }

.tabela tbody tr:hover { background: #eaf2fb; }

.tabela tbody tr:last-child td { border-bottom: none; }

.tabela .col-checkbox { width: 34px; text-align: center; }
.tabela .col-acoes { white-space: nowrap; }

/* ---------- 8. Badge de status (cor vem do banco, via style inline) ---------- */
.badge-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 9. Botão pequeno (ações dentro de linha de tabela) ---------- */
.btn-sm {
  font-size: 12px;
  padding: 6px 12px;
}

.btn--perigo {
  color: var(--erro);
  border-color: #f5c6c0;
}

.btn--perigo:hover {
  background: #fdecea;
  border-color: var(--erro);
  color: var(--erro);
}

/* ---------- 10. Contador "X de Y" e barra de paginação ---------- */
.contador-resultados {
  font-size: 13px;
  color: var(--texto-muted);
  margin-bottom: 12px;
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.paginacao a,
.paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-800);
}

.paginacao a:hover {
  border-color: var(--azul-500);
  text-decoration: none;
}

.paginacao .pagina-atual {
  background: var(--azul-800);
  color: var(--texto-claro);
  border-color: var(--azul-800);
}

/* ---------- Indicador "Agendamento" (chips por categoria) ---------- */
.indicador-agendamento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-muted);
  margin-bottom: 14px;
}

.indicador-agendamento strong {
  color: var(--azul-900);
  font-weight: 700;
}

.chip-agendamento {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.chip-agendamento--cinza {
  background: #e9ecef;
  color: #495057;
}

.chip-agendamento--laranja {
  background: #fff3cd;
  color: #916800;
}

.chip-agendamento--vermelho {
  background: #fdecea;
  color: var(--erro);
}

/* ---------- 11. Modal / Popup (Ver e Editar lead, e outras telas futuras) ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 38, 63, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.aberto { display: flex; }

.modal {
  background: #ffffff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  background: var(--azul-800);
  color: var(--texto-claro);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-header h2 { margin: 0; font-size: 16px; font-weight: 700; }

.modal-fechar {
  background: none;
  border: none;
  color: var(--texto-claro);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--borda);
  background: var(--azul-050);
  flex-shrink: 0;
}

.modal-tabs button {
  flex: 1;
  background: none;
  border: none;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-family: inherit;
}

.modal-tabs button.ativa {
  color: var(--azul-800);
  border-bottom-color: var(--dourado);
}

.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-aba { display: none; }
.modal-aba.ativa { display: block; }

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ---- Modo "ver": esconde tudo que só existe pra edição ---- */
.modal[data-modo="ver"] .bloco-editar-dados,
.modal[data-modo="ver"] .bloco-editar-comercial,
.modal[data-modo="ver"] .bloco-editar-agendamento,
.modal[data-modo="ver"] #modal-nova-observacao-wrap,
.modal[data-modo="ver"] #modal-cancelar,
.modal[data-modo="ver"] #modal-salvar {
  display: none;
}

/* ---- Modo "editar": esconde a versão só-leitura e o botão "Fechar" simples ---- */
.modal[data-modo="editar"] .bloco-ver-dados,
.modal[data-modo="editar"] .bloco-ver-comercial,
.modal[data-modo="editar"] .bloco-ver-agendamento,
.modal[data-modo="editar"] #modal-fechar-ver {
  display: none;
}

/* ---- Ficha de visualização: banner + linhas label/valor ---- */
/* Reaproveita .form-section__title / .form-section__body (mesma
   faixa azul escura com texto branco usada em Cadastrar Lead). */
.modal .form-section__body { margin-bottom: 16px; }

.info-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--azul-100);
  font-size: 14px;
}

.info-linha:last-child { border-bottom: none; }

.info-linha .info-label {
  color: var(--texto-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.info-linha strong {
  color: var(--texto);
  font-weight: 700;
  text-align: right;
}

.modal-nota {
  font-size: 12px;
  color: var(--texto-muted);
  margin: 4px 0 0;
}

.observacao-item {
  border-bottom: 1px solid var(--azul-100);
  padding: 10px 0;
  font-size: 13px;
}

.observacao-item:last-child { border-bottom: none; }

.observacao-item .meta {
  color: var(--texto-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.observacoes-lista {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 16px;
}