/* Tema visual geral - usando variáveis do tema principal quando disponível */

/* Page wrapper */
.associado-page{
  background: var(--bg-page, #f6f8fb);
  padding: var(--spacing-xl, 28px);
  font-family: var(--font-family-base, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  color: var(--text-primary, #0b1220);
  min-height: 100vh;
}

/* Layout */
.associado-wrapper{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--spacing-lg, 24px);
  align-items: start;
}

@media (max-width: 992px){
  .associado-wrapper{
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 16px);
  }
}

@media (max-width: 768px){
  .associado-page{
    padding: var(--spacing-md, 16px);
  }
}

/* Perfil Card */
.associado-card{
  background: linear-gradient(180deg,var(--glass),var(--card));
  border-radius: var(--radius);
  padding:20px;
  box-shadow: var(--elevation);
  text-align:center;
  border: 1px solid rgba(15,30,70,0.04);
}
.associado-avatar{
  width:120px; height:120px; object-fit:cover; border-radius:14px;
  margin: 0 auto 12px; border:6px solid #fff; box-shadow:0 10px 30px rgba(13,110,253,0.06);
}
.associado-name{ font-size:1.15rem; font-weight:700; margin-bottom:6px }
.associado-role{ color:var(--muted); font-size:.95rem; margin-bottom:10px }

/* Stats */
.associado-stats{ display:flex; gap:10px; justify-content:center; margin-top:10px }
.associado-stats .stat{ background:#fbfdff; padding:10px 14px; border-radius:10px; font-weight:700; color:var(--primary) }

/* Actions */
.associado-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px }
.btn-edit{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff; border:none; padding:10px 14px; border-radius:10px; box-shadow:0 8px 26px rgba(13,110,253,0.10) }
.btn-secondary{ background:#f8fafc; color:var(--muted); border:1px solid rgba(14,30,70,0.03); padding:10px 14px; border-radius:10px }

/* Main panel */
.associado-main{ background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--elevation); border:1px solid rgba(15,30,70,0.03) }

/* Grid fields */
.associado-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px }
@media (max-width:700px){ .associado-grid{ grid-template-columns:1fr } }
.associado-field{ background:#fbfdff; border:1px solid #eef6ff; padding:12px; border-radius:10px }
.associado-field label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px }
.associado-field .value{ font-weight:600; color:#0b1220 }

/* Histórico cards */
.associado-history .card{ padding:14px; border-radius:10px; background:#fff; border:1px solid #f1f7ff; box-shadow:0 6px 18px rgba(12,32,64,0.04); margin-bottom:12px }

/* Modal styles (venda) - puro visual */
.modal-custom .modal-content{ border-radius:14px; overflow:hidden; border:none; box-shadow:0 22px 60px rgba(10,30,80,0.12); z-index: 9999 !important; }
.modal-custom .modal-header{ padding:18px 20px; background: linear-gradient(90deg, rgba(13,110,253,0.04), rgba(102,16,242,0.02)); border-bottom:none }
.modal-custom .modal-title{ font-weight:700; color:#0b1220 }
.modal-custom .modal-body{ padding:20px; background:var(--card) }
.modal-custom .modal-produto{ display:flex; gap:14px; align-items:center; margin-bottom:12px }
.modal-custom .modal-produto img{ width:92px; height:92px; object-fit:cover; border-radius:10px; box-shadow:0 10px 26px rgba(13,110,253,0.06) }
.modal-custom .modal-produto .info .preco{ font-size:1.15rem; font-weight:700; color:var(--primary) }
.modal-custom .modal-footer{ border-top:none; padding:16px 20px; background: linear-gradient(180deg,#fff,#fbfdff); display:flex; justify-content:flex-end; gap:10px }

/* Tabela de vendas */
.vendas-table{ width:100%; border-collapse:separate; border-spacing:0 10px; font-size:.95rem }
.vendas-table thead th{ text-align:left; padding:12px 16px; color:#111827; font-weight:700; background:transparent; border-bottom:1px solid rgba(14,30,70,0.03) }
.vendas-table tbody tr{ background:#fff; border-radius:10px; box-shadow:0 8px 22px rgba(12,32,64,0.04); transition: transform .12s, box-shadow .12s; display:table-row }
.vendas-table tbody td{ padding:12px 16px; vertical-align:middle; color:#334155; border-bottom:0 }
.vendas-table tbody tr:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(12,32,64,0.06) }

/* Status badges */
.status{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; display:inline-block }
.status-pendente{ background:#fff7ed; color:#c76b00; border:1px solid rgba(199,107,0,0.06) }
.status-concluida{ background:#e6f6ec; color:#0b8a45; border:1px solid rgba(25,135,84,0.06) }
.status-cancelada{ background:#fff0f0; color:#b02a37; border:1px solid rgba(176,42,55,0.06) }

/* Página de edição */
.associado-edit{ max-width:980px; margin:0 auto; background:var(--card); padding:22px; border-radius:12px; box-shadow:var(--elevation) }
.form-edit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px }
.form-edit-row label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px }
.form-edit-row input, .form-edit-row textarea, .form-edit-row select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e9f0ff; background:#fbfdff }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }

/* Micro interactions */
.associado-card, .associado-main, .associado-field{ transition: transform .12s ease, box-shadow .12s ease }
.associado-card:hover, .associado-main:hover{ transform:translateY(-6px); box-shadow:0 26px 70px rgba(12,32,64,0.08) }

/* Accessibility: focus */
button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid rgba(13,110,253,0.12); outline-offset:2px }