/* NO DEJAR VACIO */
/* Estilo general del contenedor */

.yt-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #555;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 10;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* Overlay pantalla completa */
.yt-overlay {
	position: fixed;         /* relativo al viewport */
	inset: 0;                /* top:0; right:0; bottom:0; left:0 */
	background: rgba(0,0,0,.55);
	display: grid;
	place-items: center;     /* centra el contenido */
	z-index: 9999;
  }
  
  /* Contenedor centrado (por si quieres más contenido) */
  .yt-overlay__center {
	display: grid;
	gap: 12px;
	justify-items: center;
  }
  
  /* Loader circular */
  .yt-loader-general {
	width: 48px;
	height: 48px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #555;
	border-radius: 50%;
	animation: yt-spin 1s linear infinite;
  }
  
  @keyframes yt-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  
  /* (Opcional) texto bajo el loader */
  .yt-overlay__text {
	color: #fff;
	font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
 

#ps_buscadorhome.search-box {
  width: 90%;
  display: block;
  margin: 0 auto;
  }
  .zone_wrapp {
    display: inline-block;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
    max-width: 100%;
    margin: 0 auto;
    /* min-height: 105px; */
    width: 100%;
    margin-bottom: 30px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  #ps_buscadorhome .popin-title {
    font-size: 1.5em;
    font-weight: 600;
    padding-bottom: 10px;
    padding-left: 15px;
  }
  
  #ps_buscadorhome .search-box-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  /* Estilo para cada elemento del buscador */
  #ps_buscadorhome .search-box-item {
    display: flex;
    flex: 1;
  }
  
  #ps_buscadorhome .search-dropdown {
    width: 100%;
    padding: 10px;
    
    border-radius: 5px;
    font-size: 14px;
    
    transition: border-color 0.3s ease;
  }
  
  #ps_buscadorhome .search-dropdown:focus {
    border-color: #007bff;
  }
  
  /* Estilo del input */
  #ps_buscadorhome .search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s ease;
  }
  
  #ps_buscadorhome .search-input:focus {
    border-color: #007bff;
  }
  
  /* Botón de búsqueda */
  #ps_buscadorhome .search-button {
    width: 30%; /* Ajusta el ancho del botón dentro del bloque */
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #FF0000;
    border: none;
    border-radius: 0 5px 5px 0; /* Bordes redondeados (derecha) */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  #ps_buscadorhome .search-button:hover {
    background-color: #CC0000;
  }
  
  #ps_buscadorhome .input-with-button {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
  }
  #ps_buscadorhome .input-with-button .search-input {
    flex: 3; /* El input ocupa 3 partes del espacio */
  }
  
  #ps_buscadorhome .input-with-button .search-button {
    flex: 1; /* El botón ocupa 1 parte del espacio */
  }
  /* Mobile: cada item a 100% de ancho */
@media (max-width: 768px) {
  #ps_buscadorhome .search-box-form {
    flex-direction: column;          /* apila los items */
    gap: 10px;
  }

  #ps_buscadorhome .search-box-item {
    flex: 0 0 100%;                  /* no crecer/encoger, 100% base */
    width: 100%;
  }

  /* Forzar los selects (bootstrap-select) a 100% */
  #ps_buscadorhome .search-box-item .bootstrap-select,
  #ps_buscadorhome .search-box-item .bootstrap-select > .dropdown-toggle,
  #ps_buscadorhome select.search-dropdown {
    width: 100% !important;
  }

  /* Campo + botón: también a 100% y apilados en pantallas muy pequeñas */
  #ps_buscadorhome .input-with-button {
    flex-direction: column;
  }
  #ps_buscadorhome .input-with-button .search-input,
  #ps_buscadorhome .input-with-button .search-button {
    width: 100%;
  }
}

/* Por si algún estilo previo fija alturas/ancho del botón de bootstrap-select */
#ps_buscadorhome .bootstrap-select .filter-option { 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}