/* Estilos para el widget de Tipo de Cambio */
.exchange-widget {
    background: rgba(44, 48, 94, 0.3); /* Un poco más de opacidad para mejor contraste */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil para definirlo */
    border-radius: 30px; /* Forma de píldora, más moderna y compacta */
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el icono principal y los valores */
    font-family: sans-serif; /* Asegura una fuente limpia */
}

.exchange-widget .widget-icon {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.exchange-values-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre USD y EUR */
}

.currency-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: white;
}

.currency-label-icon {
    margin-right: 4px;
    font-weight: bold;
    font-size: 13px;
    opacity: 0.8;
}

.currency-value {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* Estilos para el modo edición */
.edit-trigger-btn {
    color: rgba(255,255,255,0.5);
    padding: 2px 5px;
    font-size: 11px;
    border: none;
    background: transparent;
    transition: color 0.3s;
}
.currency-item:hover .edit-trigger-btn {
    color: rgba(255,255,255,1); /* El botón resalta al pasar el mouse sobre la moneda */
}

.currency-input {
    width: 55px !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
    height: auto !important;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold;
    color: #333 !important;
}

.save-btn {
    padding: 2px 6px;
    font-size: 12px;
    margin-left: 4px;
}

/* Separador vertical sutil entre monedas */
.separator {
    height: 16px;
    width: 1px;
    background: rgba(255,255,255,0.2);
}

/* Estilo para las banderas */
.flag-icon {
    width: 20px;          /* Tamaño pequeño */
    height: 20px;
    border-radius: 50%;   /* Hacemos la bandera redonda */
    object-fit: cover;    /* Asegura que la imagen cubra el círculo sin deformarse */
    margin-right: 6px;    /* Espacio entre bandera y número */
    border: 1px solid rgba(255,255,255,0.2); /* Borde sutil para que resalte sobre el fondo oscuro */
    display: inline-block;
    vertical-align: middle;
}

/* Ajuste fino para el contenedor de la moneda */
.currency-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: white;
}