/* =============================
   Modal "Registro" – tema morado profesional
   ============================= */
:root {
  --m-purple-50: #f6f2fb;
  --m-purple-100: #ece4f7;
  --m-purple-200: #d9c9f0;
  --m-purple-300: #c2a9e7;
  --m-purple-400: #a987db;
  --m-purple-500: #8f67cf;
  --m-purple-600: #7d55c0;   /* tono principal */
  --m-purple-700: #6b45b0;
  --m-purple-800: #5b3a98;
  --m-purple-900: #4a2f7b;

  --m-text: #2b2b2b;
  --m-muted: #6b6b6b;
  --m-border: #e8e8ef;
  --m-success: #31c48d;
  --m-danger: #e53e3e;
}

/* Fondo detrás del modal */
#registroModal.modal.fade .modal-dialog {
  transform: translateY(12px);
  transition: transform .25s ease, opacity .25s ease;
}
#registroModal.show .modal-dialog {
  transform: translateY(0);
}
.modal-backdrop.show {
  background: rgba(33, 13, 60, 0.35);
}

/* Contenedor del modal */
#registroModal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(33, 13, 60, 0.25);
}

/* =============================
   HEADER PROFESIONAL
   ============================= */
#registroModal .modal-header {
  background: var(--m-purple-600);
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  position: relative;
}

#registroModal .modal-title {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
#registroModal .modal-title::before {
  content: "\f2bb"; /* fa-user-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2rem;
  margin-right: .5rem;
  color: #eae2f8;
}

#registroModal .modal-header .close,
#registroModal .modal-header .btn-close {
  color: #fff;
  opacity: .85;
  font-size: 1.3rem;
  transition: opacity .2s ease;
}
#registroModal .modal-header .close:hover,
#registroModal .modal-header .btn-close:hover {
  opacity: 1;
}

/* =============================
   BODY
   ============================= */
#registroModal .modal-body {
  background: #fff;
  padding: 18px 22px 6px;
  color: var(--m-text);
}
#registroModal .panel-content {
  border: 0;
  padding: 0;
}

/* Labels */
#registroModal label.label,
#registroModal .form-label {
  font-weight: 600;
  color: var(--m-purple-900);
  margin-bottom: .35rem;
}

/* Inputs y selects */
#registroModal .form-control,
#registroModal .custom-select {
  border-radius: 12px;
  border: 1px solid var(--m-border);
  box-shadow: none;
  color: var(--m-text);
  background-color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#registroModal .form-control::placeholder {
  color: #9e9e9e;
}
#registroModal .form-control:focus,
#registroModal .custom-select:focus {
  border-color: var(--m-purple-400);
  box-shadow: 0 0 0 .2rem rgba(143, 103, 207, .15);
}

/* Espaciado columnas */
#registroModal .form-row > [class*="col-"],
#registroModal .form-row > section[class*="col-"] {
  margin-bottom: .9rem;
}

/* Notas */
#registroModal .note {
  color: var(--m-muted) !important;
  font-size: .85rem;
  margin-top: .25rem;
}
#registroModal #validateExistencia,
#registroModal #validateCedula,
#registroModal #validateEmail {
  color: var(--m-danger) !important;
}

/* Checkbox */
#registroModal .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(143, 103, 207, .15);
}
#registroModal .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--m-purple-500);
  background-color: var(--m-purple-500);
}

/* =============================
   FOOTER
   ============================= */
#registroModal .modal-footer {
  background: linear-gradient(180deg, #fff, var(--m-purple-50));
  border-top: 1px solid var(--m-border);
  padding: 14px 20px;
}

/* Botones */
#registroModal .btn-primary {
  background: var(--m-purple-600);
  border-color: var(--m-purple-600);
  border-radius: 12px;
  padding: .6rem 1.1rem;
  font-weight: 600;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
#registroModal .btn-primary:hover {
  background: var(--m-purple-700);
  border-color: var(--m-purple-700);
  box-shadow: 0 8px 20px rgba(33, 13, 60, 0.18);
}
#registroModal .btn-primary:active {
  transform: translateY(1px);
}

/* Botones secundarios */
#registroModal .btn.btn-default,
#registroModal .btn.btn-outline-secondary {
  border-radius: 12px;
}

/* File input */
#registroModal .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--m-purple-400);
  box-shadow: 0 0 0 .2rem rgba(143, 103, 207, .15);
}
#registroModal .custom-file-label {
  border-radius: 12px;
  border-color: var(--m-border);
  color: var(--m-muted);
}
#registroModal .custom-file-label::after {
  content: "Buscar";
  background-color: var(--m-purple-500);
  color: #fff;
  border-left: 0;
}

/* Foto preview */
#registroModal .well.no-padding {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--m-purple-50), #fff);
  border: 1px dashed var(--m-purple-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
#registroModal .well .img-thumbnail {
  border-radius: 14px;
  border: 1px solid var(--m-border);
  box-shadow: 0 6px 14px rgba(33, 13, 60, 0.12);
}

/* Select2 */
#registroModal .select2-container .select2-selection--single,
#registroModal .select2-container .select2-selection--multiple {
  min-height: 40px;
  border-radius: 12px !important;
  border: 1px solid var(--m-border) !important;
}
#registroModal .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  padding-left: 10px;
}
#registroModal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}
#registroModal .select2-dropdown {
  border-color: var(--m-purple-300);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(33, 13, 60, 0.18);
}
#registroModal .select2-results__option--highlighted[aria-selected] {
  background-color: var(--m-purple-500);
}

/* Validaciones */
#registroModal .invalid-feedback {
  font-size: .85rem;
}
#registroModal .was-validated .form-control:invalid,
#registroModal .form-control.is-invalid {
  border-color: var(--m-danger);
}
#registroModal .was-validated .form-control:valid,
#registroModal .form-control.is-valid {
  border-color: var(--m-success);
}

/* Responsive */
@media (max-width: 576px) {
  #registroModal .modal-body { padding: 14px 14px 4px; }
  #registroModal .modal-header,
  #registroModal .modal-footer { padding: 12px 14px; }
}

/* Accesibilidad */
#registroModal .btn:focus,
#registroModal a:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(143, 103, 207, .2);
}

/* Links */
#registroModal a {
  color: var(--m-purple-700);
}
#registroModal a:hover {
  color: var(--m-purple-800);
  text-decoration: underline;
}

/* Bordes internos */
#registroModal .border-faded {
  border-color: var(--m-border) !important;
}
/* Header profesional en blanco para #registroModal */
#registroModal .modal-header {
  background: #fff; /* blanco limpio */
  color: var(--m-purple-800);
  border-bottom: 1px solid var(--m-border);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Título con icono */
#registroModal .modal-title {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--m-purple-800);
  margin: 0;
}
#registroModal .modal-title::before {
  content: "\f2bb"; /* fa-user-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2rem;
  margin-right: .5rem;
  color: var(--m-purple-500); /* ícono morado suave */
}

/* Botón de cerrar */
#registroModal .modal-header .close,
#registroModal .modal-header .btn-close {
  color: var(--m-purple-700);
  opacity: .75;
  font-size: 1.3rem;
  transition: opacity .2s ease, color .2s ease;
}
#registroModal .modal-header .close:hover,
#registroModal .modal-header .btn-close:hover {
  opacity: 1;
  color: var(--m-purple-900);
}


/* =============================
   Modal Buscar Grupo (#frmListaGrupos) con desenfoque
   ============================= */

/* Fondo semitransparente con blur */
#frmListaGrupos.modal.fade.show {
  background: rgba(33, 13, 60, 0.35); /* capa morada suave */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Contenedor del modal */
#frmListaGrupos .modal-content {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(33, 13, 60, 0.25);
  border: none;
}

/* Header */
#frmListaGrupos .modal-header {
  background: var(--m-purple-700);
  color: #fff;
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
#frmListaGrupos .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
}
#frmListaGrupos .modal-header .close {
  color: #fff;
  opacity: .85;
  font-size: 1.3rem;
  transition: opacity .2s ease;
}
#frmListaGrupos .modal-header .close:hover {
  opacity: 1;
}

/* Body */
#frmListaGrupos .modal-body {
  padding: 20px;
  background: #fff;
}

/* Input búsqueda */
#frmListaGrupos .input-group .form-control {
  border-radius: 12px;
  border: 1px solid var(--m-border);
  padding: .75rem 1rem;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#frmListaGrupos .input-group .form-control:focus {
  border-color: var(--m-purple-400);
  box-shadow: 0 0 0 .2rem rgba(143, 103, 207, 0.2);
}

/* Nota */
#frmListaGrupos .note {
  font-size: .9rem;
  color: var(--m-muted);
}

/* Panel listado */
#frmListaGrupos .panel-container {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  overflow: hidden;
  max-height: 400px;
  background: #fafafa;
}
#frmListaGrupos .panel-content {
  padding: 10px;
  overflow-y: auto;
}
#frmListaGrupos .panel-content::-webkit-scrollbar {
  width: 8px;
}
#frmListaGrupos .panel-content::-webkit-scrollbar-thumb {
  background: var(--m-purple-400);
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 576px) {
  #frmListaGrupos .modal-dialog {
    max-width: 95%;
    margin: 0 auto;
  }
  #frmListaGrupos .modal-body {
    padding: 14px;
  }
}