/* Archivo: /assets/ui/ui-modals.css
   AINSA SOUND - V-006
   Unifica el look de MODALES con el de Alta Socio (tipografía, espacios y inputs).
*/

/* Overlay + caja */
.as-modal-overlay{
  padding: 14px !important;
}
.as-modal{
  border-radius: 18px !important;
  max-height: calc(100vh - 28px) !important;
}

/* Header modal */
.as-modal-header{
  padding: 14px 14px !important;
}
.as-modal-title{
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: .2px;
}

/* Body modal */
.as-modal-body{
  padding: 14px !important;
  font-size: 15px;
}
.as-modal-body .muted{ font-size: 14px; }

/* Etiquetas e inputs (igual que forms) */
.as-modal-body label,
#modalBody label{
  display:block !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  color: var(--muted) !important;
  margin: 10px 0 6px !important;
  letter-spacing: .2px;
}

.as-modal-body input,
.as-modal-body select,
.as-modal-body textarea,
#modalBody input,
#modalBody select,
#modalBody textarea{
  width: 100% !important;
  font-size: 16px !important; /* evita zoom iOS */
  padding: 12px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--text) !important;
  outline: none !important;
}

.as-modal-body textarea,
#modalBody textarea{
  min-height: 120px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

.as-modal-body input:focus,
.as-modal-body select:focus,
.as-modal-body textarea:focus,
#modalBody input:focus,
#modalBody select:focus,
#modalBody textarea:focus{
  border-color: rgba(79,70,229,.60) !important;
  box-shadow: 0 0 0 4px rgba(79,70,229,.12) !important;
}

/* Grillas internas */
.as-modal-body .mgrid,
#modalBody .mgrid{
  gap: 12px !important;
}
@media (max-width: 860px){
  .as-modal-body .mgrid,
  #modalBody .mgrid{
    grid-template-columns: 1fr !important;
  }
}

/* Barra de acciones inferior (sticky, cómoda) */
.as-modal-body .m-actions,
#modalBody .m-actions{
  position: sticky !important;
  bottom: -14px !important;
  background: #fff !important;
  padding: 12px 0 6px !important;
  border-top: 1px solid #eef2f7 !important;
  margin-top: 14px !important;
  gap: 10px !important;
}

/* Botones dentro de modal (táctiles) */
.as-modal-body .btn,
#modalBody .btn{
  font-size: 15px !important;
}
@media (max-width: 768px){
  .as-modal-body .btn,
  #modalBody .btn{
    min-height: 48px !important;
    border-radius: 16px !important;
  }
}

/* Tablas dentro de modales: un poco más compactas */
.as-modal-body table th,
.as-modal-body table td,
#modalBody table th,
#modalBody table td{
  padding: 8px !important;
  font-size: 14px !important;
}