/* ============================================================
   VIEW — CADASTRO NOVO ASSOCIADO
   ============================================================ */
.view--cadastro-novo-associado {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cadastro-associado__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cadastro-associado__cabecalho-textos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cadastro-associado__titulo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cor-texto-primario, #0f172a);
}

.cadastro-associado__subtitulo {
  margin: 0;
  color: var(--cor-texto-secundario, #64748b);
  font-size: 0.95rem;
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.cadastro-associado__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

.cadastro-associado__bloco {
  background: var(--fundo-card);
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.cadastro-associado__bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cadastro-associado__bloco-topo--acoes {
  align-items: center;
}

.cadastro-associado__bloco-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.cadastro-associado__bloco-titulo .material-icons {
  font-size: 1.2rem;
  color: #2563eb;
}

/* ============================================================
   GRID DE CAMPOS
   ============================================================ */
.cadastro-associado__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.cadastro-associado__campo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cadastro-associado__campo label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

.cadastro-associado__campo input,
.cadastro-associado__campo select,
.cadastro-associado__campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  border: 1px solid #c7d4e5;
  border-radius: 14px;
  background: var(--fundo-card);
  color: #0f172a;
  font-size: 0.98rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}

.cadastro-associado__campo input::placeholder,
.cadastro-associado__campo textarea::placeholder {
  color: #94a3b8;
}

.cadastro-associado__campo input:focus,
.cadastro-associado__campo select:focus,
.cadastro-associado__campo textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.cadastro-associado__campo textarea {
  min-height: 120px;
  resize: vertical;
}

.cadastro-associado__campo input[readonly] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

/* Campos preenchidos/selecionados com tom mais escuro */
.cadastro-associado__campo input.preenchido,
.cadastro-associado__campo select.preenchido,
.cadastro-associado__campo textarea.preenchido {
  background: #f1f5f9;
}

.cadastro-associado__campo--acao {
  justify-content: flex-end;
}

/* ============================================================
   BOTÕES DO FORMULÁRIO
   ============================================================ */
.cadastro-associado__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.cadastro-associado__botao .material-icons {
  font-size: 1.1rem;
}

.cadastro-associado__campo--acao .cadastro-associado__botao {
  width: 100%;
  min-height: 48px;
}

/* ============================================================
   TABELA
   ============================================================ */
.cadastro-associado__tabela-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: var(--fundo-card);
}

.cadastro-associado__tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.cadastro-associado__tabela thead th {
  padding: 1rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #557195;
  background: #f8fbff;
  border-bottom: 1px solid #dbe4f0;
}

.cadastro-associado__tabela tbody td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #eef3f8;
  color: #1e293b;
  font-size: 0.96rem;
}

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

.cadastro-associado__estado-vazio {
  text-align: center;
  color: #64748b;
  padding: 1.5rem 1rem;
}

.col-acoes {
  width: 140px;
}

/* ============================================================
   AÇÕES DO RODAPÉ DO FORM
   ============================================================ */
.cadastro-associado__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.cadastro-associado__botao--rodape {
  min-width: 160px;
}

/* ============================================================
   UTILITÁRIOS DE GRID (span-1 … span-12)
   ============================================================ */
.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* ============================================================
   MODAL — <dialog> NATIVO
   Compatível com o HTML de cadastro-novo-associado
   ============================================================ */

/* ── Reset do <dialog> nativo ────────────────────────────── */
dialog.modal {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  display: none;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
}

/* Estado aberto via showModal() */
dialog.modal[open] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem 2rem;
}

/* Backdrop nativo */
dialog.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

/* ── Janela interna (wrapper obrigatório) ────────────────── */
.modal__dialog {
  position: relative;
  width: 100%;
  background: var(--fundo-card);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  border: 1px solid #dbe4f0;
  overflow: hidden;
  animation: modalFadeIn 0.2s ease;
  max-height: calc(100vh - 8vh - 2rem);
  display: flex;
  flex-direction: column;
}

/* Tamanhos do modal */
.modal__dialog--md { width: min(640px,  calc(100vw - 32px)); }
.modal__dialog--lg { width: min(760px,  calc(100vw - 32px)); }
.modal__dialog--xl { width: min(980px,  calc(100vw - 32px)); }

/* ── Cabeçalho ───────────────────────────────────────────── */
.modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #dbe4f0;
  background: var(--fundo-card);
  flex-shrink: 0;
}

.modal__titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

.modal__titulo .material-icons {
  font-size: 1.2rem;
  color: #2563eb;
}

.modal__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal__fechar:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ── Corpo ───────────────────────────────────────────────── */
.modal__corpo {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.modal__corpo input,
.modal__corpo select,
.modal__corpo textarea {
  box-sizing: border-box;
}

/* ── Rodapé ──────────────────────────────────────────────── */
.modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid #dbe4f0;
  background: var(--fundo-card);
  flex-shrink: 0;
}

/* ── Tipo de lançamento ──────────────────────────────────── */
.modal__tipo-lancamento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.modal__tipo-btn {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: var(--fundo-card);
  color: #94a3b8;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.modal__tipo-btn .material-icons {
  font-size: 1rem;
}

.modal__tipo-btn--receber.modal__tipo-btn--ativo {
  border-color: #86efac;
  background: #dcfce7;
  color: #16a34a;
}

.modal__tipo-btn--pagar.modal__tipo-btn--ativo {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #dc2626;
}

/* ── Animação de entrada ─────────────────────────────────── */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Bloqueia scroll do body enquanto modal aberto ───────── */
body.modal-open {
  overflow: hidden;
}

/* ── Responsividade dos modais ───────────────────────────── */
@media (max-width: 768px) {

  dialog.modal[open] {
    align-items: flex-start;
    padding: 12px 10px;
  }

  .modal__dialog,
  .modal__dialog--md,
  .modal__dialog--lg,
  .modal__dialog--xl {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
  }

  .modal__rodape {
    flex-direction: column-reverse;
  }

  .modal__rodape .btn {
    width: 100%;
  }

  .modal__tipo-lancamento {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width: 1200px) {
  .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { grid-column: span 12; }
  .span-5, .span-6 { grid-column: span 6; }
  .span-4          { grid-column: span 4; }
  .span-3          { grid-column: span 3; }
  .span-2          { grid-column: span 2; }
  .span-1          { grid-column: span 1; }
}

@media (max-width: 992px) {
  .cadastro-associado__bloco {
    padding: 1rem;
    border-radius: 16px;
  }

  .cadastro-associado__grid {
    gap: 0.85rem;
  }

  .span-6, .span-5, .span-4, .span-3, .span-2, .span-1 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .cadastro-associado__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }

  .cadastro-associado__bloco-topo,
  .cadastro-associado__bloco-topo--acoes {
    flex-direction: column;
    align-items: flex-start;
  }

  .cadastro-associado__botao {
    width: 100%;
  }

  .cadastro-associado__acoes {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cadastro-associado__botao--rodape {
    width: 100%;
    min-width: 100%;
  }

  .span-12, .span-11, .span-10, .span-9, .span-8, .span-7,
  .span-6,  .span-5,  .span-4,  .span-3, .span-2, .span-1 {
    grid-column: span 12;
  }

  .cadastro-associado__campo input,
  .cadastro-associado__campo select,
  .cadastro-associado__campo textarea,
  .cadastro-associado__campo--acao .cadastro-associado__botao {
    min-height: 46px;
  }

  /* Modal mobile */
  .modal__dialog,
  .modal__dialog--md,
  .modal__dialog--lg,
  .modal__dialog--xl {
    width: calc(100vw - 20px);
    margin-top: 12px;
    max-height: calc(100vh - 24px);
  }

  .modal__footer {
    flex-direction: column-reverse;
  }

  .modal__footer .btn {
    width: 100%;
  }

  .modal__tipo-lancamento {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cadastro-associado__titulo {
    font-size: 1.25rem;
  }

  .cadastro-associado__subtitulo {
    font-size: 0.9rem;
  }

  .cadastro-associado__bloco {
    padding: 0.9rem;
    border-radius: 14px;
  }

  .cadastro-associado__bloco-titulo {
    font-size: 1rem;
  }

  .cadastro-associado__tabela thead th,
  .cadastro-associado__tabela tbody td {
    padding: 0.9rem 0.85rem;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-tema="escuro"] .cadastro-associado__bloco {
  border-color: #334155;
  box-shadow: none;
}

[data-tema="escuro"] .cadastro-associado__bloco-titulo {
  color: var(--texto-principal);
}

[data-tema="escuro"] .cadastro-associado__campo label {
  color: var(--texto-principal);
}

[data-tema="escuro"] .cadastro-associado__campo input,
[data-tema="escuro"] .cadastro-associado__campo select,
[data-tema="escuro"] .cadastro-associado__campo textarea {
  color: var(--texto-principal);
  border-color: #334155;
  background: var(--fundo-card);
}

[data-tema="escuro"] .cadastro-associado__campo input::placeholder,
[data-tema="escuro"] .cadastro-associado__campo textarea::placeholder {
  color: var(--texto-suave);
}

[data-tema="escuro"] .cadastro-associado__campo input[readonly] {
  background: var(--cor-cinza-50);
  color: var(--texto-secundario);
}

[data-tema="escuro"] .cadastro-associado__campo input.preenchido,
[data-tema="escuro"] .cadastro-associado__campo select.preenchido,
[data-tema="escuro"] .cadastro-associado__campo textarea.preenchido {
  background: var(--cor-cinza-50);
}

[data-tema="escuro"] .cadastro-associado__tabela-wrapper {
  border-color: #334155;
}

[data-tema="escuro"] .cadastro-associado__tabela thead th {
  color: var(--texto-secundario);
  background: var(--fundo-secao);
  border-color: #334155;
}

[data-tema="escuro"] .cadastro-associado__tabela tbody td {
  color: var(--texto-principal);
  border-color: #334155;
}

[data-tema="escuro"] .modal__dialog {
  border-color: #334155;
}

[data-tema="escuro"] .modal__cabecalho {
  border-color: #334155;
}

[data-tema="escuro"] .modal__titulo {
  color: var(--texto-principal);
}

[data-tema="escuro"] .modal__fechar:hover {
  background: var(--cor-cinza-50);
  color: var(--texto-principal);
}

[data-tema="escuro"] .modal__rodape {
  border-color: #334155;
}

[data-tema="escuro"] .modal__tipo-btn--receber.modal__tipo-btn--ativo {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso-clara);
  color: var(--cor-sucesso);
}

[data-tema="escuro"] .modal__tipo-btn--pagar.modal__tipo-btn--ativo {
  border-color: var(--cor-erro);
  background: var(--cor-erro-clara);
  color: var(--cor-erro);
}

/* ============================================================
   CAMPOS OBRIGATÓRIOS E ESTADO DE ERRO
   ============================================================ */
.cadastro-associado__campo--obrigatorio label::after {
  content: ' *';
  color: var(--cor-erro, #dc2626);
  font-weight: 700;
}

.cadastro-associado__campo input.input--erro,
.cadastro-associado__campo select.input--erro {
  border-color: var(--cor-erro, #dc2626) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12) !important;
  background: #fff5f5 !important;
}

[data-tema="escuro"] .cadastro-associado__campo input.input--erro,
[data-tema="escuro"] .cadastro-associado__campo select.input--erro {
  background: rgba(220, 38, 38, 0.1) !important;
}