/* intl-tel-input — integración Bootstrap 4
   Asegura que el componente de prefijo encaja dentro de .input-group */

/* Uso standalone (sin input-group): el wrapper ocupa todo el ancho disponible */
.phone-input-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.phone-input-wrapper .iti {
    width: 100%;
}

/* Dentro de input-group: el wrapper crece para ocupar el espacio disponible */
.input-group .phone-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group .phone-input-wrapper .iti {
    width: 100%;
}

/* Cuando NO hay input-group-append después (wrapper es último hijo):
   restaurar el borde derecho y el border-radius del input.
   !important necesario para sobrescribir la clase Bootstrap .border-right-0 */
.input-group .phone-input-wrapper:last-child .iti input.form-control {
    border-right: 1px solid #ced4da !important;
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

/* Cuando SÍ hay input-group-append después:
   quitar borde y radio derecho para conectar visualmente con el append */
.input-group .phone-input-wrapper:not(:last-child) .iti input.form-control {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Bandera + código separado: fondo acorde con el estilo del proyecto */
.iti--separate-dial-code .iti__selected-flag {
    background-color: #f8f9fa;
    border-right: 1px solid #ced4da;
    border-radius: 0.25rem 0 0 0.25rem;
}

/* Estado deshabilitado: bandera atenuada y sin interacción */
.iti--separate-dial-code .phone-input-iti:disabled + .iti__flag-container .iti__selected-flag {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* El input deshabilitado mantiene coherencia visual */
.iti .phone-input-iti:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Dropdown de países: z-index sobre modales y overlays del proyecto */
.iti__dropdown-content {
    z-index: 9999;
}