.switch-container {
    position: relative;
    display: inline-block;
    width: 110px; /* Aumenta el ancho para dar más espacio al texto */
    height: 30px;
}

.switch-container input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 30px;
    transition: 0.4s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    z-index: 2;
}

.label-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px; /* Puedes reducir el tamaño de la fuente si es necesario */
    font-weight: bold;
    color: white;
    z-index: 3; /* Encima del fondo */
    pointer-events: none;
    margin-left: 30px; /* Añade espacio para que no se superponga con el círculo */
}

.switch-container input + .slider .label-text {
    margin-left: 60px; /* Ajusta el texto más a la izquierda cuando el switch está inactivo */
}

.switch-container input:checked + .slider {
    background-color: #4CAF50;
}

.switch-container input:checked + .slider:before {
    transform: translateX(80px); /* Asegúrate de que la esfera se mueva lo suficiente */
}

.switch-container input:checked + .slider .label-text {
    margin-left: 10px; /* Ajusta el texto más a la izquierda cuando el switch está activo */
}

/*
 * Estilos específicos para el autocompletar de clientes en el módulo amprofilecomercial
 */
.ui-autocomplete.am_customer_results_list {
    /*
     * 1. Ajuste del z-index:
     * Asegura que el desplegable se muestre por encima de otros elementos,
     * especialmente el menú lateral con z-index alto (9999).
     * Siempre usa un valor superior al z-index del elemento que lo oculta.
     */
    z-index: 10000 !important;
    position: fixed !important;

    /*
     * 2. Ajuste de la posición vertical:
     * El desplegable del autocompletar de jQuery UI generalmente se posiciona
     * automáticamente. Si aún aparece ligeramente desalineado (demasiado abajo),
     * puedes usar `margin-top` negativo para subirlo si es necesario.
     * Empieza con valores pequeños como -1px o -2px y ajusta.
     */
    /* margin-top: -1px; */ /* Descomenta y ajusta si el desplegable aparece demasiado bajo */

    /*
     * Opcional: Ajuste del ancho del desplegable
     * Por defecto, el autocompletar suele igualar el ancho del input.
     * Si necesitas que sea más ancho o más estrecho, puedes forzarlo aquí.
     */
    /* width: 300px !important; */ /* Ejemplo: Ancho fijo */
    /* width: auto !important; */  /* Ejemplo: Que el ancho se ajuste al contenido (menos común, puede requerir más ajustes) */

    /* Resto de estilos para el contenedor del desplegable */
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    max-height: 250px; /* Limita la altura del desplegable */
    overflow-y: auto; /* Agrega un scroll si hay muchas sugerencias */
    list-style: none; /* Elimina viñetas si las hay */
    padding: 0; /* Elimina padding por defecto si lo hay */
    margin: 0; /* Elimina margen por defecto si lo hay */
}

/*
 * Estilos para los elementos individuales de la lista de sugerencias.
 * Nota cómo usamos la nueva clase para ser específicos.
 */
.ui-autocomplete.am_customer_results_list .ui-menu-item a {
    padding: 8px 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.ui-autocomplete.am_customer_results_list .ui-menu-item a:hover,
.ui-autocomplete.am_customer_results_list .ui-menu-item a.ui-state-focus {
    background-color: #f0f0f0;
    color: #000;
    text-decoration: none;
}

/* Estilo para cuando no hay resultados (si tu librería lo maneja) */
.ui-autocomplete.am_customer_results_list .ui-state-disabled {
    font-style: italic;
    color: #999;
}

/*
 * Estilos para el input del autocompletar
 */
#customer-autocomplete {
    width: 100%; /* O el ancho que desees, por ejemplo, 250px */
    padding: 10px 15px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde del input */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    line-height: 1.5; /* Altura de línea */
    color: #333; /* Color del texto */
    background-color: #fff; /* Fondo del input */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); /* Sombra interna sutil */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transición suave para el foco */
}

#customer-autocomplete::placeholder {
    color: #999; /* Color del texto del placeholder */
    opacity: 1; /* Asegura que el placeholder sea visible en todos los navegadores */
}

#customer-autocomplete:focus {
    border-color: #66afe9; /* Borde al enfocar */
    outline: 0; /* Eliminar el contorno por defecto del navegador */
    box-shadow: 0 0 8px rgba(102,175,233,0.6); /* Sombra al enfocar */
}