/* ============================================================
   Inscripción de Pacientes - estilos específicos de la vista
   Loader de pantalla completa y ajustes del autocompletado.
   ============================================================ */

/* ── Overlay de carga (loader) ───────────────────────────── */
.mc-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20000;
}

.mc-loader-spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-primary, #00876C);
  border-radius: 50%;
  animation: mc-spin 0.8s linear infinite;
}

@keyframes mc-spin {
  to { transform: rotate(360deg); }
}

/* ── Autocompletado (autoComplete.js v10) ────────────────── */
/* Los inputs autocompletables deben ocupar el ancho de su columna. */
.autoComplete_wrapper {
  display: block;
  position: relative;
  width: 100%;
}

.autoComplete_wrapper > input {
  width: 100%;
}

/* La hoja de estilo de fábrica de autoComplete.js pinta el input, su
   placeholder y sus estados hover/focus en salmón por defecto, con forma de
   píldora y espacio reservado para un ícono de búsqueda; se neutraliza para
   que luzca igual que cualquier .form-control del formulario (mismo borde,
   radio y relleno que los campos de País/Provincia). El rojo solo debe
   aparecer cuando el propio formulario agrega .is-invalid. */
.autoComplete_wrapper > input,
.autoComplete_wrapper > input:hover,
.autoComplete_wrapper > input:focus {
  color: var(--color-text, #1a1a1a);
  border-color: var(--color-gray-2, #e0e0e0);
  height: auto;
  padding: 0.6rem 0.9rem;
  border-width: 1.5px;
  border-radius: 8px;
  background-image: none;
  font-size: 0.95rem;
}

.autoComplete_wrapper > input::placeholder,
.autoComplete_wrapper > input:hover::placeholder,
.autoComplete_wrapper > input:focus::placeholder {
  color: #6c757d;
}

.autoComplete_wrapper > input:focus {
  border-color: var(--color-primary, #00876C);
  box-shadow: 0 0 0 3px rgba(0,135,108,0.15);
}

.autoComplete_wrapper > input.is-invalid {
  border-color: #dc3545;
}

/* Lista de resultados sobre el resto del formulario. */
.autoComplete_wrapper > ul {
  z-index: 100;
  border: 1.5px solid var(--color-gray-2, #e0e0e0);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.autoComplete_wrapper > ul > li {
  font-family: var(--font-family, "Barlow", sans-serif);
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
}

.autoComplete_wrapper > ul > li:hover,
.autoComplete_wrapper > ul > li[aria-selected="true"] {
  background: var(--color-gray-1, #f7f7f7);
  color: var(--color-primary, #00876C);
}

.autoComplete_wrapper > ul > li mark {
  background: transparent;
  color: var(--color-primary, #00876C);
  font-weight: 700;
}