/* modules/busquedasporcatylibres/views/css/estilos.css */

.tabs-content{
	width:97%;
}

.bpc-tabs {
  width: 100%;
  font-family: 'Poppins', sans-serif;
}
.bpc-tabs input,
.bpc-tabs select,
.bpc-tabs .btn-buscar {
  font-family: 'Poppins', sans-serif;
}

.bpc-tabs .tabs-nav {
  display: flex;
  border-bottom: 2px solid #fff;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
	text-align: center;
    justify-content: center;
}

.bpc-tabs .tabs-nav li {
  padding: .5rem 1rem;
  cursor: pointer;
  color: #fff;
  border: 2px solid transparent;
  border-bottom: none;
  margin-right: .5rem;
  border-radius: 4px 4px 0 0;
  transition: background .3s, color .3s;
}

.bpc-tabs .tabs-nav li.active {
  color: #fff;
  border-color: #fff;
  border-radius: 10px 10px 0 0;
}

/* contenedor de las pestañas */
.bpc-tabs .tabs-content .tab-pane {
  display: none;
}

.bpc-tabs .tabs-content .tab-pane.active {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ESTILO para INPUT text */
.bpc-tabs .tab-pane input[type="text"] {
  padding: 10px 20px 10px 20px;
  width: 1334px;
  border: 2px solid #bd3a2b;
  border-radius: 30px;
  background: white;
  color: #bd3a2b;
  font-size: 1rem;
  flex: 1; /* para que ocupe más espacio si quieres */
}

.bpc-tabs .tab-pane input[type="text"]::placeholder {
  color: #bd3a2b;
}



/* ESTILO para SELECTs con flecha visible */
.bpc-tabs .tab-pane select {
  padding: 10px 50px 10px 20px; /* haz el right padding justo para la flecha */
  border: 1px solid rgba(255,255,255,0.7);
   font-weight: 600;
  border-radius: 50px;
  background: white;
  color: #bd3a2b;
  font-size: .9rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
background-image:
  url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><path fill='%23bd3a2b' d='M0 0l5 5 5-5z'/></svg>");

  background-repeat: no-repeat;
  background-position: right 15px center;
}

/* Estilo de los selects deshabilitados */
.bpc-tabs .tab-pane select:disabled {
  background-color: #cccccc9c !important;
  color: white !important; /* Texto más claro */
  border-color: rgba(255,255,255,0.5);
}

/* Cambiar la flecha del select deshabilitado */
.bpc-tabs .tab-pane select:disabled {
  background-image:
    url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><path fill='%23999' d='M0 0l5 5 5-5z'/></svg>");
}




/* BOTÓN de búsqueda */
.bpc-tabs .btn-buscar {
  padding: .6rem 2rem;
  font-weight: 600;
  border: 2px solid #fff;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s;
}

.bpc-tabs .btn-buscar:hover {
  background: white;
  color: #bd3a2b;
  border: 2px solid #bd3a2b;
}



/* Reemplaza o elimina tu @keyframes fadeIn */

/* Nueva animación fadeInUp */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .bpc-tabs {
    width: 100% !important;
    flex-direction: column;
  }

  .bpc-tabs .tabs-nav {
    flex-direction: column;
  }

  .bpc-tabs .tabs-nav li {
    margin-bottom: 0.5rem;
  }

  .bpc-tabs .tab-pane {
    flex-direction: column;
    width: 100% !important;
  }

  .bpc-tabs .tab-pane input[type="text"],
  .bpc-tabs .tab-pane select {
    width: 100% !important;
    font-size: 1rem;
  }

  .bpc-tabs .btn-buscar {
    width: 100%;
  }
}