/* Overlay: ocupa toda la pantalla */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 9999;
}

/* Activo = contenedor flex que centra */
.overlay_active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Caja modal */
.modal-catalogo {
  background: #fff;
  border-radius: 12px;
  max-width: 340px;   /* límite en escritorio */
  width: 90%;         /* responsive en móviles */
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: fadeIn 0.4s ease;
}

/* Cabecera */
.modal-catalogo .modal-header {
  background-color: var(--theme-color-1);
  color: #fff;
  padding: 1rem;
  text-align: center;
}
.modal-catalogo .modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

/* Cuerpo */
.modal-catalogo .modal-body {
  padding: 1.2rem;
}
.modal-catalogo .modal-body select {
  width: 100%;
  padding: .6rem;
  border-radius: 6px;
  border: 1px solid var(--theme-color-3);
  transition: border-color .3s, box-shadow .3s;
}
.modal-catalogo .modal-body select:focus {
  border-color: var(--theme-color-1);
  box-shadow: 0 0 0 3px rgba(65, 157, 211, 0.3);
  outline: none;
}

/* Pie */
.modal-catalogo .modal-footer {
  padding: 1rem;
  background: var(--theme-color-4);
}
.modal-catalogo .boton {
  width: 100%;
  border-radius: 6px;
}

/* Animación */
@keyframes fadeIn {
  from { opacity:0; transform: translateY(-20px) scale(0.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Asegura que el overlay centre el modal */
#overlay-catalogo.overlay_active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Forzar tamaño del modal */
#overlay-catalogo .modal-catalogo {
  display: block !important;
  background: #fff;
  border-radius: 12px;
  max-width: 340px !important;  /* límite superior */
  width: auto !important;       /* ⚡ evita que se expanda al 100% */
  min-width: 280px;             /* opcional: ancho mínimo en móviles */
  margin: 0 auto !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: fadeIn 0.4s ease;
}