/* Estilos generales para el custom element */
        autocompleter-input {
            display: block;
            --margin-bottom: 15px;
            position: relative;
        }

        /* --- Estilos para Awesomplete (Lista) --- */
        .awesomplete {
            display: block;
            position: relative;
            /* No necesitamos width: 100% aquí, se ajustará dinámicamente */
            height: calc(3.5rem + 2px);
        }

        .awesomplete > input {
            position: relative;
            z-index: 2;
            height: calc(3.5rem + 2px);
        }

        /* Contenedor de la lista de sugerencias */
        .awesomplete > ul {
            position: absolute;
            /* CAMBIO CLAVE: Quitado width: 100%; se calculará en JS */
            /* width: auto; /* Opcional, pero se sobrescribirá en JS */
            /*min-width: 100%;/* Asegura que la lista sea al menos tan ancha como el input */
            max-height: 200px;
            overflow-y: auto;
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ddd;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background: white;
            z-index: 99999;
            box-sizing: border-box;
            display: content;
            min-width: 20ch;
        }

        /* Items de la lista */
        .awesomplete > ul > li {
            padding: 8px 10px;
            cursor: pointer;
            white-space: nowrap; /* IMP: Evita que el texto se rompa y asegura ancho correcto */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Hover y selección de item */
        .awesomplete > ul > li:hover,
        .awesomplete > ul > li[aria-selected="true"] {
            background: #f0f0f0;
            color: #333;
        }

        /* --- Estilos para la flecha de despliegue --- */
        .autocompleter-arrow {
            position: absolute;
            right: 10px;
            top: 50%;
            /*transform: translateY(-50%);*/
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #555;
            pointer-events: none;
            /*transition: transform 0.2s ease-in-out;*/
            z-index: 3;
        }

        .autocompleter-display-input.active-list + .autocompleter-arrow {
            transform: translateY(-50%) rotate(180deg);
        }

        /* --- Estilos para los títulos de grupo (optgroup) en la lista --- */
        .awesomplete > ul > li.awesomplete-group {
            font-weight: bold;
            background-color: #e9e9e9;
            color: #555;
            cursor: default;
            padding: 5px 10px;
            margin-top: 5px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }

        .awesomplete > ul > li.awesomplete-group:hover,
        .awesomplete > ul > li.awesomplete-group[aria-selected="true"] {
            background-color: #e9e9e9;
            color: #555;
        }

        /* Estilos para opciones dentro de un grupo (indentación) */
        .awesomplete > ul > li[data-group-option] {
            padding-left: 25px;
        }

        .visually-hidden{
          display:none !important;
        }
		
		/* ---- estilos que se llevan a la class ----*/
		
		.autocompleter-container {
                            position: relative;
                        }
		.autocompleter-display-input {
			width: 100%;
			padding: 10px;
			padding-right: 30px;
			margin-bottom: 0px;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
		}
		
		/* --- Estilos para Awesomplete (dentro del Shadow DOM) --- */
		.awesomplete {
			display: block;
		}
		
		.awesomplete > input {
			position: relative;
			z-index: 2;
		}
		
		.awesomplete > ul {
			position: absolute;
			/*min-width: 100%; /* Asegura que la lista sea al menos tan ancha como el input */
			/* El ancho real se calculará en JS */
			max-height: 200px;
			overflow-y: auto;
			list-style: none;
			padding: 0;
			margin: 0;
			border: 1px solid #ddd;
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
			background: white;
			z-index: 99999;
			box-sizing: border-box;
			display: content;
			min-width: 20ch;
		}
		
		.awesomplete > ul > li {
			padding: 8px 10px;
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.awesomplete > ul > li:hover,
		.awesomplete > ul > li[aria-selected="true"] {
			background: #f0f0f0;
			color: #333;
		}
		
		/* --- Estilos para la flecha de despliegue (dentro del Shadow DOM) --- */
		.autocompleter-arrow {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 5px solid #555;
			pointer-events: none;
			transition: transform 0.2s ease-in-out;
			z-index: 3;
		}
		
		.autocompleter-display-input.active-list + .autocompleter-arrow {
			transform: translateY(-50%) rotate(180deg);
		}
		
		/* --- Estilos para los títulos de grupo (optgroup) en la lista (dentro del Shadow DOM) --- */
		.awesomplete > ul > li.awesomplete-group {
			font-weight: bold;
			background-color: #e9e9e9;
			color: #555;
			cursor: default;
			padding: 5px 10px;
			margin-top: 5px;
			border-bottom: 1px solid #ccc;
			border-top: 1px solid #ccc;
			pointer-events: none; 
		}
		
		.awesomplete > ul > li.awesomplete-group:hover,
		.awesomplete > ul > li.awesomplete-group[aria-selected="true"] {
			background-color: #e9e9e9;
			color: #555;
		}
		
		/* Estilos para opciones dentro de un grupo (indentación) */
		.awesomplete > ul > li[data-group-option] {
			padding-left: 25px;
		}
		
		.visually-hidden{
		display:none !important;
		}
		
		autocompleter-input + label {
		  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
		  opacity: .65;
		}
		
		.autocompleter-display-input:disabled {
		  background-color: rgb(192, 192, 192); /* #eee; /* O usa variables --cui-disabled-bg */
		  color: #777;
		  cursor: not-allowed;
		  border-color: #ccc;
		}
		
		.autocompleter-display-input:disabled:focus {
		    /* Previene el "resplandor" de foco en un campo deshabilitado */
		    border-color: #ccc;
		    box-shadow: none;
		}

		.autocompleter-display-input:disabled + .autocompleter-arrow {
		    border-top-color: #999;
		    cursor: not-allowed;
            /* Esto previene que la flecha reciba clics */
		    pointer-events: none; 
		}
		
		autocompleter-input:disabled{
			background-color: var(--cui-secondary-bg);
			/*padding-inline-start: 0.75rem;
		    padding-top: 1.625rem;
		    padding-bottom: .625rem;*/	
		}