/* Estilos básicos de modales */
  .modal {
    display: none; /* oculto por defecto */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 150px;
    width: 100%;
    height: 100%;
    overflow: auto; /* para scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.5); /* fondo semitransparente */
  }

  .modal.show {
    display: block; /* cuando tenga la clase "show", se muestra */
  }

  .modal-content {
    background-color: #dcdcdc;
    margin: 50px auto;
    padding: 40px;
    width: 100%;
    max-width: 500px;
    border-radius: 5px;
    position: relative;
  }
  .modal-content h2{
    text-align: center;
    margin-top: 0;
    color:#777;
    margin-bottom: 20px;
  }
  .modal-content ul{
    list-style: none;
    padding: 0;
    display: inline-block;
    width: 100%;
  }
  .modal-content label{
    display: inline-block;
    width:48%;
    color:#666;
  }
  .modal-content #compraventa{
    text-align: center !important;
  }
  .modal-content li{
    color:darkorange;
  }

  .close {
    float: right;
    font-size: 1.2em;
    cursor: pointer;
  }
  .modal-content input[type="radio"] {
    -webkit-appearance: none; /* Safari / iOS */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* Estándar */
    border-radius: 4px;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    outline: none;
    cursor: pointer;
    background: #fff;         /* Fondo del checkbox sin marcar */
    border: none;             /* Sin borde */
  }
  
  /* Cuando se hace hover, por ejemplo, opcional */
  .modal-content input[type="radio"]:hover {
    background: #eee;         /* Un pequeño efecto para indicar hover, si quieres */
  }
  
  /* Cuando está marcado */
  .modal-content input[type="radio"]:checked {
    background: #FF7F02;       /* Fondo naranja */
    
  }
  
  /* Si deseas añadir un “check” visible dentro */
  .modal-content input[type="radio"]:checked::after {
    content: "";
    position: relative;
    display: block;
    width: 5px;               /* Ajusta para dibujar una tilde o cuadradito */
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translate(3px, -4px); /* El truco para la tilde */
    
  }

  .modal-content button{
    display: block;
    width: 150px;
    padding: 5px;
    border: 1px solid #717171;
    background-color: #ff810200 !important;
    color: #777;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3sease;
  }
  .modal-content button:hover{
    background-color: #ff8102 !important;
    color:#fff;
    border: 1px solid #ff8102;
  }

  .filters-row {
    /* Puede ser display: block o inline-block */
    /* con la anchura que desees. */
    width: 100%; /* ejemplo */
    /* margin-bottom: 10px;  si lo deseas */
  }
  
  /* Cada "campo" (label + input/select) en un bloque en línea */
  .field-group {
    display: inline-block; 
    vertical-align: top; /* Para que se alineen en la parte superior */
    margin-right: 10px;  /* Espacio horizontal entre campos */
    width:30%;
  }
  
  /* Haz que el label se muestre encima del input/select */
  .field-group label {
    display: block; 
    margin-bottom: 5px; /* Espacio entre label y el input */
    font-size: 12px;
    
  }
  
  /* Ajustar tamaño de los input/select si quieres */
  .field-group select,
  .field-group input {
    width: 100%;   /* O el ancho que gustes */
    box-sizing: border-box;
    display: inline-block;
    padding: 5px;
    border: 1px solid #fff;
    border-radius: 5px;
    background-color: #fff;
  }

  /* Modal en pantalla completa (superpuesto) */
.modal2 {
  display: none; /* oculto por defecto */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 80px;  
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* fondo oscuro semitransparente */
  align-items: center;
  justify-content: center;
}

/* Imagen dentro del modal */
.modal-image {
  max-width: 70%;
  max-height: 70%;
  transition: transform 0.2s; /* Para suavizar el zoom */
}

/* Botón de cerrar (X) */
#closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 2rem;
  color: white;
}

/* Flechas de navegación */
.nav-btn2 {
  width:30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  font-size: 2rem;
  padding: 0.2rem .5rem;
  cursor: pointer;
  color: white;
}

/* Flecha anterior a la izquierda */
#prevBtn {
  left: 20px;
}

/* Flecha siguiente a la derecha */
#nextBtn {
  right: 20px;
}